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

Question

我一天中的大部分时间都在努力解决这个本来很简单的问题。我正在构建一个音频可视化器，并希望将音频数据数组存储在更新每一帧的纹理中。根据 Three.js 文档和示例，通过将纹理标记为 needUpdate 来更新纹理应该非常简单。但它不起作用。它正确初始化，但随后不会更新。

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

};

我想应该是这样。我是不是在做一些特别愚蠢的事情？它使用的是工作正常的自定义着色器 Material 。这是非常基本的。

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