工作流程
下面记录了Soft8Soft团队和Verge3D用户内部使用的典型工作流程,(示例包括 Scooter Configurator(电动车配置器), Teapot Heater(茶壶加热器——蒸汽朋克游戏), Industrial Robot(工业机器人), Jewelry Configurator(珠宝配置器) 等)。
要创建交互式 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环境:
HDR渲染
在3ds Max和Maya的Verge3D导出设置窗口或Blender的渲染选项卡中设置中,选中“Verge3D Settings”面板上相应的复选框,即可启用HDR(高动态范围成像)渲染管线。在此模式下,引擎使用半精度浮点纹理以实现更高精度和强度范围,这对正确渲染 辉光后期特效(Bloom post-process effect) 尤为重要。
动画
可以如常为相关模型部件创建动画片段,使用蒙皮,整个对象,变形目标和材质动画来产生各种效果,(请参阅 Blender, 3ds Max,和 Maya 动画指南)。
建议您使用更易读易懂的名称来命名动画对象,一边在 拼图编辑器(Puzzles editor)的动画对象中更容易找到它们。
请观看以下视频,了解如何创建动画:
布局和用户界面
在我们的无代码工作流中,基于HTML的界面是使用外部web设计软件构建的。任何能够导出HTML / CSS / JS文件的可视化编辑器都可以用来创建界面。例如, Webflow 是我们用来创建Scooter, Farmer's Journey及Industrial Robot案例的工具。当然,您可以使用代码或使用其他一些工具手动构建HTML界面。
Another approach is using some external web design software to create HTML in code-less manner. Any WYSIWYG editor capable of exporting HTML/CSS/JS files will work. One example is Webflow which we used to create most Verge3D demos such as Scooter, Farmer's Journey or Industrial Robot. You can, of course, build the HTML interface manually with code or using some other tools instead.
用于嵌入Verge3D应用的单独网页,包含了菜单,按钮,信息框等界面元素。有关更多详细信息和示例,请参阅有关 创建基于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),在线寻求帮助。
- YouTube: