frontFacing
Provides a boolean value in a TSL shader that indicates if the current fragment belongs to the 'front face' of a polygon, directly corresponding to the GLSL built-in `gl_FrontFacing`.
Core Advantages
It is the only authoritative, zero-cost, and completely reliable way to distinguish between the front and back of a face, forming the foundation for true double-sided materials where each side can have a different appearance.
Common Uses
Applying different colors or textures to the front and back sides of an object, like a playing card.
Highlighting exposed interior surfaces (back faces) in model cross-sections with a special color.
Correcting lighting for double-sided materials by ensuring the normal vector always faces the camera.
As a debugging tool to check for flipped normals in a model by displaying them in a different color.
How to adjust
This node's value is not adjustable. Its boolean value (true/false) is determined by the camera's viewing angle relative to the geometric face. To be effective, the material's `side` property must be set to `THREE.DoubleSide` in JavaScript.
Code Examples
1// If it's the front face, use the frontSideColor; otherwise, use the backSideColor.
2outputNode.color = cond( frontFacing, frontSideColor, backSideColor );
3
4// To ensure correct double-sided lighting, make the normal always face the camera.
5const facingNormal = cond( frontFacing, normal, negate( normal ) );