SDF Shape Blend

Use signed distance fields and smooth min to merge simple shapes into one cohesive form.

Overview

• Start from a rounded box and a circle.
• Compute a distance field for each shape.
• Blend them with smooth min.
• Add both fill and outline so the result reads clearly.

Learning Objectives

• Build a compound graphic from multiple SDF shape functions
• Use smooth min to create soft blending between shapes
• Improve readability with separate fill and outline layers

Prerequisites

• distance-field-rect
• rounded-rect
• smooth-min

Key Concepts

• SDF shapes become powerful when they are combined, not just rendered alone.
• smooth min merges shapes more naturally than a hard min.
• A clean outline helps show where the blend really happens.

How To Implement (Step-by-step)

1. Build one distance field for a rounded box.
2. Build another for a circle offset from the box.
3. Blend the two distances with smooth min.
4. Use one mask for the fill and another narrow band for the outline.
5. Mix background, fill color, and outline color.

Self-check

• Do the two shapes blend smoothly instead of intersecting harshly?
• Is the outline still readable around the merged silhouette?
• Does the final shape feel like one object instead of two disconnected parts?

Common Mistakes

• Using hard min() instead of smooth min.
• Making the smoothing factor too large, which collapses the silhouette.
• Using only a fill mask, which hides the shape structure.

Answer Breakdown

This capstone turns SDF primitives into a compositional tool.

Base Shapes

The rounded box gives a stable body, while the circle adds a secondary lobe.

Smooth Merge

Smooth min blends the distances so the transition between shapes becomes soft and organic.

Fill and Outline

The fill defines mass. The outline clarifies the contour and makes the blend easier to see.