Today has been a challenging day as I try to solve what should be a simple problem. I'm working on building an audio visualizer and my goal is to store the audio data array in a texture that updates every frame. Despite following three.js documentation and examples, updating the texture by flagging it as needsUpdate doesn't seem to work as expected. The initialization goes smoothly but it fails to update afterwards.
// Initialization
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
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();
};
I believed that would be all I needed. Is there something obvious that I am missing? The custom shader material seems to be working fine, though it's quite 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 advice or suggestions would be greatly appreciated.