WebGPURenderer: Introduce hash-based cache key

examples/webgpu_performance.html

@@ -30,16 +30,35 @@
 
 			import Stats from 'three/addons/libs/stats.module.js';
 
+			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
+
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 			import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
 
 			import { RGBELoader } from 'three/addons/loaders/RGBELoader.js';
 
 			let camera, scene, renderer, stats;
+			let model;
+
+			const options = { static: true };
 
 			init();
 
+			function setStatic( object, value ) {
+
+				object.traverse( child => {
+
+					if ( child.isMesh ) {
+
+						child.static = value;
+
+					}
+
+				} );
+
+			}
+
 			function init() {
 
 				const container = document.createElement( 'div' );
@@ -83,26 +102,36 @@
 
 						loader.load( 'dungeon_warkarma.glb', async function ( gltf ) {
 
-							const model = gltf.scene;
+							model = gltf.scene;
 
 							// wait until the model can be added to the scene without blocking due to shader compilation
 
 							await renderer.compileAsync( model, camera, scene );
 
 							scene.add( model );
+
+							//
+
+							setStatic( model, options.static );
 
 						} );
 
 					} );
 
-
-
 				const controls = new OrbitControls( camera, renderer.domElement );
 				controls.minDistance = 2;
 				controls.maxDistance = 60;
 				controls.target.set( 0, 0, - 0.2 );
 				controls.update();
 
+				// gui
+
+				const gui = new GUI();
+				gui.add( options, 'static' ).onChange( () => {
+
+					setStatic( model, options.static );
+
+				} );
 
 				window.addEventListener( 'resize', onWindowResize );
 

src/nodes/code/ScriptableNode.js

@@ -1,6 +1,7 @@
 import Node from '../core/Node.js';
 import { scriptableValue } from './ScriptableValueNode.js';
 import { nodeProxy, float } from '../tsl/TSLBase.js';
+import { cyrb53 } from '../core/NodeUtils.js';
 
 class Resources extends Map {
 
@@ -445,15 +446,15 @@ class ScriptableNode extends Node {
 
 	getCacheKey( force ) {
 
-		const cacheKey = [ this.source, this.getDefaultOutputNode().getCacheKey( force ) ];
+		let cacheKey = cyrb53( this.source ) + this.getDefaultOutputNode().getCacheKey( force );
 
 		for ( const param in this.parameters ) {
 
-			cacheKey.push( this.parameters[ param ].getCacheKey( force ) );
+			cacheKey += this.parameters[ param ].getCacheKey( force );
 
 		}
 
-		return cacheKey.join( ',' );
+		return cacheKey;
 
 	}
 

src/nodes/core/NodeUtils.js

@@ -5,9 +5,35 @@ import { Vector2 } from '../../math/Vector2.js';
 import { Vector3 } from '../../math/Vector3.js';
 import { Vector4 } from '../../math/Vector4.js';
 
+// cyrb53 (c) 2018 bryc (github.com/bryc). License: Public domain. Attribution appreciated.
+// A fast and simple 64-bit (or 53-bit) string hash function with decent collision resistance.
+// Largely inspired by MurmurHash2/3, but with a focus on speed/simplicity.
+// See https://stackoverflow.com/questions/7616461/generate-a-hash-from-string-in-javascript/52171480#52171480
+// https://github.com/bryc/code/blob/master/jshash/experimental/cyrb53.js
+export function cyrb53( str, seed = 0 ) {
+
+	let h1 = 0xdeadbeef ^ seed, h2 = 0x41c6ce57 ^ seed;
+
+	for ( let i = 0, ch; i < str.length; i ++ ) {
+
+		ch = str.charCodeAt( i );
+		h1 = Math.imul( h1 ^ ch, 2654435761 );
+		h2 = Math.imul( h2 ^ ch, 1597334677 );
+
+	}
+
+	h1 = Math.imul( h1 ^ ( h1 >>> 16 ), 2246822507 );
+	h1 ^= Math.imul( h2 ^ ( h2 >>> 13 ), 3266489909 );
+	h2 = Math.imul( h2 ^ ( h2 >>> 16 ), 2246822507 );
+	h2 ^= Math.imul( h1 ^ ( h1 >>> 13 ), 3266489909 );
+
+	return 4294967296 * ( 2097151 & h2 ) + ( h1 >>> 0 );
+
+}
+
 export function getCacheKey( object, force = false ) {
 
-	let cacheKey = '{';
+	let cacheKey = 0;
 
 	if ( object.isNode === true ) {
 
@@ -18,12 +44,10 @@ export function getCacheKey( object, force = false ) {
 
 	for ( const { property, childNode } of getNodeChildren( object ) ) {
 
-		cacheKey += ',' + property.slice( 0, - 4 ) + ':' + childNode.getCacheKey( force );
+		cacheKey = Math.imul( cacheKey, cyrb53( property.slice( 0, - 4 ) + ':' + childNode.getCacheKey( force ) ) );
 
 	}
 
-	cacheKey += '}';
-
 	return cacheKey;
 
 }

src/nodes/display/ToneMappingNode.js

@@ -25,10 +25,7 @@ class ToneMappingNode extends TempNode {
 
 	getCacheKey() {
 
-		let cacheKey = super.getCacheKey();
-		cacheKey = '{toneMapping:' + this.toneMapping + ',nodes:' + cacheKey + '}';
-
-		return cacheKey;
+		return super.getCacheKey() + this.toneMapping;
 
 	}
 

src/nodes/lighting/AnalyticLightNode.js

@@ -238,7 +238,7 @@ class AnalyticLightNode extends LightingNode {
 
 	getCacheKey() {
 
-		return super.getCacheKey() + '-' + ( this.light.id + '-' + ( this.light.castShadow ? '1' : '0' ) );
+		return super.getCacheKey() + this.light.id + ( ( this.light.castShadow ? 1 : 0 ) << 16 );
 
 	}
 

src/renderers/common/ClippingContext.js

@@ -20,7 +20,7 @@ class ClippingContext {
 
 		this.parentVersion = 0;
 		this.viewNormalMatrix = new Matrix3();
-		this.cacheKey = '';
+		this.cacheKey = 0;
 
 	}
 
@@ -95,7 +95,7 @@ class ClippingContext {
 		if ( update ) {
 
 			this.version ++;
-			this.cacheKey = `${ this.globalClippingCount }:${ this.localClippingEnabled === undefined ? false : this.localClippingEnabled }:`;
+			this.cacheKey = this.globalClippingCount << ( this.localClippingEnabled === undefined && this.localClippingEnabled ? 0 : 16 );
 
 		}
 
@@ -165,7 +165,7 @@ class ClippingContext {
 		if ( update ) {
 
 			this.version += parent.version;
-			this.cacheKey = parent.cacheKey + `:${ this.localClippingCount }:${ this.localClipIntersection === undefined ? false : this.localClipIntersection }`;
+			this.cacheKey = parent.cacheKey + ( this.localClippingCount << ( this.localClipIntersection === undefined && this.localClipIntersection ? 0 : 16 ) );
 
 		}
 

src/renderers/common/RenderContext.js

@@ -50,17 +50,15 @@ export function getCacheKey( renderContext ) {
 
 	const { textures, activeCubeFace } = renderContext;
 
-	let key = '';
+	let key = 0;
 
 	for ( const texture of textures ) {
 
-		key += texture.id + ',';
+		key = Math.imul( key, texture.id << 4 );
 
 	}
 
-	key += activeCubeFace;
-
-	return key;
+	return key + ( activeCubeFace << 16 );
 
 }
 

src/renderers/common/RenderObject.js

@@ -1,3 +1,4 @@
+import { cyrb53 } from '../../nodes/core/NodeUtils.js';
 import ClippingContext from './ClippingContext.js';
 
 let _id = 0;
@@ -369,7 +370,7 @@ export default class RenderObject {
 
 		}
 
-		return cacheKey;
+		return cyrb53( cacheKey );
 
 	}
 
@@ -383,13 +384,21 @@ export default class RenderObject {
 
 		// Environment Nodes Cache Key
 
-		return this.object.receiveShadow + ',' + this._nodes.getCacheKey( this.scene, this.lightsNode );
+		let cacheKey = this._nodes.getCacheKey( this.scene, this.lightsNode );
+
+		if ( this.object.receiveShadow ) {
+
+			cacheKey += 1;
+
+		}
+
+		return cacheKey;
 
 	}
 
 	getCacheKey() {
 
-		return this.getMaterialCacheKey() + ',' + this.getDynamicCacheKey();
+		return this.getMaterialCacheKey() + this.getDynamicCacheKey();
 
 	}
 

src/renderers/common/nodes/Nodes.js

@@ -6,6 +6,7 @@
 import { objectGroup, renderGroup, frameGroup, cubeTexture, texture, rangeFog, densityFog, reference, normalWorld, pmremTexture, screenUV } from '../../../nodes/TSL.js';
 
 import { CubeUVReflectionMapping, EquirectangularReflectionMapping, EquirectangularRefractionMapping } from '../../../constants.js';
+import { cyrb53 } from '../../../nodes/core/NodeUtils.js';
 
 const outputNodeMap = new WeakMap();
 
@@ -226,15 +227,15 @@
 			const environmentNode = this.getEnvironmentNode( scene );
 			const fogNode = this.getFogNode( scene );
 
-			const cacheKey = [];
+			let cacheKey = 0;
 
-			if ( lightsNode ) cacheKey.push( lightsNode.getCacheKey( true ) );
-			if ( environmentNode ) cacheKey.push( environmentNode.getCacheKey() );
-			if ( fogNode ) cacheKey.push( fogNode.getCacheKey() );
+			if ( lightsNode ) cacheKey += lightsNode.getCacheKey( true );
+			if ( environmentNode ) cacheKey += environmentNode.getCacheKey();
+			if ( fogNode ) cacheKey += fogNode.getCacheKey();
 
 			cacheKeyData = {
 				callId,
-				cacheKey: cacheKey.join( ',' )
+				cacheKey
 			};
 
 			this.callHashCache.set( chain, cacheKeyData );