2016-12-09 2 views
0

J'ai créé une sphère primitive à l'aide de THREE.SphereGeometry. J'applique un shader de déplacement, pour lui donner un effet bosselé. J'essaie d'animer l'ampleur des bosses avec le volume du microphone. Je suis incapable de passer ma variable de volume dans le shader pour affecter l'échelle. J'enregistre la variable de volume et je vois qu'elle est mise à jour de manière appropriée de mon microphone.Comment passer une variable dynamique dans un JavaScript Shader

La variable dynamique est la suivante:

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") 

}; 
} 

Répondre

0

Vous avez défini

varying float volume; 

dans votre vertex shaders. Il devrait plutôt lire

uniform float volume;