GLSL 光带

下载代码

html

css

分享到微信朋友圈

html

<script id="js-vertex-shader" type="x-shader/x-vertex">
attribute vec3 position;

void main()	{
  gl_Position = vec4(position, 1.0);
}
</script>

<script id="js-fragment-shader" type="x-shader/x-fragment">
precision mediump float;
uniform vec2 resolution;
uniform float time;
uniform float xScale;
uniform float yScale;
uniform float distortion;

void main() {
  vec2 p = (gl_FragCoord.xy * 2.0 - resolution) / min(resolution.x, resolution.y);
  
  float d = length(p) * distortion;
  
  float rx = p.x * (1.0 + d);
  float gx = p.x;
  float bx = p.x * (1.0 - d);

float r = 0.05 / abs(p.y + sin((rx + time) * xScale) * yScale);
  float g = 0.05 / abs(p.y + sin((gx + time) * xScale) * yScale);
  float b = 0.05 / abs(p.y + sin((bx + time) * xScale) * yScale);
  
  gl_FragColor = vec4(r, g, b, 1.0);
}
</script>

css

JavaScript

class Stage {
  constructor() {
    this.renderParam = {
      clearColor: 0x666666,
      width: window.innerWidth,
      height: window.innerHeight
    };

this.cameraParam = {
      left: -1,
      right: 1,
      top: 1,
      bottom: 1,
      near: 0,
      far: -1
    };

this.scene = null;
    this.camera = null;
    this.renderer = null;
    this.geometry = null;
    this.material = null;
    this.mesh = null;

this.isInitialized = false;
  }

init() {
    this._setScene();
    this._setRender();
    this._setCamera();

this.isInitialized = true;
  }

_setScene() {
    this.scene = new THREE.Scene();
  }

_setRender() {
    this.renderer = new THREE.WebGLRenderer({
      canvas: document.getElementById("webgl-canvas")
    });
    this.renderer.setPixelRatio(window.devicePixelRatio);
    this.renderer.setClearColor(new THREE.Color(this.renderParam.clearColor));
    this.renderer.setSize(this.renderParam.width, this.renderParam.height);
  }

_setCamera() {
    if (!this.isInitialized) {
      this.camera = new THREE.OrthographicCamera(
        this.cameraParam.left,
        this.cameraParam.right,
        this.cameraParam.top,
        this.cameraParam.bottom,
        this.cameraParam.near,
        this.cameraParam.far
      );
    }
    
    const windowWidth = window.innerWidth;
    const windowHeight = window.innerHeight;

this.camera.aspect = windowWidth / windowHeight;

this.camera.updateProjectionMatrix();
    this.renderer.setSize(windowWidth, windowHeight);
  }

_render() {
    this.renderer.render(this.scene, this.camera);
  }

onResize() {
    this._setCamera();
  }

onRaf() {
    this._render();
  }
}

class Mesh {
  constructor(stage) {
    this.geometryParm = {};

this.materialParam = {
      useWireframe: false
    };

this.uniforms = {
      resolution: { type: "v2", value: [ window.innerWidth, window.innerHeight ] },
      time: { type: "f", value: 0.0 },
      xScale: { type: "f", value: 1.0 },
      yScale: { type: "f", value: 0.5 },
      distortion: { type: "f", value: 0.050 }
    };

this.stage = stage;

this.mesh = null;

this.windowWidth = 0;
    this.windowHeight = 0;

this.windowWidthHalf = 0;
    this.windowHeightHalf = 0;
    
    this.xScale = 1.0;
    this.yScale = 0.5;
    this.distortion = 0.050;
  }

init() {
    this._setMesh();
    this._setGui();
  }

_setMesh() {
    const position = [
      -1.0, -1.0, 0.0,
       1.0, -1.0, 0.0,
      -1.0,  1.0, 0.0,
       1.0, -1.0, 0.0,
      -1.0,  1.0, 0.0,
       1.0,  1.0, 0.0
    ];

const positions = new THREE.BufferAttribute(new Float32Array(position), 3);

const geometry = new THREE.BufferGeometry();
    geometry.setAttribute("position", positions);

const material = new THREE.RawShaderMaterial({
      vertexShader: document.getElementById("js-vertex-shader").textContent,
      fragmentShader: document.getElementById("js-fragment-shader").textContent,
      uniforms: this.uniforms,
      side: THREE.DoubleSide
    });

this.mesh = new THREE.Mesh(geometry, material);

this.stage.scene.add(this.mesh);
  }
  
  _render() {
    this.uniforms.time.value += 0.01;
  }

_setGui() {
    const parameter = {
      xScale: this.xScale,
      yScale: this.yScale,
      distortion: this.distortion
    }
    const gui = new dat.GUI();
    gui.add(parameter, "xScale", 0.00, 5.00, 0.01).onChange((value) => {
      this.mesh.material.uniforms.xScale.value = value;
    });
    gui.add(parameter, "yScale", 0.00, 1.00, 0.01).onChange((value) => {
      this.mesh.material.uniforms.yScale.value = value;
    });
    gui.add(parameter, "distortion", 0.001, 0.100, 0.001).onChange((value) => {
      this.mesh.material.uniforms.distortion.value = value;
    });
  }

onRaf() {
    this._render();
  }
}

(() => {
  const stage = new Stage();

stage.init();

const mesh = new Mesh(stage);

mesh.init();

window.addEventListener("resize", () => {
    stage.onResize();
  });

const _raf = () => {
    window.requestAnimationFrame(() => {
      stage.onRaf();
      mesh.onRaf();

_raf();
    });
  };

_raf();
})();

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg