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
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:
Blender Python API (bpy)
Access Blender data and operations via Python:
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)
2. Python Script for Batch Export
Run batch script:
3. Optimize Model for Web (Decimation)
4. Texture Baking for Web
5. Generate LOD (Level of Detail)
6. Export with Texture Compression
7. Command-Line Automation
Integration Patterns
With Three.js
With React Three Fiber
With Babylon.js
Optimization Techniques
1. Geometry Optimization
Decimate Modifier:
Merge by Distance:
Triangulate Faces:
2. Texture Optimization
Image Compression:
Texture Atlas:
3. Material Simplification
Convert to PBR:
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)
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
Export Settings
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
- 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