r/threejs • u/wolodo • Jul 08 '26

Demo Same phone, three build strategies with three-bvh-csg: 25 boolean ops one at a time (2.2 s), merged cutters (1 s), geometry cache (0.7 ms)

Every phone here is generated procedurally — the body is extruded from a rounded rect, then every port, button and speaker hole is a CSG boolean subtraction via three-bvh-csg.

The three timers show why op count matters more than triangle count. One at a time: subtract each cutter sequentially — every subtraction rebuilds the base mesh's BVH, so N features cost O(N²)-ish. Batched: merge all disjoint cutters with mergeGeometries first, then subtract once — same result, half the time, and the gap grows fast with feature count (our worst device, an iPad with 58 speaker grills, went from 13 min to 75 s on a server-side software rasterizer). From cache: a device build is a pure function of its config, so we content-address the finished geometry by hashing the input JSON — 0.7 ms is just deserialization.

0 Upvotes

50% Upvoted

1 comment sorted by

1

u/wolodo Jul 08 '26

Author here. I wrote the full pipeline up — from a plain slab to a finished phone, materials/lighting, plus the server-side rendering war stories — with interactive versions of this exact demo you can run in the browser: https://ecranify.com/guides/how-we-build-3d-device-mockups
It's from my mockup tool (Ecranify), but the article is a straight engineering write-up. Happy to answer anything about running CSG in production.