Optimizing 3D Assets for Web

JavaScript
// Basic Three.js setup with optimized loading
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';
import { KTX2Loader } from 'three/examples/jsm/loaders/KTX2Loader.js';

const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath('/draco/');
const ktx2Loader = new KTX2Loader();
ktx2Loader.setTranscoderPath('/basis/');

const loader = new GLTFLoader();
loader.setDRACOLoader(dracoLoader);
loader.setKTX2Loader(ktx2Loader);

// Progressive loading: placeholder → low-poly → full quality
loader.load('model_placeholder.gltf', (placeholder) => {
  scene.add(placeholder.scene);
  loader.load('model_lowpoly.gltf', (lowpoly) => {
    scene.remove(placeholder.scene);
    scene.add(lowpoly.scene);
    loader.load('model_full.gltf', (full) => {
      scene.remove(lowpoly.scene);
      scene.add(full.scene);
    });
  });
});

Blender Export Configuration

1. Apply Modifiers

   • Select all objects → Object → Apply → All Transforms
   • Apply subdivision surface, mirror, array modifiers
   • Keep only essential armature/shape key modifiers

2. Geometry Optimization

   • Switch to Edit mode → Select All (A)
   • Mesh → Clean Up → Merge by Distance (0.001m threshold)
   • Face → Triangulate Faces
   • UV → Smart UV Project (angle limit: 66°, margin: 0.001)

3. GLTF Export Settings

   Format: glTF Binary (.glb)
   ☑ Apply Modifiers
   ☑ UVs
   ☑ Normals  
   ☑ Tangents
   ☑ Materials: Export
   ☑ Compression: Enable
   Transform: +Y Up
   

Draco Compression Implementation

Geometry Compression Ratios:

• Position: 14 bits (high precision for hero assets)
• Normal: 10 bits (sufficient for most lighting)
• UV: 12 bits (texture coordinate precision)
• Color: 8 bits per channel

Command Line Implementation:

Bash
# Install Draco tools
npm install -g gltf-pipeline

# Compress with optimal settings
gltf-pipeline -i model.gltf -o model_compressed.gltf --draco.compressionLevel=7 --draco.quantizePositionBits=14 --draco.quantizeNormalBits=10 --draco.quantizeTexcoordBits=12

Texture Optimization Pipeline

1. Source Preparation

   • Albedo: 1024×1024px max, sRGB
   • Normal: 1024×1024px max, Linear
   • Roughness/Metallic: 512×512px, pack into single texture (R=roughness, G=metallic, B=AO)

2. KTX2 Conversion

   Bash
   # Install Basis Universal tools
   npm install -g @gltf-transform/cli
   
   # Convert textures
   gltf-transform etc1s model.gltf model_ktx2.gltf --level 1 --quality 128

3. Mipmap Strategy

   • Generate full mipmap chain
   • Use trilinear filtering
   • Budget: 16MB VRAM total across all textures

Progressive Loading Implementation

Three-tier system:

1. Placeholder (< 100KB): Simple geometry, solid colors
2. Low-poly (< 1MB): Reduced geometry, compressed textures (256px)
3. Full quality (< 4MB): Full geometry, full-res textures