threejs模型可视化编辑器_3D可视化流程基础烘焙篇

?  哈？烘焙，是烘烤面包那种烘焙吗？ 温馨提示：阅读文章需大约用时：20分钟 背景图片来源：https://www.artstation.com/artwork/AqZmq5

一.什么是烘焙

首先我们要先明白什么是烘焙，烘焙能做什么？ “烘焙”是计算机图形学(CG)行业中经常使用的术语，涉及到游戏开发和传统的非实时渲染使用。但是烘焙会有一些现实世界的含义会让人感觉到困惑，所以在本文中我的目标是解释这个术语并在Blender中讲解“烘焙”的基础流程。 我们通常最常见的类型是“纹理烘焙” Texture Baking (or  Map Baking) .     “烘焙”是将 3D网格 的几何特征保存到 纹理文件 (位图文件)的过程的名称。英文名称叫 [Bake] ，从 3D物体属性上(环境光遮蔽、法线、顶点颜色、方向、曲率、位置等)把多种组合的特性(包括材质、纹理和照明)进行烘焙为单个纹理，然后又可以使用对象的UV坐标将图像纹理重新映射到模型对象。 注：除了常见的纹理烘焙、还有有动画计算的物理模拟烘焙、轻烘焙、完全烘焙等等

二.烘焙的使用场景

一般程序运行为了加速运算，需要避免重复计算光影效果，之所以要用到烘焙技术，是因为实时灯光的运算特别消耗硬件资源，直接使用实时灯光(特别是点光、聚光)会导致场景卡顿，尤其是在现在越来越迫切需要在移动端运行的需求，而且实时灯光不能产生优秀的GI光影效果(有些情况也会使用SSGI屏幕全局照明技术作为补偿)，因此通过烘焙，将复杂的CPU计算运算负担转交给GPU的轻量图形运算，不仅优化了性能，还提升了效果质量。

三.烘焙的优缺点

优点：

• 烘焙纹理，如基础颜色或者法线贴图，用于导出到游戏引擎或Web端/移动端应用

• 烘焙环境光遮蔽或者程序纹理，作为纹理编辑的基础，使纹理绘制更加容易

• 创建光照贴图以提供全局照明或加快应用中的渲染速度，提升性能加快游戏中的渲染速度

缺点：

• 必须将模型对象拆分UV

• 如果烘焙了阴影，则光线和物体将无法相对移动

• 纹理贴图(例如4096x4096)将会占用大量内存，并且与渲染解决方案一样慢

• 必须花费时间进行解包，烘焙和保存文件并将纹理应用于通道

• 折射、高反射烘焙会出现错误

四.Blender2.8中的烘焙流程

拆分UV的模型/高低模 —  设置两套UV — 材质贴图/创建空贴图 — UV编辑器新建图像 — 切换为Cycles渲染 — 选择需要烘焙对象进行烘焙

五.如何在Blender中烘焙

视频演示Blender中烘焙的流程与操作 教程中模型材质节点设置如下，文章末尾将放入此次的教程文件，可以用于练习。 拆分UV模型/高低模 在模型构建好以后，按U键调取UV Mapping窗口对模型进行拆分UV，这里我使用的是Blender中的智能拆分UV(Smart UV)，需要注意的点是要设置UV孤岛的边距，可根据情况设置0.1~0.2的边距( 烘焙的结果将会超出每一个UV块的边界，以此来柔和纹理中的接缝，然后设置烘焙输出边距Px )如果是烘焙法线贴图需要注意高模与低模的先选后选顺序以及渲染设置勾选所选物体->活动物体 设置需要烘焙的物体两套UV 在第二套UV拆分后，选择第二套UV拆分后再重复上一次的操作，对Bake这套UV进行智能拆分 创建新图像并在材质贴图新建图像 在UV编辑模块新建图形，设置烘焙贴图的名称与尺寸，实际项目建议贴图烘焙尺寸设置为4096以上，测试时可设置为512x512，如烘焙完成可以选择图像另存为本地 切换为Cycles渲染器 需要注意的是如果需要在Blender中需要烘焙，则需要切换为Cycles渲染器，EEVEE实时渲染器没有烘焙的设置,然后根据自己的需求选择烘焙的设置 选择需要烘焙对象进行烘焙 然后选择需要烘焙的对象，选择自己需要的设置进行烘焙，多个物体烘焙需要注意模型先选和后选的顺序 引擎调试 烘焙完成后在Blender导出Gltf文件，导入编辑器调试，排除问题，调试也可根据不同情况对模型设置不同类型的材质 ThreeJS编辑器： https://threejs.org/editor/ Gltf预览： https://gltf-viewer.donmccurdy.com/

六.常见问题

UV接缝问题 接缝在场景缩小或者UV拆分出现问题出现，需要在UV拆分的孤岛边距( 烘焙的结果将会超出每一个UV块的边界，以此来柔和纹理中的接缝 )设置更多间隔，烘焙的时候输出设置边距，保证足够的出血量 导出后纹理不匹配问题 检查贴图是否指定错误，导出时是不是选择对应的UVMap 模型文件下载 https://share.weiyun.com/6HWoKWlS 项目中的单个模型烘焙截图

七.总结

3D的烘焙是3D的一项专题技术，涉及到作品的最终视觉效果呈现和设备是否能流畅的运行，尤其是移动端设备上的运行，性能上需要流畅运行烘焙技术则是绕不开的槛。商业的项目，光靠理论概念是不可能完成项目的，必须经历实战演练，熟练掌握不同场景状态下的烘焙流程，才能应用于商业项目。

---

以上原创文章仅代表个人观点，如有不足之处和错误，或者您有更好的建议，欢迎在评论区提出建议与探讨，让我们共同进步！ 关注公众号，获取更多设计与技术资讯 如需转载和引用请注明作者出处，谢谢！ 后续文章预告： 《如何快速创建3D可视化原型-设计进阶篇》 《设计师如何落地3D可视化项目-WebGL》

---

近期文章：UED团队招人，这次视觉设计、3D设计、前端开发都要。如何利用Figma构建组件库面向5G的3D沉浸式体验技术