工作流程

下面记录了Soft8Soft团队和Verge3D用户内部使用的典型工作流程,示例包括 电动车配置器 演示, 茶壶加热器 演示, 工业机器人 演示, 珠宝配置器 等。

要创建Web3D互动内容,使用Blender、3ds Max或Maya都可以达到同样的目的。

建模与烘焙

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

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

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

选择材质系统

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

如果您的内容由于 某种原因需要与glTF 2.0标准兼容 ,您应该使用Verge3D PBR着色器(请参阅 Blender3ds MaxMaya的相关设置)。

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

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

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环境:

HDR渲染

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

动画

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

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

请观看以下视频,了解如何创建动画:

布局和用户界面

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

用于嵌入Verge3D应用的单独网页,包含了菜单,按钮,信息框等界面元素。有关更多详细信息和示例,请参阅有关 创建基于HTML的图形化界面 的详细指南。

后期处理

使用 后期处理拼图可以启用以下效果:bloom(辉光,启用HDR时效果最佳),亮度/对比度,灰度,景深和环境光遮蔽。这些效果的参数可以在运行时更改,也可以通过内部缓存设置以实现高性能的动画。还有一个拼图,可以从场景中删除所有后期效果。

音频

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

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

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

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

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

资产压缩

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

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

发布

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

遇到问题?

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