WebGPURenderer: Auto-MRT

[sunag]

Related issue: #28749

Description

This PR starts the implementation of Auto-MRT, this will allow any RenderObject to be rendered as output (beauty), keeping the original code with extra outputs customized in the same draw.

Below shows how simple the process is to create automatic MRT, it is also possible to add more complex operations such as tslFn within the mrt() inputs.

renderTarget = new THREE.RenderTarget(
	window.innerWidth * window.devicePixelRatio,
	window.innerHeight * window.devicePixelRatio,
	{ count: 2, minFilter: THREE.NearestFilter, magFilter: THREE.NearestFilter }
);

renderTarget.textures[ 0 ].name = 'output';
renderTarget.textures[ 1 ].name = 'normal';
	
renderer.setMRT( mrt( {
	'output': output,
	'normal': directionToColor( normalWorld )
} ) );

Examples of approach

1. Approach using names

renderer.setMRT( mrt( {
	'output': output,
	'normal': directionToColor( normalWorld )
} ) );

2. Approach using indexes

renderer.setMRT( mrt( [
	output,
	directionToColor( normalWorld )
] ) );

[github-actions]

📦 Bundle size

Full ESM build, minified and gzipped.

Filesize dev	Filesize PR	Diff
683.5 kB (169.2 kB)	683.5 kB (169.2 kB)	+0 B

🌳 Bundle size after tree-shaking

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

Filesize dev	Filesize PR	Diff
460.7 kB (111.1 kB)	460.7 kB (111.1 kB)	+0 B

[sunag]

Added a MRT example

Live example

[Mugen87]

The new example is awesome!

[sunag]

Added mask example for material.mrtNode demonstration.