fwidth
Calculates the total rate of change of a value across adjacent pixels in screen space, equivalent to abs(dFdx) + abs(dFdy). It's primarily used to measure the screen-space 'width' of a procedural edge to enable smooth anti-aliasing.
Core Advantages
Achieves true resolution independence. Anti-aliasing effects created with fwidth maintain a consistent visual width (e.g., a 1-pixel soft edge) at any resolution or camera distance, making it a cornerstone of high-quality procedural graphics.
Common Uses
Providing perfect anti-aliasing for procedurally generated lines, grids, and shapes.
Drawing constant-width outlines in cel-shading by analyzing the gradient of the dot product between the normal and view direction.
Implementing custom texture filters to eliminate moiré patterns at a distance or oblique angles by calculating the rate of change of UV coordinates.
How to adjust
You don't adjust fwidth directly; you observe its response by changing its input. Visualizing fwidth(uv()) reveals perspective distortion. Its key feature is that even if you scale the input (e.g., uv.x * 10), fwidth's output becomes proportionally larger, which perfectly cancels out the steeper input change within a smoothstep, resulting in a visually constant anti-aliased edge width on screen. This demonstrates resolution independence.
Code Examples
1// p is the value defining the shape, e.g., uv.x
2const width = fwidth( p );
3// Use the calculated width to create a smooth transition, replacing a hard step()
4const antiAliasedEdge = smoothstep( 0.5 - width, 0.5 + width, p );