3D Models for Websites

glTF 2.0 is the format for 3D on the web. It was designed for runtime delivery rather than authoring — it stores geometry the way the GPU wants it, so the browser does close to no conversion work on load. It is often described as "the JPEG of 3D", which is about right in role if not in compression.

Two flavours:

• .gltf — JSON, with textures and geometry as separate files alongside. Readable, diffable, more HTTP requests.
• .glb — the same thing packed into one binary file. One request, smaller, not human-readable. Use GLB for the web unless you have a specific reason to want the parts separate.

Everything else you are likely to be handed:

Format	What it is	Use on the web?
GLB / glTF	Runtime delivery format	Yes — this is the answer
FBX	Autodesk interchange, animation-heavy	Convert. Large, proprietary, slow to parse
OBJ	Ancient, geometry only	Convert. No animation, no PBR, no scene graph
USDZ	Apple's format for iOS AR Quick Look	Alongside GLB, only if you need iOS AR
STL	3D printing, triangles only	No. No colour, no UVs, no materials
STEP / IGES	CAD, mathematical surfaces	No. Must be rebuilt, not converted
Blender .blend	Authoring file	No. Export to GLB

If someone sends you an FBX or OBJ, converting is usually fine. If someone sends you a STEP file, you do not have a conversion problem, you have a remodelling project — see below.

There is no single number, because three separate budgets have to be satisfied at once and people usually only track the first.

1. Download size. What crosses the network. On a mid-range phone over mobile data, I aim for under 2 MB for a hero model, and under 500 KB for anything secondary. The demo model on this site's product configurator page is 776 KB, down from 4.13 MB, and that reduction was mostly compression rather than removing detail.

2. GPU memory. The one that actually kills mobile sessions, and the one nobody measures. Textures are stored on the GPU uncompressed unless you use a GPU compression format. A 2048×2048 texture is perhaps 1 MB as a JPEG and roughly 16 MB in GPU memory, about 22 MB once mipmaps exist. Six of those and a mid-range phone is out of memory and the tab reloads — which the visitor experiences as your site crashing.

This is why KTX2 with Basis Universal matters more than the JPEG size everyone optimises. KTX2 stays compressed on the GPU, cutting that 22 MB to roughly a quarter. It is the single highest-impact change on most projects, and it is routinely skipped because the download size looked fine.

3. Draw calls and triangles. Triangles are cheap on modern hardware — a few hundred thousand is unremarkable. What is expensive is interruption: every separate mesh with its own material is another draw call, each carrying CPU cost. A model split into 200 named parts will perform far worse than the same geometry merged into a handful of meshes.

Rough working budgets for a hero model on a marketing site: under 2 MB downloaded, under 150k triangles, textures no larger than 2048 and in KTX2, and ideally under about 20 draw calls.

This is the single most common surprise in commercial 3D work, and it is worth being blunt about because it usually arrives as a schedule problem.

A CAD file — STEP, IGES, SolidWorks, CATIA — does not contain a mesh. It contains mathematical surface definitions: this face is a portion of a cylinder of exactly this radius. That representation is correct to manufacturing tolerance and has no fixed triangle count at all.

To render it, something must tessellate it into triangles, and the tessellator has no idea what matters visually. You get either millions of triangles or visible faceting, frequently both in the same model — smooth surfaces over-tessellated, small details lost.

On top of that a CAD file typically has:

• No UV coordinates, or unusable ones. No UVs means no textures.
• Materials that are not materials. "Aluminium 6061" is a manufacturing property, not a set of PBR values a renderer can use.
• Every internal component modelled. Screws, threads, gaskets and inner assemblies nobody will ever see, all of them costing triangles.
• Assembly structure, meaning hundreds of separate parts, meaning hundreds of draw calls.

The honest path is retopology: rebuilding a clean low-polygon mesh that matches the silhouette, then baking the high-detail surface into normal maps so it still looks right. That is skilled manual work, not a conversion step, and it is usually the largest line item in a project that starts from CAD. Budget for it explicitly rather than discovering it — 3D model optimisation is the service page covering how that work goes.

Four routes, in rough order of cost:

Free libraries. Poly Haven (CC0), Khronos's glTF Sample Assets, Sketchfab's downloadable section, Google's Poly successors. Quality varies enormously. Excellent for prototyping and demos — the chair in this site's configurator demo is a CC0 asset from the Khronos sample set, with attribution recorded in the repo.

Paid marketplaces. TurboSquid, CGTrader, Sketchfab. You are buying a model, not necessarily a web-ready model — most marketplace assets are built for offline rendering, with 4K textures and triangle counts that make sense in Blender and not in a browser. Assume optimisation work on top.

Commission it. For a real product you are selling, this is usually the right answer. A modeller who knows web constraints produces something that works; one who does not produces a beautiful file you then pay again to fix.

Photogrammetry or scanning. Excellent for organic and existing physical objects, hopeless for anything needing clean edges. Output is a dense mesh that always needs retopology.

Now the part that gets skipped. Check the licence, every time, before the model reaches a commercial page:

• CC0 / public domain — do anything. Safest.
• CC-BY — usable commercially, but attribution is required, and "we put it on the site" without a credit is a licence breach.
• CC-BY-NC — non-commercial only. Your company's marketing site is commercial. This is the one people get wrong.
• Royalty-free marketplace licences — read the actual terms. Many restrict redistribution, and a model embedded in a public web page is arguably distributed. Some tiers explicitly forbid it.
• Editorial-only — no commercial use, and it typically covers anything with a recognisable brand or trademark on it.

Record the licence and the source next to the asset in your repository, at the time you add it. Six months later nobody remembers where a file came from, and that is precisely when someone asks.

The pipeline, in the order that matters:

1. Reduce geometry. Delete anything not visible — interiors, backfaces, hidden components. Decimate what remains, or retopologise if it started as CAD or a scan. Merge parts that share a material.

2. Fix the UVs. Every textured surface needs sensible, non-overlapping UVs. This is often the step that quietly forces a remodel.

3. Bake detail into maps. High-polygon detail becomes a normal map on the low-polygon mesh. This is how a 5-million-triangle source becomes a 50k-triangle model that still reads as detailed.

4. Compress the geometry. Draco or Meshopt. Meshopt decodes faster and is easier to stream; Draco usually compresses smaller. Either is a large win; pick one and be consistent.

5. Compress the textures — properly. KTX2/Basis, not just smaller JPEGs, for the GPU-memory reason above. This is the step that most changes mobile behaviour.

6. Verify what you shipped. Load the final file and look at the numbers rather than trusting the exporter. The GLB inspector on this site reports triangle counts, texture sizes and materials; the GLB viewer shows how it actually lights and loads. Checking after export catches the 4K texture somebody left in.

The command-line tool for most of steps 4 and 5 is glTF-Transform, which is what I use on client work and what produced the 81% reduction on this site's demo model.

A well-optimised model can still ruin a page if it is loaded carelessly.

Do not put it on the critical path unless it is the point of the page. A model that loads before the text is a model that delays your largest contentful paint. If the 3D is below the fold, load it when the visitor gets there.

Reserve the space. Give the canvas container fixed dimensions or an aspect ratio so nothing shifts when the scene mounts. Layout shift is both a ranking signal and genuinely irritating.

Show a real loading state. Not a spinner over a blank rectangle — a poster image of the model, or the model's own progress. People wait for something they can see is coming.

Have a no-WebGL path. A small share of visitors have no working WebGL: old hardware, blocklisted drivers, locked-down enterprise browsers, some virtual machines. A static image plus a sentence is a complete answer. A permanently black canvas is not, and that is the default if you do nothing.

Stop rendering when it is off-screen. An IntersectionObserver that pauses the render loop is a few lines and is the difference between a demo and a battery complaint.

Cache aggressively. Models are immutable — hash the filename and set a long max-age. There is no reason for a returning visitor to download it twice.

If this reads like a lot, that is because it is the part that separates a 3D feature that helps from one that costs you conversions. It is also most of what 3D product visualisation work actually consists of.