Blender Web Pipeline

Blender Web Pipeline

Overview

Blender Web Pipeline skill provides workflows for exporting 3D models and animations from Blender to web-optimized formats (primarily glTF 2.0). It covers Python scripting for batch processing, optimization techniques for web performance, and integration with web 3D libraries like Three.js and Babylon.js.

When to use this skill:

• Exporting Blender models for web applications
• Batch processing multiple 3D assets
• Optimizing file sizes for web delivery
• Automating repetitive Blender tasks
• Creating production pipelines for 3D web content
• Converting legacy formats to glTF

Key capabilities:

• glTF 2.0 export with optimization
• Python (bpy) automation scripts
• Texture baking and compression
• LOD (Level of Detail) generation
• Batch processing workflows
• Material and lighting optimization for web

Core Concepts

glTF 2.0 Format

Why glTF for Web:

• Industry-standard 3D format for web
• Efficient binary encoding (.glb)
• PBR materials support
• Animation and skinning
• Extensible with custom data
• Wide library support (Three.js, Babylon.js, etc.)

glTF vs GLB:

.gltf = JSON + external .bin + external textures
.glb  = Single binary file (recommended for web)

Blender Python API (bpy)

Access Blender data and operations via Python:

import bpy

# Access scene data
scene = bpy.context.scene
objects = bpy.data.objects

# Modify objects
obj = bpy.data.objects['Cube']
obj.location = (0, 0, 1)
obj.scale = (2, 2, 2)

# Export glTF
bpy.ops.export_scene.gltf(
    filepath='/path/to/model.glb',
    export_format='GLB'
)

Web Optimization Goals

Target Metrics:

• File size: <5 MB per model (ideal <1 MB)
• Polygon count: <50k triangles for real-time
• Texture resolution: 2048x2048 max (1024x1024 preferred)
• Draw calls: Minimize via texture atlases
• Load time: <2 seconds on average connection

Common Patterns

1. Basic glTF Export (Manual)

# Blender Python Console or script

import bpy

# Select objects to export (optional - exports all if none selected)
bpy.ops.object.select_all(action='DESELECT')
bpy.data.objects['MyModel'].select_set(True)

# Export as GLB
bpy.ops.export_scene.gltf(
    filepath='/path/to/output.glb',
    export_format='GLB',                # Binary format
    use_selection=True,                 # Export selected only
    export_apply=True,                  # Apply modifiers
    export_texcoords=True,              # UV coordinates
    export_normals=True,                # Normals
    export_materials='EXPORT',          # Export materials
    export_colors=True,                 # Vertex colors
    export_cameras=False,               # Skip cameras
    export_lights=False,                # Skip lights
    export_animations=True,             # Include animations
    export_draco_mesh_compression_enable=True,  # Compress geometry
    export_draco_mesh_compression_level=6,      # 0-10 (6 recommended)
    export_draco_position_quantization=14,      # 8-14 bits
    export_draco_normal_quantization=10,        # 8-10 bits
    export_draco_texcoord_quantization=12       # 8-12 bits
)

2. Python Script for Batch Export

#!/usr/bin/env blender --background --python
"""
Batch export all .blend files in a directory to glTF
Usage: blender --background --python batch_export.py -- /path/to/blend/files
"""

import bpy
import os
import sys

# Get command line arguments after --
argv = sys.argv
argv = argv[argv.index("--") + 1:] if "--" in argv else []

input_dir = argv[0] if argv else "/path/to/models"
output_dir = argv[1] if len(argv) > 1 else input_dir + "_gltf"

# Create output directory
os.makedirs(output_dir, exist_ok=True)

# Find all .blend files
blend_files = [f for f in os.listdir(input_dir) if f.endswith('.blend')]

print(f"Found {len(blend_files)} .blend files")

for blend_file in blend_files:
    input_path = os.path.join(input_dir, blend_file)
    output_name = blend_file.replace('.blend', '.glb')
    output_path = os.path.join(output_dir, output_name)

    print(f"Processing: {blend_file}")

    # Open blend file
    bpy.ops.wm.open_mainfile(filepath=input_path)

    # Export as GLB with optimizations
    bpy.ops.export_scene.gltf(
        filepath=output_path,
        export_format='GLB',
        export_apply=True,
        export_draco_mesh_compression_enable=True,
        export_draco_mesh_compression_level=6
    )

    print(f"  Exported: {output_name}")

print("Batch export complete!")

Run batch script:

blender --background --python batch_export.py -- /models/source /models/output

3. Optimize Model for Web (Decimation)

import bpy

def optimize_mesh(obj, target_ratio=0.5):
    """Reduce polygon count using decimation modifier."""

    if obj.type != 'MESH':
        return

    # Add Decimate modifier
    decimate = obj.modifiers.new(name='Decimate', type='DECIMATE')
    decimate.ratio = target_ratio  # 0.5 = 50% of original polygons
    decimate.use_collapse_triangulate = True

    # Apply modifier
    bpy.context.view_layer.objects.active = obj
    bpy.ops.object.modifier_apply(modifier='Decimate')

    print(f"Optimized {obj.name}: {len(obj.data.polygons)} polygons")

# Optimize all selected meshes
for obj in bpy.context.selected_objects:
    optimize_mesh(obj, target_ratio=0.3)

4. Texture Baking for Web

import bpy

def bake_textures(obj, resolution=1024):
    """Bake all materials to single texture."""

    # Setup bake settings
    bpy.context.scene.render.engine = 'CYCLES'
    bpy.context.scene.cycles.bake_type = 'COMBINED'

    # Create bake image
    bake_image = bpy.data.images.new(
        name=f"{obj.name}_bake",
        width=resolution,
        height=resolution
    )

    # Create bake material
    mat = bpy.data.materials.new(name=f"{obj.name}_baked")
    mat.use_nodes = True
    nodes = mat.node_tree.nodes

    # Add Image Texture node
    tex_node = nodes.new(type='ShaderNodeTexImage')
    tex_node.image = bake_image
    tex_node.select = True
    nodes.active = tex_node

    # Assign material
    if obj.data.materials:
        obj.data.materials[0] = mat
    else:
        obj.data.materials.append(mat)

    # Select object
    bpy.context.view_layer.objects.active = obj
    obj.select_set(True)

    # Bake
    bpy.ops.object.bake(type='COMBINED')

    # Save baked texture
    bake_image.filepath_raw = f"/tmp/{obj.name}_bake.png"
    bake_image.file_format = 'PNG'
    bake_image.save()

    print(f"Baked {obj.name} to {bake_image.filepath_raw}")

# Bake selected objects
for obj in bpy.context.selected_objects:
    if obj.type == 'MESH':
        bake_textures(obj, resolution=2048)

5. Generate LOD (Level of Detail)

import bpy

def generate_lods(obj, lod_levels=[0.75, 0.5, 0.25]):
    """Generate LOD copies with decreasing polygon counts."""

    lod_objects = []

    for i, ratio in enumerate(lod_levels):
        # Duplicate object
        lod_obj = obj.copy()
        lod_obj.data = obj.data.copy()
        lod_obj.name = f"{obj.name}_LOD{i}"

        # Link to scene
        bpy.context.collection.objects.link(lod_obj)

        # Add Decimate modifier
        decimate = lod_obj.modifiers.new(name='Decimate', type='DECIMATE')
        decimate.ratio = ratio

        # Apply modifier
        bpy.context.view_layer.objects.active = lod_obj
        bpy.ops.object.modifier_apply(modifier='Decimate')

        lod_objects.append(lod_obj)

        print(f"Created {lod_obj.name}: {len(lod_obj.data.polygons)} polygons")

    return lod_objects

# Generate LODs for selected object
if bpy.context.active_object:
    generate_lods(bpy.context.active_object)

6. Export with Texture Compression

import bpy
import os

def export_optimized_gltf(filepath, texture_max_size=1024):
    """Export glTF with downscaled textures."""

    # Downscale all textures
    for img in bpy.data.images:
        if img.size[0] > texture_max_size or img.size[1] > texture_max_size:
            img.scale(texture_max_size, texture_max_size)
            print(f"Downscaled {img.name} to {texture_max_size}x{texture_max_size}")

    # Export with Draco compression
    bpy.ops.export_scene.gltf(
        filepath=filepath,
        export_format='GLB',
        export_apply=True,
        export_image_format='JPEG',  # JPEG for smaller size (or PNG for quality)
        export_jpeg_quality=85,       # 0-100
        export_draco_mesh_compression_enable=True,
        export_draco_mesh_compression_level=8,  # Max compression
        export_draco_position_quantization=12,
        export_draco_normal_quantization=8,
        export_draco_texcoord_quantization=10
    )

# Export optimized
export_optimized_gltf('/path/to/optimized.glb', texture_max_size=512)

7. Command-Line Automation

#!/bin/bash
# Batch export Blender files to glTF without opening GUI

SCRIPT_DIR="$(dirname "$0")"

# Export all .blend files in current directory
for blend_file in *.blend; do
    echo "Exporting $blend_file..."

    blender --background "$blend_file" --python - <<EOF
import bpy
import os

# Get output filename
filename = os.path.splitext(bpy.data.filepath)[0]
output = filename + '.glb'

# Export
bpy.ops.export_scene.gltf(
    filepath=output,
    export_format='GLB',
    export_apply=True,
    export_draco_mesh_compression_enable=True,
    export_draco_mesh_compression_level=6
)

print(f'Exported to {output}')
EOF

done

echo "All files exported!"

Integration Patterns

With Three.js

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

const loader = new GLTFLoader();

// Setup Draco decoder for compressed models
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath('/draco/');
loader.setDRACOLoader(dracoLoader);

// Load Blender export
loader.load('/models/exported.glb', (gltf) => {
  scene.add(gltf.scene);

  // Play animations
  if (gltf.animations.length > 0) {
    const mixer = new THREE.AnimationMixer(gltf.scene);
    const action = mixer.clipAction(gltf.animations[0]);
    action.play();
  }
});

With React Three Fiber

import { useGLTF } from '@react-three/drei';

function Model() {
  const { scene } = useGLTF('/models/exported.glb');
  return <primitive object={scene} />;
}

// Preload for better performance
useGLTF.preload('/models/exported.glb');

With Babylon.js

import * as BABYLON from '@babylonjs/core';
import '@babylonjs/loaders/glTF';

BABYLON.SceneLoader.ImportMesh(
  '',
  '/models/',
  'exported.glb',
  scene,
  (meshes) => {
    console.log('Loaded meshes:', meshes);
  }
);

Optimization Techniques

1. Geometry Optimization

Decimate Modifier:

# Reduce polygon count by 70%
obj.modifiers.new(name='Decimate', type='DECIMATE')
obj.modifiers['Decimate'].ratio = 0.3

Merge by Distance:

# Remove duplicate vertices
bpy.ops.object.mode_set(mode='EDIT')
bpy.ops.mesh.select_all(action='SELECT')
bpy.ops.mesh.remove_doubles(threshold=0.0001)
bpy.ops.object.mode_set(mode='OBJECT')

Triangulate Faces:

# Ensure all faces are triangles (required for some engines)
bpy.ops.object.mode_set(mode='EDIT')
bpy.ops.mesh.select_all(action='SELECT')
bpy.ops.mesh.quads_convert_to_tris()
bpy.ops.object.mode_set(mode='OBJECT')

2. Texture Optimization

Image Compression:

# Save textures as JPEG (lossy but smaller)
for img in bpy.data.images:
    img.file_format = 'JPEG'
    img.filepath_raw = f"/output/{img.name}.jpg"
    img.save()

Texture Atlas:

# Combine multiple textures into one atlas
# Use Smart UV Project for automatic atlasing
bpy.ops.object.mode_set(mode='EDIT')
bpy.ops.mesh.select_all(action='SELECT')
bpy.ops.uv.smart_project(angle_limit=66, island_margin=0.02)
bpy.ops.object.mode_set(mode='OBJECT')

3. Material Simplification

Convert to PBR:

# Ensure materials use Principled BSDF (glTF standard)
for mat in bpy.data.materials:
    if not mat.use_nodes:
        mat.use_nodes = True

    nodes = mat.node_tree.nodes
    principled = nodes.get('Principled BSDF')

    if not principled:
        principled = nodes.new(type='ShaderNodeBsdfPrincipled')
        output = nodes.get('Material Output')
        mat.node_tree.links.new(principled.outputs[0], output.inputs[0])

Common Pitfalls

1. Large File Sizes

Problem: Exported .glb files are 20+ MB

Solutions:

• Enable Draco compression (60-90% reduction)
• Reduce texture resolution (2048 → 1024 or 512)
• Use JPEG instead of PNG for textures
• Decimate geometry (target <50k triangles)
• Remove unused materials/textures

2. Missing Textures in Export

Problem: Textures don't appear in web viewer

Solutions:

• Ensure all images are saved (not packed)
• Use relative paths for textures
• Export with "Export Images" enabled
• Check image format compatibility (PNG/JPEG)

3. Animations Not Playing

Problem: Animations don't export or play incorrectly

Solutions:

• Ensure animations are on timeline (not NLA strips)
• Export with "Export Animations" enabled
• Check animation actions are assigned to objects
• Use "Bake Actions" for complex rigs

4. Materials Look Different

Problem: Materials render differently in web vs Blender

Solutions:

• Use Principled BSDF (maps to glTF PBR)
• Avoid custom shader nodes (won't export)
• Use supported texture types (Base Color, Metallic, Roughness, Normal, Emission)
• Test in glTF viewer before deploying

5. Slow Export Times

Problem: Export takes 10+ minutes

Solutions:

• Apply modifiers before export (don't export non-destructively)
• Reduce geometry complexity
• Remove unused data (orphan cleanup)
• Use command-line export (faster than GUI)

6. Performance Issues in Browser

Problem: Model lags in browser

Solutions:

• Generate LODs (Level of Detail)
• Use instancing for repeated objects
• Limit draw calls (merge objects, texture atlases)
• Reduce polygon count (<50k triangles)
• Optimize shaders (avoid transparency/refraction)

Best Practices

Pre-Export Checklist

☐ Apply all modifiers
☐ Merge vertices (remove doubles)
☐ Triangulate faces (if required)
☐ Optimize polygon count (<50k triangles)
☐ UV unwrap all meshes
☐ Bake materials (if complex)
☐ Resize textures (max 2048x2048)
☐ Use Principled BSDF materials
☐ Remove unused data (orphan cleanup)
☐ Name objects descriptively
☐ Set origin points correctly
☐ Apply transformations (Ctrl+A)

Export Settings

# Recommended glTF export settings
bpy.ops.export_scene.gltf(
    filepath='/output.glb',
    export_format='GLB',                # Binary format
    export_apply=True,                  # Apply modifiers
    export_image_format='JPEG',         # Smaller file size
    export_jpeg_quality=85,             # Quality vs size
    export_draco_mesh_compression_enable=True,  # Enable compression
    export_draco_mesh_compression_level=6,      # Balance speed/size
    export_animations=True,             # Include animations
    export_lights=False,                # Skip lights (recreate in code)
    export_cameras=False                # Skip cameras
)

Resources

This skill includes:

scripts/

• batch_export.py - Batch export .blend files to glTF
• optimize_model.py - Optimize geometry and textures for web
• generate_lods.py - Generate LOD copies automatically

references/

• gltf_export_guide.md - Complete glTF export reference
• bpy_api_reference.md - Blender Python API quick reference
• optimization_strategies.md - Detailed optimization techniques

assets/

• export_template.blend - Pre-configured export template
• shader_library/ - Web-optimized PBR shaders

Related Skills

• threejs-webgl - Load and render exported glTF models in Three.js
• react-three-fiber - Use glTF models in React applications
• babylonjs-engine - Alternative 3D engine for web
• playcanvas-engine - Game engine that supports glTF import

Blender Web Pipeline Assets

Template files and resources for Blender to web workflows.

Included Assets

export_template.blend

Pre-configured Blender template with:

• Optimized export settings
• PBR material setup
• LOD examples
• Proper UV unwrapping

shader_library/

Collection of web-optimized PBR shaders:

• Basic PBR material
• Emissive material
• Transparent material
• Metallic material

Usage

1. Open export_template.blend in Blender 2. Replace placeholder geometry with your models 3. Use pre-configured materials from shader_library 4. Export using File → Export → glTF 2.0 (.glb) 5. Test in web viewer before deploying

Quick Start

# Open template
blender export_template.blend

# Or use as base for new projects
blender --factory-startup export_template.blend --save-as mynewproject.blend

Blender Python API Quick Reference

Essential bpy (Blender Python) API commands for automation.

Accessing Data

import bpy

# Scene and Objects
bpy.context.scene  # Active scene
bpy.data.objects  # All objects
bpy.data.objects['Name']  # Get object by name
bpy.context.selected_objects  # Selected objects
bpy.context.active_object  # Active object

# Collections
bpy.data.collections  # All collections
bpy.context.collection  # Active collection

# Materials and Textures
bpy.data.materials  # All materials
bpy.data.images  # All images/textures

# Meshes
bpy.data.meshes  # All mesh data

Object Operations

# Selection
bpy.ops.object.select_all(action='SELECT')  # Select all
bpy.ops.object.select_all(action='DESELECT')  # Deselect all
obj.select_set(True)  # Select specific object

# Transformation
obj.location = (x, y, z)
obj.rotation_euler = (rx, ry, rz)
obj.scale = (sx, sy, sz)

# Modifiers
modifier = obj.modifiers.new(name='Name', type='TYPE')
bpy.ops.object.modifier_apply(modifier='Name')

# Duplication
new_obj = obj.copy()
new_obj.data = obj.data.copy()
bpy.context.collection.objects.link(new_obj)

Mesh Editing

# Edit Mode
bpy.ops.object.mode_set(mode='EDIT')

# Common Operations
bpy.ops.mesh.select_all(action='SELECT')
bpy.ops.mesh.remove_doubles(threshold=0.0001)  # Merge vertices
bpy.ops.mesh.quads_convert_to_tris()  # Triangulate
bpy.ops.uv.smart_project()  # UV unwrap

# Return to Object Mode
bpy.ops.object.mode_set(mode='OBJECT')

File Operations

# Open File
bpy.ops.wm.open_mainfile(filepath='/path/to/file.blend')

# Save File
bpy.ops.wm.save_as_mainfile(filepath='/path/to/file.blend')

# Import/Export
bpy.ops.import_scene.obj(filepath='/path/to/model.obj')
bpy.ops.export_scene.gltf(filepath='/path/to/model.glb')

Blender glTF Export Complete Guide

Reference guide for glTF 2.0 export settings and options in Blender.

Export Format Options

export_format='GLB'  # or 'GLTF_SEPARATE' or 'GLTF_EMBEDDED'

• GLB: Single binary file (recommended for web)
• GLTF_SEPARATE: JSON + separate .bin + separate textures
• GLTF_EMBEDDED: JSON with embedded Base64 data (large file)

All Export Parameters

bpy.ops.export_scene.gltf(
    # File Settings
    filepath='/path/to/output.glb',
    export_format='GLB',  # 'GLB', 'GLTF_SEPARATE', 'GLTF_EMBEDDED'

    # Include Settings
    use_selection=False,  # Export selected objects only
    use_visible=False,  # Export visible objects only
    use_renderable=False,  # Export renderable objects only
    use_active_collection=False,  # Export active collection only
    use_active_scene=False,  # Export active scene only

    # Transform Settings
    export_yup=True,  # Y-axis up (default for glTF)
    export_apply=False,  # Apply modifiers (True recommended)

    # Data Settings
    export_texcoords=True,  # UV coordinates
    export_normals=True,  # Normals
    export_draco_mesh_compression_enable=False,  # Enable Draco compression
    export_draco_mesh_compression_level=6,  # 0-10 (higher = smaller + slower)
    export_draco_position_quantization=14,  # 8-14 bits
    export_draco_normal_quantization=10,  # 8-10 bits
    export_draco_texcoord_quantization=12,  # 8-12 bits
    export_draco_color_quantization=10,  # 8-10 bits
    export_draco_generic_quantization=12,  # 8-12 bits
    export_tangents=False,  # Tangents (auto-computed by engines)
    export_materials='EXPORT',  # 'EXPORT', 'PLACEHOLDER', 'NONE'
    export_colors=True,  # Vertex colors
    export_attributes=True,  # Custom attributes
    export_cameras=False,  # Export cameras
    export_lights=False,  # Export lights

    # Animation Settings
    export_animations=True,  # Export animations
    export_frame_range=True,  # Use scene frame range
    export_frame_step=1,  # Frame step
    export_force_sampling=True,  # Force sampling (all frames)
    export_nla_strips=True,  # Export NLA strips
    export_nla_strips_merged_animation_name='Animation',  # Merged animation name
    export_def_bones=False,  # Export deformation bones only
    export_current_frame=False,  # Export current frame
    export_skins=True,  # Export skinning data
    export_all_influences=False,  # Export all bone influences
    export_morph=True,  # Export shape keys
    export_morph_normal=True,  # Export shape key normals
    export_morph_tangent=False,  # Export shape key tangents

    # Image Settings
    export_image_format='AUTO',  # 'AUTO', 'JPEG', 'PNG'
    export_jpeg_quality=75,  # 0-100
    export_keep_originals=False,  # Keep original images

    # Extras
    export_extras=False,  # Export custom properties
    export_copyright='',  # Copyright notice
    export_custom_props=False,  # Export custom properties
)

Recommended Presets

Minimal (Smallest File)

export_format='GLB',
export_apply=True,
export_image_format='JPEG',
export_jpeg_quality=75,
export_draco_mesh_compression_enable=True,
export_draco_mesh_compression_level=10,  # Max compression
export_animations=False,
export_cameras=False,
export_lights=False

Standard (Balanced)

export_format='GLB',
export_apply=True,
export_image_format='JPEG',
export_jpeg_quality=85,
export_draco_mesh_compression_enable=True,
export_draco_mesh_compression_level=6,
export_animations=True

High Quality (Larger Files)

export_format='GLB',
export_apply=True,
export_image_format='PNG',
export_draco_mesh_compression_enable=False,
export_animations=True,
export_morph=True

3D Model Optimization Strategies

Advanced optimization techniques for web-ready 3D models.

Polygon Reduction

1. Decimate Modifier (Automatic)

Best for: Organic shapes, detailed models

decimate = obj.modifiers.new(name='Decimate', type='DECIMATE')
decimate.ratio = 0.5  # 50% reduction
decimate.use_collapse_triangulate = True

2. Manual Retopology

Best for: Character models, hero assets

• Tools: Quad Draw, PolyBuild, Shrinkwrap modifier
• Target: Clean edge loops, optimized topology

3. Normal Map Baking

Best for: Static props, architecture

# Bake high-poly detail to normal map
# Apply to low-poly model in web engine

Texture Optimization

1. Texture Atlasing

Combine multiple textures into one large texture

Benefits:

• Fewer draw calls
• Better performance
• Smaller total file size

2. Texture Compression

• Use JPEG for diffuse maps (lossy, smaller)
• Use PNG for alpha/normal maps (lossless)
• Target resolution: 512-1024px

3. MIP Mapping

Auto-generated by web engines

• Smaller textures for distant objects
• Better performance, reduced aliasing

File Size Reduction

Target sizes:

• Small props: <100 KB
• Character models: 500 KB - 1 MB
• Environment assets: 1-5 MB

Strategies: 1. Draco compression (60-90% reduction) 2. Lower texture resolution 3. JPEG instead of PNG 4. Reduce polygon count 5. Remove unused data

Performance Targets

• Triangles: <50,000 per model
• Draw calls: Minimize (texture atlases, instancing)
• Texture memory: <50 MB total
• Load time: <2 seconds