Replace BSP Sorting with Fast Z-Sort

[Harsh9485]

Overview

This PR replaces the slow BSP (Binary Space Partitioning) face sorting algorithm with a fast Z-sort algorithm in the renderer. These changes make the renderer much faster and easier to maintain, especially for scenes with many faces.

---

Key Changes

1. Z-Sort Algorithm for Face Ordering

• What is Z-Sort?

  • Instead of recursively splitting and sorting faces (BSP), Z-sort simply sorts all faces by their average Z value in camera space.
  • Faces farther from the camera are drawn first, and nearer faces are drawn last (on top).
  • This mimics the effect of Z-buffering (used in hardware graphics) but is done at the face level for SVG.

• Why Z-Sort?

  • Z-sort is O(N log N) instead of O(N^2) for BSP.
  • For most scenes (boxes, convex meshes), Z-sort produces visually correct results and is much faster.
  • It avoids complex recursion and polygon splitting, making the code easier to understand and maintain.

• How does it work?

  • For each face, calculate the average Z value of its vertices in camera space.
  • Sort all faces by this value, farthest to nearest.
  • Render faces in this order for correct overlap.

---

Impact

• Render times reduced from hundreds of ms to tens of ms for typical scenes.
• SVG output and interactive viewer are much smoother.
• Code is easier to read, debug, and extend.
• Maintainers can easily switch between Z-sort and BSP if needed.

---

/claim #56

videos :-

Screen.Recording.2025-09-27.113209.mp4

Screen.Recording.2025-09-27.114211.mp4

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
simple-3d-svg	Ready	Preview	Comment	Sep 27, 2025 6:01am

[seveibar]

We're looking for an algo optimization for the claim

[Harsh9485]

We're looking for an algo optimization for the claim

Oh, sorry that’s my mistake
This change looks good, you should check it out.

[baeoc]

reduce rending time
https://simple-3d-eol974rx7-tscircuit.vercel.app/?fixture=%7B%22path%22%3A%22examples%2Fdragrotate%2Fdragrotate03.page.tsx%22%7D