faceDirection
Provides a numerical value in TSL shaders (1.0 for front-faces, -1.0 for back-faces) to distinguish polygon orientation, acting as a numeric wrapper for the underlying `frontFacing` boolean state.
Core Advantages
Greatly simplifies shader logic by converting a boolean state into a float. It is ideal for use as a factor in mathematical operations (especially the `mix` function), avoiding conditional branches and resulting in cleaner, more functional TSL code.
Common Uses
As a factor for the `mix` function to blend different colors or textures for the front and back sides of an object.
In toon shading, to identify back-faces for implementing the 'inverted hull' outline technique.
Dynamically adjusting the intensity of effects like Fresnel on the inner and outer surfaces of an object.
As a debugging tool, mapping front and back faces to different colors to inspect model normals.
How to adjust
This node's value is not adjustable. Its output is a fixed 1.0 (front-face) or -1.0 (back-face). The key is how this value is used, typically by remapping it to the [0, 1] range to serve as a mixing factor. To be effective, the material's `side` property must be set to `THREE.DoubleSide` in JavaScript.
Code Examples
1// Remap the [-1, 1] output range of faceDirection to [0, 1]
2const alpha = faceDirection.add( 1.0 ).mul( 0.5 );
3
4// Use alpha to mix between a back-face color and a front-face color
5// When it's a back-face, alpha=0, resulting in backColor
6// When it's a front-face, alpha=1, resulting in frontColor
7const finalColor = mix( backColor, frontColor, alpha );