Add frontFace support to render pipeline (#8447)

[AlexAPPi]

Fixes #8447

Description

This PR adds configurable frontFace (triangle winding order) to the rendering pipeline and material/mesh state so that users can correctly define which side of a triangle is considered “front” for culling and lighting. It wires the option through both WebGL2 (gl.frontFace) and wgpu (wgpu::FrontFace).

https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/frontFace
https://developer.mozilla.org/en-US/docs/Web/API/GPUDevice/createRenderPipeline#frontface

material.frontFace = pc.FRONTFACE_CW;

device.setFrontFace(pc.FRONTFACE_CW);

Checklist

• I have read the contributing guidelines
• My code follows the project's coding standards
• This PR focuses on a single change

[willeastcott]

I'd probably prefer frontFace to frontFaceMode. Nicely parallels with OpenGL's glFrontFace.

[mvaligursky]

• handling of this per material is done in setBaseConstants, but this is only called by shadow renderer, but not forward renderer, and so forward renderer completely ignores this material property. I think it can be moved to setupCullMode.

[mvaligursky]

• handling of this per material is done in setBaseConstants, but this is only called by shadow renderer, but not forward renderer, and so forward renderer completely ignores this material property. I think it can be moved to setupCullMode.

I don't see this being addressed yet.

[mvaligursky]

also please resolve conflicts

[mvaligursky]

Looks great, thanks!

[Copilot]

Pull request overview

This PR adds support for configurable front face (triangle winding order) to the PlayCanvas rendering pipeline. The feature allows developers to specify whether triangles are front-facing based on clockwise (CW) or counter-clockwise (CCW) winding order, which is essential for correctly handling different coordinate systems and model formats.

Changes:

• Added FRONTFACE_CCW and FRONTFACE_CW constants to the graphics constants
• Added frontFace property to the Material class with default value of FRONTFACE_CCW
• Implemented setFrontFace() method in all graphics device backends (WebGL, WebGPU, and Null)
• Integrated frontFace setup into the rendering pipeline (forward renderer, shadow renderer, and various render passes)

Reviewed changes

Copilot reviewed 19 out of 19 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
src/platform/graphics/constants.js	Defines FRONTFACE_CCW and FRONTFACE_CW constants
src/platform/graphics/graphics-device.js	Adds base setFrontFace() method and initializes frontFace state
src/platform/graphics/webgl/webgl-graphics-device.js	Implements WebGL-specific setFrontFace() using gl.frontFace()
src/platform/graphics/webgpu/webgpu-graphics-device.js	Implements WebGPU-specific setFrontFace() state management
src/platform/graphics/webgpu/webgpu-render-pipeline.js	Updates render pipeline cache to include frontFace in hash computation and pipeline creation
src/platform/graphics/webgpu/webgpu-clear-renderer.js	Sets default FRONTFACE_CCW for clear operations
src/platform/graphics/null/null-graphics-device.js	Adds no-op setFrontFace() implementation
src/scene/materials/material.js	Adds frontFace property to Material class and includes it in copy() method
src/scene/renderer/renderer.js	Adds setupFrontFace() method and integrates it into setBaseConstants()
src/scene/renderer/forward-renderer.js	Calls setupFrontFace() during mesh instance rendering
src/scene/renderer/shadow-renderer.js	Calls setupFrontFace() during shadow rendering
src/scene/renderer/render-pass-cookie-renderer.js	Sets default FRONTFACE_CCW for cookie rendering
src/scene/graphics/render-pass-shader-quad.js	Adds frontFace property with default and applies it during rendering
src/scene/graphics/render-pass-quad.js	Sets default FRONTFACE_CCW for quad rendering
src/scene/graphics/quad-render.js	Updates documentation to mention setFrontFace()
src/scene/gsplat/gsplat-resolve-sh.js	Sets default FRONTFACE_CCW for spherical harmonics resolution
src/scene/gsplat-unified/gsplat-work-buffer-render-pass.js	Sets default FRONTFACE_CCW for gaussian splat work buffer rendering
src/scene/particle-system/gpu-updater.js	Sets default FRONTFACE_CCW for particle GPU updates
src/extras/renderers/outline-renderer.js	Sets default FRONTFACE_CCW for outline rendering

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.