Choosing a 3D CAD Viewer
We’ve been putting 3D models on the web since 1994, but doing it well is tricky. The more I learn, the more complicated it seems. mitxela built their own viewer and wrote a good writeup. Among other things, it reveals a glimpse of the complexity of camera control. I want to write articles showcasing CAD models in an interactive web viewer. I looked toward existing options for inspiration.
§ Sketchfab
The first 3D viewer I found was Sketchfab. Sketchfab says it’s the “best 3D viewer on the web”. I don’t know about that, but I do like the annotations.
A model annotation from the Sketchfab Annotation Demo
If I were to use Sketchfab, Sketchfab would host my 3D models. I’d add an iframe with a particular Sketchfab URL to a page, and web browsers would create a page-within-a-page to show the viewer. Sketchfab has a JavaScript API that lets developers interact with the viewer in the iframe to develop some custom features.
Sketchfab’s viewer is hosted by Sketchfab, and my site would just refer to it. If Sketchfab changed their viewer, the viewers on my pages would change, whether I wanted it or not. If Sketchfab had an outage, my pages would be broken. If Sketchfab went out of business, I’d have to scramble to replace them. If the Sketchfab viewer were open source or if I could host it, I’d be less concerned. I've found that relying on this type of service tends to create emergencies for me. The more services like this I use, the more frequently my work is driven by upstream changes. Having something I host, something I update, helps reduce those emergencies. Being able to use a previous version is really helpful! Furthermore, my ability to modify the viewer is limited.
For the features I’d like, Sketchfab seems expensive. I think Sketchfab would cost me at least $129 per month.
I don’t think Sketchfab is a good fit for a 3D viewer for ATOM
§ Autodesk Viewer
Autodesk has a web viewer. I can save my Fusion 360 projects to their storage and look at them in the browser. The viewer displays the model to look just like it does in Fusion 360. You can rotate and zoom, measure parts of the model, run saved animations, and show and hide parts of the model. I can make the project public and embed the viewer into a page.
The Autodesk viewer wouldn’t cost me anything extra, but my other concerns about Sketchfab apply here.
§ Goals
After Sketchfab and the Autodesk viewer, I had a better sense of what I wanted.
-
I don’t want to use a viewer that’s an
iframeto an external site or one that only shows models hosted at an external site. I want to be able to host the models and the viewer. -
I want to be able to modify the viewer. It should be open source.
-
I need to add text to call out model features to discuss design decisions. These are called “annotations” or “hotspots”.
After surveying more viewer options, I grouped them into categories.
§ Framework viewers
Framework viewers are more like libraries or examples than applications. They handle many complexities but would require development work to integrate into a site.
-
Three.js is an open-source JavaScript library for 3D graphics in the browser. It uses WebGL, and it can use WebXR to do Virtual Reality (VR) things. It has good docs, a bunch of examples, and it’s been around since 2010. It’s pretty awesome. Most of the other options on this page are either built on three.js or built on things built on three.js.
I’m not sure three.js has a viewer. They have an editor and many loader examples. I’d definitely have to build a lot of the features I want.
-
A-Frame is a fun web framework built on top of three.js, meant for VR. My first VR development experience used A-Frame. I made a demo that played videos and used a controller for 3D space data logging. After getting through some conceptual hoops around VR development, using A-Frame was really quick. I liked it, but I don’t think I’d use A-Frame for this project.
-
Babylon.js’s viewer (example)
Babylon.js is similar to three.js, but the library is a bit less graphics-y and a little more “game engine-y”. The Babylon.js model viewer has a lot of features: animations, asynchronous loading of models, the Babylon.js Inspector. I didn’t see annotations, and the interface would need to be modified.
§ Viewer “applications”
These viewers are meant to be used as-is. They vary widely, and I gave some only a glance.
-
Don McCurdy’s three-gltf-viewer (GitHub)
This viewer is built on three.js. It supports animations but doesn’t appear to support annotations or VR/AR/WebXR.
-
kovacsv’s Online3DViewer (GitHub)
I don’t know a lot about kovacsv’s Online3DViewer. It’s open source and uses three.js. The viewer is embedded using an iframe. I don’t think it has annotations or VR/AR/WebXR support.
-
View3D (GitHub)
View3D is built on three.js. It’s open source. It supports annotations and animations. It supports augmented reality through WebXR, Android’s Scene Viewer, and iOS’s AR Quick Look. It appears to be maintained by a South Korean company called Naver. -
ThreePipe is built on three.js. ThreePipe says it has a “simple, intuitive API for creating 3D model viewers/configurators/editors on web pages, with many built-in presets for common workflows and use-cases.” It has plugins, including one for Gaussian splats. Gaussian splats don't seem helpful for this project, but they're interesting! It doesn’t appear to support WebXR/AR/VR yet, and it doesn’t appear to support annotations.
-
model-viewer is a Google project. It’s open source and built on three.js. It’s got a lot of examples. It supports annotations, and AR through WebXR, AR Quick Look, and Scene Viewer. VR support seems to be in progress. It has an example showing model dimensions. There is good integration between the 3D viewer and the rest of the webpage. It feels “in the spirit of the web”.
model-viewer has a lot of polish. It can show an “interaction prompt” animation on the model, giving visitors an affordance that the model isn’t a static image. model-viewer has an editor to help with configuration. The model-viewer folks care about and track [page load performance].(https://modelviewer.dev/examples/lighthouse.html) Asynchronously loading model-viewer decreases its impact on page load performance, but model-viewer is still 60+ KB. Lite model-viewer is an easy-to-use third-party wrapper that defaults to only loading model-viewer after the visitor interacts with the model image. For a visitor that isn't going to interact with the model, using lite-model-viewer means the page size is only around 3 KB larger than just showing the image! model-viewer starts with a pre-rendered image of the scene and seamlessly replaces it with the interactive model when the model file loads. This is “in the spirit of the web” and heavily influenced my decision to start with model-viewer.
Another way model-viewer aligns with the web is that it’s a Web Component. You don’t need to write JavaScript to put a model on your page. You can add a
<model-viewer>tag. Awesome!model-viewer is open to modifications. model-viewer-effects provides postprocessing effects, like pixelation, glitching, and antialiasing. Additionally, I could hook into three.js and modify things how I like.
§ Conclusion
I’m going to start with model-viewer, but not without reservation.
model-viewer is maintained by folks from Google. While I’m cautious of Google’s history of discontinuing projects, the open-source nature of model-viewer gives me reassurance. When Google decides it’s done with model-viewer, the community might maintain it, but I could continue to use the last version while migrating to another option, like View3D or ThreePipe.
My next step is to discover the rest of my finicky requirements as I integrate model-viewer into ATOM
If this was helpful or enjoyable, please share it! To get new posts, subscribe to the newsletter or the RSS/Atom feed. If you have comments, questions, or feedback, please email me.