mrdoob · sunag · Jul 10, 2024 · Jul 8, 2024 · Jul 8, 2024 · Jul 8, 2024
diff --git a/examples/files.json b/examples/files.json
@@ -357,6 +357,7 @@
 		"webgpu_mirror",
 		"webgpu_morphtargets",
 		"webgpu_morphtargets_face",
+		"webgpu_mrt",
 		"webgpu_multiple_rendertargets",
 		"webgpu_multiple_rendertargets_readback",
 		"webgpu_multisampled_renderbuffers",

diff --git a/examples/screenshots/webgpu_mrt.jpg b/examples/screenshots/webgpu_mrt.jpg
diff --git a/examples/screenshots/webgpu_multiple_rendertargets.jpg b/examples/screenshots/webgpu_multiple_rendertargets.jpg
diff --git a/examples/webgpu_mrt.html b/examples/webgpu_mrt.html
@@ -0,0 +1,146 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>three.js webgpu - mrt</title>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+		<link type="text/css" rel="stylesheet" href="main.css">
+	</head>
+	<body>
+
+		<div id="info">
+			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgpu - mrt<br />
+			Final / Beauty / Normal / Emissive / Diffuse
+		</div>
+
+		<script type="importmap">
+			{
+				"imports": {
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
+					"three/addons/": "./jsm/"
+				}
+			}
+		</script>
+
+		<script type="module">
+
+			import * as THREE from 'three';
+			import { output, transformedNormalWorld, pass, step, diffuseColor, emissive, viewportTopLeft, mix, mrt, tslFn } from 'three/tsl';
+
+			import { RGBELoader } from 'three/addons/loaders/RGBELoader.js';
+
+			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
+
+			let camera, scene, renderer;
+			let postProcessing;
+
+			init();
+
+			function init() {
+
+				const container = document.createElement( 'div' );
+				document.body.appendChild( container );
+
+				// scene
+
+				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 20 );
+				camera.position.set( - 1.8, 0.6, 2.7 );
+
+				scene = new THREE.Scene();
+
+				new RGBELoader()
+					.setPath( 'textures/equirectangular/' )
+					.load( 'royal_esplanade_1k.hdr', function ( texture ) {
+
+						texture.mapping = THREE.EquirectangularReflectionMapping;
+
+						scene.background = texture;
+						scene.environment = texture;
+
+						// model
+
+						const loader = new GLTFLoader().setPath( 'models/gltf/DamagedHelmet/glTF/' );
+						loader.load( 'DamagedHelmet.gltf', function ( gltf ) {
+
+							scene.add( gltf.scene );
+
+						} );
+
+					} );
+
+				// renderer
+
+				renderer = new THREE.WebGPURenderer( { antialias: true } );
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( render );
+				renderer.toneMapping = THREE.ACESFilmicToneMapping;
+				container.appendChild( renderer.domElement );
+
+				// post processing
+
+				const scenePass = pass( scene, camera );
+
+				postProcessing = new THREE.PostProcessing( renderer );
+				postProcessing.outputColorTransform = false;
+
+				postProcessing.setMRT( mrt( {
+					output: output,
+					normal: transformedNormalWorld.directionToColor(),
+					diffuse: diffuseColor,
+					emissive: emissive
+				} ) );
+
+				postProcessing.outputNode = tslFn( () => {
+
+					const output = scenePass.getTextureNode( 'output' );
+					const normal = scenePass.getTextureNode( 'normal' );
+					const diffuse = scenePass.getTextureNode( 'diffuse' );
+					const emissive = scenePass.getTextureNode( 'emissive' );
+
+					const viewportX = viewportTopLeft.x;
+
+					const out = mix( output.renderOutput(), output, step( 0.2, viewportX.x ) );
+					const nor = mix( out, normal, step( 0.4, viewportX.x ) );
+					const emi = mix( nor, emissive, step( 0.6, viewportX.x ) );
+					const dif = mix( emi, diffuse, step( 0.8, viewportX.x ) );
+
+					return dif;
+
+				} )();
+
+				// controls
+
+				const controls = new OrbitControls( camera, renderer.domElement );
+				controls.minDistance = 2;
+				controls.maxDistance = 10;
+				controls.target.set( 0, 0, - 0.2 );
+				controls.update();
+
+				window.addEventListener( 'resize', onWindowResize );
+
+			}
+
+			function onWindowResize() {
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
+			}
+
+			//
+
+			function render() {
+
+				postProcessing.render();
+
+			}
+
+		</script>
+
+	</body>
+</html>
diff --git a/examples/webgpu_multiple_rendertargets.html b/examples/webgpu_multiple_rendertargets.html
@@ -25,74 +25,12 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { NodeMaterial, mix, modelNormalMatrix, normalGeometry, normalize, outputStruct, step, texture, uniform, uv, varying, vec2, vec4 } from 'three/tsl';
+			import { mix, vec2, step, texture, uv, normalWorld, output, mrt } from 'three/tsl';
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
-			//import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
 			let camera, scene, renderer, torus;
-			let quadMesh, renderTarget;
-
-			/*
-
-			const parameters = {
-				samples: 4,
-				wireframe: false
-			};
-
-			const gui = new GUI();
-			gui.add( parameters, 'samples', 0, 4 ).step( 1 );
-			gui.add( parameters, 'wireframe' );
-
-			*/
-
-			class WriteGBufferMaterial extends NodeMaterial {
-
-				constructor( diffuseTexture ) {
-
-					super();
-
-					this.lights = false;
-					this.fog = false;
-					this.colorSpaced = false;
-
-					this.diffuseTexture = diffuseTexture;
-
-					const vUv = varying( uv() );
-
-					const transformedNormal = modelNormalMatrix.mul( normalGeometry );
-					const vNormal = varying( normalize( transformedNormal ) );
-
-					const repeat = uniform( vec2( 5, 0.5 ) );
-
-					const gColor = texture( this.diffuseTexture, vUv.mul( repeat ) );
-					const gNormal = vec4( normalize( vNormal ), 1.0 );
-
-					this.fragmentNode = outputStruct( gColor, gNormal );
-
-				}
-
-			}
-
-			class ReadGBufferMaterial extends NodeMaterial {
-
-				constructor( tDiffuse, tNormal ) {
-
-					super();
-
-					this.lights = false;
-					this.fog = false;
-
-					const vUv = varying( uv() );
-
-					const diffuse = texture( tDiffuse, vUv );
-					const normal = texture( tNormal, vUv );
-
-					this.fragmentNode = mix( diffuse, normal, step( 0.5, vUv.x ) );
-
-				}
-
-			}
+			let postProcessing, renderTarget;
 
 			init();
 
@@ -114,7 +52,7 @@
 
 				// Name our G-Buffer attachments for debugging
 
-				renderTarget.textures[ 0 ].name = 'diffuse';
+				renderTarget.textures[ 0 ].name = 'output';
 				renderTarget.textures[ 1 ].name = 'normal';
 
 				// Scene setup
@@ -125,23 +63,33 @@
 				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 50 );
 				camera.position.z = 4;
 
+				const sunLight = new THREE.DirectionalLight( 0xFFE499, 5 );
+				sunLight.position.set( .5, 3, .5 );
+				scene.add( sunLight );
+
 				const loader = new THREE.TextureLoader();
 
 				const diffuse = loader.load( 'textures/hardwood2_diffuse.jpg' );
 				diffuse.colorSpace = THREE.SRGBColorSpace;
 				diffuse.wrapS = THREE.RepeatWrapping;
 				diffuse.wrapT = THREE.RepeatWrapping;
 
-				torus = new THREE.Mesh(
-					new THREE.TorusKnotGeometry( 1, 0.3, 128, 32 ),
-					new WriteGBufferMaterial( diffuse )
-				);
+				const basicMaterial = new THREE.MeshStandardNodeMaterial( { colorNode: texture( diffuse, uv().mul( vec2( 10, 4 ) ) ) } );
 
+				torus = new THREE.Mesh( new THREE.TorusKnotGeometry( 1, 0.3, 128, 32 ), basicMaterial );
 				scene.add( torus );
 
-				// PostProcessing setup
+				// MRT
+
+				renderer.setMRT( mrt( {
+					'output': output,
+					'normal': normalWorld
+				} ) );
 
-				quadMesh = new THREE.QuadMesh( new ReadGBufferMaterial( renderTarget.textures[ 0 ], renderTarget.textures[ 1 ] ) );
+				// Post Processing
+
+				postProcessing = new THREE.PostProcessing( renderer );
+				postProcessing.outputNode = mix( texture( renderTarget.textures[ 0 ] ), texture( renderTarget.textures[ 1 ] ), step( 0.5, uv().x ) );
 
 				// Controls
 
@@ -165,24 +113,6 @@
 
 			function render( time ) {
 
-				/*
-
-				// Feature not yet working
-
-				renderTarget.samples = parameters.samples;
-
-				scene.traverse( function ( child ) {
-
-					if ( child.material !== undefined ) {
-
-						child.material.wireframe = parameters.wireframe;
-
-					}
-
-				} );
-
-				*/
-
 				torus.rotation.y = ( time / 1000 ) * .4;
 
 				// render scene into target
@@ -191,7 +121,7 @@
 
 				// render post FX
 				renderer.setRenderTarget( null );
-				quadMesh.render( renderer );
+				postProcessing.render();
 
 			}
 

diff --git a/src/nodes/Nodes.js b/src/nodes/Nodes.js
@@ -26,13 +26,14 @@ export { default as NodeUniform } from './core/NodeUniform.js';
 export { default as NodeVar } from './core/NodeVar.js';
 export { default as NodeVarying } from './core/NodeVarying.js';
 export { default as ParameterNode, parameter } from './core/ParameterNode.js';
-export { default as PropertyNode, property, varyingProperty, output, diffuseColor, roughness, metalness, clearcoat, clearcoatRoughness, sheen, sheenRoughness, iridescence, iridescenceIOR, iridescenceThickness, specularColor, shininess, dashSize, gapSize, pointWidth, alphaT, anisotropy, anisotropyB, anisotropyT } from './core/PropertyNode.js';
+export { default as PropertyNode, property, varyingProperty, output, diffuseColor, emissive, roughness, metalness, clearcoat, clearcoatRoughness, sheen, sheenRoughness, iridescence, iridescenceIOR, iridescenceThickness, specularColor, shininess, dashSize, gapSize, pointWidth, alphaT, anisotropy, anisotropyB, anisotropyT } from './core/PropertyNode.js';
 export { default as StackNode, stack } from './core/StackNode.js';
 export { default as TempNode } from './core/TempNode.js';
 export { default as UniformGroupNode, uniformGroup, objectGroup, renderGroup, frameGroup } from './core/UniformGroupNode.js';
 export { default as UniformNode, uniform } from './core/UniformNode.js';
 export { default as VaryingNode, varying } from './core/VaryingNode.js';
 export { default as OutputStructNode, outputStruct } from './core/OutputStructNode.js';
+export { default as MRTNode, mrt } from './core/MRTNode.js';
 
 import * as NodeUtils from './core/NodeUtils.js';
 export { NodeUtils };
@@ -135,7 +136,7 @@ export { default as FilmNode, film } from './display/FilmNode.js';
 export { default as Lut3DNode, lut3D } from './display/Lut3DNode.js';
 export { default as RenderOutputNode, renderOutput } from './display/RenderOutputNode.js';
 
-export { default as PassNode, pass, texturePass, depthPass } from './display/PassNode.js';
+export { default as PassNode, pass, passTexture, depthPass } from './display/PassNode.js';
 
 // code
 export { default as ExpressionNode, expression } from './code/ExpressionNode.js';

diff --git a/src/nodes/accessors/NormalNode.js b/src/nodes/accessors/NormalNode.js
@@ -8,7 +8,7 @@ import { vec3 } from '../shadernode/ShaderNode.js';
 export const normalGeometry = /*#__PURE__*/ attribute( 'normal', 'vec3', vec3( 0, 1, 0 ) );
 export const normalLocal = /*#__PURE__*/ normalGeometry.toVar( 'normalLocal' );
 export const normalView = /*#__PURE__*/ varying( modelNormalMatrix.mul( normalLocal ), 'v_normalView' ).normalize().toVar( 'normalView' );
-export const normalWorld = /*#__PURE__*/ varying( normalView.transformDirection( cameraViewMatrix ), 'v_normalWorld' ).normalize().toVar( 'transformedNormalWorld' );
+export const normalWorld = /*#__PURE__*/ varying( normalView.transformDirection( cameraViewMatrix ), 'v_normalWorld' ).normalize().toVar( 'normalWorld' );
 export const transformedNormalView = /*#__PURE__*/ property( 'vec3', 'transformedNormalView' );
 export const transformedNormalWorld = /*#__PURE__*/ transformedNormalView.transformDirection( cameraViewMatrix ).normalize().toVar( 'transformedNormalWorld' );
 export const transformedClearcoatNormalView = /*#__PURE__*/ property( 'vec3', 'transformedClearcoatNormalView' );