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).
- Modeling and Baking
- Choosing Material System
- Image Formats, Resolution and Best Practices
- PBR Textures
- Environment Map
- HDR Rendering
- Layout and UI
- Asset Compression
To create interactve 3D web content content you can use Blender, 3ds Max or Maya version of Verge3D with equal success.
Modeling and Baking
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.
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.
Normal and occlusion maps, if they are needed, are baked using the superimposed high-poly and triangulated low-poly meshes.
Choosing Material System
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 materials while Maya users should choose Standard Surface (v. 2020) or aiStandardSurface (v.2019 or early). If your content needs to be compatible with glTF 2.0 standard for some reason, you should use glTF-compatible PBR shaders (see the setups for 3ds Max, Blender).
You may also check out the following videos explaining how to use physically-based materials: 3ds Max, Blender.
Image Formats, Resolution and Best Practices
PNG or JPEG
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.
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.
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.
Beware of NPOT
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.
Textures may be square or rectangular such as 1024x512 px.
Always try re-using image files in your materials, and texture maps/nodes in your shaders, rather than making copies.
Pack BW in RGBA
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.
Load on Demand
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.
Resist the impulse to reuse detailed textures as icon images - those should be pre-scaled even if it means more files.
Verge3D supports the following cases of the PBR shading model:
- Principled BSDF Cycles/Eevee node (Blender)
- Physical material/ART (3ds Max)
- Standard Surface (Maya)
- glTF-compliant PBR (3ds Max, Blender)
All three cases, however, follow the same convention of packing the PBR components in the image (aka ORM texture):
- Occlusion is packed in the R channel
- Roughness is packed in the G channel
- Metallic is packed in the B channel
The set of PBR textures can be created using any suitable software. In our team, we use Substance Painter for which we created presets to ensure the compatibility with Verge3D/glTF. Instructions and the download links to those presets can be found in the following sections: 3ds Max, Blender.
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.
Finally, PBR materials are set up for relevant models by either using the native PBR shader (Principled BSDF Cycles/Eevee node in Blender, Physical/ART in 3ds Max, Standard Surface in Maya) or glTF-compliant Verge3D PBR shader.
Environment map is a key component of a real-time scene used for providing the background and material reflections. We recommend artists to use equirectangular images in HDR or JPEG format. For performance reasons, the size of the environment map is better to not exceed 2048x1024 px.
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.
The default cube projects for Blender, 3ds Max and Maya include the HDR texture called environment.hdr which you can reuse in your apps.
You may also check out the following videos explaining how to setup the HDR environment for the physically-based pipeline: 3ds Max, Blender.
HDR (high dynamic range) rendering pipeline can be enabled with the corresponding checkbox in Verge3D export settings window (3ds Max, Maya), 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.
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.
You may also check out the following videos explaining how to create animation: 3ds Max, Blender.
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.
You can simply override the default cube .blend, .max or .mb file, located in your application folder (which in turn is located in verge3d/applications), by your own scene file. Be sure to move all relevant image files in this folder too. After that, open your .blend, .max or .mb file from the new location and perform export in glTF format, thus overriding the default .glTF file.
Alternatively, you can consider creating a Verge3D project at first and start working using the default .blend, .max or .mb file located in the application folder, just how it was suggested in the corresponding sections of the Beginner's Guide.
You may also check out the following videos explaining how to create a new Verge3D project with the App Manager: 3ds Max, Blender.
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 docs for more details.
You may also check out the following videos explaining how to work with the Puzzles: 3ds Max, Blender.
Layout and UI
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. 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.
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.
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:
However, if a sound is played upon some event which is not caused by direct user action, it wouldn't work on 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:
The above setup is available from the Puzzle Library under the name 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 may also check out the following videos explaining how to enable asset compression for your apps: 3ds Max, Blender.
You can publish your project using either of methods mentioned in the Publishing section of the Beginner's Guide.
Feel free to ask on the forums!