WebGPURenderer: Introduce CanvasTarget

[sunag]

Related issue: #31730

Description

Instead of using RenderTargets, the current implementation considers CanvasTarget the current canvas, always having one as default, and it cannot be null.

The main motivation, besides bringing these new WebGPU features, is to inspect the nodes individually through the new inspector.

The API follows @mrdoob ’s suggestion. #31730 (comment)

// -- setup --
const canvas = document.querySelector( '#mycanvas'  );
const canvasTarget = new THREE.CanvasTarget( canvas );

// -- loop --
renderer.setCanvasTarget( canvasTarget );
renderer.render( scene, camera );

[github-actions]

📦 Bundle size

Full ESM build, minified and gzipped.

	Before	After	Diff
WebGL	338.24 79.14	338.24 79.14	+0 B +0 B
WebGPU	584.78 161.56	586.56 161.9	+1.78 kB +344 B
WebGPU Nodes	583.39 161.32	585.17 161.66	+1.78 kB +344 B

🌳 Bundle size after tree-shaking

Minimal build including a renderer, camera, empty scene, and dependencies.

	Before	After	Diff
WebGL	469.7 113.74	469.7 113.74	+0 B +0 B
WebGPU	654.25 177.07	656.01 177.4	+1.76 kB +332 B
WebGPU Nodes	608.25 166.24	610.01 166.57	+1.76 kB +334 B

[sunag]

Live
https://rawcdn.githack.com/sunag/three.js/dev-canvastarget-live/examples/index.html?q=webgpu%20multiple%20canvas#webgpu_multiple_canvas

[mrdoob]

After seeing the shape and properties of CanvasTarget I feel like RenderOutput would be a better name.

// -- setup --
const canvas = document.querySelector( '#mycanvas'  );
const output = new THREE.RenderOutput( canvas );

// -- loop --
renderer.setRenderOutput( output );
renderer.render( scene, camera );

Regarding this:

The idea of ​​having .setOutputRenderTarget() is to define a final output, the one that will be displayed to the user. Currently, it would be XRRenderTarget or CanvasRenderTarget.

How would the XRRenderTarget look like with this CanvasTarget/RenderOutput API?

[sunag]

How would the XRRenderTarget look like with this CanvasTarget/RenderOutput API?

I think RenderOutput should be a base class of CanvasTarget and XRRenderTarget , then we can think of a strategy for this.

And if so, should CanvasTarget still be called that? Wouldn't it be more appropriate for it to be named based on the extended class names, something like CanvasOutput and XRRenderOutput?

[Mugen87]

After more testing on dev, I have noticed that this PR broke the new HDR demo from #31893. You just see a white screen but without the glowing after image effect.

I can confirm reverting this PR fixes webgpu_hdr.