three.js 中的部分纹理更新

Question

我将一个大纹理作为three.js 中的贴图上传到我的片段着色器。

这个纹理是一个 2D 画布，我在上面随机绘制形状。

在绘制时，我只想更新已更改的纹理部分。更新整个纹理（最高 3000x3000 像素）太慢了。

但是，我无法执行部分更新。 texSubImage2D 在我的场景中没有任何效果。

控制台中没有错误 - 我预计我错过了一个步骤，但还无法弄清楚。

//
// create drawing canvas 2D and related textures
//

this._canvas = document.createElement('canvas');
this._canvas.width = maxSliceDimensionsX;
this._canvas.height = maxSliceDimensionsY;

this._canvasContext = this._canvas.getContext('2d')!;
this._canvasContext.fillStyle = 'rgba(0, 0, 0, 0)';
this._canvasContext.fillRect(0, 0, window.innerWidth, window.innerHeight);

this._texture = new Texture(this._canvas);
this._texture.magFilter = NearestFilter;
this._texture.minFilter = NearestFilter;

// const data = new Uint8Array(maxSliceDimensionsX * maxSliceDimensionsY * 4);
// this._texture2 = new THREE.DataTexture(data, maxSliceDimensionsX, maxSliceDimensionsY, THREE.RGBAFormat);

this._brushMaterial = new MeshBasicMaterial({
  map: this._texture,
  side: DoubleSide,
  transparent: true,
});
...


// in the render loop
renderLoop() {
   ...
   // grab random values as a test
   const imageData = this._canvasContext.getImageData(100, 100, 200, 200);
   const uint8Array = new Uint8Array(imageData.data.buffer);

   // activate texture?
   renderer.setTexture2D(this._texture, 0 );
   // update subtexture
   const context = renderer.getContext();
   context.texSubImage2D( context.TEXTURE_2D, 0, 0, 0, 200, 200, context.RGBA, context.UNSIGNED_BYTE, uint8Array);

   // updating the whole texture works as expected but is slow
   // this._texture.needsUpdate = true;

    // Render new scene
    renderer.render(scene, this._camera);

}

谢谢， 尼古拉斯

Answer 1

在创建纹理后，我们必须立即通知three 需要将纹理上传到 GPU。

我们只需要在创建时设置它 1 次，而不是在渲染循环中。

this._texture = new Texture(this._canvas);
this._texture.magFilter = NearestFilter;
this._texture.minFilter = NearestFilter;

// MUST BE ADDED
this._texture.needsUpdate = true;