Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

WebGPURenderer: Add copyTextureToTexture support #27888

Merged
merged 2 commits into from
Mar 10, 2024

Conversation

RenaudRohlinger
Copy link
Collaborator

Related issue: #27859

Description

This PR add copyTextureToTexture support on both WebGPU and WebGL backend.

Live example:
https://raw.githack.com/renaudrohlinger/three.js/utsubo/feat/copytexturetotexture/examples/webgpu_materials_texture_partialupdate.html
image

This contribution is funded by Utsubo

/cc @Spiri0

@RenaudRohlinger RenaudRohlinger added this to the r163 milestone Mar 9, 2024
@Spiri0
Copy link
Contributor

Spiri0 commented Mar 9, 2024

This is impressive, thanks Renaud. The function was already available in WebGL. However, not in the backend but in three.js and three.module.js itself. But I'm particularly interested in the WebGPURenderer and I will study your extension carefully to get a better understanding.

@RenaudRohlinger
Copy link
Collaborator Author

RenaudRohlinger commented Mar 9, 2024

@Spiri0 It was available in the WebGLRenderer but not in the WebGL Backend of the WebGPURenderer which is different. It is not possible to use a method of the WebGL Renderer from the WebGPU Renderer.

The WebGL Backend is a new backend fallback of the WebGPURenderer which allows you to seamlessly support your application even when WebGPU is not available (for example on Safari and Firefox).

@Spiri0
Copy link
Contributor

Spiri0 commented Mar 9, 2024

For webgpu, only the two additions in

jsm/renderers/common/Renderer.js
jsm/renderers/webgpu/webGPUBackend.js

are necessary, right?
I use r162 and simply copied your extensions to the locations. Unfortunately when I try with renderer.copyTextureToTexture(new THREE.Vector2(0, 0), srcTexture, dstTexture); copying one texture into the other always gets this error message:

WebGPUBackend.js:1258  Uncaught (in promise) TypeError: Failed to execute 'copyTextureToTexture' on 'GPUCommandEncoder': Failed to read the 'texture' property from 'GPUImageCopyTexture': Required member is undefined.
at WebGPUBackend.copyTextureToTexture (WebGPUBackend.js:1258:11)
at WebGPURenderer.copyTextureToTexture (Renderer.js:986:16)

My test class init:

init() {

	const dstTextureInitArray = new Uint8Array(32 * 32 * 4).fill(0);
	this.dstTexture = new THREE.DataTexture(dstTextureInitArray, 32, 32);
	this.dstTexture.format = THREE.RGBAFormat,
	this.dstTexture.type = THREE.UnsignedByteType,
	this.dstTexture.wrapS = THREE.ClampToEdgeWrapping,
	this.dstTexture.wrapT = THREE.ClampToEdgeWrapping,
	this.dstTexture.minFilter = THREE.LinearFilter,
	this.dstTexture.magFilter = THREE.LinearFilter 
	this.dstTexture.generateMipmaps = false;
	this.dstTexture.needsUpdate = true;
	
	const srcTextureInitArray = new Uint8Array(2 * 2 * 4).fill(255);
	this.srcTexture = new THREE.DataTexture(srcTextureInitArray, 2, 2);
	this.srcTexture.format = THREE.RGBAFormat,
	this.srcTexture.type = THREE.UnsignedByteType,
	this.srcTexture.wrapS = THREE.ClampToEdgeWrapping,
	this.srcTexture.wrapT = THREE.ClampToEdgeWrapping,
	this.srcTexture.minFilter = THREE.LinearFilter,
	this.srcTexture.magFilter = THREE.LinearFilter  
	this.srcTexture.generateMipmaps = false;
	this.srcTexture.needsUpdate = true;		

	this.renderer.copyTextureToTexture(new THREE.Vector2(0, 0), this.srcTexture, this.dstTexture);
}

I have a timeout before I call it to be sure that everything is initialized. I'm probably missing something there 🤔

@RenaudRohlinger
Copy link
Collaborator Author

RenaudRohlinger commented Mar 9, 2024

Since you are using 2 textures which are both never initialized in the texture management you probably need to also init the dstTexture on the GPU too via this._textures.updateTexture(dstTexture) in the Renderer @Spiri0.

Edit:
Yup that was the issue, just tested and it should be fixed with: 7012bb5

@Spiri0
Copy link
Contributor

Spiri0 commented Mar 9, 2024

Ah, that's exactly it. I understand. Since I created both textures as data textures, the dstTexture was not yet in the GPU due to the missing update. Now it's working

@sunag sunag merged commit 22a285a into mrdoob:dev Mar 10, 2024
11 checks passed
@sunag sunag changed the title WebGPURenderer: Add copyTexturetoTexture support WebGPURenderer: Add copyTextureToTexture support Mar 10, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants