用于Blender、3ds Max和Maya艺术家的Verge3D工作流程 - Soft8Soft
Description: 这是我们推荐的，使用Blender、3ds Max或Maya创建交互式3D网络体验的工作流程，这是一个经过实践验证的的最佳选择。

# 工作流程

下面记录了Soft8Soft团队和Verge3D用户内部使用的典型工作流程，(示例包括 Scooter Configurator（电动车配置器）, Teapot Heater（茶壶加热器——蒸汽朋克游戏）， Industrial Robot（工业机器人）， Jewelry Configurator（珠宝配置器） 等)。

Teapot Heater 案例。

- 建模与烘焙
- 选择材质系统
- 图像格式、分辨率和最佳实践
- 环境贴图（基于图像的照明）
- HDR渲染
- 动画
- 布局和用户界面
- 后期处理
- 音频
- 资产压缩
- 发布

要创建交互式 3D 网络内容，您可以使用基于 Blender、3ds Max 或 Maya 版本的Verge3D，都可以达到相同的目的。下方图表示意了创建典型 Verge3D 应用程序的主要流程。几乎所有工作都可以由一个具备基本 3D 通才技能的人完成。

#

## 建模与烘焙

在我们的团队中，我们实践了以下建模流程。首先，创建高面模型。下一步，通过简单地移除表面细分修改器或重新拓扑（retopology）获得低面到中等面模型。建议单个模型不超过10万三角面片。

然后对低面模型进行展UV操作。最终模型网格是三角形的——这并不是Verge3D的要求，但更适用于烘焙贴图。此外，三角面模型更适合加载到第三方编辑器，比如Substance Painter。

根据需要，可以使用叠加的高模和低模来进行烘焙法线和AO贴图。

#

## 选择材质系统

在大多数情况下，您应该使用三位软件中原生材质系统为基础执行材质工作流程：

- Blender ：使用Eevee作为参考渲染器对节点进行着色。
- 3ds Max ：物理（以ART或Arnold作为参考渲染器）或标准（以Scanline作为参考渲染器）。
- Maya ：Standard Surface(v. 2020)或aiStandardSurface(v.2019及更早)，以Viewport 2.0作为参考渲染器。

如果您的内容由于 某种原因需要与glTF 2.0标准兼容 ，您应该使用Verge3D PBR着色器（请参阅 Blender， 3ds Max和 Maya的相关设置）。

您可以参考以下视频中的解释，了解如何使用基于物理的材质：

- Youtube: Blender, 3ds Max, Maya.
- Bilibili: Blender, 3ds Max, Maya

  #

  ## 图像格式、分辨率和最佳实践

  ### PNG或JPEG

  为了获得最佳效率，我们建议您为纹理使用网络友好的文件格式：具有最大压缩比的无损PNG或有损JPEG（尽管Verge3D也支持GIF，BMP，TIFF）。通常来说，如果您不需要纹理中的Alpha通道，则首选使用JPEG而不是PNG。

  ### 法线贴图

  即使Alpha通道被浪费，法线贴图也应保存为PNG，因为以JPEG格式加载的法线贴图通常会产生可见的着色伪影。然而，PNG格式的图像在文件大小方面可能过大，因此只有在必需时才使用法线贴图。

  ### 分辨率

  除非你真的需要它们，否则不要使用太多细节的纹理。大图像会对性能产生负面影响，耗尽手持设备上的显存（一直到崩溃）并显着延长负载。大多数纹理的分辨率应为1024像素或更低。

  ### 留意NPOT问题

  纹理的分辨率应遵循 二次幂 规则（256,512,1024 px很好，但1000 px很差）。不管怎样，引擎都会在加载时重新调整所有非二次幂（NPOT）图像，因此请仔细检查纹理，以便在文件大小和加载时间方面实现最高效率。

  ### 长宽比

  纹理可以是正方形或矩形，比如1024x512像素。

  ### 复用

  始终尝试复用材质中的图像文件，以及着色器中的纹理贴图/节点，而非复制。

  请不要将大图作为图标重复使用 – 即使要用到更多图片，也应该预先缩放。

  ### 在RGBA中打包B/W信息

  如果您有多个黑白图像（AO，光照贴图，透明蒙版，颜色蒙版等），请考虑将它们 打包 在单个纹理的RGBA通道中。

  ### 按需加载

  如果您正在开发定制器或类似的应用，您可以考虑在启动时仅加载一组有限的纹理。可使用 replace texture（替换纹理） 拼图，在需求的基础上加载其他纹理并将其应用于模型。另一种方法是用 append scene(追加场景) 拼图来动态地加载场景部分。

  #

  ## 环境贴图（基于图像的照明）

  环境贴图是为实时场景提供背景和材质反射的关键组件。我们建议艺术家们使用HDR或JPEG格式的等距圆柱投影图像（equirectangular images）。出于性能考虑，环境贴图的大小最好不超过2048x1024像素。

  除此之外，HDR贴图也可以用来模拟复杂的照明条件。例如，光源太多无法用传统灯光来表现，或有需要很多扩展光源。

  Blender版、Max版和Maya版的官方案例Cube中都包含了名为 Environment.hdr 的HDR纹理，您可将其用于其他应用。

  您可以观看以下视频了解如何为基于物理材质的工作流程设置HDR环境：

  - Youtube: Blender, 3ds Max, Maya.
  - Bilibili: Blender, 3ds Max, Maya.

  #

  ## HDR渲染

  在3ds Max和Maya的Verge3D导出设置窗口或Blender的渲染选项卡中设置中，选中“Verge3D Settings”面板上相应的复选框，即可启用HDR（高动态范围成像）渲染管线。在此模式下，引擎使用半精度浮点纹理以实现更高精度和强度范围，这对正确渲染 辉光后期特效（Bloom post-process effect） 尤为重要。

  3D可视化案例Scooter使用了HDR渲染功能

  #

  ## 动画

  可以如常为相关模型部件创建动画片段，使用蒙皮，整个对象，变形目标和材质动画来产生各种效果,（请参阅 Blender， 3ds Max，和 Maya 动画指南）。

  建议您使用更易读易懂的名称来命名动画对象，一边在 拼图编辑器（Puzzles editor）的动画对象中更容易找到它们。

  请观看以下视频，了解如何创建动画：

  - YouTube: Blender, 3ds Max, Maya.
  - Bilibili: Blender, 3ds Max, Maya.

  #

  ## 布局和用户界面

  在我们的无代码工作流中，基于HTML的界面是使用外部web设计软件构建的。任何能够导出HTML / CSS / JS文件的可视化编辑器都可以用来创建界面。例如， Webflow 是我们用来创建Scooter， Farmer's Journey及Industrial Robot案例的工具。当然，您可以使用代码或使用其他一些工具手动构建HTML界面。

  E-learning，一个使用3D建模UI的Verge3D演示。
  Teapot Heater，另一个使用3D建模UI的演示。

  另一种方法是使用HTML拼图来创建用户界面。有关更多详细信息和示例，请参阅有关 创建基于HTML的图形化界面 的详细指南。

  #

  ## 后期处理

  环境光遮蔽（GTAO）可以在 Blender / Max / Maya 内启用和导出。

  此外，使用 后期处理拼图可以启用以下效果：bloom（辉光，启用HDR时效果最佳），亮度/对比度，灰度，景深，残影（运动模糊），屏幕空间反射和屏幕空间折射。这些效果的参数可以在运行时更改，也可以通过内部缓存设置以实现高性能的动画。还有一个拼图，可以从场景中删除所有后期效果。

  #

  ## 音频

  可以使用 声音拼图 添加由用户触发的背景音乐或事件声音等。音频文件建议使用 mp3 格式，因为它在所有Web浏览器中都受支持。

  播放声音有一个特殊的限制：声音播放只能通过与网页的直接交互来启动。例如，以下设置可以在任何地方工作，包括在苹果的设备上：

  但是，如果在某些事件上播放的声音不是由直接用户操作引起的，它将不起作用：

  要解决此问题，您可以使用可以 on event / touchstart(事件/触摸启动时) 拼图，在用户第一次点击屏幕时即播放和实时暂停场景中使用的所有声音：

  以上设置，您可在拼图库中找到，名为 Sound iOS Workaround 。

  #

  ## 资产压缩

  当您完成应用创作时，可以按照本手册资产压缩章节来优化场景文件的加载。

  观看以下视频了解如何为你的应用启用资产压缩：

  - YouTube:
    Verge3D for Blender Basics - Part 11 - Application Optimizations
    Verge3D for 3ds Max Basics - Part 9 - Optimizing for Faster Loading
    Verge3D for Maya Basics - Part 11 - Application Optimizations
  - Bilibili:
    Verge3D for Blender入门教程 - 11.应用优化
    Verge3D for 3ds Max基础教程 - 09.快速加载优化
    Verge3D for Maya入门教程 - 11.应用优化

  #

  ## 发布

  您可以使用应用管理器的发布章节中提到的任一方法发布项目。

  ## 遇到问题？

  欢迎您随时在 论坛上提问！您还可以加入中文用户社区QQ群(171678760)，在线寻求帮助。