Tomorrow is my first day of grad school (!!!), so I'm wrapping up ongoing projects before I get buried in schoolwork.
I've been on a 3D modeling spree with Womp and I can't declare a spree complete until I add the output to my portfolio. I produced some beautiful scene renders through Womp, where I chose the best lighting and camera positions to capture specific views of my 3D models. But as I was adding these images to my portfolio, they didn't feel like they were enough. I wanted to give people the power to interact with my models and see them from multiple angles, especially for models with interesting materials that are affected by the direction of light. After going through a pipeline of Womp to Blender to Three.js, these models are ready to play with. Here's an example of the final result:
Play with this balloon animal model for yourself here
Exporting my models from Womp for web rendering was quite a process. I knew Womp could export 3D models in OBJ format, and I knew I could use Three.js, a web 3D graphics library, to display the models in an interactive window on this website. Here's an overview of the process it took to make this happen.
1. Export from Womp
First things first, I needed to get the model out of Womp. Through some experimentation I realized that the exported mesh's default level of detail was WAY too high. The mesh file sizes were too big to store online, and the meshes themselves looked bumpy where they should've been smooth. I loaded the models into Blender to inspect what was going on, and I discovered that there were far more triangles than necessary. My meshes had hundreds of thousands of triangles, and I read that ~50k is an ideal maximum for web rendering. I was able to reduce this number a bit by changing the export settings in Womp to include less detail.
A balloon animal object exported from Womp and imported into Blender. The black dots and lines are the vertices and edges that form the mesh. There's a LOT of them
2. Clean in Blender
I used Blender to further reduce the number of triangles in my 3D objects. Using the balloon animal example above, there were ~100k triangles used to form what is essentially several rounded cylinders. That's grossly excessive. I got that number down to ~6k by using decimate modifiers and merging vertices that were near each other, then shading the surfaces to be smooth. It definitely seems possible to reduce this number even more, but this was good enough for me. I exported the cleaned models in GLTF/GLB format to use with Three.js.
The balloon animal mesh with fewer triangles. See how there's fewer edges and vertices?
3. Render with Three.js
I used this guide to set up a basic scene and render my GLTF models and materials on my website. I added lights and an environment map to create realistic reflections on the surfaces. Three.js canvases are interactive by default, so I could zoom and pan around the object right away. I was surprised that loading the model itself was so concise:
import { useLoader } from '@react-three/fiber'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
const gltf = useLoader(GLTFLoader, 'model.glb')
return <primitive object={gltf.scene} />
This was enough for some objects with simple materials, like waffle and Tangela. Others needed more work to make their materials render correctly.
4. Material properties
Materials are what give objects their look and feel-- color, shininess, roughness, etc. The glossy and semi-transparent materials that I made in Womp didn't export to Blender. I recreated them in Blender using Glass BSDF nodes, but learned that unfortunately you can only export materials based on Principled BSDF nodes. To work around this, I converted the remaining models into React components with this tool, and assigned custom Three.js materials to their meshes. For example, this creates a balloon-like material:
new MeshPhysicalMaterial({
color: "#2471ed",
transmission: 1,
transparent: true,
roughness: 0,
})
Ultimately this added complexity to my code, because some portfolio items render a model and material loaded straight from a file, and some are defined in React with custom materials. I'd say it's worth it though, because the custom materials look amazing!
The balloon animal mesh using the translucent material defined in Three.js