在 Three.js 中使用 Javascript 更新每帧的数据纹理

Question

我一天中的大部分时间都在为应该是一个简单的问题而苦苦挣扎。我正在构建一个音频可视化器，并希望将音频数据数组存储在更新每一帧的纹理中。根据three.js文档和示例，通过将纹理标记为需要更新来更新纹理应该非常简单。但它不起作用。它正确初始化，但不会更新。

//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();

};

我想应该是这样的。我做了什么特别愚蠢的事情吗？它使用了一个工作正常的自定义着色器材料。它非常基础。

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

任何建议将不胜感激

Answer 1

也许可以使用data.set(generateRandom()) 来代替data = generateRandom()，以便数据对象保持相同的引用。 类似的解决方案解决了stackoverflow.com/questions/41656520/