Anti-aliasing SDF Shapes in Three.js

Looking at your question about smoothing the edges of an SDF sphere using fwidth and smoothstep, I can provide some guidance on implementing anti-aliasing for SDF shapes.

When working with signed distance functions (SDFs), the key to proper anti-aliasing is to use the gradient of the distance field to determine the appropriate smoothing width.

Approach for Anti-aliasing SDF Edges

For a sphere SDF, you can implement anti-aliasing with the following approach:

GLSLCopied
// In your fragment shader:
float sphereSDF(vec3 p, float radius) {
    return length(p) - radius;
}

void main() {
    // Calculate position
    vec3 p = vPosition;
    
    // Calculate the SDF value
    float d = sphereSDF(p, 1.0);
    
    // Calculate the gradient of the SDF for anti-aliasing
    float width = fwidth(d);
    
    // Apply smoothstep for anti-aliasing
    float alpha = 1.0 - smoothstep(-width, width, d);
    
    // Apply color
    gl_FragColor = vec4(vec3(1.0), alpha);
}

The key insight here is that fwidth(d) gives you the rate of change of your distance field across adjacent pixels, which is perfect for determining how much smoothing to apply.

Explanation

1. fwidth(d) computes the sum of the absolute derivatives of the distance field in both x and y directions
2. This gives you an appropriate width for the anti-aliasing based on how quickly the distance field changes
3. Using this width in smoothstep(-width, width, d) creates a smooth transition at the boundary where d = 0

For more complex shapes, the same principle applies - you calculate the SDF value and then use fwidth() on that value to determine the appropriate smoothing width.

If you need to adjust the amount of anti-aliasing, you can multiply the width by a factor:

GLSLCopied
float width = fwidth(d) * 1.5; // Increase smoothing width by 50%

This technique should work well for your sphere SDF and can be applied to other SDF shapes as well.