Appearance
Render Pipeline
clear canvas
│
▼
╔══════════════════════════╗
║ PHASE 1: DATA ║
║ figure out what's ║
║ visible — once ║
╠══════════════════════════╣
║ ║
║ 1. project vertices ║
║ │ ║
║ ▼ ║
║ 2. grid + shadow ║
║ │ ║
║ ▼ ║
║ 3. fill faces ║
║ │ ║
║ ▼ ║
║ 4. occlusion index ║
║ │ ║
║ ▼ ║
║ 5. visible segments ║
║ │ ║
║ ▼ ║
║ 6. facets ║
║ ║
╠══════════════════════════╣
║ PHASE 2: DRAW ║
║ everybody draws from ║
║ the same answer ║
╠══════════════════════════╣
║ ║
║ 7. intersection lines ║
║ │ ║
║ ▼ ║
║ 8. edges ║
║ │ ║
║ ▼ ║
║ 9. overlays ║
║ ║
╚══════════════════════════╝The nine stages
- Project — push every vertex through the camera. cache screen positions.
- Grid — optional background grid and ground shadow.
- Fill — front-facing faces sorted back-to-front, filled white. painter's algorithm.
- Occlusion index — for each front-facing face: compute plane, screen polygon, tag edges as silhouette or internal, build spatial index.
- Visible segments — the heavy pass. clip edges and intersection lines against occluding faces. filter fake visible gaps. create endpoints. build the segment data everyone else uses.
- Facets — build graph from segments and endpoints. trace closed regions on selected face. paint them.
- Intersection lines — stroke precomputed visible segments.
- Edges — draw from precomputed segments. batch by role: normal, guidance, rotation.
- Overlays — wireframes, axes, hover, selection dots, dimensions, labels.
The throughline
Compute visible segments once (stage 5), use them everywhere. Edges, intersections, and facets all drink from the same well.