When rendering models for engineering or architecture it’s common to convert the model to a vectorized, scalable image with an ortho projection that can be used as things like blue prints, manual illustrations, documentation, etc. The three-edge-projection project provides the tools for doing just this in three.js - based on three-mesh-bvh and (more recently) compute shaders to keep things fast.
Hidden Lines
The technique used for generating images like this is called “Hidden Line Removal” - referring to clipping and removing edges that are covered by foreground geometry. In practice this means checking every line against the triangles in front of it and trimming out the hidden segments. As you might imagine this is a time consuming task but using spatial data structures, like a bounding volume hierarchy from three-mesh-bvh, the relevant triangles for each line be filtered much more quickly. So at a high the algorithm looks like so:
- Generate all candidate edges from the silhouette, creases, and (optionally) self-intersections.
- Iterate over every line, and find every triangle that may lie above it.
- Calculate the overlap of the line with each triangle, merging the overlapping line segments as you go.
- Construct the final vector objefct by adding the segments from each line that were not overlapping with an above triangle to a line gometry.
There’s a lot of other optimization and tricks in there to filter out candidate edges and triangles but that’s the gist!
Making it Faster
Even with spatial data structures, this kind of clipping can take awhile with complex scenes & geometry but by leveraging a new three-mesh-bvh compute-shader node, we can offload & parallelize all of the BVH query traversal and overlap detection to the GPU before reading the overlaps back to the CPU to construct the final vector shape. The improvements are more dramatic with more complex models but in some extreme cases with hundreds of thousand of meshes and millions of lines this brings the processing time down from almost 2.5 minutes to ~13 seconds: over 90% improvement!
Draw Through Lines
By taking the inverted versions of the segments we can easily create a draw-through effect showing the internal structures and hidden mechanisms.
Colored Lines
One of the latest features includes support for storing ranges of lines per-mesh, so you can specially-render each component based on mesh metadata, such as tinting by color. The ThatOpen company has helped get this new structural model demo added to the project - only fitting considering all this start as a collaboration with IFC.js!
There’s always more improvements to make but I’ve pretty happy with how the look and speed of the processing and come along. I haven’t seen too many write ups (or open implementations) of this kind of processing so I’m hoping it can prove to be helpful. And please do share your work if you can!