I have successfully created a primitive sphere using THREE.SphereGeometry and applied a displacement shader to give it a bumpy effect. My goal now is to animate the scale of the bumps based on input volume from the microphone. Despite my efforts, I am struggling to pass the volume variable into the shader in order to affect the scale. I have verified that the volume variable is updating correctly as I monitor it from the microphone.
The key dynamic variable is:
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;";
"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 elevated by the noise will be lighter
"gl_FragColor = vec4( fNormal * noise, 1. );",
"}"
].join("\n")
};
}