From STL to glTF: Preparing CAD Models for the Web

Every product project I have done starts the same way: the client sends over their models, and the models are STL. Nobody's fault, that is what a manufacturing pipeline produces. But STL is about as far from a web asset as a format can get, and the gap between having 3D files and having 3D files a phone can load is where a lot of configurator budgets quietly disappear.

This is the pipeline I settled on while building three configurators for Tenjam, where every single product arrived as STL.

Why STL cannot go straight to the browser

• No materials or colors. An STL carries geometry and nothing else.
• No UV coordinates, so there is nowhere for a texture to go.
• No real units. You get to guess whether the model is in millimeters or meters.
• CAD tessellation produces absurdly dense meshes, often with ten thousand triangles on a flat face.
• File sizes in the tens of megabytes for objects that should weigh a fraction of that.

An STL is just triangles. Perfect for a printer or a CNC machine, useless for a renderer that wants materials, texture coordinates and a sane polygon budget.

Step one: Blender, scale, cleanup

Import the STL into Blender and fix the boring things first. Scale and orientation will almost always be wrong, Z up versus Y up bites everyone once. Merge vertices by distance, because STL stores every triangle independently and your vertex count is inflated roughly threefold for no reason. Then decimate carefully. The goal is keeping silhouettes and curved surfaces intact while flat areas lose the geometry they never needed.

Step two: UVs and materials from nothing

Since STL has no UVs, every surface that needs a texture needs unwrapping. For simple product shells a smart unwrap plus a little seam cleanup gets you most of the way. Materials get rebuilt as PBR from reference photos, which sounds worse than it is. Products usually have a handful of finishes, and matching them against good photography is very doable.

Sometimes the geometry fights back. Tenjam's Baja Club series has shapes that made standard projection useless, so I wrote a small Blender script that applies the texture mapping across the whole product family based on their reference imagery. I first tried solving it with a custom shader, which felt clever and produced worse results than the scripted fix. When a whole series shares a problem, script the solution once instead of hand fixing every model. You can see the series inside the Tenjam catalog configurator.

Step three: export glTF, then compress

glTF is the format the web actually agreed on, and binary glb is the flavor you want. Export from Blender, then run the file through a compression pass. Draco squeezes dense geometry hardest, meshopt decodes faster on the client, and for product models either one typically turns megabytes into hundreds of kilobytes.

# one pass: geometry compression plus texture conversion
npx @gltf-transform/cli optimize input.glb output.glb \
  --compress draco --texture-compress webp

Step four: textures are the real weight

The mesh is half the story, textures are usually heavier. Resize them to what the product actually needs, a pool lounger does not need 4K. Convert to WebP or KTX2, and think about GPU memory rather than just download size. KTX2 stays compressed on the GPU, which matters a lot on mobile where memory is the thing that crashes tabs.

The numbers that make clients happy

In practice, tens of megabytes of raw STL end up as a glb of one or two megabytes with textures included. That is the difference between a configurator that loads before the customer loses interest and one that never gets a chance on a phone. When I tell a client their whole product catalog will weigh less than one photo from their brochure, that conversation goes well.

The checklist

• Fix scale, orientation and merged vertices before anything else.
• Decimate with the silhouette in mind, not a target number.
• Unwrap UVs and rebuild PBR materials from reference photos.
• Export glb, compress with Draco or meshopt.
• Resize and compress textures, check GPU memory on a real phone.
• Script anything you will do more than twice.

None of this is glamorous work. It is also exactly where product 3D projects succeed or stall, because no amount of rendering talent saves a page that takes twenty seconds to load. If you are sitting on a folder of CAD files and wondering why your 3D site feels heavy, start here.