WebGPURenderer: Environment Nodes Hash (#26942)

examples/jsm/renderers/common/RenderObject.js

@@ -24,6 +24,7 @@ export default class RenderObject {
 		this.pipeline = null;
 		this.vertexBuffers = null;
 
+		this.initialNodesCacheKey = this.getNodesCacheKey();
 		this.initialCacheKey = this.getCacheKey();
 
 		this._nodeBuilderState = null;
@@ -132,6 +133,12 @@ export default class RenderObject {
 
 	}
 
+	get needsUpdate() {
+
+		return this.initialNodesCacheKey !== this.getNodesCacheKey();
+
+	}
+
 	getNodesCacheKey() {
 
 		// Environment Nodes Cache Key
@@ -142,7 +149,7 @@ export default class RenderObject {
 
 	getCacheKey() {
 
-		return `{material:${ this.getMaterialCacheKey() },nodes:${ this.getNodesCacheKey()}`;
+		return this.getMaterialCacheKey() + ',' + this.getNodesCacheKey();
 
 	}
 

examples/jsm/renderers/common/RenderObjects.js

@@ -31,7 +31,7 @@ class RenderObjects {
 
 		} else {
 
-			if ( renderObject.version !== material.version ) {
+			if ( renderObject.version !== material.version || renderObject.needsUpdate ) {
 
 				renderObject.version = material.version;
 

examples/jsm/renderers/common/nodes/Nodes.js

@@ -1,4 +1,5 @@
 import DataMap from '../DataMap.js';
+import ChainMap from '../ChainMap.js';
 import NodeBuilderState from './NodeBuilderState.js';
 import { NoToneMapping, EquirectangularReflectionMapping, EquirectangularRefractionMapping } from 'three';
 import { NodeFrame, cubeTexture, texture, rangeFog, densityFog, reference, toneMapping, equirectUV, viewportBottomLeft, normalWorld } from '../../../nodes/Nodes.js';
@@ -13,6 +14,7 @@ class Nodes extends DataMap {
 		this.backend = backend;
 		this.nodeFrame = new NodeFrame();
 		this.nodeBuilderCache = new Map();
+		this.frameHashCache = new ChainMap();
 
 	}
 
@@ -145,18 +147,34 @@ class Nodes extends DataMap {
 
 	getCacheKey( scene, lightsNode ) {
 
-		const environmentNode = this.getEnvironmentNode( scene );
-		const fogNode = this.getFogNode( scene );
-		const toneMappingNode = this.getToneMappingNode();
+		const chain = [ scene, lightsNode ];
+		const frameId = this.nodeFrame.frameId;
 
-		const cacheKey = [];
+		let cacheKeyData = this.frameHashCache.get( chain );
 
-		if ( lightsNode ) cacheKey.push( 'lightsNode:' + lightsNode.getCacheKey() );
-		if ( environmentNode ) cacheKey.push( 'environmentNode:' + environmentNode.getCacheKey() );
-		if ( fogNode ) cacheKey.push( 'fogNode:' + fogNode.getCacheKey() );
-		if ( toneMappingNode ) cacheKey.push( 'toneMappingNode:' + toneMappingNode.getCacheKey() );
+		if ( cacheKeyData === undefined || cacheKeyData.frameId !== frameId ) {
 
-		return '{' + cacheKey.join( ',' ) + '}';
+			const environmentNode = this.getEnvironmentNode( scene );
+			const fogNode = this.getFogNode( scene );
+			const toneMappingNode = this.getToneMappingNode();
+
+			const cacheKey = [];
+
+			if ( lightsNode ) cacheKey.push( lightsNode.getCacheKey() );
+			if ( environmentNode ) cacheKey.push( environmentNode.getCacheKey() );
+			if ( fogNode ) cacheKey.push( fogNode.getCacheKey() );
+			if ( toneMappingNode ) cacheKey.push( toneMappingNode.getCacheKey() );
+
+			cacheKeyData = {
+				frameId,
+				cacheKey: cacheKey.join( ',' )
+			};
+
+			this.frameHashCache.set( chain, cacheKeyData );
+
+		}
+
+		return cacheKeyData.cacheKey;
 
 	}