Showcasing 3D CAD models
I want to showcase 3D CAD models on the web. I want to call out particular details with annotations. I want folks to be able to zoom in or look at the model from any angle. I want to be able to turn components on and off. I want to be able to show a banana for scale.
Like the rest of my site, I want this to be accessible. It should be quick to load. It should be progressively enhanced, and work well across browsers, devices, and network conditions. I want it to be slick via a touchscreen, a mouse and keyboard, or even Augmented Reality (AR) or Virtual Reality (VR). I want it to be slick when it’s printed out!
I looked at options, created a list of goals, and exported models and looked at them with model-viewer. I was surprised, but I needed outlines to move forward. I didn’t know what I was doing when I started, but I created a post-processing effect that uses a custom shader to add outlines to model-viewer.
model-viewer using a custom shader that highlights outlines
the same model using model-viewer with default settings
The generated outlines aren’t perfect, but they look pretty good! Even though the model without outlines seems washed out and bogus, model-viewer is impressive. model-viewer uses physically based rendering and rewards folks who take care with materials, textures, and lighting. Here, I've done none of that.
Once the outline effect is cleaned up, I’ll try to showcase a model with annotations. It might be good enough to use it in public while developing the remaining features!