《阿里云：2024年面向Web应用的三维建模实战报告（53页）.pdf》由会员分享，可在线阅读，更多相关《阿里云：2024年面向Web应用的三维建模实战报告（53页）.pdf（53页珍藏版）》请在本站上搜索。 1、导论得益于游戏产业的发展，目前主流桌面端三维引擎如 UE、Unity 等三维模型的工作流非常成熟；但是 Web 端的三维模型开发却面临工作流混乱、规范缺失、人才匮乏等挑战，阻碍了三维模型 Web 应用的推广。目前 gltf 已经成为 Web 三维应用事实上的标准格式，而 Blender 是支持 WebGL最好的 DCC 软件之一；通过 Blender 这款开源软件，可以迅速搭建 WebGL 工作流的生态；Blender 结合 gltf，可以规范 WebGL 美术资产工作流，为三维模型 Web 应用开发提供支撑。本书是面向传统前端、三维模型设计师的一本入门教程，希望可以帮助传统前端了解三维模型渲2、染需要关注的技术点；同时帮助三维模型设计师产出符合 Web应用标准的三维模型。目录页第一章 为何选择 Blender 作为 Web 三维模型工具.5第二章 WebGL 工作流与 PBR 规范.10第三章 Blender 导出 WebGL 适配的三维模型.16第四章 烘焙贴图与导出模型.20第五章 烘焙 AO 贴图与导出.26第六章 导出透明材质模型.30第七章 形变动画与导出.32第八章 过程化 PBR 纹理烘焙导出.34第九章 PBR/metalness-roughness 工作流注意点.39第十章 导出 gltf 骨骼动画模型.42第十一章 烘焙阴影贴图.45第十二章 三维模型 Web 应3、用开发简介.49第一章 为何选择 Blender 作为 Web 三维模型工具5第一章第一章 为何选择为何选择 BlenderBlender 作为作为 WebWeb 三维模三维模型工具型工具首先，说一下 Blender 的缺点：Blender 不是最专业的 DCC 软件，单挑 3dsMax、C4D、Maya、Substance、Houdini都不行；Blender 是属于比较小众的软件，国内会的人相对比较少，学习资源也比较少；再说说为什么要以 Blender 作为 WebGL 三维建模工作流的原因。1)Blender 是支持 WebGL 最好的 DCC 软件之一具备兼容性最好的 gltf 导入/4、导出插件；第一章 为何选择 Blender 作为 Web 三维模型工具6具备完善的 gltf/pbr 节点工作流；跟随支持最新的 WebGL/gltf 特性；2)Blender 的实时渲染引擎对 WebGL 产品原型设计有很大参考价值光追离线渲染的原型通常和实时渲染引擎能实现的有很大差距，缺乏参考价值；第一章 为何选择 Blender 作为 Web 三维模型工具7Blender 的 eevee 引擎实时渲染从理论上说 WebGL 都能还原；可以为设计师和开发提供一个三维产品原型的创作环境对齐；3)Blender 开源软件，可以迅速搭建 WebGL 工作流的生态Blender 是免费软件，可以让5、轻度用户也可以使用；免去构建传统工作流的巨大支出；Blender 集建模、材质处理、合成等于一体的 DCC 创作工具，适合互联网公司设计小团队搭建完整的工作流；互联网公司设计小团队无法像游戏公司一样搭建分工细致的工作流；Blender 支持 python 脚本，可以自定义插件与工作环境，创建最适合需求的工作环境；第一章 为何选择 Blender 作为 Web 三维模型工具84)Blender 结合 gltf，可以规范 WebGL 美术资产工作流gltf 已经成为 Web 三维应用事实上的标准格式；gltf 支持标准的 pbr 工作流，可以规范当前 WebGL 美术工作流的乱象；第一章 为何选择6、 Blender 作为 Web 三维模型工具9gltf 支持 transform 动画，给以设计师很大的创作空间；总结：Blender 未必是最专业的 DCC 软件，但肯定是最适合 WebGL 美术资产创作的三维建模软件。第二章 WebGL 工作流与 PBR 规范10第二章第二章 WebGLWebGL 工作流与工作流与 PBRPBR 规范规范1.为什么要引入 PBR 这么一个工作流规范PBR 是用于对齐设计师与设计师、设计师与引擎工程师之间渲染效果的一套方法论；设计师与引擎工程师可以根据真实物理世界的规律（是否金属物体，是否光滑，本身的色彩等物理属性），还原物体的渲染质感；而不需要去猜测调试某7、个物体的材质参数；PBR 是基于光照等物理定律的规则，相同的参数在不同渲染环境下也是保持一致的视觉效果（理论上，实际上有细微偏差）；2.什么是 PBR？PBR 全称(Physicallly-Based Rendering)。笼统的说，就字面含义可以看出，这是一种基于物理规律模拟的一种渲染技术。最早用于电影的照片级真实的渲染。近几年由于硬件性能的不断提高，已经大量运用于 PC 游戏与主机游戏的实时渲染。几款著名的 3D 引擎均有了各自的实现(UnrealEngine 4,CryEngine 3,Unity 3D 5)。3.什么是 PBR 贴图？PBR 建 模 有 Metalness-Roughn8、ess 和 Specular-Glosiness 两 套 工 作 流，推 荐Metalness-Roughness 工作流;Metalness-Roughness 建模工作流通常包括 6 种贴图，具体包括：第二章 WebGL 工作流与 PBR 规范111)Metalness 贴图：通常和 roughness 合成一张贴图，有效位 bg 通道metalness b 通道roughness g 通道色彩空间为 linear 线性空间2)Roughness 贴图：通常和 metalness 合成一张贴图，有效位 bg 通道metalness b 通道第二章 WebGL 工作流与 PBR 规范12ro9、ughness g 通道色彩空间为 linear 线性空间3)baseColor 贴图:有效位 rgba 通道色彩空间为 sRGB 空间第二章 WebGL 工作流与 PBR 规范134)normal 贴图:切线空间贴图色彩空间为 linear 线性空间第二章 WebGL 工作流与 PBR 规范145)Occlusion 贴图:有效位 r 通道（如与 metalness 和 roughness 贴图合并通道）色彩空间为 linear 线性空间6)emissive 贴图:有效位 rgb 通道色彩空间为 sRGB 空间第二章 WebGL 工作流与 PBR 规范15最终效果图:第三章 Blender 10、导出 WebGL 适配的三维模型16第三章第三章 BlenderBlender 导出导出 WebGLWebGL 适配的三维模适配的三维模型型纯色或贴图材质的模型导出如果模型只用到了基本的 RGB 颜色及纹理贴图，没有用到其他过程纹理、AO 等复杂效果节点，则可以方便的直接导出 gltf 模型；需要注意的是必须选择 Principled BSDF 材质；Step 1:材质选择：选择 Principled BSDF 材质；Step 2:材质设置：设置材质属性与纹理贴图；第三章 Blender 导出 WebGL 适配的三维模型17Step 3:导出：选择 gltf 模型导出；如果使用了修改器，选择输11、出修改器；如果有动画，选择输出动画；第三章 Blender 导出 WebGL 适配的三维模型18Step 4:导出效果验证：gltf-viewer 查看；注意点：为什么辉光效果不见了？gltf 模型导出的内容有限制，仅支持如下内容：MeshesMaterials(Principled BSDF)and Shadeless(Unlit)TexturesCamerasPunctual lights(point,spot,and directional)第三章 Blender 导出 WebGL 适配的三维模型19Animation(keyframe,shape key,and skinning)解决12、：如何找回辉光效果？辉光通常是引擎的后期效果；可以在引擎中打开 Bloom 后期效果；第四章 烘焙贴图与导出模型20第四章第四章 烘焙贴图与导出模型烘焙贴图与导出模型使用了过程化纹理材质的模型导出如上篇所述，导出基本贴图的 gltf 模型非常方便，但是如果使用了过程化纹理节点，则需要通过烘焙纹理贴图才能导出建模效果；Step1：建模Step2：直接导出 gltf 的效果第四章 烘焙贴图与导出模型21过程化纹理没有导出Step3：烘焙贴图确保是使用 cycles 引擎，eevee 引擎没有烘焙选项第四章 烘焙贴图与导出模型22建立一张空的纹理，并展开建立一个空的 image texture 节点13、，选择新创建的空纹理，作为烘焙纹理存放目标第四章 烘焙贴图与导出模型23烘焙贴图选择 cycles 引擎；选择烘焙 diffuse；如果选择 combine，则会烘焙光照效果；使用烘焙纹理贴图第四章 烘焙贴图与导出模型24导出 gltf 模型：色差：引擎环境贴图不同导致；附录：烘焙 basecolor map 补充说明BSDF 烘焙 basecolor map 好像有问题，如果单独选择 diffuse 会出现全部黑色；如果选择 combine，则把光照也烘焙进去了；因此可以临时用 diffuse shader 替换 principled bsdf 节点，专门用户烘焙 basecolormap，14、这个模式测试正常；第四章 烘焙贴图与导出模型25第五章 烘焙 AO 贴图与导出26第五章第五章 烘焙烘焙 AOAO 贴图与导出贴图与导出什么是 AO 贴图？AO 贴图就是提供了非常精确和平滑的阴影，就好像是全局照明的结果。在你最终渲染后有多种方法来合成这些阴影会在真正意义上改善图像，它主要能改善阴影，给场景更多的深度，真正有助于更好的表现出模型的所有细节。通俗的来讲就是：AO 不需要任何灯光照明，它以独特的计算方式吸收“环境光”（同时吸收未被阻挡的“光线”和被阻挡光线所产生的“阴影”），从而模拟全局照明的结果，它主要是通过改善阴影来现实更好的图像细节，尤其在场景物体很多从而到处阻挡着光线导致间15、接照明不足时，AO 的作用会更加明显。具体的说，AO 可以解决或改善漏光、飘和阴影不实等问题，解决或改善场景中缝隙、褶皱与墙角、角线以及细小物体等的表现不清晰问题，综合改善细节尤其是暗部阴影，增强空间的层次感、真实感，同时加强和改善画面明暗对比，增强画面的艺术性。为什么需要烘焙 AO 贴图？因为在离线渲染引擎中（如 cycles），AO 是一个节点，导出为 gltf 模型之后，AO 效果会消失；为了固化 AO 效果，gltf 提供了 AO 贴图通道，可以烘焙生成 AO 贴图之后，与 gltf 模型一起导出；第五章 烘焙 AO 贴图与导出27cycles 中的 AO 效果直接导出 gltf 的效16、果没有光源（环境光除外）的情况下，模型完全失去了立体感；第五章 烘焙 AO 贴图与导出28烘焙 AO 贴图？step1:新建一张贴图；step2:材质节点增加 image texture node 装入新建贴图；step3:烘焙 AO 贴图；导出 AO 贴图？step1:导入 gltf 节点组（找一个标准 gltf 模型，推荐官方的 waterbottle）；step2:AO 贴图节点连接 gltf 节点组；step3:导出 gltf 模型；第五章 烘焙 AO 贴图与导出29带 AO 贴图的 gltf 模型有了 AO 贴图，没有光源（环境光除外）的情况下，模型也保持了立体感；第六章 导出透明材17、质模型30第六章第六章 导出透明材质模型导出透明材质模型step1：设置材质颜色透明度step2：设置材质混合模式为 alpha blend第六章 导出透明材质模型31编辑的时候可以添加一个 transparent bsdf 节点和 mix shader 节点与目标材质节点混合查看效果，输出的时候恢复目标材质节点(删除 transparent bsdf 节点和 mix shader 节点)；step3：导出 gltf 模型第七章 形变动画与导出32第七章第七章 形变动画与导出形变动画与导出gltf 格式支持动画类型支持 transform 动画，如顶点的位移、旋转、缩放等等；比如物体的移动、旋18、转、缩放都支持；不支持材质属性的变化，如改变材质颜色、透明度等等都不支持；step1：设置动画属性设置 mesh 的 transform 属性；打关键帧；设置缓动类型，如线性或者非线性；第七章 形变动画与导出33step2：导出 gltf 模型需要勾选导出动画；查看效果；第八章 过程化 PBR 纹理烘焙导出34第八章第八章 过程化过程化 PBRPBR 纹理烘焙导出纹理烘焙导出第三篇内容，过程纹理节点通常还会添加PBR材质中的其他效果，比如roughness、normal等贴图。本篇再扩展一下烘焙导出 basecolor、roughtness 与 normal 贴图。cycles 引擎效果如下：19、第八章 过程化 PBR 纹理烘焙导出35不烘焙直接导出 gltf 模型效果如下：烘焙 basecolor 贴图注意点：需要将环境纹理全局照明切换为 RGB 基础色再烘焙，以免将环境纹理烘焙到基础色贴图。参见第三章附录：如何烘焙 basecolor 贴图第八章 过程化 PBR 纹理烘焙导出36烘焙 metalness 贴图一般手工制作贴图没有这个需求，如果是过程纹理需要烘金属度贴图，则将金属度节点连接到 BSDF 的 emmission 插槽，然后 bake 选择烘焙 emit 贴图即可；烘焙后的 basecolor 贴图第八章 过程化 PBR 纹理烘焙导出37烘焙 normal 贴图烘焙 ro20、ughness 贴图第八章 过程化 PBR 纹理烘焙导出38导出 gltf 模型第九章 PBR/metalness-roughness 工作流注意点39第九章第九章 PBR/metalness-roughnesPBR/metalness-roughness s工作流工作流注意点注意点在制作 PBR 贴图中，metalness-roughness 工作流隐藏了一些暗坑，在追求照片级写实还原的场景中，会影响渲染材质的真实感；basecolor 的明度问题真实世界中的黑不是完全黑（0 sRGB），白也不是完全的白（255 sRGB）；贴图的明度不能低于 30-50 sRGB贴图的明度不能高于 24021、 sRGB第九章 PBR/metalness-roughness 工作流注意点40basecolor 的金属颜色问题真实世界中的金属灰度基本都落在 180-255 sRGB 之间，如果不在这个区间那可能就会破坏真实感；metalness 的贴图的灰度问题判断一个材质是否金属是一个二元选择，同样 metalness 贴图也是一个黑白二元贴图，不存在黑白中间过渡的灰色；这个尤其在过程纹理应用到金属度的时候需要注意，要用colorRamp 将其二元化；第九章 PBR/metalness-roughness 工作流注意点41贴图 UV 展开与尺寸UV 展开应该要充分利用贴图尺寸空间；贴图尺寸越大，渲染22、效果越好；第十章 导出 gltf 骨骼动画模型42第十章第十章 导出导出 gltfgltf 骨骼动画模型骨骼动画模型什么是骨骼动画？骨骼动画（Skeletal Animation）是模型动画中的一种，通过改变骨骼的朝向和位置来为模型生成动画；骨骼动画最重要的特征，就是父级骨骼的运动带动了所有后代骨骼（手臂挥舞的时候，手掌跟着动）。所以骨骼动画比较精致，除了角色动作之外，也很适合表现各类精细设备的动作，在数字孪生领域的工业制造、智慧工程等场景方面有着很大的需求空间。Blender 制作骨骼动画要点相比位移动画，骨骼动画的制作和导出更复杂一些，关节步骤记录如下：绑定 mesh 的顶点到对应的骨骼关23、节第十章 导出 gltf 骨骼动画模型43导出动画之前，将动画 actions 压入 NLA 轨道（这个步骤比位移动画多，要不然不能导出多个 actions）实操案例将挖掘机原型的挖掘动作绑定到2段骨骼动画，并通过Blender输出成2个独立的actions；引擎可以根据需求调用对应的动画 action。第十章 导出 gltf 骨骼动画模型44第十一章 烘焙阴影贴图45第十一章第十一章 烘焙阴影贴图烘焙阴影贴图很多实际项目中负责交付的 ISV 都询问原厂的三维模型效果是如果提升的，本文通过Blender 探索烘焙 GLTF 模型阴影贴图的工作流，以待赋能 ISV；为什么要烘焙阴影渲染性能考虑在24、 UE4 等桌面引擎中，对于静态网格和静态光源，引擎是有光照烘焙功能的，将光照固化到贴图中，减小引擎渲染压力；WebGL 引擎由于适配的应用场景更广泛，本身对性能更敏感，通过烘焙降低用户客户端硬件门槛；视觉效果考虑由于烘焙是离线渲染的过程，视觉效果会优于实时渲染的阴影；烘焙效果对比Blender 建模场景第十一章 烘焙阴影贴图46未烘焙阴影直接导出第十一章 烘焙阴影贴图47烘焙阴影后导出Blender 操作实现步骤一：对投射阴影的物体建立一套 lightmap UV；步骤二：用 cycle 渲染器烘焙 shadow 贴图；步骤三：用两个不同的 uv map 节点挂载原 pbr 贴图和阴影贴图；25、阴影贴图通过 AO贴图节点挂载；第十一章 烘焙阴影贴图48第十二章 三维模型 Web 应用开发简介49第十二章第十二章 三维模型三维模型 WebWeb 应用开发简介应用开发简介用三维模型开发应用有很多优点，例如用户体验新颖、细节展示详尽、交互丰富等等；但是三维模型应用开发也是一个比较专业的领域，需要选择合适的技术方案和工具平台。当前三维模型 Web 应用开发的问题得益于游戏产业的发展，目前主流桌面端三维引擎如 UE、Unity 等三维模型的工作流非常成熟；但是 Web 端的三维模型开发却有不少问题，阻碍了三维模型 Web 应用的推广。模型托管和应用发布的成本较高目前国内缺乏稳定便捷的三维模型托26、管平台；国外知名平台如 SketchFab 等，也存在服务器访问较慢、免费/普通账户受限制大等局限性，比如移除网站标记、访问权限、文件管理等对低阶版本不太友好，导致三维模型应用的开发和发布成本比较高。缺乏低成本的图表/表单开发配套一个完整的三维模型 Web 应用，除了三维模型本身，通常还需要文本、图片、视频、图表等其他要素来配合展示各种信息，目前主流三维模型平台主要提供了三维模型查看器功能，以及简单的模型材质修改、镜头设置等，缺乏低成本的图表/表单开发配套，开发者很难搭建一个完整的三维模型 Web 应用。第十二章 三维模型 Web 应用开发简介50缺乏便捷的交互开发三维模型应用常见的需求还包括27、模型切换、动画播放、三维模型和图表/表单联动等，目前大部分三维模型平台没有提供低成本的交互开发方案。阿里云 DataV 三维模型 Web 应用开发方案为了让用户更方便地应用三维模型，阿里云 DataV 提供了一套完整的三维模型 Web 模型开发方案，包括三维模型托管、应用开发、交互开发、应用分发等完整功能。DataV 三维模型托管服务提供三维模型上传托管服务，并提供 CDN 加速等模型资源外链；支持三维模型实时预览；支持三维模型资产分组管理；第十二章 三维模型 Web 应用开发简介51三维模型 Web 应用开发第一步：新建空白应用，导入三维模型应用创建与模型导入创建空白应用，选择“三维模型查看28、器”组件，并将三维模型资源地址导入第十二章 三维模型 Web 应用开发简介52第二步：设置三维模型样式通过沉浸式编辑器，调整三维模型的位置和镜头设置；DataV 内置“自动校准”一键式快速调整功能；调整动画、灯光等模型样式设置；第三步：搭建表单等附属功能DataV 内置文本展示、常规图表、多媒体展示、交互组件等 100+图表/表单模块，覆盖常规需求；通过所见即所得模式，将表单加入应用，并设置样式/数据；第十二章 三维模型 Web 应用开发简介53第四步：“零代码”搭建交互功能DataV 提供“蓝图”节点编程，支持“零代码”搭建三维模型与表单的交互开发支持三维模型替换/显隐、动画控制、镜头控制等常见功能；支持三维模型与表单交互，包括数据互动、交互触发等等；第十二章 三维模型 Web 应用开发简介54成果展示：矿产工业设备产品展示应用丰富的表单模块，配合三维模型提供丰富的产品信息展示支持多个三维的切换与模型动画控制；支持三维模型产品信息与表单的交互展示；