WebGPURenderer: New Cache System (#25750)

* FogNode: Update from construct API.

* webgpu_rtt: update example API

* WebGPURenderer: New Cache System

* WebGPURenderer: Update cacheKey after needsUpdate.

* final revision (1)

* RenderObject pipeline based ( 1/2 )

* RenderObject pipeline based ( 2/2 )

* cleanup

* fix possible overrideMaterial material with .wireframe and cleanup

* Revert "fix possible overrideMaterial material with .wireframe and cleanup"

This reverts commit 7dcd85e.

* Revert "Revert "fix possible overrideMaterial material with .wireframe and cleanup""

This reverts commit 5370b40.

* preserve nodes if pipeline is removed

* WebGPURenderObjects: Move get*Node() to WebGPUNodes.

Author: sunag

examples/jsm/nodes/core/NodeBuilder.js

@@ -32,18 +32,19 @@ class NodeBuilder {
 	constructor( object, renderer, parser ) {
 
 		this.object = object;
-		this.material = object.material || null;
-		this.geometry = object.geometry || null;
+		this.material = object && ( object.material || null );
+		this.geometry = object && ( object.geometry || null );
 		this.renderer = renderer;
 		this.parser = parser;
 
 		this.nodes = [];
 		this.updateNodes = [];
 		this.hashNodes = {};
 
-		this.scene = null;
 		this.lightsNode = null;
+		this.environmentNode = null;
 		this.fogNode = null;
+		this.toneMappingNode = null;
 
 		this.vertexShader = null;
 		this.fragmentShader = null;
@@ -63,7 +64,7 @@ class NodeBuilder {
 
 		this.context = {
 			keywords: new NodeKeywords(),
-			material: object.material,
+			material: this.material,
 			getMIPLevelAlgorithmNode: ( textureNode, levelNode ) => levelNode.mul( maxMipLevel( textureNode ) )
 		};
 

examples/jsm/nodes/fog/FogExp2Node.js

@@ -20,7 +20,7 @@ class FogExp2Node extends FogNode {
 		const depthNode = positionView.z.negate();
 		const densityNode = this.densityNode;
 
-		this.factorNode = densityNode.mul( densityNode, depthNode, depthNode ).negate().exp().oneMinus();
+		return densityNode.mul( densityNode, depthNode, depthNode ).negate().exp().oneMinus();
 
 	}
 

examples/jsm/nodes/fog/FogNode.js

@@ -20,9 +20,9 @@ class FogNode extends Node {
 
 	}
 
-	generate( builder ) {
+	construct() {
 
-		return this.factorNode.build( builder, 'float' );
+		return this.factorNode;
 
 	}
 

examples/jsm/nodes/fog/FogRangeNode.js

@@ -19,7 +19,7 @@ class FogRangeNode extends FogNode {
 
 	construct() {
 
-		this.factorNode = smoothstep( this.nearNode, this.farNode, positionView.z.negate() );
+		return smoothstep( this.nearNode, this.farNode, positionView.z.negate() );
 
 	}
 

examples/jsm/nodes/materials/NodeMaterial.js

@@ -1,4 +1,4 @@
-import { Material, ShaderMaterial, NoToneMapping } from 'three';
+import { Material, ShaderMaterial } from 'three';
 import { getNodeChildren, getCacheKey } from '../core/NodeUtils.js';
 import { attribute } from '../core/AttributeNode.js';
 import { diffuseColor } from '../core/PropertyNode.js';
@@ -8,13 +8,8 @@ import { modelViewProjection } from '../accessors/ModelViewProjectionNode.js';
 import { transformedNormalView } from '../accessors/NormalNode.js';
 import { instance } from '../accessors/InstanceNode.js';
 import { positionLocal } from '../accessors/PositionNode.js';
-import { reference } from '../accessors/ReferenceNode.js';
 import { skinning } from '../accessors/SkinningNode.js';
 import { texture } from '../accessors/TextureNode.js';
-import { cubeTexture } from '../accessors/CubeTextureNode.js';
-import { toneMapping } from '../display/ToneMappingNode.js';
-import { rangeFog } from '../fog/FogRangeNode.js';
-import { densityFog } from '../fog/FogExp2Node.js';
 import { lightsWithoutWrap } from '../lighting/LightsNode.js';
 import AONode from '../lighting/AONode.js';
 import EnvironmentNode from '../lighting/EnvironmentNode.js';
@@ -161,28 +156,7 @@ class NodeMaterial extends ShaderMaterial {
 
 	constructLights( builder ) {
 
-		let lightsNode = this.lightsNode || builder.lightsNode;
-		let envNode = this.envNode || builder.scene.environmentNode;
-
-		if ( envNode === undefined && builder.scene.environment ) {
-
-			const environment = builder.scene.environment;
-
-			if ( environment.isCubeTexture === true ) {
-
-				envNode = cubeTexture( environment );
-
-			} else if ( environment.isTexture === true ) {
-
-				envNode = texture( environment );
-
-			} else {
-
-				console.error( 'NodeMaterial: Unsupported environment configuration.', environment );
-
-			}
-
-		}
+		const envNode = this.envNode || builder.environmentNode;
 
 		const materialLightsNode = [];
 
@@ -198,6 +172,8 @@ class NodeMaterial extends ShaderMaterial {
 
 		}
 
+		let lightsNode = this.lightsNode || builder.lightsNode;
+
 		if ( materialLightsNode.length > 0 ) {
 
 			lightsNode = lightsWithoutWrap( [ ...lightsNode.lightNodes, ...materialLightsNode ] );
@@ -251,15 +227,9 @@ class NodeMaterial extends ShaderMaterial {
 
 		// TONE MAPPING
 
-		let toneMappingNode = renderer.toneMappingNode;
-
-		if ( ! toneMappingNode && renderer.toneMapping !== NoToneMapping ) {
+		const toneMappingNode = builder.toneMappingNode;
 
-			toneMappingNode = toneMapping( renderer.toneMapping, reference( 'toneMappingExposure', 'float', renderer ), outgoingLight );
-
-		}
-
-		if ( toneMappingNode && toneMappingNode.isNode === true ) {
+		if ( toneMappingNode ) {
 
 			outgoingLight = toneMappingNode.context( { color: outgoingLight } );
 
@@ -275,27 +245,7 @@ class NodeMaterial extends ShaderMaterial {
 
 		// FOG
 
-		let fogNode = builder.fogNode;
-
-		if ( ( fogNode && fogNode.isNode !== true ) && builder.scene.fog ) {
-
-			const fog = builder.scene.fog;
-
-			if ( fog.isFogExp2 ) {
-
-				fogNode = densityFog( reference( 'color', 'color', fog ), reference( 'density', 'float', fog ) );
-
-			} else if ( fog.isFog ) {
-
-				fogNode = rangeFog( reference( 'color', 'color', fog ), reference( 'near', 'float', fog ), reference( 'far', 'float', fog ) );
-
-			} else {
-
-				console.error( 'NodeMaterial: Unsupported fog configuration.', fog );
-
-			}
-
-		}
+		const fogNode = builder.fogNode;
 
 		if ( fogNode ) outputNode = vec4( fogNode.mixAssign( outputNode.rgb ), outputNode.a );
 

examples/jsm/renderers/webgpu/WebGPUBackground.js

@@ -1,17 +1,19 @@
 import { GPULoadOp, GPUStoreOp } from './constants.js';
-import { Color, Mesh, BoxGeometry, BackSide, EquirectangularReflectionMapping, EquirectangularRefractionMapping } from 'three';
-import { context, vec2, oneMinus, texture, cubeTexture, transformDirection, positionWorld, modelWorldMatrix, viewportBottomLeft, equirectUV, MeshBasicNodeMaterial } from 'three/nodes';
+import { Color, Mesh, BoxGeometry, BackSide } from 'three';
+import { context, transformDirection, positionWorld, modelWorldMatrix, MeshBasicNodeMaterial } from 'three/nodes';
 
 let _clearAlpha;
 const _clearColor = new Color();
 
 class WebGPUBackground {
 
-	constructor( renderer ) {
+	constructor( renderer, properties ) {
 
 		this.renderer = renderer;
+		this.properties = properties;
 
 		this.boxMesh = null;
+		this.boxMeshNode = null;
 
 		this.forceClear = false;
 
@@ -26,7 +28,7 @@ class WebGPUBackground {
 	update( renderList, scene ) {
 
 		const renderer = this.renderer;
-		const background = ( scene.isScene === true ) ? scene.backgroundNode || scene.background : null;
+		const background = ( scene.isScene === true ) ? scene.backgroundNode || this.properties.get( scene ).backgroundNode || scene.background : null;
 
 		let forceClear = this.forceClear;
 
@@ -45,7 +47,10 @@ class WebGPUBackground {
 			_clearAlpha = 1;
 			forceClear = true;
 
-		} else if ( background.isNode === true || background.isTexture === true ) {
+		} else if ( background.isNode === true ) {
+
+			const sceneProperties = this.properties.get( scene );
+			const backgroundNode = background;
 
 			_clearColor.copy( renderer._clearColor );
 			_clearAlpha = renderer._clearAlpha;
@@ -54,42 +59,13 @@ class WebGPUBackground {
 
 			if ( boxMesh === null ) {
 
-				let node = null;
-
-				if ( background.isCubeTexture === true ) {
-
-					node = cubeTexture( background, transformDirection( positionWorld, modelWorldMatrix ) );
-
-				} else if ( background.isTexture === true ) {
-
-					let nodeUV = null;
-
-					if ( background.mapping === EquirectangularReflectionMapping || background.mapping === EquirectangularRefractionMapping ) {
-
-						const dirNode = transformDirection( positionWorld, modelWorldMatrix );
-
-						nodeUV = equirectUV( dirNode );
-						nodeUV = vec2( nodeUV.x, oneMinus( nodeUV.y ) );
-
-					} else {
-
-						nodeUV = viewportBottomLeft;
-
-					}
-
-					node = texture( background, nodeUV );
-
-				} else /*if ( background.isNode === true )*/ {
-
-					node = context( background, {
-						// @TODO: Add Texture2D support using node context
-						getUVNode: () => transformDirection( positionWorld, modelWorldMatrix )
-					} );
-
-				}
+				this.boxMeshNode = context( backgroundNode, {
+					// @TODO: Add Texture2D support using node context
+					getUVNode: () => transformDirection( positionWorld, modelWorldMatrix )
+				} );
 
 				const nodeMaterial = new MeshBasicNodeMaterial();
-				nodeMaterial.colorNode = node;
+				nodeMaterial.colorNode = this.boxMeshNode;
 				nodeMaterial.side = BackSide;
 				nodeMaterial.depthTest = false;
 				nodeMaterial.depthWrite = false;
@@ -105,6 +81,18 @@ class WebGPUBackground {
 
 			}
 
+			const backgroundCacheKey = backgroundNode.getCacheKey();
+
+			if ( sceneProperties.backgroundMeshCacheKey !== backgroundCacheKey ) {
+
+				this.boxMeshNode.node = backgroundNode;
+
+				boxMesh.material.needsUpdate = true;
+
+				sceneProperties.backgroundMeshCacheKey = backgroundCacheKey;
+
+			}
+
 			renderList.unshift( boxMesh, boxMesh.geometry, boxMesh.material, 0, 0, null );
 
 		} else {

examples/jsm/renderers/webgpu/WebGPUBindings.js

@@ -17,20 +17,20 @@ class WebGPUBindings {
 
 	}
 
-	get( object ) {
+	get( renderObject ) {
 
-		let data = this.uniformsData.get( object );
+		let data = this.uniformsData.get( renderObject );
 
 		if ( data === undefined ) {
 
 			// each object defines an array of bindings (ubos, textures, samplers etc.)
 
-			const nodeBuilder = this.nodes.get( object );
+			const nodeBuilder = this.nodes.get( renderObject );
 			const bindings = nodeBuilder.getBindings();
 
 			// setup (static) binding layout and (dynamic) binding group
 
-			const pipeline = object.isNode ? this.computePipelines.get( object ) : this.renderPipelines.get( object ).pipeline;
+			const pipeline = this.renderPipelines.get( renderObject ).pipeline;
 
 			const bindLayout = pipeline.getBindGroupLayout( 0 );
 			const bindGroup = this._createBindGroup( bindings, bindLayout );
@@ -41,33 +41,30 @@ class WebGPUBindings {
 				bindings: bindings
 			};
 
-			this.uniformsData.set( object, data );
+			this.uniformsData.set( renderObject, data );
 
 		}
 
 		return data;
 
 	}
 
-	remove( object ) {
-
-		this.uniformsData.delete( object );
-
-	}
+	getForCompute( computeNode ) {
 
-	getForCompute( param ) {
-
-		let data = this.uniformsData.get( param );
+		let data = this.uniformsData.get( computeNode );
 
 		if ( data === undefined ) {
 
-			// bindings are not yet retrieved via node material
+			// each object defines an array of bindings (ubos, textures, samplers etc.)
 
-			const bindings = param.bindings !== undefined ? param.bindings.slice() : [];
+			const nodeBuilder = this.nodes.getForCompute( computeNode );
+			const bindings = nodeBuilder.getBindings();
 
-			const computePipeline = this.computePipelines.get( param );
+			// setup (static) binding layout and (dynamic) binding group
 
-			const bindLayout = computePipeline.getBindGroupLayout( 0 );
+			const pipeline = this.computePipelines.get( computeNode );
+
+			const bindLayout = pipeline.getBindGroupLayout( 0 );
 			const bindGroup = this._createBindGroup( bindings, bindLayout );
 
 			data = {
@@ -76,14 +73,20 @@ class WebGPUBindings {
 				bindings: bindings
 			};
 
-			this.uniformsData.set( param, data );
+			this.uniformsData.set( computeNode, data );
 
 		}
 
 		return data;
 
 	}
 
+	remove( object ) {
+
+		this.uniformsData.delete( object );
+
+	}
+
 	update( object ) {
 
 		const textures = this.textures;

examples/jsm/renderers/webgpu/WebGPUComputePipelines.js

@@ -32,7 +32,7 @@ class WebGPUComputePipelines {
 
 			// get shader
 
-			const nodeBuilder = this.nodes.get( computeNode );
+			const nodeBuilder = this.nodes.getForCompute( computeNode );
 			const computeShader = nodeBuilder.computeShader;
 
 			const shader = {