Run AI-generated meshes through a decimation/simplification pass (meshoptimizer or gltfpack), compress geometry with Draco or meshopt, and cut texture resolution and vertex count until the whole scene fits your download-size budget and still loads fast in a browser tab.
At a glance
| Fact | Value | Source |
|---|---|---|
| Tool for glTF mesh simplification | gltfpack (meshoptimizer) | github.com |
| Geometry compression library for web | Draco | github.com |
| Loaders supporting meshopt compression | three.js r122+, Babylon.js 5.0+ | github.com |
AI 3D generators (Meshy, Rodin, Tripo and similar) typically output dense, unoptimized meshes meant for review, not for a browser tab. Before you ship one in a WebGL game, run it through a decimation and compression pass, then re-check total download size and draw calls on a mid-range mobile browser, not just your desktop.
If you build with an AI agent, Playgama MCP lets it upload the build and publish a sandbox link directly from Cursor or Claude Code.
- Export format: pull the mesh out as glTF/GLB where possible – it’s the format the web optimization tools below are built for. Meshy exports to .fbx, .obj, .usdz, .glb, .stl and .blend; use .glb for the web path (meshy.ai/pricing).
- Decimate/simplify: run the model through gltfpack, the command-line tool from the meshoptimizer project, to reduce vertex/triangle count and repack indices for GPU-friendly reading. It also compresses textures to Basis Universal/KTX2 with the -tc flag.
- Compress geometry for transfer: apply Draco or meshopt compression to shrink the file for transmission; three.js (r122+, with GLTFLoader.setMeshoptDecoder) and Babylon.js (5.0+) both decode meshopt-compressed glTF, per the filament meshoptimizer notes.
- Cut texture size: AI-generated PBR texture sets (albedo, normal, roughness/metallic) are often 2K-4K by default – downscale to what the model actually needs on screen; this usually costs more download weight than the mesh itself.
- Bake down draw calls: merge materials/meshes where the AI tool created many small submeshes, since WebGL performance is often draw-call bound, not triangle bound.
Once a build is optimized, re-test load time on a throttled mobile connection and check WebGL2 support if you rely on its features – not every browser/device combination supports it equally.
Sources
- google/draco
- zeux/meshoptimizer
- filament meshoptimizer gltf README
- Meshy pricing (export formats)
- MDN: WebGL API
- Playgama MCP
Related questions
Should I decimate before or after texturing an AI-generated mesh?
Decimate first if the tool allows it – fewer vertices means less UV data to carry through baking, and re-baking normals onto a simplified mesh is standard practice with gltfpack.
Does Draco or meshopt compression need special loader setup?
Yes – three.js needs GLTFLoader.setMeshoptDecoder called explicitly for meshopt (r122+), while Babylon.js 5.0+ decodes it without extra setup; Draco decoders load separately.
Why does my optimized model still load slowly on mobile?
Check texture resolution and total draw calls, not just triangle count – large PBR texture sets and many small submeshes often cost more than geometry weight.
Last updated: 30 September 2026