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