WebGPURenderer: Auto-MRT

examples/webgpu_multiple_rendertargets.html

@@ -15,8 +15,8 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.webgpu.js",
-					"three/tsl": "../build/three.webgpu.js",
+					"three": "../src/Three.WebGPU.js",
+					"three/tsl": "../src/Three.WebGPU.js",
 					"three/addons/": "./jsm/"
 				}
 			}
@@ -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, step, texture, uv, normalWorld, output, vec4, 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
@@ -132,16 +70,22 @@
 				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.MeshBasicMaterial( { map: diffuse } );
 
+				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 +109,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 +117,7 @@
 
 				// render post FX
 				renderer.setRenderTarget( null );
-				quadMesh.render( renderer );
+				postProcessing.render();
 
 			}
 

src/nodes/Nodes.js

@@ -33,6 +33,7 @@ export { default as UniformGroupNode, uniformGroup, objectGroup, renderGroup, fr
 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 };

src/nodes/core/MRTNode.js

@@ -0,0 +1,76 @@
+import { addNodeClass } from './Node.js';
+import OutputStructNode from './OutputStructNode.js';
+import { nodeProxy, vec4 } from '../shadernode/ShaderNode.js';
+
+function getTextureIndex( textures, name ) {
+
+	for ( let i = 0; i < textures.length; i ++ ) {
+
+		if ( textures[ i ].name === name ) {
+
+			return i;
+
+		}
+
+	}
+
+	return - 1;
+
+}
+
+class MRTNode extends OutputStructNode {
+
+	constructor( outputNodes ) {
+
+		super();
+
+		this.outputNodes = outputNodes;
+
+		this.isMRTNode = true;
+
+	}
+
+	setup( builder ) {
+
+		const outputNodes = this.outputNodes;
+		const mrt = builder.renderer.getRenderTarget();
+
+		const members = [];
+
+		if ( Array.isArray( outputNodes ) ) {
+
+			for ( let i = 0; i < outputNodes.length; i ++ ) {
+
+				members.push( vec4( outputNodes[ i ] ) );
+
+			}
+
+		} else {
+
+			const textures = mrt.textures;
+
+			for ( const name in outputNodes ) {
+
+				const index = getTextureIndex( textures, name );
+
+				members[ index ] = vec4( outputNodes[ name ] );
+
+			}
+
+		}
+
+		this.members = members;
+
+		console.log( mrt );
+
+		return super.setup( builder );
+
+	}
+
+}
+
+export default MRTNode;
+
+export const mrt = nodeProxy( MRTNode );
+
+addNodeClass( 'MRTNode', MRTNode );

src/nodes/materials/NodeMaterial.js

@@ -62,6 +62,7 @@ class NodeMaterial extends Material {
 		this.shadowPositionNode = null;
 
 		this.outputNode = null;
+		this.mrtNode = null;
 
 		this.fragmentNode = null;
 		this.vertexNode = null;
@@ -125,6 +126,16 @@ class NodeMaterial extends Material {
 
 			if ( this.outputNode !== null ) resultNode = this.outputNode;
 
+			// MRT
+
+			const mrt = this.mrtNode || builder.renderer.getMRT();
+
+			if ( mrt !== null ) {
+
+				resultNode = mrt;
+
+			}
+
 		} else {
 
 			let fragmentNode = this.fragmentNode;
@@ -578,6 +589,7 @@ class NodeMaterial extends Material {
 		this.shadowPositionNode = source.shadowPositionNode;
 
 		this.outputNode = source.outputNode;
+		this.mrtNode = source.mrtNode;
 
 		this.fragmentNode = source.fragmentNode;
 		this.vertexNode = source.vertexNode;

src/renderers/common/Renderer.js

@@ -120,6 +120,8 @@ class Renderer {
 		this._activeCubeFace = 0;
 		this._activeMipmapLevel = 0;
 
+		this._mrt = null;
+
 		this._renderObjectFunction = null;
 		this._currentRenderObjectFunction = null;
 		this._currentRenderBundle = null;
@@ -344,6 +346,20 @@ class Renderer {
 
 	}
 
+	setMRT( mrt ) {
+
+		this._mrt = mrt;
+
+		return this;
+
+	}
+
+	getMRT() {
+
+		return this._mrt;
+
+	}
+
 	_renderBundle( bundle, sceneRef, lightsNode ) {
 
 		const { object, camera, renderList } = bundle;