As part of our new company website, I wanted to generate some eye-catching visuals.
You can see the finished site here : http://didacticservices.co.uk
Our company specialises in high-tech engineering, and our website should reflect that, while also being engaging - The website is primarily a showcase for our range... more like a showroom than a technical handbook.
I had started experimenting with 3D in the web a few years back, and tried using three.js directly, as well as number of other frameworks.
I had also looked at using game engine exporters such as godot, but these had all felt clumsy
Model-viewer
Thankfully, plugins for this have matured a bit, and i was now able to use google model-viewer, for a quick intergration.
model-viewer is built on three.js, so has a solid backend, but helps by providing some simple touch controls, orbit, and camera settings.
Conversion
DWG --> GLB --> Blender --> GLB --> GLB*MESHOPT
My Files start life as .dwg files - A type of annoyingly propriotory CAD file.
In order to use these online I need to go through a fairly painstaking process of conversion.
First we export them to .GLB format
The .DWG editor is windows-only, so we use a remote-desktop machine to do this work
Then we import to Blender.
We use plugins AnimAll and Govie Tools to assist in animating
(GLB format supports only one animation track, so these tools help to enforce this, and merge animations, or convert mesh animations to keys)
Update: Baking AnimAll mesh animation to shape keys
One slightly fragile part of this workflow is converting Blender mesh animation into something that survives a .glb export.
For this, the most reliable route I found is to use AnimAll for the animation, then use NewTek MDD as an intermediate point-cache format. MDD stores the mesh vertex positions per frame, and when imported back into Blender it can create shape keys from that cache.
The important constraint is that this works best when the animated object is one mesh. If the model is made from lots of separate parts, join or merge the animated parts into a single mesh first.
The workflow:
1. Merge the animated parts into one mesh.
2. Apply scale so the object scale is 1,1,1:
Object Mode → Ctrl+A → Scale
3. Animate the mesh using AnimAll.
4. Export the animation using the NewTek MDD extension:
File → Export → Lightwave Point Cache (.mdd)
5. Save the Blender file.
6. Import the MDD back onto the mesh:
File → Import → Lightwave Point Cache (.mdd)
7. Check the generated shape keys.
8. Export the final result as GLB.
Applying scale before the MDD step is important. If the object scale is not 1,1,1, the animation may import back at the wrong size, because the MDD cache is just storing vertex positions rather than Blender object transforms.
Also, make sure the mesh topology does not change between export and import. The MDD file expects the same vertex count and vertex order. Avoid remeshing, decimating, applying different modifiers, or importing onto a different copy of the model.
At the time of writing, this MDD import workflow works in Blender 4.5, but the import appears to be broken in Blender 5 because the NewTek MDD extension still touches Blender’s older animation API. The workaround is to do the MDD conversion step in Blender 4.5, then continue the rest of the pipeline from there.
Back to GLB and Compression
After Blender, we can then re-export back to .GLB format.
Are we done? No - Not yet.
In order to reduce the file size and speed up the webpage, we want to use a program called gltfpack This will help to optimise the mesh
We have to use a meshopt unpacker extension later! but it reduces load time for the broweser so this is still worth while!
Side note : Some files dont optimise very well - moving transparent parts in particular seem to have issues.
Gltfpac is a command line app, but we have dozens of these to do, so we will use a quick automater app that uses a bash shell to do this.
Render
The files are then uploaded to the sites content bucket, where they are rendered with a custom vue3 component, to allow interactivity and to keep consistant stylng across the site
Finally - We have our animated .GLB
Top comments (0)