工作流程
Workflow ——fastest已校订
Below is documented a typical workflow that is used internally by the Soft8Soft team and by Verge3D users (examples include the Scooter Configurator demo, Teapot Heater demo, Industrial Robot demo, e-commerce website mock-up among others).
- 1.建模和烘焙 （Modeling and Baking）
- 2.选择材质系统（Choosing Material System）
- 3.图片格式，分辨率和最佳实践（Image Formats, Resolution and Best Practices）
- 4.PBR贴图（PBR Textures）
- 5.环境贴图（Environment Map）
- 6.HDR渲染（HDR Rendering）
- 7.动画（Animation）
- 8.项目（Project）
- 9.拼图（Puzzles）
- 10.布局和UI（Layout and UI）
- 11.后期效果（Post-processing）
- 12.声音（Audio）
- 13.资产压缩（Asset Compression）
- 14.发布（Publishing）
Both the 3ds Max and Blender versions of Verge3D can be used with equal success.
3ds Max和Blender版本的Verge3D都可以同样成功使用这些案例。
＃
In our team, we practice the following modeling pipeline. At first, high-poly versions of models are created. At the next stage, low- to middle-poly models are obtained via simply removing the subsurf modifier or retopology. No more than 100k tris per model is recommended.
在我们的团队中，使用以下建模流程。首先，创建高精度的模型。在下一阶段，通过简单地移除suburf修改器或拓扑方式（retopology）获得低面到中等面模型。模型建议不超过10万三角面片。
The low-poly models are then UV-unwrapped. Finally, the meshes are triangulated - this is not a requirement of Verge3D but rather recommended for baking maps. Also, triangulated models are better suited for loading to third-party editors such as Substance Painter.
然后对低面模型进行展UV。最后，网格是三角形的 - 这并不是Verge3D的要求，但更适用于烘焙贴图。此外，三角模型更适合加载到第三方编辑器，如Substance Painter。
Normal and occlusion maps, if they are needed, are baked using the superimposed high-poly and triangulated low-poly meshes.
根据需要，可以使用叠加的高模和低模来进行烘焙法线和AO贴图。
＃
We recommend 3ds Max artists to use standard/Scanline or physical/ART (v. 2017 or higher required) materials. Blender artists should use Cycles or Eevee (v. 2.8 required) materials. If your content needs to be compatible with glTF 2.0 standard for some reason (such as for posting your model on Facebook), you should use Verge3D PBR shader (see the setups for 3ds Max, Blender).
我们建议3ds Max艺术家使用standard/Scanline 或 physical/ART （需要2017年或更高版本）材质。Blender艺术家应使用Cycles或Eevee（需要2.8版）材质。如果您的内容由于某种原因需要与glTF 2.0标准兼容（例如在Facebook上发布您的模型），您应该使用Verge3D PBR着色器（请参阅3ds Max，Blender的设置）。
＃
For best efficiency, we recommend you to use web-friendly formats for your textures: lossless PNG with maximum compression, or lossy JPEG (although Verge3D also supports GIF, BMP, TIFF). As a rule of thumb, if you don't need the alpha channel in your texture, prefer using JPEG over PNG.
为了获得最佳效率，我们建议您为纹理使用适用网络格式：具有最大压缩的无损PNG或有损JPEG（尽管Verge3D也支持GIF，BMP，TIFF）。根据经验，如果您不需要纹理中的Alpha通道，则首选使用JPEG而不是PNG。
The normal maps should be saved as PNG even if the alpha channel is wasted, because normal maps loaded in JPEG format often produce visible shading artefacts. The images in PNG format, however, may be too heavy in regards to file size, so use normal maps only if there is a strong need in them.
即使Alpha通道被浪费，法线贴图也应保存为PNG，因为以JPEG格式加载的法线贴图通常会产生可见的着色伪影。然而，PNG格式的图像在文件大小方面可能过于沉重，因此只有在需要时才使用法线贴图。
Be careful to not use too detailed textures unless you really need them. Big images can adversely impact the performance, drain video memory which is scarce on handheld devices (all the way down to crash) and significantly prolong the loading. The resolution of most of your textures should be 1024 px or below.
除非你真的需要它们，否则不要使用太详细的纹理。大图像会对性能产生负面影响，耗尽手持设备上的视频内存（一直到崩溃）并显着延长负载。大多数纹理的分辨率应为1024像素或更低。
The resolution of the textures should follow power the power-of-two rule (256, 512, 1024 px is great while 1000 px is bad). The engine re-scales all non-power-of-two (NPOT) images upon loading anyway, so consider carefully reviewing your textures in order to achieve maximum efficiency with regard to file size and loading time.
纹理的分辨率应遵循二次幂规则的功率（256,512,1024 px很好而1000 px很差）。无论如何，引擎在加载时重新调整所有非二次幂（NPOT）图像，因此请仔细检查纹理，以便在文件大小和加载时间方面实现最高效率。
Textures may be square or rectangular such as 1024x512 px.
纹理可以是正方形或矩形，例如1024x512像素。
Always try re-using image files in your materials, and texture maps/nodes in your shaders, rather than making copies.
始终尝 试重复使用材质中的图像文件，以及着色器中的纹理贴图/节点，而不是复制。
If you have several black and white images (AO, light maps, transparency masks, color masks, etc), consider packing them in the RGBA channels of a single texture.
如果您有多个黑白图像（AO，光照贴图，透明蒙版，颜色蒙版等），请考虑将它们打包在单个纹理的RGBA通道中。
If you are developing a customizer or a similar app, you may consider loading only a limited set of textures on startup. The other textures can be loaded and applied to your models on the demand basis using the replace texture puzzle.
不要将大图作为图标重复使用 – 即使要用到更多图片，也应该预先缩放。
＃
Verge3D支持以下PBR材质模型：
- 物理材质/ART（3ds Max）
- Principled BSDF Cycles/Eevee 节点(Blender)
- glTF-兼容PBR (3ds Max, Blender)
但是，所有这三种情况都遵循在图像中打包PBR组件的相同惯例：
- AO打包在R通道中
- 粗糙度打包在G通道中
- 金属度包装在B通道中
The models and the baked normal and occlusion maps (if any) can be loaded in Substance Painter via OBJ format. Overall 3 maps are produced in this software in the end: base color/transparency, occlusion/roughness/metallic and normal. The textures are exported using the Verge3D preset for Substance Painter.
模型和烘焙的法线和AO贴图（如果有）可以通过OBJ格式加载到Substance Painter中。最终在该软件中生成3张贴图：颜色/透明度，AO/粗糙度/金属度和法线。使用 Substance Painter 的Verge3D预设导出纹理。
Finally, PBR materials are set up for relevant models by either using the native PBR shader (physical/ART in 3ds Max, Principled BSDF Cycles/Eevee node in Blender) or glTF-compliant Verge3D PBR shader.
最后，通过使用本地PBR材质（3ds Max中的 physical / ART，Blender中的Principled BSDF Cycles / Eevee节点）或符合glTF的Verge3D PBR 材质 ，为相关模型设置PBR材质。
＃
Environment map is a key component of a real-time scene used for providing the background and material reflections. We recommend both 3ds Max and Blender artists to use equirectangular images in HDR or JPEG format (although cube maps are also supported). The size of the environment map is better to not exceed 2048x1024 px.
环境贴图是用于提供背景和材质反射的实时场景的关键组件。我们建议3ds Max和Blender艺术家使用HDR或JPEG格式的equirectangular图像（虽然也支持立方体贴图）。环境贴图的大小最好不超过2048x1024像素。
Besides that, HDR textures can be used for imitating complex lighting conditions – for example, if there are too many light sources to be represented by traditional lamps, or they are extended.
除此之外，HDR纹理可用于模拟复杂的照明条件 - 例如，如果有太多的光源要由传统灯表示，或者它们是扩展的。
As of v. 2.10, the default cube projects for both 3ds Max and Blender include the HDR texture called environment.hdr which you can reuse in your apps.
从v.2.10开始，3ds Max和Blender的默认立方体项目都包含名为environment.hdr的HDR纹理，您可以在应用中重复使用该纹理。
＃
HDR (high dynamic range) rendering pipeline can be enabled with the corresponding checkbox in Verge3D export settings window (3ds Max), or on Verge3D settings panel under the Render tab (Blender). In this mode, half-float textures are used by the engine for better precision and intensity range, which particularly, is important for proper rendering of the bloom post-process effect.
可以使用Verge3D导出设置窗口（3ds Max）中的相应复选框或“渲染”选项卡（Blender）下的Verge3D设置面板启用HDR（高动态范围）渲染流程。在此模式中，引擎使用半浮动纹理以获得更好的精度和强度范围 ，这对于正确渲染辉光后期处理效果（ bloom post-process effect ）非常重要。
＃
Animation clips are created for relevant model parts as usual. Skinning, whole-object, morph-target and material animation can be used to produce various effects.
像往常一样为相 关模型部件创建动画片段。可以使用蒙皮，整个对象，变形目标和材质动画来产生各种效果。
You might want to provide human-readable names to animated objects so that they can be easily found in the Puzzles editor.
＃
After setting up the scene (during which you can use the Sneak Peek button to check it in the browser), you can create a persistent Verge3D project using the App Manager. The configuration settings can usually be left default.
在设置场景（在此期间您可以使用Sneak Peek按钮在浏览器中进行检查）之 后，您可以使用App Manager创建一个持久的Verge3D项目。配置设置通常可以选择默认值。
You can simply override the default cube .max or .blend file, located in your application folder (which in turn is located in verge3d/applications), by your own .max or .blend file. Be sure to move all relevant image files in this folder too. After that, open your .max or .blend file from the new location and perform export in glTF format, thus overriding the default .glTF file.
你可以简单地将自己的.max或.blend文件，覆盖默认立方体的.max或.blend文件，它位于您的应用程序文件夹中（verge3d / applications），请务必将所有相关的图像文件也移动到此文件夹。然后，重新打开.max或.blend文件，并以glTF格式执行导出，从而覆盖默认的.glTF文件。
Alternatively, you can consider creating a Verge3D project at first and start working using the default .max or .blend file located in the application folder, just how it was suggested in the corresponding section of the Beginner's Guide.
＃
An interactive scenario is created using Puzzles for triggering animations upon clicks, outlining objects upon hovering, positioning model parts, logic checks, etc.
使用拼图创建交互式场景，用于在点击时触发动画，在悬停时显示轮廓，定位模型部件，逻辑检查等。
Check out the tutorial in the Puzzles section of the Beginner's Guide, or proceed straight to the Puzzles reference for more details.
＃
In our code-less workflow the HTML-based interface is built using external web design software. Any WYSIWYG editor capable of exporting HTML/CSS/JS files will work – for example, Google Web Designer (free, cross-platform) or Webflow (paid, cloud-based). You can, of course, build the HTML interface manually with code or using some other tools instead.
在我们的无代码工作流程中，基于HTML的界面是使用外部Web设计软件构建的。任何能够导出HTML / CSS / JS文件的可视化编辑器都可以使用 - 例如，Google Web Designer（免费，跨平台）或Webflow（付费，基于云）。当然，您可以使用代码或使用其他一些工具手动构建HTML界面。
Interface elements (menus, buttons, info boxes...) are created as part of a separate web page in which a Verge3D app is embedded. See the detailed guide on creating HTML-based GUI for more details and examples.
＃
The following effects can be enabled with Post-processing Puzzles: bloom (which works best with HDR enabled), brightness-contrast, grayscale, depth of field and ambient occlusion. Parameters for these effects can be changed in runtime or animated with high performance thanks to internal caching. There is also a puzzle for removing all post-processing effects from a scene.
使用后期效果拼图可以启用以下效果：辉光（在启用HDR时效果最佳），亮度对比度，灰度，景深和AO。这些效果的参数可以在运行时更改，也可以通过内部缓存以高性能设置动画。还有一个难题，可以从场景中删除所有后期效果。
＃
Background music and/or event sounds can be added with Sound Puzzles to be triggered by the user. You should use the mp3 format for your audio files as it is supported in all web browsers.
There is a special restriction for playing sounds on iOS: the sound playback can only be initiated via direct interaction with a web page. For example, the following setup would work everywhere including on Apple's devices:
在iOS上播放声音有一个特殊限制：声音播放只能通过与网页的直接交互来启动。例如，以下设置可以 在Apple的设备上随处可用：
However, if a sound is played upon some event which is not caused by direct user action, it wouldn't work on iOS:
但是，如果在某些事件上播放的声音不是由直接用户操作引起的，则在iOS上无效：
To overcome this problem, you can use the on event / touchstart puzzle that would play and immediately pause all the sounds used in a scene when the user taps on the screen for the first time:
要解决此问 题，您可以使用可以播放的on event / touchstart拼图，并在用户第一次点击屏幕时立即暂停场景中使用的所有声音：
The above setup is available from the Puzzle Library under the name Sound iOS Workaround.
以上设置可从Puzzle Library以Sound iOS Workaround的名称获得。
＃
When the app it complete, you can optimize the loading of its scene files as described in the corresponding section of this manual.
＃
You can publish your project using either of methods mentioned in the Publishing section of the Beginner's Guide.
Last modified 3yr ago