WebGPURenderer: Backdrop Node - Part 1/3 (#25903)

* WebGPURenderer: Fix re-configure context * WebGPURenderer: Improve state in favor of access WebGPU encoders * NodeMaterial: Reduce duplicate initialization of properties * WebGPUTextures: Support RenderTargetTexture mipmaps if necessary. * WebGPUBackground: Move to renderState * WebGPUNodes: .updateBefore() fixes * WebGPURenderer: Added .copyFramebufferToRenderTarget() * NodeMaterial: Added backdropNode * Added webgpu_backdrop example * update title * cleanup * rotate just on idle * WebGPURenderList: Update include
mrdoob · Apr 22, 2023 · 2d1621f · 2d1621f
1 parent 0588487
commit 2d1621f
Show file tree

Hide file tree

Showing 21 changed files with 464 additions and 165 deletions.
diff --git a/examples/files.json b/examples/files.json
@@ -327,6 +327,7 @@
 	],
 	"webgpu": [
 		"webgpu_audio_processing",
+		"webgpu_backdrop",
 		"webgpu_compute",
 		"webgpu_cubemap_adjustments",
 		"webgpu_cubemap_mix",

diff --git a/examples/jsm/nodes/Nodes.js b/examples/jsm/nodes/Nodes.js
@@ -93,6 +93,8 @@ export { default as NormalMapNode, normalMap, TBNViewMatrix } from './display/No
 export { default as PosterizeNode, posterize } from './display/PosterizeNode.js';
 export { default as ToneMappingNode, toneMapping } from './display/ToneMappingNode.js';
 export { default as ViewportNode, viewportCoordinate, viewportResolution, viewportTopLeft, viewportBottomLeft, viewportTopRight, viewportBottomRight } from './display/ViewportNode.js';
+export { default as ViewportTextureNode, viewportTexture } from './display/ViewportTextureNode.js';
+export { default as ViewportSharedTextureNode, viewportSharedTexture } from './display/ViewportSharedTextureNode.js';
 
 // code
 export { default as ExpressionNode, expression } from './code/ExpressionNode.js';

diff --git a/examples/jsm/nodes/core/NodeBuilder.js b/examples/jsm/nodes/core/NodeBuilder.js
@@ -39,6 +39,7 @@ class NodeBuilder {
 
 		this.nodes = [];
 		this.updateNodes = [];
+		this.updateBeforeNodes = [];
 		this.hashNodes = {};
 
 		this.lightsNode = null;
@@ -89,13 +90,20 @@ class NodeBuilder {
 		if ( this.nodes.indexOf( node ) === - 1 ) {
 
 			const updateType = node.getUpdateType();
+			const updateBeforeType = node.getUpdateBeforeType();
 
 			if ( updateType !== NodeUpdateType.NONE ) {
 
 				this.updateNodes.push( node );
 
 			}
 
+			if ( updateBeforeType !== NodeUpdateType.NONE ) {
+
+				this.updateBeforeNodes.push( node );
+
+			}
+
 			this.nodes.push( node );
 
 			this.setHashNode( node, node.getHash( this ) );

diff --git a/examples/jsm/nodes/display/ViewportNode.js b/examples/jsm/nodes/display/ViewportNode.js
@@ -43,7 +43,7 @@ class ViewportNode extends Node {
 
 	update( { renderer } ) {
 
-		renderer.getSize( resolution );
+		renderer.getDrawingBufferSize( resolution );
 
 	}
 

diff --git a/examples/jsm/nodes/display/ViewportSharedTextureNode.js b/examples/jsm/nodes/display/ViewportSharedTextureNode.js
@@ -0,0 +1,30 @@
+import ViewportTextureNode from './ViewportTextureNode.js';
+import { addNodeClass } from '../core/Node.js';
+import { addNodeElement, nodeProxy } from '../shadernode/ShaderNode.js';
+import { viewportTopLeft } from './ViewportNode.js';
+
+let rtt = null;
+
+class ViewportSharedTextureNode extends ViewportTextureNode {
+
+	constructor( uv = viewportTopLeft ) {
+
+		super( uv );
+
+	}
+
+	constructRTT( builder ) {
+
+		return rtt || ( rtt = builder.getRenderTarget() );
+
+	}
+
+}
+
+export default ViewportSharedTextureNode;
+
+export const viewportSharedTexture = nodeProxy( ViewportSharedTextureNode );
+
+addNodeElement( 'viewportSharedTexture', viewportSharedTexture );
+
+addNodeClass( ViewportSharedTextureNode );
diff --git a/examples/jsm/nodes/display/ViewportTextureNode.js b/examples/jsm/nodes/display/ViewportTextureNode.js
@@ -0,0 +1,61 @@
+import TextureNode from '../accessors/TextureNode.js';
+import { NodeUpdateType } from '../core/constants.js';
+import { addNodeClass } from '../core/Node.js';
+import { addNodeElement, nodeProxy } from '../shadernode/ShaderNode.js';
+import { viewportTopLeft } from './ViewportNode.js';
+import { Vector2 } from 'three';
+
+let size = new Vector2();
+
+class ViewportTextureNode extends TextureNode {
+
+	constructor( uv = viewportTopLeft, level = null ) {
+
+		super( null, uv, level );
+
+		this.rtt = null;
+
+		this.isOutputTextureNode = true;
+
+		this.updateBeforeType = NodeUpdateType.FRAME;
+
+	}
+
+	constructRTT( builder ) {
+
+		return builder.getRenderTarget();
+
+	}
+
+	construct( builder ) {
+
+		if ( this.rtt === null ) this.rtt = this.constructRTT( builder );
+
+		this.value = this.rtt.texture;
+
+		return super.construct( builder );
+
+	}
+
+	updateBefore( frame ) {
+
+		const rtt = this.rtt;
+
+		const renderer = frame.renderer;
+		renderer.getDrawingBufferSize( size );
+
+		rtt.setSize( size.width, size.height );
+
+		renderer.copyFramebufferToRenderTarget( rtt );
+
+	}
+
+}
+
+export default ViewportTextureNode;
+
+export const viewportTexture = nodeProxy( ViewportTextureNode );
+
+addNodeElement( 'viewportTexture', viewportTexture );
+
+addNodeClass( ViewportTextureNode );
diff --git a/examples/jsm/nodes/lighting/LightingContextNode.js b/examples/jsm/nodes/lighting/LightingContextNode.js
@@ -1,16 +1,19 @@
 import ContextNode from '../core/ContextNode.js';
 import { temp } from '../core/VarNode.js';
 import { add } from '../math/OperatorNode.js';
+import { mix } from '../math/MathNode.js';
 import { addNodeClass } from '../core/Node.js';
 import { addNodeElement, nodeProxy, float, vec3 } from '../shadernode/ShaderNode.js';
 
 class LightingContextNode extends ContextNode {
 
-	constructor( node, lightingModelNode = null ) {
+	constructor( node, lightingModelNode = null, backdropNode = null, backdropAlphaNode = null ) {
 
 		super( node );
 
 		this.lightingModelNode = lightingModelNode;
+		this.backdropNode = backdropNode;
+		this.backdropAlphaNode = backdropAlphaNode;
 
 	}
 
@@ -22,16 +25,26 @@ class LightingContextNode extends ContextNode {
 
 	construct( builder ) {
 
-		const { lightingModelNode } = this;
+		const { lightingModelNode, backdropNode, backdropAlphaNode } = this;
 
 		const context = this.context = {}; // reset context
 		const properties = builder.getNodeProperties( this );
 
 		const directDiffuse = temp( vec3() ),
 			directSpecular = temp( vec3() ),
 			indirectDiffuse = temp( vec3() ),
-			indirectSpecular = temp( vec3() ),
-			total = add( directDiffuse, directSpecular, indirectDiffuse, indirectSpecular );
+			indirectSpecular = temp( vec3() );
+
+		let totalDiffuse = add( directDiffuse, indirectDiffuse );
+
+		if ( backdropNode !== null ) {
+
+			totalDiffuse = vec3( backdropAlphaNode !== null ? mix( totalDiffuse, backdropNode, backdropAlphaNode ) : backdropNode );
+
+		}
+
+		const totalSpecular = add( directSpecular, indirectSpecular );
+		const total = add( totalDiffuse, totalSpecular );
 
 		const reflectedLight = {
 			directDiffuse,

diff --git a/examples/jsm/nodes/materials/LineBasicNodeMaterial.js b/examples/jsm/nodes/materials/LineBasicNodeMaterial.js
@@ -15,15 +15,6 @@ class LineBasicNodeMaterial extends NodeMaterial {
 		this.lights = false;
 		this.normals = false;
 
-		this.colorNode = null;
-		this.opacityNode = null;
-
-		this.alphaTestNode = null;
-
-		this.lightNode = null;
-
-		this.positionNode = null;
-
 		this.setDefaultValues( defaultValues );
 
 		this.setValues( parameters );

diff --git a/examples/jsm/nodes/materials/MeshBasicNodeMaterial.js b/examples/jsm/nodes/materials/MeshBasicNodeMaterial.js
@@ -14,15 +14,6 @@ class MeshBasicNodeMaterial extends NodeMaterial {
 
 		this.lights = false;
 
-		this.colorNode = null;
-		this.opacityNode = null;
-
-		this.alphaTestNode = null;
-
-		this.lightNode = null;
-
-		this.positionNode = null;
-
 		this.setDefaultValues( defaultValues );
 
 		this.setValues( parameters );

diff --git a/examples/jsm/nodes/materials/MeshNormalNodeMaterial.js b/examples/jsm/nodes/materials/MeshNormalNodeMaterial.js
@@ -17,10 +17,6 @@ class MeshNormalNodeMaterial extends NodeMaterial {
 
 		this.isMeshNormalNodeMaterial = true;
 
-		this.opacityNode = null;
-
-		this.positionNode = null;
-
 		this.setDefaultValues( defaultValues );
 
 		this.setValues( parameters );

diff --git a/examples/jsm/nodes/materials/MeshPhongNodeMaterial.js b/examples/jsm/nodes/materials/MeshPhongNodeMaterial.js
@@ -18,18 +18,9 @@ class MeshPhongNodeMaterial extends NodeMaterial {
 
 		this.lights = true;
 
-		this.colorNode = null;
-		this.opacityNode = null;
-
 		this.shininessNode = null;
 		this.specularNode = null;
 
-		this.alphaTestNode = null;
-
-		this.lightNode = null;
-
-		this.positionNode = null;
-
 		this.setDefaultValues( defaultValues );
 
 		this.setValues( parameters );

diff --git a/examples/jsm/nodes/materials/MeshStandardNodeMaterial.js b/examples/jsm/nodes/materials/MeshStandardNodeMaterial.js
@@ -18,24 +18,11 @@ class MeshStandardNodeMaterial extends NodeMaterial {
 
 		this.isMeshStandardNodeMaterial = true;
 
-		this.colorNode = null;
-		this.opacityNode = null;
-
-		this.alphaTestNode = null;
-
-		this.normalNode = null;
-
 		this.emissiveNode = null;
 
 		this.metalnessNode = null;
 		this.roughnessNode = null;
 
-		this.envNode = null;
-
-		this.lightsNode = null;
-
-		this.positionNode = null;
-
 		this.setDefaultValues( defaultValues );
 
 		this.setValues( parameters );

diff --git a/examples/jsm/nodes/materials/NodeMaterial.js b/examples/jsm/nodes/materials/NodeMaterial.js
@@ -11,9 +11,10 @@ import { positionLocal } from '../accessors/PositionNode.js';
 import { skinning } from '../accessors/SkinningNode.js';
 import { texture } from '../accessors/TextureNode.js';
 import { lightsWithoutWrap } from '../lighting/LightsNode.js';
+import { mix } from '../math/MathNode.js';
+import { float, vec3, vec4 } from '../shadernode/ShaderNode.js';
 import AONode from '../lighting/AONode.js';
 import EnvironmentNode from '../lighting/EnvironmentNode.js';
-import { float, vec3, vec4 } from '../shadernode/ShaderNode.js';
 
 const NodeMaterials = new Map();
 
@@ -31,6 +32,16 @@ class NodeMaterial extends ShaderMaterial {
 		this.normals = true;
 
 		this.lightsNode = null;
+		this.envNode = null;
+
+		this.colorNode = null;
+		this.normalNode = null;
+		this.opacityNode = null;
+		this.backdropNode = null;
+		this.backdropAlphaNode = null;
+		this.alphaTestNode = null;
+
+		this.positionNode = null;
 
 	}
 
@@ -193,6 +204,7 @@ class NodeMaterial extends ShaderMaterial {
 	constructLighting( builder ) {
 
 		const { material } = builder;
+		const { backdropNode, backdropAlphaNode, emissiveNode } = this;
 
 		// OUTGOING LIGHT
 
@@ -205,15 +217,19 @@ class NodeMaterial extends ShaderMaterial {
 
 		if ( lightsNode && lightsNode.hasLight !== false ) {
 
-			outgoingLightNode = lightsNode.lightingContext( lightingModelNode );
+			outgoingLightNode = lightsNode.lightingContext( lightingModelNode, backdropNode, backdropAlphaNode );
+
+		} else if ( backdropNode !== null ) {
+
+			outgoingLightNode = vec3( backdropAlphaNode !== null ? mix( outgoingLightNode, backdropNode, backdropAlphaNode ) : backdropNode );
 
 		}
 
 		// EMISSIVE
 
-		if ( ( this.emissiveNode && this.emissiveNode.isNode === true ) || ( material.emissive && material.emissive.isColor === true ) ) {
+		if ( ( emissiveNode && emissiveNode.isNode === true ) || ( material.emissive && material.emissive.isColor === true ) ) {
 
-			outgoingLightNode = outgoingLightNode.add( this.emissiveNode ? vec3( this.emissiveNode ) : materialEmissive );
+			outgoingLightNode = outgoingLightNode.add( emissiveNode ? vec3( emissiveNode ) : materialEmissive );
 
 		}