Experimenting with CAD models in model-viewer

Summary: I use Blender to export models from Fusion 360 to model-viewer, and I investigate unexpected visual problems.

Assumed audience: folks on the web

Project: part of Showcasing 3D CAD Models on the Web

Tags: web, computers, 3D graphics

Created:

After exploring options for showcasing 3D CAD models on the web and compiling a list of desired features, I’m ready to experiment with Google’s model-viewer, using a real model I’ve been working on.

I’m making a small case for a T-Display S3 with a few buttons, a cutout for the screen and the USB-C port, a small prototyping PCB, and two Molex SL connectors. I exported some images from the modeling view in Fusion 360. Fusion 360, a closed-source CAD suite, is my go-to for engineering 3D models. Although Autodesk recently added some features I've been wanting for years, like Configurations, I worry about its future. Wikipedia informs me it's been recently rebranded as just "Fusion".

A cropped screenshot from Fusion 360 showing the plastic case, connectors, and the display of the T-Display S3

Showing all the components in Fusion 360’s modeling view

To show the case details, I hid the electronics and the connectors.

A cropped screenshot from Fusion 360 showing the plastic case without the electronics or connectors. The cutout for the display reveals internal standoffs.

Showing only the printed components in Fusion 360’s modeling view

Exporting from Fusion 360

model-viewer requires models in glTF format (or GLB, glTF’s binary equivalent). Fusion 360 doesn’t export to these formats without a plugin. I found two proprietary glTF exporters, one by ProtoTech Solutions and another by SimLab, but I want to avoid a closed-source plugin. Based on the model-viewer FAQ’s recommendation, I decided to try Blender as a converter. I like Blender. Blender is open source, and it's used by professionals and hobbyists. I haven't spent more than an hour or two with it. though, which isn't even enough time to make a good donut.

I exported the model from Fusion 360 in both FBX and USDz formats for comparison.

FBX

FBX is a proprietary file format controlled by Autodesk.

When importing the FBX into Blender using defaults, the model was oddly oriented.

A screenshot of Blender showing the plastic case on its end.

FBX model imported into Blender

After some tinkering, I found that setting the import options for Manual Orientation to “Y Forward” and “Z Up” in Blender’s FBX import dialog resolved the orientation issues. Exporting to glTF 2.0 with the “+Y Up” option checked produced a correctly oriented model in model-viewer.

To check scaling, I used the validation report in model-viewer’s editor. The model dimensions matched the dimensions in Fusion 360.

A screenshot of model-viewer's editor showing the plastic case from the side with similar colors as the CAD view. The right side of the editor shows controls and sample HTML.

Fusion 360 to FBX to glTF 2.0 via Blender, viewed in model-viewer’s editor

With the Manual Orientation adjustment on importing FBX and the +Y Up option set when exporting to glTF 2.0, the glTF file has the correct orientation and scale.

USDz

USDz is an open-source format developed by Pixar, with wide support in Apple products. It’s part of Universal Scene Description (USD).

Importing the USDz file into Blender maintained the correct orientation, but I encountered scaling issues. Setting the import scale to 0.001 in Blender’s import dialog resolved this problem.

A screenshot of model-viewer's editor showing the plastic case from the side with similar colors as the CAD view, but slightly different than the version exported through FBX. The right side of the editor shows controls and sample HTML.

Fusion 360 to USDz to glTF 2.0 via Blender, viewed in model-viewer’s editor

With the scale adjustment on importing USDz and the +Y Up option set when exporting to glTF 2.0, the glTF file has the correct orientation and scale.

Rendering Challenges

With the model successfully imported into model-viewer, I quickly realized that, compared to Fusion 360’s modeling view, it was difficult to see details in the model in model-viewer.

A screenshot of model-viewer's editor showing the plastic case from above, with uniform coloring and few shadows.

model-viewer rendering with “neutral” lighting environment

model-viewer lets you control the lighting and environment around the model. The previous image showed the model using the default scene with even lighting on all sides.

model-viewer also has a “legacy” environment meant for frontward viewing.

A screenshot of model-viewer's editor showing the plastic case from above. The model is well lit, but not uniformly lit, and the front right face is slightly shadowed.

model-viewer rendering with “legacy” lighting environment

The “legacy” environment reveals more details than the “neutral” environment. Neither option came close to the clarity of Fusion 360’s modeling view with its outline rendering.

Understanding the Rendering Differences

This isn’t a case of model-viewer or glTF being “bad”. model-viewer does a great job rendering glTF.

model-viewer rendering a detailed, futuristic helmet. It looks realistic.

model-viewer rendering a damaged helmet, one of the example models in model-viewer’s editor

glTF aims for photorealistic results through “physically based rendering”. glTF's physically based rendering (PBR) uses "Bidirectional Scattering Distribution Functions" and microfacets to model light interactions with surfaces. glTF includes a consistent set of parameters, helping to standardize PBR across various rendering engines. The Khronos Group, the consortium behind glTF, has a detailed explanation of PBR in glTF.

Good results from physically based rendering need good parameters and textures for the materials. In Fusion 360, I don’t usually do much with materials, textures, or colors. For this model, I set the material to “Plastic” and set the colors to some defaults. The materials were exported through an intermediate format into glTF 2.0. Materials in physically based rendering have a base color and some surface parameters, but the rendered color of the surface may be quite different from the base color. Just like in the real world, the color of the light that bounces off a material isn't just the color of the material. It's influenced by the surface details and what the light was like before it interacted with the material. There are interactive lighting and color examples in the Lighting & Skybox model-viewer examples section. model-viewer's "neutral" lighting environment was engineered to color materials closely to the material's base colors. For more, read "Achieving Color-Accurate Presentation with glTF" and "Tone Mapping Considerations for Physically-Based Rendering". Even if I do well with the materials (and lighting), though, I should expect the render to show detail like a photo. I think the Fusion 360 modeling view does better than a photo.

Exploring solutions

Can I turn on outlines like in Fusion 360’s modeling view? model-viewer supports model-viewer-effects, an extension that changes the visuals. model-viewer-effect has an outline effect, but it only adds an outer outline around objects, not internal edges.

Don’t lose hope! All of this is open source. model-viewer-effects uses postprocessing, a library that makes effects using vertex and fragment shaders. If I can’t use postprocessing, I could plumb through model-viewer into three.js.

Next steps

Can I add outlines to model-viewer? "The Programmers’ Credo: we do these things not because they are easy, but because we thought they were going to be easy", pinboard I have no experience with WebGL, three.js, or postprocessing. I am not sure what a shader is. Let’s find out!

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.

Part of Showcasing 3D CAD models