Wie man eine dynamische Variable in einen JavaScript Shader übergibt

Question

Ich habe eine primitive Kugel mit THREE.SphereGeometry erstellt. Ich wende einen Verschiebungs-Shader an, um einen holprigen Effekt zu erzielen. Ich versuche, das Ausmaß der Unebenheiten mit der Lautstärke vom Mikrofon zu animieren. Ich kann meine Volumenvariable nicht an den Shader übergeben, um die Skalierung zu beeinflussen. Ich logge die Lautstärke-Variable und ich sehe, dass es von meinem Mikrofon entsprechend aktualisiert wird.

die dynamische Variable ist:

var volume = meter.volume * 1000,0;

function drawLoop(time) { 

rafID = window.requestAnimationFrame(drawLoop); 

var volume = meter.volume * 1000.0; 

//var volume = THREE.UniformsUtils.clone(meter.volume); 

javascript: console.log(typeof(volume)); 


THREE.DisplacementShader = { 

    uniforms: { 

     texture1: { 
      type: "t", 
      value: null 
     }, 
     scale: { 
      type: "f", 
      value: 100 + volume 
     }, 
     volume: { 
      type: "f", 
      value: meter.volume 
     }, 
    }, 

    vertexShader: [ 

     "varying vec2 vUv;", 
     "varying float noise;", 
     "varying vec3 fNormal;", 
     "uniform sampler2D texture1;", 
     "uniform float scale;", 
     "uniform float time;", 
     "varying float volume;", 


     "void main() {", 

     "vUv = uv;", 
     "fNormal = normal;", 

     "vec4 noiseTex = texture2D(texture1, vUv);", 

     "noise = noiseTex.r + time;", 
     //adding the normal scales it outward 
     //(normal scale equals sphere diameter) 
     "vec3 newPosition = position + normal * noise * scale * (volume*100.0);", 

     "gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);", 

     "}" 

    ].join("\n"), 

    fragmentShader: [ 

     "varying vec2 vUv;", 
     "varying float noise;", 
     "varying vec3 fNormal;", 

     "void main(void) {", 

     // compose the colour using the normals then 
     // whatever is heightened by the noise is lighter 
     "gl_FragColor = vec4(fNormal * noise, 1.);", 

     "}" 

    ].join("\n") 

}; 
} 

Answer 1

Sie definiert

varying float volume; 

in Ihrem Vertex-Shader. Es sollte stattdessen

uniform float volume; 

lesen