mx_aastep
An anti-aliased step function node used to create smooth, alias-free edges in procedural graphics.
Core Advantages
It uses screen-space derivatives to automatically generate a smooth edge that is exactly one pixel wide, adapting to any resolution and zoom level, which significantly improves the visual quality of procedural graphics.
Common Uses
Procedurally drawing geometric shapes: Use with distance fields to draw circles, squares, etc., with smooth edges.
Generating smooth procedural patterns: Ensure the boundaries in stripes, dots, and other patterns are alias-free.
Creating smooth blending masks: Achieve natural transitions between different materials like snow and rock.
How to adjust
Control the edge's position by changing the `threshold` parameter (e.g., a circle's radius); alter the overall shape by mathematically manipulating the `value` input (e.g., adding a sine wave to a distance field), and its edge will remain smooth.
Code Examples
1
2// Define the circle's center and radius
3const center = vec2( 0.5, 0.5 );
4const radius = float( 0.25 );
5
6// Calculate the distance from the current fragment's UV to the center
7const dist = distance( uv(), center );
8
9// Smoothly transitions from 0 to 1 as dist exceeds radius
10const stepValue = mx_aastep( radius, dist );
11
12// Invert the result to make the circle's interior 1 (white)
13const circle = float( 1.0 ).sub( stepValue );
14