Allow for updating specific regions of a canvas texture instead of the entire texture

[Giwayume]

Description

If I add a CanvasTexture to an object in a scene, then set needsUpdate to true every frame, the render can crawl to a halt if the canvas texture is sufficiently large (say 6000 x 6000).

I am trying to create a drawing brush and already have the necessary logic implemented for it to only update small square chunks of the canvas that the brush actually touched.

Solution

Provide a way to blit to a small portion of an existing canvas texture, so that it is much more performant than updating the entire texture.

Alternatives

For my specific use case, I can limit the CanvasTexture resolution to what texels are practically visible on-screen to create a "drawing preview" while the user is drawing. But when they lift up the brush, I'll still need to be able to update a full resolution version of the image which can take a long time. It's not ideal, especially when there are multiple brush strokes in quick succession.

Additional context

No response

[toddka]

See #26183 for texture performance

[Mugen87]

Is that what you are looking for: https://threejs.org/examples/webgl_materials_texture_partialupdate

[Giwayume]

Is that what you are looking for: https://threejs.org/examples/webgl_materials_texture_partialupdate

Looks like it, I'll try and see if that resolves my issue

[Giwayume]

For some reason I am having the hardest time getting copyTextureToTexture or DataTexture working.

I have verified that the destination texture, which I have loaded as an object URL pointing to a PNG blob, is drawing on the mesh. I am passing the Uint8ClampedArray fetched from a getImageData().data call on a canvas. I have verified that the extracted ImageData object is drawing correctly to a 2d canvas.

Is there some weird scenario I'm missing that can cause copyTextureToTexture to fail?

myMesh.onBeforeRender = (renderer) => {
    const dataTexture = new DataTexture(chunk.data, chunk.width, chunk.height, RGBAFormat, UnsignedByteType);
    renderer.copyTextureToTexture(position, dataTexture, destinationTexture);
}

[Mugen87]

It does not look right to create a texture in the onBeforeRender() callback.

You probably want to ask for help at the forum first (https://discourse.threejs.org/). If it turns out to be a problem with the engine, we can reopen the issue.