Add frontFace support to render pipeline (#8447) (#8448)

* Add frontFace method support (#8447)

* Changed the order to conform to WebGPU specifications.

* Fix lint

* Delete mode from name

* Remove default value in functions with private API

* Remove comment

* Add setupFrontFace method to renderer

* Fix: 'FRONTFACE_CCW' is defined but never used

* Bly setupFrontFace

* Update src/platform/graphics/constants.js

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Update src/platform/graphics/constants.js

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Update src/platform/graphics/graphics-device.js

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Update src/scene/materials/material.js

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Apply suggestions from code review

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Update src/platform/graphics/constants.js

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Update src/scene/materials/material.js

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Add frontFace test

* Add flipFactor for setupFontFace

* Backward compatibility

* lint

* Ok

* Change setup logic

* Change setup logic

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Martin Valigursky <59932779+mvaligursky@users.noreply.github.com>

Author: 3 people

src/extras/renderers/outline-renderer.js

@@ -4,7 +4,7 @@ import { BlendState } from '../../platform/graphics/blend-state.js';
 import {
     ADDRESS_CLAMP_TO_EDGE, BLENDEQUATION_ADD, BLENDMODE_ONE_MINUS_SRC_ALPHA, BLENDMODE_SRC_ALPHA,
     CULLFACE_NONE,
-    FILTER_LINEAR, FILTER_LINEAR_MIPMAP_LINEAR, PIXELFORMAT_SRGBA8,
+    FILTER_LINEAR, FILTER_LINEAR_MIPMAP_LINEAR, FRONTFACE_CCW, PIXELFORMAT_SRGBA8,
     SEMANTIC_POSITION
 } from '../../platform/graphics/constants.js';
 import { DepthState } from '../../platform/graphics/depth-state.js';
@@ -316,6 +316,7 @@ class OutlineRenderer {
 
         device.setDepthState(DepthState.NODEPTH);
         device.setCullMode(CULLFACE_NONE);
+        device.setFrontFace(FRONTFACE_CCW);
         device.setBlendState(this.blendState);
         this.quadRenderer.render();
     }

src/platform/graphics/constants.js

@@ -344,6 +344,20 @@ export const CULLFACE_FRONT = 2;
  */
 export const CULLFACE_FRONTANDBACK = 3;
 
+/**
+ * The counterclockwise winding. Specifies whether polygons are front- or back-facing by setting a winding orientation.
+ *
+ * @category Graphics
+ */
+export const FRONTFACE_CCW = 0;
+
+/**
+ * The clockwise winding. Specifies whether polygons are front- or back-facing by setting a winding orientation.
+ *
+ * @category Graphics
+ */
+export const FRONTFACE_CW = 1;
+
 /**
  * Point sample filtering.
  *

src/platform/graphics/graphics-device.js

@@ -14,7 +14,8 @@ import {
     INDEXFORMAT_UINT16,
     PRIMITIVE_POINTS, PRIMITIVE_TRIFAN, SEMANTIC_POSITION, TYPE_FLOAT32, PIXELFORMAT_111110F, PIXELFORMAT_RGBA16F, PIXELFORMAT_RGBA32F,
     DISPLAYFORMAT_LDR,
-    semanticToLocation
+    semanticToLocation,
+    FRONTFACE_CCW
 } from './constants.js';
 import { BlendState } from './blend-state.js';
 import { DepthState } from './depth-state.js';
@@ -772,6 +773,7 @@ class GraphicsDevice extends EventHandler {
         this.blendState = new BlendState();
         this.depthState = new DepthState();
         this.cullMode = CULLFACE_BACK;
+        this.frontFace = FRONTFACE_CCW;
 
         // Cached viewport and scissor dimensions
         this.vx = this.vy = this.vw = this.vh = 0;
@@ -839,6 +841,19 @@ class GraphicsDevice extends EventHandler {
         Debug.assert(false);
     }
 
+    /**
+     * Controls whether polygons are front- or back-facing by setting a winding
+     * orientation. The default frontFace is {@link FRONTFACE_CCW}.
+     *
+     * @param {number} frontFace - The front face to set. Can be:
+     *
+     * - {@link FRONTFACE_CW}
+     * - {@link FRONTFACE_CCW}
+     */
+    setFrontFace(frontFace) {
+        Debug.assert(false);
+    }
+
     /**
      * Sets the specified render target on the device. If null is passed as a parameter, the back
      * buffer becomes the current target for all rendering operations.

src/platform/graphics/null/null-graphics-device.js

@@ -126,6 +126,9 @@ class NullGraphicsDevice extends GraphicsDevice {
     setCullMode(cullMode) {
     }
 
+    setFrontFace(frontFace) {
+    }
+
     setAlphaToCoverage(state) {
     }
 

src/platform/graphics/webgl/webgl-graphics-device.js

@@ -335,6 +335,11 @@ class WebglGraphicsDevice extends GraphicsDevice {
             gl.FRONT_AND_BACK
         ];
 
+        this.glFrontFace = [
+            gl.CCW,
+            gl.CW
+        ];
+
         this.glFilter = [
             gl.NEAREST,
             gl.LINEAR,
@@ -2512,6 +2517,14 @@ class WebglGraphicsDevice extends GraphicsDevice {
         }
     }
 
+    setFrontFace(frontFace) {
+        if (this.frontFace !== frontFace) {
+            const mode = this.glFrontFace[frontFace];
+            this.gl.frontFace(mode);
+            this.frontFace = frontFace;
+        }
+    }
+
     /**
      * Sets the active shader to be used during subsequent draw calls.
      *

src/platform/graphics/webgpu/webgpu-clear-renderer.js

@@ -5,7 +5,8 @@ import {
     CULLFACE_NONE,
     PRIMITIVE_TRISTRIP, SHADERLANGUAGE_WGSL,
     UNIFORMTYPE_FLOAT, UNIFORMTYPE_VEC4, BINDGROUP_MESH, CLEARFLAG_COLOR, CLEARFLAG_DEPTH, CLEARFLAG_STENCIL,
-    BINDGROUP_MESH_UB
+    BINDGROUP_MESH_UB,
+    FRONTFACE_CCW
 } from '../constants.js';
 import { Shader } from '../shader.js';
 import { DynamicBindGroup } from '../bind-group.js';
@@ -138,6 +139,7 @@ class WebgpuClearRenderer {
             uniformBuffer.endUpdate();
 
             device.setCullMode(CULLFACE_NONE);
+            device.setFrontFace(FRONTFACE_CCW);
 
             // render 4 vertices without vertex buffer
             device.setShader(this.shader);

src/platform/graphics/webgpu/webgpu-graphics-device.js

@@ -740,7 +740,7 @@ class WebgpuGraphicsDevice extends GraphicsDevice {
                 // render pipeline
                 pipeline = this.renderPipeline.get(primitive, vb0?.format, vb1?.format, indexBuffer?.format, this.shader, this.renderTarget,
                     this.bindGroupFormats, this.blendState, this.depthState, this.cullMode,
-                    this.stencilEnabled, this.stencilFront, this.stencilBack);
+                    this.stencilEnabled, this.stencilFront, this.stencilBack, this.frontFace);
                 Debug.assert(pipeline);
 
                 if (this.pipeline !== pipeline) {
@@ -859,6 +859,10 @@ class WebgpuGraphicsDevice extends GraphicsDevice {
         this.cullMode = cullMode;
     }
 
+    setFrontFace(frontFace) {
+        this.frontFace = frontFace;
+    }
+
     setAlphaToCoverage(state) {
     }
 

src/platform/graphics/webgpu/webgpu-render-pipeline.js

@@ -72,6 +72,11 @@ const _cullModes = [
     'front'                 // CULLFACE_FRONT
 ];
 
+const _frontFace = [
+    'ccw',                  // FRONTFACE_CCW
+    'cw'                    // FRONTFACE_CW
+];
+
 const _stencilOps = [
     'keep',                 // STENCILOP_KEEP
     'zero',                 // STENCILOP_ZERO
@@ -107,7 +112,7 @@ class CacheEntry {
 }
 
 class WebgpuRenderPipeline extends WebgpuPipeline {
-    lookupHashes = new Uint32Array(14);
+    lookupHashes = new Uint32Array(15);
 
     constructor(device) {
         super(device);
@@ -141,11 +146,12 @@ class WebgpuRenderPipeline extends WebgpuPipeline {
      * @param {boolean} stencilEnabled - Whether stencil is enabled.
      * @param {StencilParameters} stencilFront - The stencil state for front faces.
      * @param {StencilParameters} stencilBack - The stencil state for back faces.
+     * @param {number} frontFace - The front face.
      * @returns {GPURenderPipeline} Returns the render pipeline.
      * @private
      */
     get(primitive, vertexFormat0, vertexFormat1, ibFormat, shader, renderTarget, bindGroupFormats, blendState,
-        depthState, cullMode, stencilEnabled, stencilFront, stencilBack) {
+        depthState, cullMode, stencilEnabled, stencilFront, stencilBack, frontFace) {
 
         Debug.assert(bindGroupFormats.length <= 3);
 
@@ -177,6 +183,7 @@ class WebgpuRenderPipeline extends WebgpuPipeline {
         lookupHashes[11] = stencilEnabled ? stencilFront.key : 0;
         lookupHashes[12] = stencilEnabled ? stencilBack.key : 0;
         lookupHashes[13] = ibFormat ?? 0;
+        lookupHashes[14] = frontFace;
         const hash = hash32Fnv1a(lookupHashes);
 
         // cached pipeline
@@ -206,7 +213,7 @@ class WebgpuRenderPipeline extends WebgpuPipeline {
         const cacheEntry = new CacheEntry();
         cacheEntry.hashes = new Uint32Array(lookupHashes);
         cacheEntry.pipeline = this.create(primitiveTopology, ibFormat, shader, renderTarget, pipelineLayout, blendState,
-            depthState, vertexBufferLayout, cullMode, stencilEnabled, stencilFront, stencilBack);
+            depthState, vertexBufferLayout, cullMode, stencilEnabled, stencilFront, stencilBack, frontFace);
 
         // add to cache
         if (cacheEntries) {
@@ -313,7 +320,7 @@ class WebgpuRenderPipeline extends WebgpuPipeline {
     }
 
     create(primitiveTopology, ibFormat, shader, renderTarget, pipelineLayout, blendState, depthState, vertexBufferLayout,
-        cullMode, stencilEnabled, stencilFront, stencilBack) {
+        cullMode, stencilEnabled, stencilFront, stencilBack, frontFace) {
 
         const wgpu = this.device.wgpu;
 
@@ -330,7 +337,7 @@ class WebgpuRenderPipeline extends WebgpuPipeline {
 
             primitive: {
                 topology: primitiveTopology,
-                frontFace: 'ccw',
+                frontFace: _frontFace[frontFace],
                 cullMode: _cullModes[cullMode]
             },
 

src/scene/graphics/quad-render.js

@@ -29,6 +29,7 @@ const _dynamicBindGroup = new DynamicBindGroup();
  * you should set up the following states as needed, otherwise previously set states will be used:
  * - Blend state via {@link GraphicsDevice#setBlendState}
  * - Cull mode via {@link GraphicsDevice#setCullMode}
+ * - FrontFace via {@link GraphicsDevice#setFrontFace}
  * - Depth state via {@link GraphicsDevice#setDepthState}
  * - Stencil state via {@link GraphicsDevice#setStencilState}
  *
@@ -46,6 +47,7 @@ const _dynamicBindGroup = new DynamicBindGroup();
  * // Set up render states before rendering
  * app.graphicsDevice.setBlendState(BlendState.NOBLEND);
  * app.graphicsDevice.setCullMode(CULLFACE_NONE);
+ * app.graphicsDevice.setFrontFace(FRONTFACE_CCW);
  * app.graphicsDevice.setDepthState(DepthState.NODEPTH);
  * app.graphicsDevice.setStencilState(null, null);
  *

src/scene/graphics/render-pass-quad.js

@@ -1,4 +1,4 @@
-import { CULLFACE_NONE } from '../../platform/graphics/constants.js';
+import { CULLFACE_NONE, FRONTFACE_CCW } from '../../platform/graphics/constants.js';
 import { DebugGraphics } from '../../platform/graphics/debug-graphics.js';
 import { DepthState } from '../../platform/graphics/depth-state.js';
 import { RenderPass } from '../../platform/graphics/render-pass.js';
@@ -20,6 +20,7 @@ class RenderPassQuad extends RenderPass {
         DebugGraphics.pushGpuMarker(device, `${this.name}:${this.quad.shader.name}`);
 
         device.setCullMode(CULLFACE_NONE);
+        device.setFrontFace(FRONTFACE_CCW);
         device.setDepthState(DepthState.NODEPTH);
         device.setStencilState(null, null);