Question

我一直在努力解决一个容易出问题的问题。我正在构建一个音频可视化器，并希望将音频数据阵列存储在一个更新每一帧的纹理中。根据three.js文档和示例，通过将其标记为needsUpdate来更新纹理应该非常简单..但它不起作用。它正确但不会更新。

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

};

应该是我想的。我做的事情特别愚蠢吗？它使用的是自定义着色器shaderMaterial。它非常基本。

<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 = generateRandom()使用类似data.set(generateRandom())的内容，以便数据对象保持相同的引用。类似的解决方案解决了stackoverflow.com/questions/41656520/

使用Javascript in Three.js

1 个答案: