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.
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).
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.
If you have several black and white images (AO, light maps, transparency masks, color masks, etc), consider packing them to RGBA channels of a single texture. Also consider re-using image files and texture nodes in your materials rather than making copies.
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 can be square or rectangular such as 1024x512 px.
Verge3D supports the following cases of the PBR shading model:
Physical material/ART (3ds Max)
Principled BSDF Cycles/Eevee node (Blender)
glTF-compliant PBR (3ds Max, Blender)
All three cases, however, follow the same convention of packing the PBR components in the image:
Occlusion is packed to the R channel
Roughness is packed to the G channel
Metallic is packed to 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 (physical/ART in 3ds Max, Principled BSDF Cycles/Eevee node in Blender) or glTF-compliant Verge3D PBR shader.
Environment map is a key component of a real-time scene used for providing the background and for material reflections. We recommend both 3ds Max and Blender artists to use equirectangular images saved in JPEG format (although cube maps are also supported). The size of the environment map is better to not exceed 2048x1024 px for the background, or 512x256 px for reflections.
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.
Besides that, radiance HDR textures (aka RGBE) 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.
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 .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.
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 Beginner's Guide.
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.
Interface elements (menus, buttons, info boxes...) are created as part of a single web page. See the detailed guide on creating HTML-based GUI here.
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.