001-webaudio - visualizer

这是学习Three.js 官方案例系列

001-webaudio - visualizer

体验地址

片元 shader:

// tAudioData: 0~64数组,只在 tAudioData[0].a 有数值,该数值表示该通道上的音值大小。
uniform sampler2D tAudioData;
uniform float style;
varying vec2 vUv;

void main() {
   vec3 backgroundColor = vec3( 0.8, 0.8, 0.8 );
   vec3 color = vec3( 0.0, 0.65, 0.97 );

   float f = texture2D( tAudioData, vec2( vUv.x, 1.0 ) ).a;
   float i2 = step( vUv.y, f ) * step( f - 0.0125, vUv.y );
   float i1 = step(vUv.y, f);

   float i;
   if(style == 1.0) {
      i = i1;
   } else {
      i = i2;
   }
   vec3 tt = mix(backgroundColor, color, i );
   gl_FragColor = vec4(tt,1.0);
}

Visualizer.js

class Visualizer {
  ...
   async initObj() {
    // 音乐频谱信息
    let analyser = this.analyser
    analyser.getFrequencyData()

    this.uniforms = {
      style: { type: "f", value: 0.0 },
      tAudioData: {
        type: "t", value: new THREE.DataTexture(
          this.analyser.getFrequencyData(),
          this.analyser.getFrequencyData().length, 1, THREE.AlphaFormat)
      }
    };

    const v = await get({
      url: "./shader/vertex.glsl"
    });
    const f = await get({
      url: "./shader/fragment.glsl"
    });
    var material = new THREE.ShaderMaterial({
      uniforms: this.uniforms,
      vertexShader: v,
      fragmentShader: f
    });
    material.side = THREE.DoubleSide
    var geometry = new THREE.PlaneBufferGeometry(1, 1);
    var mesh = new THREE.Mesh(geometry, material);
    mesh.name = "plan"
    this.stage.scene.add(mesh);
  }

  changeStyle(styleId) {
    this.uniforms.style.value = styleId
  }
  ...
}

<全文结束>