工作流程

下面是由Soft8Soft团队和Verge3D用户内部使用的一个典型的工作流程(案例包括踏板车配置器演示茶壶热水器演示工业机器人演示电商网站原型等)。

Verge3D的3ds Max和Blender版本均可成功使用。

建模和烘焙

在我们的团队中,使用以下建模流程。首先,创建高精度的模型。在下一阶段,通过简单地移除suburf修改器或拓扑方式(retopology)获得低到中模。模建议不超过10万三角面片。

然后对低模进行展UV。最后,网格是三角形的 - 这并不是Verge3D的要求,但更适用于烘焙贴图。此外,三角面更适合加载到第三方软件,如Substance Painter。

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

选择材质系统

我们建议3ds Max艺术家使用standard/Scanline 或 physical/ART (需要2017年或更高版本)材质。Blender艺术家应使用Cycles或Eevee(需要2.8版)材质。如果您的内容由于某种原因需要与glTF 2.0标准兼容(例如在Facebook上发布您的模型),您应该使用Verge3D PBR材质(请参阅3ds MaxBlender的设置)。

您还可以查看以下视频,了解如何使用基于物理的材质:3ds MaxBlender

图片格式,分辨率和最佳实践

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中打包灰度图

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

按需加载

如果您正在开发自定义程序或类似的应用程序,您可以考虑在启动时仅加载一组有限的纹理。可以使用replace texture拼图在需求的基础上加载其他纹理并将其应用于模型。

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

PBR贴图

Verge3D支持以下PBR材质模型:

  • 物理材质/ART(3ds Max)
  • Principled BSDF Cycles/Eevee 节点(Blender)
  • glTF-兼容PBR (3ds Max, Blender)

但是,所有这三种情况都遵循在图像中打包PBR组件的相同惯例:

  • AO打包在R通道中
  • 粗糙度打包在G通道中
  • 金属度包装在B通道中

可以使用任何合适的软件创建该组PBR纹理。在我们的团队中,我们使用Substance Painter为其创建了预设,以确保与Verge3D / glTF的兼容性。可以在以下部分中找到有关这些预设的说明和下载链接:3ds MaxBlender

模型和烘焙的法线和AO贴图(如果有)可以通过OBJ格式加载到Substance Painter中。最终在该软件中生成3张贴图:颜色/透明度,AO/粗糙度/金属度和法线。使用 Substance Painter 的Verge3D预设导出纹理。

最后,通过使用本地PBR材质(3ds Max中的 physical / ART,Blender中的Principled BSDF Cycles / Eevee节点)或符合glTF的Verge3D PBR 材质 ,为相关模型设置PBR材质。

环境贴图

环境贴图是用于提供背景和材质反射的实时场景的关键组件。我们建议3ds Max和Blender艺术家使用HDR或JPEG格式的equirectangular图像(虽然也支持立方体贴图)。环境贴图的大小最好不超过2048x1024像素。

除此之外,HDR纹理可用于模拟复杂的照明条件 - 例如,如果有太多的光源要由传统灯表示,或者它们是扩展的。

从v.2.10开始,3ds Max和Blender的默认立方体项目都包含名为environment.hdr的HDR纹理,您可以在应用中重复使用该纹理。

您还可以查看以下视频,了解如何为基于物理的管道设置HDR环境:3ds MaxBlender

HDR渲染

可以使用Verge3D导出设置窗口(3ds Max)中的相应复选框或“渲染”选项卡(Blender)下的Verge3D设置面板启用HDR(高动态范围)渲染流程。在此模式中,引擎使用半浮动纹理以获得更好的精度和强度范围,这对于正确渲染辉光后期处理效果( bloom post-process effect )非常重要。

动画

按常规为相关模型部件创建动画片段。可以使用蒙皮,整个对象,变形目标(shapkeys)和材质动画来产生各种效果。

您可能希望为动画对象提供易于读写的名称,以便可以在拼图编辑器中轻松找到它们。

您还可以查看以下视频,了解如何创建动画:3ds MaxBlender

项目

在设置场景(在此期间您可以使用Sneak Peek按钮在浏览器中进行检查)之后,您可以使用App Manager创建一个长期的Verge3D项目。配置设置通常可以选择默认值。

可以简单地将自己的.max或.blend文件,覆盖默认立方体的.max或.blend文件,它位于您的应用程序文件夹中(verge3d / applications),请务必将所有相关的图像文件也移动到此文件夹。然后,重新打开.max或.blend文件,并以glTF格式执行导出,从而覆盖默认的.glTF文件。

或者,可以考虑首先创建一个Verge3D项目,然后使用位于应用程序文件夹中的默认.max或.blend文件开始工作,就像在初学者指南的相关介绍中建议的那样。

还可以查看以下视频,了解如何使用App Manager创建新的Verge3D项目:3ds MaxBlender

拼图

使用拼图创建交互式场景,用于在点击时触发动画,在悬停时显示轮廓,定位模型部件,逻辑检查等。

查看初学指南的拼图部分中的教程,或直接进入拼图参考以获取更多详细信息。

您还可以查看以下视频,了解如何使用拼图:3ds MaxBlender

布局和UI

在我们的无代码工作流程中,基于HTML的界面是使用外部Web设计软件构建的。任何能够导出HTML / CSS / JS文件的可视化编辑器都可以使用 - 其中一个是Webflow,我们用来创建大多数Verge3D演示,例如踏板车,农场主之旅和工业机器人。当然,您可以使用代码或使用其他一些工具手动构建HTML界面。

界面元素(菜单,按钮,信息框...)是作为嵌入Verge3D应用程序的单独网页的一部分创建的。有关更多详细信息和示例,请参阅有关创建基于HTML的GUI的详细指南。

后期效果

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

声音

可以使用声音拼图添加背景音乐和/或事件声音以由用户触发。您应该将mp3格式用于音频文件,因为它在所有Web浏览器中都受支持。

在iOS上播放声音有一个特殊限制:声音播放只能通过与网页的直接交互来启动。例如,以下设置可以在Apple的设备上随处可用:

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

要解决此问题,您可以使用可以播放的on event / touchstart拼图,并在用户第一次点击屏幕时立即暂停场景中使用的所有声音:

以上设置可从Puzzle Library以Sound iOS Workaround的名称获得。

资产压缩

当应用程序完成时,您可以按照本手册相应部分的说明优化其场景文件的加载。

您还可以查看以下视频,了解如何为您的应用启用资源压缩:3ds MaxBlender

发布

您可以使用“初学指南”的“ 发布”部分中提到的任一方法发布项目。

Copyright © zjbcool.com 2019 all right reserved,powered by Gitbook最后更新: 2020-01-21 10:31:20

results matching ""

    No results matching ""