Enhance front-face culling logic in WebGPUBackend and WebGPUPipelineUtils

- Introduced computeFrontFaceCW function to determine front-face orientation based on object, view, and projection matrix determinants.
- Updated setPipelineAndBindings and draw functions to accept frontFaceCW parameter for pipeline selection.
- Modified _getPrimitiveState and _buildRenderPipelineDescriptor to support front-face orientation configuration.
- Added getRenderPipelineVariant method to retrieve or create a pipeline based on front-face orientation.

Author: kwafok

src/renderers/webgpu/WebGPUBackend.js

@@ -1435,7 +1435,16 @@ class WebGPUBackend extends Backend {
 		const { object, material, context, pipeline } = renderObject;
 		const bindings = renderObject.getBindings();
 		const renderContextData = this.get( context );
-		const pipelineGPU = this.get( pipeline ).pipeline;
+
+		const computeFrontFaceCW = ( cam ) => {
+
+			if ( object.isMesh !== true ) return false;
+			const objectFlipped = object.matrixWorld.determinant() < 0;
+			const viewFlipped = cam.matrixWorld.determinant() < 0;
+			const projectionFlipped = cam.projectionMatrix.determinant() > 0; // A standard projection's determinant is negative; a positive determinant will flip face culling
+			return ( ( objectFlipped ^ viewFlipped ^ projectionFlipped ) !== 0 );
+
+		};
 
 		const index = renderObject.getIndex();
 		const hasIndex = ( index !== null );
@@ -1446,9 +1455,10 @@ class WebGPUBackend extends Backend {
 
 		// pipeline
 
-		const setPipelineAndBindings = ( passEncoderGPU, currentSets ) => {
+		const setPipelineAndBindings = ( passEncoderGPU, currentSets, frontFaceCW ) => {
 
-			// pipeline
+			// oriented pipeline (select orientation variant lazily)
+			const pipelineGPU = this.pipelineUtils.getRenderPipelineVariant( renderObject, frontFaceCW === true );
 			this.pipelineUtils.setPipeline( passEncoderGPU, pipelineGPU );
 			currentSets.pipeline = pipelineGPU;
 
@@ -1516,9 +1526,9 @@ class WebGPUBackend extends Backend {
 		};
 
 		// Define draw function
-		const draw = ( passEncoderGPU, currentSets ) => {
+		const draw = ( passEncoderGPU, currentSets, frontFaceCW ) => {
 
-			setPipelineAndBindings( passEncoderGPU, currentSets );
+			setPipelineAndBindings( passEncoderGPU, currentSets, frontFaceCW );
 
 			if ( object.isBatchedMesh === true ) {
 
@@ -1671,7 +1681,8 @@ class WebGPUBackend extends Backend {
 
 					}
 
-					draw( pass, sets );
+					const frontFaceCW = computeFrontFaceCW( subCamera );
+					draw( pass, sets, frontFaceCW );
 
 
 				}
@@ -1709,7 +1720,8 @@ class WebGPUBackend extends Backend {
 
 				}
 
-				draw( renderContextData.currentPass, renderContextData.currentSets );
+				const frontFaceCW = computeFrontFaceCW( renderObject.camera );
+				draw( renderContextData.currentPass, renderContextData.currentSets, frontFaceCW );
 
 			}
 

src/renderers/webgpu/utils/WebGPUPipelineUtils.js

@@ -81,12 +81,15 @@ class WebGPUPipelineUtils {
 	}
 
 	/**
-	 * Creates a render pipeline for the given render object.
+	 * Builds a GPURenderPipelineDescriptor for the given render object.
 	 *
+	 * @private
 	 * @param {RenderObject} renderObject - The render object.
-	 * @param {Array<Promise>} promises - An array of compilation promises which are used in `compileAsync()`.
+	 * @param {Object} [options={}] - Optional configuration.
+	 * @param {?boolean} [options.frontFaceCW=false] - Controls the primitive front-face orientation; defaults to CCW.
+	 * @return {Object} The render pipeline descriptor ready for createRenderPipeline.
 	 */
-	createRenderPipeline( renderObject, promises ) {
+	_buildRenderPipelineDescriptor( renderObject, { frontFaceCW = false } = {} ) {
 
 		const { object, material, geometry, pipeline } = renderObject;
 		const { vertexProgram, fragmentProgram } = pipeline;
@@ -95,7 +98,6 @@ class WebGPUPipelineUtils {
 		const device = backend.device;
 		const utils = backend.utils;
 
-		const pipelineData = backend.get( pipeline );
 
 		// bind group layouts
 
@@ -173,14 +175,15 @@ class WebGPUPipelineUtils {
 		const vertexModule = backend.get( vertexProgram ).module;
 		const fragmentModule = backend.get( fragmentProgram ).module;
 
-		const primitiveState = this._getPrimitiveState( object, geometry, material );
+		const primitiveState = this._getPrimitiveState( object, geometry, material, frontFaceCW );
+
 		const depthCompare = this._getDepthCompare( material );
 		const depthStencilFormat = utils.getCurrentDepthStencilFormat( renderObject.context );
 
 		const sampleCount = this._getSampleCount( renderObject.context );
 
 		const pipelineDescriptor = {
-			label: `renderPipeline_${ material.name || material.type }_${ material.id }`,
+			label: `renderPipeline_${ material.name || material.type }_${ material.id }${ frontFaceCW ? '_CW' : '' }`,
 			vertex: Object.assign( {}, vertexModule, { buffers: vertexBuffers } ),
 			fragment: Object.assign( {}, fragmentModule, { targets } ),
 			primitive: primitiveState,
@@ -229,6 +232,26 @@ class WebGPUPipelineUtils {
 
 		}
 
+		return pipelineDescriptor;
+
+	}
+
+	/**
+	 * Creates a render pipeline for the given render object.
+	 *
+	 * @param {RenderObject} renderObject - The render object.
+	 * @param {Array<Promise>} promises - An array of compilation promises which are used in `compileAsync()`.
+	 */
+	createRenderPipeline( renderObject, promises ) {
+
+		const { pipeline } = renderObject;
+
+		const backend = this.backend;
+		const device = backend.device;
+
+		const pipelineData = backend.get( pipeline );
+
+		const pipelineDescriptor = this._buildRenderPipelineDescriptor( renderObject );
 
 		if ( promises === null ) {
 
@@ -253,6 +276,54 @@ class WebGPUPipelineUtils {
 
 	}
 
+	/**
+	 * Returns a render pipeline variant with the requested front-face orientation.
+	 * If necessary, a new pipeline is created lazily and cached.
+	 *
+	 * @param {RenderObject} renderObject - The render object.
+	 * @param {boolean} frontFaceCW - Whether the front face should be CW (true) or CCW (false).
+	 * @return {GPURenderPipeline} The pipeline for the requested orientation.
+	 */
+	getRenderPipelineVariant( renderObject, frontFaceCW ) {
+
+		const { material, pipeline } = renderObject;
+
+		const backend = this.backend;
+		const device = backend.device;
+
+		const pipelineData = backend.get( pipeline );
+
+		console.assert( pipelineData.pipeline !== undefined, 'Pipeline not created' );
+
+		// DoubleSide does not cull, orientation is irrelevant
+		if ( material.side === DoubleSide ) {
+
+			return pipelineData.pipeline;
+
+		}
+
+		// Default CCW pipeline already handled by createRenderPipeline()
+		if ( frontFaceCW === false ) {
+
+			return pipelineData.pipeline;
+
+		}
+
+		// Need CW variant
+		if ( pipelineData.pipelineCW !== undefined ) {
+
+			return pipelineData.pipelineCW;
+
+		}
+
+		// Build a CW-oriented pipeline by reusing the shared descriptor with frontFace override
+		const pipelineDescriptor = this._buildRenderPipelineDescriptor( renderObject, { frontFaceCW: true } );
+		pipelineData.pipelineCW = device.createRenderPipeline( pipelineDescriptor );
+
+		return pipelineData.pipelineCW;
+
+	}
+
 	/**
 	 * Creates GPU render bundle encoder for the given render context.
 	 *
@@ -665,9 +736,10 @@ class WebGPUPipelineUtils {
 	 * @param {Object3D} object - The 3D object.
 	 * @param {BufferGeometry} geometry - The geometry.
 	 * @param {Material} material - The material.
+	 * @param {?boolean} [frontFaceCW=false] - Primitive front-face orientation; false=CCW (default), true=CW.
 	 * @return {Object} The primitive state.
 	 */
-	_getPrimitiveState( object, geometry, material ) {
+	_getPrimitiveState( object, geometry, material, frontFaceCW = false ) {
 
 		const descriptor = {};
 		const utils = this.backend.utils;
@@ -683,17 +755,17 @@ class WebGPUPipelineUtils {
 		switch ( material.side ) {
 
 			case FrontSide:
-				descriptor.frontFace = GPUFrontFace.CCW;
+				descriptor.frontFace = frontFaceCW ? GPUFrontFace.CW : GPUFrontFace.CCW;
 				descriptor.cullMode = GPUCullMode.Back;
 				break;
 
 			case BackSide:
-				descriptor.frontFace = GPUFrontFace.CCW;
+				descriptor.frontFace = frontFaceCW ? GPUFrontFace.CW : GPUFrontFace.CCW;
 				descriptor.cullMode = GPUCullMode.Front;
 				break;
 
 			case DoubleSide:
-				descriptor.frontFace = GPUFrontFace.CCW;
+				descriptor.frontFace = frontFaceCW ? GPUFrontFace.CW : GPUFrontFace.CCW;
 				descriptor.cullMode = GPUCullMode.None;
 				break;