WebGPURenderer: Fix `faceDirection` in `WebGLBackend` if used `BackSide` (#28064)

* Fix faceDirection in WebGLBackend if used BackSide

* Added frontFaceCW

examples/jsm/nodes/display/FrontFacingNode.js

@@ -1,5 +1,6 @@
 import Node, { addNodeClass } from '../core/Node.js';
 import { nodeImmutable, float } from '../shadernode/ShaderNode.js';
+import { BackSide, WebGLCoordinateSystem } from 'three';
 
 class FrontFacingNode extends Node {
 
@@ -13,6 +14,18 @@ class FrontFacingNode extends Node {
 
 	generate( builder ) {
 
+		const { renderer, material } = builder;
+
+		if ( renderer.coordinateSystem === WebGLCoordinateSystem ) {
+
+			if ( material.side === BackSide ) {
+
+				return 'false';
+
+			}
+
+		}
+
 		return builder.getFrontFacing();
 
 	}

examples/jsm/renderers/webgl/WebGLBackend.js

@@ -568,7 +568,7 @@ class WebGLBackend extends Backend {
 
 	draw( renderObject, info ) {
 
-		const { pipeline, material, context } = renderObject;
+		const { object, pipeline, material, context } = renderObject;
 		const { programGPU } = this.get( pipeline );
 
 		const { gl, state } = this;
@@ -579,7 +579,9 @@ class WebGLBackend extends Backend {
 
 		this._bindUniforms( renderObject.getBindings() );
 
-		state.setMaterial( material );
+		const frontFaceCW = ( object.isMesh && object.matrixWorld.determinant() < 0 );
+
+		state.setMaterial( material, frontFaceCW );
 
 		gl.useProgram( programGPU );
 
@@ -611,7 +613,6 @@ class WebGLBackend extends Backend {
 
 		const index = renderObject.getIndex();
 
-		const object = renderObject.object;
 		const geometry = renderObject.geometry;
 		const drawRange = geometry.drawRange;
 		const firstVertex = drawRange.start;