# Blender Web 管道 ## 概述 Blender Web Pipeline 技能提供了将 3D 模型和动画从 Blender 导出为 Web 优化格式（主要是 glTF 2.0）的工作流程。它涵盖了用于批处理的 Python 脚本、Web 性能的优化技术以及与 Three.js 和 Babylon.js 等 Web 3D 库的集成。 **何时使用此技能：** * 导出用于 Web 应用程序的 Blender 模型 * 批量处理多个3D资产 * 优化网络传输的文件大小 * 自动执行重复的 Blender 任务 * 为 3D Web 内容创建生产管道 * 将旧格式转换为 glTF **关键能力：** * glTF 2.0 导出优化 * Python (bpy) 自动化脚本 * 纹理烘焙和压缩 * LOD（细节层次）生成 * 批处理工作流程 * 网页材质和光照优化 ## 核心概念 ### glTF 2.0 格式 **为什么选择适用于 Web 的 glTF：** * 行业标准的网络 3D 格式 * 高效的二进制编码（.glb） * PBR材质支持 * 动画和蒙皮 * 可通过自定义数据进行扩展 * 广泛的库支持（Three.js、Babylon.js 等） **glTF 与 GLB：** .gltf = JSON + 外部 .bin + 外部纹理 .glb = 单个二进制文件（推荐用于网络） ### Blender Python API (bpy) **通过 Python 访问 Blender 数据和操作：** 导入bpy # 访问场景数据场景 = bpy.context.scene 对象 = bpy.data.objects # 修改对象 obj = bpy.data.objects['立方体'] 对象位置 = (0, 0, 1) 对象比例 = (2, 2, 2) # 导出 glTF bpy.ops.export_scene.gltf( filepath='/path/to/model.glb', 导出格式='GLB' ） ### 网页优化目标 **目标指标：** * 文件大小：每个模型 <5 MB（理想情况 <1 MB） * 多边形数量：<50k 实时三角形 * 纹理分辨率：最大 2048x2048（首选 1024x1024） * 绘制调用：通过纹理图集最小化 * 加载时间：平均连接<2秒 ## 常见模式 ### 1\.基本 glTF 导出（手动） # Blender Python 控制台或脚本导入bpy # 选择要导出的对象（可选 - 如果未选择则导出所有对象） bpy.ops.object.select_all(action='DESELECT') bpy.data.objects['MyModel'].select_set(True) # 导出为 GLB bpy.ops.export_scene.gltf( filepath='/path/to/output.glb', export_format='GLB', # 二进制格式 use_selection=True, # 仅导出选定的 export_apply=True, # 应用修饰符 export_texcoords=True, # UV 坐标 export_normals=True, # 法线 export_materials='EXPORT', # 导出材料 export_colors=True, # 顶点颜色 export_cameras=False, # 跳过相机 export_lights=False, # 跳过灯光 export_animations=True, # 包含动画 export_draco_mesh_compression_enable=True, # 压缩几何体 export_draco_mesh_compression_level=6, # 0-10（推荐 6） export_draco_position_quantization=14, # 8-14 位 export_draco_normal_quantization=10, # 8-10 位 export_draco_texcoord_quantization=12 # 8-12 位） ### 2\.用于批量导出的Python脚本 #!/usr/bin/env Blender --background --python ”“” 批量导出目录下所有.blend文件到glTF 用法： Blender --background --python batch_export.py -- /path/to/blend/files ”“” 导入bpy 导入操作系统导入系统 # 获取 -- 之后的命令行参数 argv = 系统.argv argv = argv[argv.index("--") + 1:] if "--" in argv else [] input_dir = argv[0] if argv else "/path/to/models" 输出目录 = argv[1] 如果 len(argv) > 1 否则输入目录 + "_gltf" # 创建输出目录 os.makedirs（output_dir，exist_ok = True） # 查找所有 .blend 文件 Blend_files = [f for f in os.listdir(input_dir) if f.endswith('.blend')] print(f"找到 {len(blend_files)} .blend 文件") 对于blend_files中的blend_file： input_path = os.path.join(input_dir, Blend_file) 输出名称 = Blend_file.replace('.blend', '.glb') 输出路径 = os.path.join(输出目录, 输出名称) print(f"处理：{blend_file}") # 打开混合文件 bpy.ops.wm.open_mainfile(文件路径=输入路径) # 导出为 GLB 并进行优化 bpy.ops.export_scene.gltf( 文件路径=输出路径，导出格式='GLB', 导出_应用=真， export_draco_mesh_compression_enable=真， export_draco_mesh_compression_level=6 ） print(f" 导出：{output_name}") print("批量导出完成！") **运行批处理脚本：** 搅拌机--背景--pythonbatch_export.py--/models/source/models/output ### 3\.优化 Web 模型（抽取）导入bpy def optimize_mesh(obj, target_ratio=0.5): """使用抽取修改器减少多边形数量。""" 如果 obj.type != 'MESH': 返回 # 添加抽取修饰符 decimate = obj.modifiers.new(name='Decimate', type='DECIMATE') decimate.ratio = target_ratio # 0.5 = 原始多边形的 50% decimate.use_collapse_triangulate = True # 应用修饰符 bpy.context.view_layer.objects.active = obj bpy.ops.object.modifier_apply(modifier='Decimate') print(f"优化的 {obj.name}: {len(obj.data.polygons)} 多边形") # 优化所有选定的网格对于 bpy.context.selected_objects 中的 obj： optimize_mesh(obj, target_ratio=0.3) ### 4\.网页纹理烘焙导入bpy def Baker_textures(obj, 分辨率=1024): """将所有材料烘焙为单一纹理。""" # 设置烘焙设置 bpy.context.scene.render.engine = '周期' bpy.context.scene.cycles.bake_type = '组合' # 创建烘焙图像烘焙图像 = bpy.data.images.new( name=f"{obj.name}_bake", 宽度=分辨率，高度=分辨率） # Create bake material mat = bpy.data.materials.new(name=f"{obj.name}_baked") mat.use_nodes = True 节点 = mat.node_tree.nodes # 添加图像纹理节点 tex_node =nodes.new(type='ShaderNodeTexImage') tex_node.image = 烘焙图像 tex_node.select = True 节点.active = tex_node # 分配材料如果 obj.data.materials： obj.data.materials[0] = 垫子其他： obj.data.materials.append(mat) # 选择对象 bpy.context.view_layer.objects.active = obj obj.select_set(True) # 烘烤 bpy.ops.object.bake(type='组合') # 保存烘焙纹理 Baker_image.filepath_raw = f“/tmp/{obj.name}_bake.png” 烘焙图像.file_format = 'PNG' 烘焙图像.save() print(f"将 {obj.name} 烘焙到 {bake_image.filepath_raw}") # 烘焙选定的对象对于 bpy.context.selected_objects 中的 obj：如果 obj.type == 'MESH': 烘焙纹理（obj，分辨率=2048） ### 5\.生成 LOD（细节级别）导入bpy def generate_lods(obj, lod_levels=[0.75, 0.5, 0.25]): """生成多边形数量递减的 LOD 副本。""" lod_对象 = [] 对于 i，枚举中的比率（lod_levels）： # 重复对象 lod_obj = obj.copy() lod_obj.data = obj.data.copy() lod_obj.name = f"{obj.name}_LOD{i}" # 场景链接 bpy.context.collection.objects.link(lod_obj) # 添加抽取修饰符 decimate = lod_obj.modifiers.new(name='Decimate', type='DECIMATE') 抽取.比率 = 比率 # 应用修饰符 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") 返回 lod_objects # 为选定的对象生成 LOD 如果 bpy.context.active_object： generate_lods(bpy.context.active_object) ### 6\.使用纹理压缩导出导入bpy 导入操作系统 def export_optimized_gltf(文件路径，texture_max_size=1024): """导出具有缩小纹理的 glTF。""" # 缩小所有纹理对于 bpy.data.images 中的 img：如果 img.size[0] >texture_max_size 或 img.size[1] >texture_max_size: img.scale（纹理最大尺寸，纹理最大尺寸） print(f"将 {img.name} 缩小为 {texture_max_size}x{texture_max_size}") # 使用 Draco 压缩导出 bpy.ops.export_scene.gltf( 文件路径=文件路径，导出格式='GLB', 导出_应用=真， export_image_format='JPEG', # 较小尺寸的 JPEG（或高质量的 PNG） export_jpeg_quality=85, # 0-100 export_draco_mesh_compression_enable=真， export_draco_mesh_compression_level=8, # 最大压缩导出_draco_position_quantization = 12，导出_draco_normal_quantization = 8， export_draco_texcoord_quantization=10 ） # Export optimized export_optimized_gltf('/path/to/optimized.glb',texture_max_size=512) ### 7\.命令行自动化 #!/bin/bash # 无需打开GUI即可批量导出Blender文件到glTF SCRIPT_DIR="$(目录名"$0")" # 导出当前目录下所有.blend文件对于*.blend 中的blend_file；做 echo“正在导出$blend_file...” 搅拌机--背景“$blend_file”--python-< { 场景.add(gltf.场景); // 播放动画 if (gltf.animations.length > 0) { const mixer = new THREE.AnimationMixer(gltf.scene); const action = Mixer.clipAction(gltf.animations[0]); 动作.play(); } }); ### 使用 React 三纤维从 '@react- Three/drei' 导入 { useGLTF } ；函数模型() { const { 场景 } = useGLTF('/models/exported.glb'); 返回 ; } // 预加载以获得更好的性能 useGLTF.preload('/models/exported.glb'); ### 使用 Babylon.js 从'@babylonjs/core'导入*作为BABYLON；导入“@babylonjs/loaders/glTF”； BABYLON.SceneLoader.ImportMesh( '', '/模型/', '导出.glb', 场景，（网格）=> { console.log('Loaded meshes:', meshes); } ）； ## 优化技术 ### 1\.几何优化 **抽取修改器：** # 将多边形数量减少 70% obj.modifiers.new(name='Decimate', type='DECIMATE') obj.modifiers['Decimate'].ratio = 0.3 **按距离合并：** # 删除重复的顶点 bpy.ops.object.mode_set(mode='编辑') bpy.ops.mesh.select_all(action='SELECT') bpy.ops.mesh.remove_doubles（阈值=0.0001） bpy.ops.object.mode_set(mode='OBJECT') **三角面：** # 确保所有面都是三角形（某些引擎需要） bpy.ops.object.mode_set(mode='编辑') bpy.ops.mesh.select_all(action='SELECT') bpy.ops.mesh.quads_convert_to_tris() bpy.ops.object.mode_set(mode='OBJECT') ### 2\.纹理优化 **图像压缩：** # 将纹理保存为 JPEG（有损但较小）对于 bpy.data.images 中的 img： img.file_format = 'JPEG' img.filepath_raw = f"/output/{img.name}.jpg" img.save() **纹理图集：** # 将多个纹理合并到一个图集中 # 使用 Smart UV Project 进行自动图集 bpy.ops.object.mode_set(mode='编辑') 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\.材料简化 **转换为PBR：** # 确保材料使用有原则的 BSDF（glTF 标准） bpy.data.materials 中的格式：如果不是 mat.use_nodes： mat.use_nodes = True 节点 = mat.node_tree.nodes 原则 = Nodes.get('原则 BSDF') 如果没有原则：原则=节点.new（类型='ShaderNodeBsdfPrincipled'） output = Nodes.get('材质输出') mat.node_tree.links.new(principled.outputs[0], output.inputs[0]) ## 常见陷阱 ### 1\.大文件大小 **Problem:** Exported .glb files are 20+ MB **解决方案：** * 启用 Draco 压缩（减少 60-90%） * 降低纹理分辨率（2048 → 1024 或 512） * 使用 JPEG 代替 PNG 作为纹理 * Decimate geometry (target <50k triangles) * 删除未使用的材质/纹理 ### 2\.导出时缺少纹理 **问题：** 纹理不会出现在 Web 查看器中 **解决方案：** * 确保所有图像均已保存（未打包） * 使用纹理的相对路径 * 启用“导出图像”导出 * 检查图像格式兼容性（PNG/JPEG） ### 3\.动画不播放 **Problem:** Animations don't export or play incorrectly **解决方案：** * 确保动画在时间轴上（不是 NLA 片段） * 启用“导出动画”导出 * 检查动画动作是否分配给对象 * 对复杂的装备使用“烘焙动作” ### 4\.材质看起来不同 **问题：** 材质在 Web 和 Blender 中的渲染方式不同 **解决方案：** * 使用 Principled BSDF（映射到 glTF PBR） * 避免自定义着色器节点（不会导出） * 使用支持的纹理类型（基色、金属、粗糙度、法线、发射） * 部署前在 glTF 查看器中进行测试 ### 5\.出口时间缓慢 **问题：** 导出需要 10 多分钟 **解决方案：** * 导出前应用修改器（不要非破坏性导出） * 降低几何复杂度 * 删除未使用的数据（孤立清理） * 使用命令行导出（比 GUI 更快） ### 6\.浏览器中的性能问题 **问题：** 模型在浏览器中滞后 **解决方案：** * Generate LODs (Level of Detail) * 对重复对象使用实例化 * 限制绘制调用（合并对象、纹理图集） * 减少多边形数量（<50k 三角形） * 优化着色器（避免透明/折射） ## 最佳实践 ### 出口前检查表 ☐ 应用所有修饰符合并顶点（删除双点） ☐ 对面进行三角剖分（如果需要） ☐ 优化多边形数量（<50k 三角形） UV展开所有网格烘焙材料（如果复杂）调整纹理大小（最大 2048x2048）使用有原则的 BSDF 材料删除未使用的数据（孤立清理） ❖ 描述性地命名物体 ☐ Set origin points correctly 应用变换 (Ctrl+A) ### 导出设置 # 推荐的 glTF 导出设置 bpy.ops.export_scene.gltf( 文件路径='/output.glb', 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, # 包含动画 export_lights=False, # 跳过灯光（在代码中重新创建） export_cameras=False # 跳过相机） ## 资源该技能包括： ### 脚本/ * `batch_export.py` \- Batch export .blend files to glTF * `optimize_model.py` \- 优化网络的几何和纹理 * `generate_lods.py` \- 自动生成 LOD 副本 ###参考资料/ * `gltf_export_guide.md` \- 完整的 glTF 导出参考 * `bpy_api_reference.md` \- Blender Python API 快速参考 * `optimization_strategies.md` \- 优化技巧详解 ###资产/ * `export_template.blend` \- 预配置的导出模板 * `shader_library/` \- Web 优化的 PBR 着色器 ## 相关技能 * **twojs-webgl** \- 在 Three.js 中加载并渲染导出的 glTF 模型 * **react-三纤维** \- 在 React 应用程序中使用 glTF 模型 * **babylonjs-engine** \- 用于网络的替代 3D 引擎 * **playcanvas-engine** \- 支持glTF导入的游戏引擎

Blender 网络管道

包含技能