From Blender to Browser in Under 3MB

The Constraint: Competing Budgets

Web 3D assets must satisfy four budgets simultaneously. Violating any one of them degrades the experience.

These budgets interact. Draco compression reduces download size but increases parse time. Higher-resolution textures improve visual quality but consume GPU memory. More polygons improve silhouette quality but reduce rendering headroom. The pipeline is a series of informed trade-offs.

The Naive Approach

The export-and-ship workflow that creates most performance problems.

glTF as the Standard

glTF (GL Transmission Format) is the standard for web 3D. It is supported natively by Three.js, designed for efficient transmission, and extensible via the Khronos extensions system. Use glTF Binary (.glb) for production: a single binary file with no base64 overhead. The .gltf JSON variant is useful for debugging (human-readable) but should not be shipped to production.

The Pipeline

The complete path from authoring to browser delivery.

Blender Export Settings

The Blender glTF exporter has settings that significantly affect file quality and size.

gltf-transform CLI

gltf-transform is the essential tool for web 3D optimisation. It operates on glTF files with a composable set of commands.

# Install
npm install -g @gltf-transform/cli

# Full optimisation pipeline (one command)
gltf-transform optimize input.glb output.glb

# Or step by step for control:

# 1. Deduplicate accessors and textures
gltf-transform dedup input.glb deduped.glb

# 2. Draco-compress geometry (80-90% size reduction)
gltf-transform draco deduped.glb compressed.glb

# 3. Resize textures (max 1024px for web)
gltf-transform resize compressed.glb resized.glb --width 1024 --height 1024

# 4. Convert textures to WebP (30-50% smaller than JPEG)
gltf-transform webp resized.glb final.glb --quality 80

# 5. Convert to KTX2 for GPU-compressed textures
gltf-transform ktx2 resized.glb final-ktx2.glb --compress uastc

Before/after file sizes from a real asset pipeline:

That is a 95% reduction. The visual difference at web viewport sizes is negligible.

Draco Compression

Draco (Google's geometry compression) reduces geometry data by 80-90%. Three.js includes a DracoLoader that decompresses on the client.

import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';

const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath('/draco/');
dracoLoader.preload();

const gltfLoader = new GLTFLoader();
gltfLoader.setDRACOLoader(dracoLoader);

gltfLoader.load('/models/product.glb', (gltf) => {
  scene.add(gltf.scene);
});

KTX2 and GPU-Compressed Textures

Standard textures (JPEG, PNG, WebP) decompress to raw RGBA on the GPU. A 1024x1024 JPEG that is 200KB on disk becomes 4MB in GPU memory. KTX2 uses GPU-native compression formats (UASTC, ETC1S) that stay compressed in GPU memory.

import { KTX2Loader } from 'three/addons/loaders/KTX2Loader.js';

const ktx2Loader = new KTX2Loader();
ktx2Loader.setTranscoderPath('/basis/');
ktx2Loader.detectSupport(renderer);

gltfLoader.setKTX2Loader(ktx2Loader);

KTX2 is most valuable when the application loads many textures (product configurators with material variants, digital twins with detailed environments). For a single-model scene with 2-3 textures, the complexity may not be justified.

Texture Budgets

The rule: size textures for their rendered size, not their source size. A texture that never renders larger than 256 pixels on screen should not be 2048 pixels in the file.

Progressive Loading

A single monolithic file makes users wait. Progressive loading shows content immediately and refines it as more data arrives.

// Progressive loading with priority
async function loadModel() {
  // Phase 1: skeleton (instant feedback)
  const skeleton = await gltfLoader.loadAsync('/models/product-skeleton.glb');
  scene.add(skeleton.scene);

  // Phase 2: base model (replaces skeleton)
  const base = await gltfLoader.loadAsync('/models/product-base.glb');
  scene.remove(skeleton.scene);
  scene.add(base.scene);

  // Phase 3: high-res textures (background upgrade)
  const textures = await Promise.all([
    textureLoader.loadAsync('/textures/product-diffuse-2k.webp'),
    textureLoader.loadAsync('/textures/product-normal-2k.webp'),
  ]);
  base.scene.traverse((child) => {
    if (child.isMesh && child.material.map) {
      child.material.map = textures[0];
      child.material.normalMap = textures[1];
      child.material.needsUpdate = true;
    }
  });
}

For product configurators, load the base model and default material first. Variant materials load on demand when the user selects them. For digital twins, load the building structure first, then equipment, then data overlay.

Model Preparation Checklist

Run through this before every export. Most pipeline problems are authoring problems that compression cannot fix.

The Business Link

The pipeline runs once per asset update. The performance benefit is permanent. A day spent on asset optimisation saves every user seconds on every visit. For applications with hundreds or thousands of daily users, the cumulative time saved is substantial.