I've been struggling most of the day with what should be an easy problem. I am building an audio visualiser and want to stores the audio data array in a texture which updates every frame. According to three.js documentation and examples it should be really simple to update the texture by flagging it as needsUpdate.. but its not working. It inits correctly but then wont update.
//from the init
var simState = new THREE.PlaneBufferGeometry( 300, 300, 45, 45);
noiseSize =256
data = generateRandom(noiseSize);
fftTex = new THREE.DataTexture( data, noiseSize, noiseSize, THREE.RGBAFormat);
fftTex.needsUpdate = true;
simUniforms= {
fftArray : {type: "t", value: fftTex},
};
var simShaderMaterial = new THREE.ShaderMaterial( {
uniforms: simUniforms,
vertexShader: document.getElementById( 'basicVertexShader' ).textContent,
fragmentShader: document.getElementById( 'simFragmentShader' ).textContent,
transparent: true,
});
testPlane = new THREE.Mesh( simState, simShaderMaterial);
scene.add( testPlane );
animate();
//render
function render() {
data = generateRandom(256);//generate random noise of the correct size
fftTex.needsUpdate = true;
fftTex.data = data;
renderer.render( scene, camera );
};
function animate() {
requestAnimationFrame( animate );
render();
};
That should be it I thought. Am I doing something particularly stupid? It's using a custom shaderMaterial which is working fine. Its very basic.
<script type="x-shader/x-fragment" id="fragmentShader">
#ifdef GL_ES
precision highp float;
#endif
uniform vec3 color;
varying float vAlpha;
varying vec3 vColor;
varying vec2 vUv;
void main() {
gl_FragColor = vec4( vUv.x,vUv.y,1.0, 1.0);
}
</script>
Any suggestions would be much appreciated
