Threejs DataTexture未更新 [英] Threejs DataTexture Not Updating

问题描述

更新:问题是每次都重新创建texData对象，因此丢失了对DataTexture的引用. WestLangley的解决方案是覆盖texData中的数据，而不是重新创建texData对象.

UPDATE: Issue was that texData object was recreated each time and thus reference for DataTexture was lost. Solution by WestLangley was to overwrite the data in texData instead of recreating texData object.

我有一个简单的threejs场景，在ShaderMaterial中有一个DataTexture.初始化期间传递给它的数据数组会根据鼠标事件进行更新.但是，DataTexture似乎没有更新.

I have a simple threejs scene with a DataTexture in a ShaderMaterial. The data array passed to it once during initialization is updated on mouse events. However the DataTexture does not seem to update.

我是否错误地分配了制服或纹理数据?还是错误地使用needsUpdate标志?每次删除并重新创建纹理，材质，网格和场景对象时，它的确起作用，但是，正如我从许多示例中看​​到的那样(我无法复制)，这确实不是必需的.

Did i assign uniforms or texture data wrongly? Or using the needsUpdate flags wrongly? It does work when deleting and recreating the texture, material, mesh and scene objects each time, but this shouldnt really be necessary as i have seen from many examples which i could however not reproduce.

请注意，数据本身可以很好地更新，而不是DataTexture.

Note that the data itself is updated nicely, just not the DataTexture.

// mouse event triggers request to server
// server then replies and this code here is called
// NOTE: this code **is** indeed called on every mouse update!

// this is the updated data from the msg received
// NOTE: texData **does** contain the correct updated data on each event
texData = new Float32Array(evt.data.slice(0, msgByteLength));

// init should happen only once
if (!drawContextInitialized) {

    // init data texture
    dataTexture = new THREE.DataTexture(texData, texWidth, texHeight, THREE.LuminanceFormat, THREE.FloatType);
    dataTexture.needsUpdate = true;

    // shader material
    material = new THREE.ShaderMaterial({
        vertexShader: document.querySelector('#vertexShader').textContent.trim(),
        fragmentShader: document.querySelector('#fragmentShader').textContent.trim(),
        uniforms: {
            dataTexture: { value: dataTexture }
        }
    });

    // mesh with quad geometry and material
    geometry = new THREE.PlaneGeometry(width, height, 1, 1);
    mesh = new THREE.Mesh(geometry, material);

    // scene
    scene = new THREE.Scene();
    scene.add(mesh);

    // camera + renderer setup
    // [...]

    drawContextInitialized = true;

}

// these lines seem to have no effect
dataTexture.needsUpdate = true;    
material.needsUpdate = true;
mesh.needsUpdate = true;
scene.needsUpdate = true;

renderer.render(scene, camera);

推荐答案

在更新DataTexture数据时，请勿实例化新数组.而是像这样更新数组元素:

When updating the DataTexture data, do not instantiate a new array. Instead, update the array elements like so:

texData.set( javascript_array );

此外，更新纹理数据时唯一需要设置的标志是:

Also, the only flag you need to set when you update the texture data is:

dataTexture.needsUpdate = true;

three.js r.83

three.js r.83

这篇关于Threejs DataTexture未更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！