Backend: Move pipeline cache data to backends (#27220)

* Backend: Move pipeline cache data to backend

* update screenshot

* Update puppeteer.js

examples/jsm/renderers/common/Backend.js

@@ -52,9 +52,9 @@ class Backend {
 
 	// cache key
 
-	needsUpdate( renderObject ) { } // return Boolean ( fast test )
+	needsRenderUpdate( renderObject ) { } // return Boolean ( fast test )
 
-	getCacheKey( renderObject ) { } // return String
+	getRenderCacheKey( renderObject ) { } // return String
 
 	// node builder
 

examples/jsm/renderers/common/Pipelines.js

@@ -276,29 +276,13 @@ class Pipelines extends DataMap {
 
 	_getComputeCacheKey( computeNode, stageCompute ) {
 
-		return 'compute' + computeNode.id + stageCompute.id;
+		return computeNode.id + ',' + stageCompute.id;
 
 	}
 
 	_getRenderCacheKey( renderObject, stageVertex, stageFragment ) {
 
-		const { material } = renderObject;
-
-		const parameters = [
-			stageVertex.id, stageFragment.id,
-			material.transparent, material.blending, material.premultipliedAlpha,
-			material.blendSrc, material.blendDst, material.blendEquation,
-			material.blendSrcAlpha, material.blendDstAlpha, material.blendEquationAlpha,
-			material.colorWrite,
-			material.depthWrite, material.depthTest, material.depthFunc,
-			material.stencilWrite, material.stencilFunc,
-			material.stencilFail, material.stencilZFail, material.stencilZPass,
-			material.stencilFuncMask, material.stencilWriteMask,
-			material.side,
-			this.backend.getCacheKey( renderObject )
-		];
-
-		return parameters.join();
+		return stageVertex.id + ',' + stageFragment.id + ',' + this.backend.getRenderCacheKey( renderObject );
 
 	}
 
@@ -328,40 +312,8 @@ class Pipelines extends DataMap {
 	_needsRenderUpdate( renderObject ) {
 
 		const data = this.get( renderObject );
-		const material = renderObject.material;
-
-		let needsUpdate = this.backend.needsUpdate( renderObject );
-
-		// check material state
-
-		if ( data.material !== material || data.materialVersion !== material.version ||
-			data.transparent !== material.transparent || data.blending !== material.blending || data.premultipliedAlpha !== material.premultipliedAlpha ||
-			data.blendSrc !== material.blendSrc || data.blendDst !== material.blendDst || data.blendEquation !== material.blendEquation ||
-			data.blendSrcAlpha !== material.blendSrcAlpha || data.blendDstAlpha !== material.blendDstAlpha || data.blendEquationAlpha !== material.blendEquationAlpha ||
-			data.colorWrite !== material.colorWrite ||
-			data.depthWrite !== material.depthWrite || data.depthTest !== material.depthTest || data.depthFunc !== material.depthFunc ||
-			data.stencilWrite !== material.stencilWrite || data.stencilFunc !== material.stencilFunc ||
-			data.stencilFail !== material.stencilFail || data.stencilZFail !== material.stencilZFail || data.stencilZPass !== material.stencilZPass ||
-			data.stencilFuncMask !== material.stencilFuncMask || data.stencilWriteMask !== material.stencilWriteMask ||
-			data.side !== material.side || data.alphaToCoverage !== material.alphaToCoverage
-		) {
-
-			data.material = material; data.materialVersion = material.version;
-			data.transparent = material.transparent; data.blending = material.blending; data.premultipliedAlpha = material.premultipliedAlpha;
-			data.blendSrc = material.blendSrc; data.blendDst = material.blendDst; data.blendEquation = material.blendEquation;
-			data.blendSrcAlpha = material.blendSrcAlpha; data.blendDstAlpha = material.blendDstAlpha; data.blendEquationAlpha = material.blendEquationAlpha;
-			data.colorWrite = material.colorWrite;
-			data.depthWrite = material.depthWrite; data.depthTest = material.depthTest; data.depthFunc = material.depthFunc;
-			data.stencilWrite = material.stencilWrite; data.stencilFunc = material.stencilFunc;
-			data.stencilFail = material.stencilFail; data.stencilZFail = material.stencilZFail; data.stencilZPass = material.stencilZPass;
-			data.stencilFuncMask = material.stencilFuncMask; data.stencilWriteMask = material.stencilWriteMask;
-			data.side = material.side; data.alphaToCoverage = material.alphaToCoverage;
-
-			needsUpdate = true;
-
-		}
 
-		return needsUpdate || data.pipeline === undefined;
+		return data.pipeline === undefined || this.backend.needsRenderUpdate( renderObject );
 
 	}
 

examples/jsm/renderers/webgl/WebGLBackend.js

@@ -422,15 +422,15 @@ class WebGLBackend extends Backend {
 
 	}
 
-	needsUpdate( renderObject ) {
+	needsRenderUpdate( renderObject ) {
 
 		return false;
 
 	}
 
-	getCacheKey( renderObject ) {
+	getRenderCacheKey( renderObject ) {
 
-		return renderObject.geometry.id;
+		return renderObject.id;
 
 	}
 

examples/jsm/renderers/webgpu/WebGPUBackend.js

@@ -731,9 +731,9 @@ class WebGPUBackend extends Backend {
 
 	// cache key
 
-	needsUpdate( renderObject ) {
+	needsRenderUpdate( renderObject ) {
 
-		const renderObjectGPU = this.get( renderObject );
+		const data = this.get( renderObject );
 
 		const { object, material } = renderObject;
 
@@ -747,15 +747,35 @@ class WebGPUBackend extends Backend {
 
 		let needsUpdate = false;
 
-		if ( renderObjectGPU.sampleCount !== sampleCount || renderObjectGPU.colorSpace !== colorSpace ||
-			renderObjectGPU.colorFormat !== colorFormat || renderObjectGPU.depthStencilFormat !== depthStencilFormat ||
-            renderObjectGPU.primitiveTopology !== primitiveTopology ) {
-
-			renderObjectGPU.sampleCount = sampleCount;
-			renderObjectGPU.colorSpace = colorSpace;
-			renderObjectGPU.colorFormat = colorFormat;
-			renderObjectGPU.depthStencilFormat = depthStencilFormat;
-			renderObjectGPU.primitiveTopology = primitiveTopology;
+		if ( data.material !== material || data.materialVersion !== material.version ||
+			data.transparent !== material.transparent || data.blending !== material.blending || data.premultipliedAlpha !== material.premultipliedAlpha ||
+			data.blendSrc !== material.blendSrc || data.blendDst !== material.blendDst || data.blendEquation !== material.blendEquation ||
+			data.blendSrcAlpha !== material.blendSrcAlpha || data.blendDstAlpha !== material.blendDstAlpha || data.blendEquationAlpha !== material.blendEquationAlpha ||
+			data.colorWrite !== material.colorWrite || data.depthWrite !== material.depthWrite || data.depthTest !== material.depthTest || data.depthFunc !== material.depthFunc ||
+			data.stencilWrite !== material.stencilWrite || data.stencilFunc !== material.stencilFunc ||
+			data.stencilFail !== material.stencilFail || data.stencilZFail !== material.stencilZFail || data.stencilZPass !== material.stencilZPass ||
+			data.stencilFuncMask !== material.stencilFuncMask || data.stencilWriteMask !== material.stencilWriteMask ||
+			data.side !== material.side || data.alphaToCoverage !== material.alphaToCoverage ||
+			data.sampleCount !== sampleCount || data.colorSpace !== colorSpace ||
+			data.colorFormat !== colorFormat || data.depthStencilFormat !== depthStencilFormat ||
+			data.primitiveTopology !== primitiveTopology 
+		) {
+
+			data.material = material; data.materialVersion = material.version;
+			data.transparent = material.transparent; data.blending = material.blending; data.premultipliedAlpha = material.premultipliedAlpha;
+			data.blendSrc = material.blendSrc; data.blendDst = material.blendDst; data.blendEquation = material.blendEquation;
+			data.blendSrcAlpha = material.blendSrcAlpha; data.blendDstAlpha = material.blendDstAlpha; data.blendEquationAlpha = material.blendEquationAlpha;
+			data.colorWrite = material.colorWrite;
+			data.depthWrite = material.depthWrite; data.depthTest = material.depthTest; data.depthFunc = material.depthFunc;
+			data.stencilWrite = material.stencilWrite; data.stencilFunc = material.stencilFunc;
+			data.stencilFail = material.stencilFail; data.stencilZFail = material.stencilZFail; data.stencilZPass = material.stencilZPass;
+			data.stencilFuncMask = material.stencilFuncMask; data.stencilWriteMask = material.stencilWriteMask;
+			data.side = material.side; data.alphaToCoverage = material.alphaToCoverage;
+			data.sampleCount = sampleCount;
+			data.colorSpace = colorSpace;
+			data.colorFormat = colorFormat;
+			data.depthStencilFormat = depthStencilFormat;
+			data.primitiveTopology = primitiveTopology;
 
 			needsUpdate = true;
 
@@ -765,7 +785,7 @@ class WebGPUBackend extends Backend {
 
 	}
 
-	getCacheKey( renderObject ) {
+	getRenderCacheKey( renderObject ) {
 
 		const { object, material } = renderObject;
 
@@ -773,6 +793,15 @@ class WebGPUBackend extends Backend {
 		const renderContext = renderObject.context;
 
 		return [
+			material.transparent, material.blending, material.premultipliedAlpha,
+			material.blendSrc, material.blendDst, material.blendEquation,
+			material.blendSrcAlpha, material.blendDstAlpha, material.blendEquationAlpha,
+			material.colorWrite,
+			material.depthWrite, material.depthTest, material.depthFunc,
+			material.stencilWrite, material.stencilFunc,
+			material.stencilFail, material.stencilZFail, material.stencilZPass,
+			material.stencilFuncMask, material.stencilWriteMask,
+			material.side,
 			utils.getSampleCount( renderContext ),
 			utils.getCurrentColorSpace( renderContext ), utils.getCurrentColorFormat( renderContext ), utils.getCurrentDepthStencilFormat( renderContext ),
 			utils.getPrimitiveTopology( object, material )

test/e2e/puppeteer.js

@@ -120,12 +120,12 @@ const exceptionList = [
 	'webgpu_loader_gltf_iridescence',
 	'webgpu_loader_gltf_sheen',
 	'webgpu_materials',
-	'webgpu_materials_video',
 	'webgpu_sandbox',
 	'webgpu_sprites',
 	'webgpu_video_panorama',
 
 	// WebGPURenderer: Unknown problem
+	'webgpu_materials_video',
 	'webgpu_particles',
 	'webgpu_shadertoy',
 	'webgpu_tsl_editor',