Common gotchas with Verge3D

This page describes some typical problems you might experience when creating 3D web content. These issues might cause problems with rendering or performance (or both).

Inconsistent updates

To update your app properly, you need to follow these mandatory steps:

1. Update the app in the App Manager. This will bring a fresh version of the Verge3D runtime — v3d.js.
2. Re-export Blender/3ds Max/Maya assets. This will make your .gltf files consistent with the updated runtime.
3. Re-save Puzzles. This will make your visual_logic.js script consistent with the updated runtime and glTF files.

Forgetting about one of these steps may cause various bugs in your app: crashing shaders, loading freezes, incorrect lighting, broken logic, etc. These issues may become especially severe when updating across multiple versions (for example, from Verge3D 4.5 to 4.12).

Too much copy-paste in Puzzles

Say you need to perform 10 different actions for 5 objects on your scene. The most straightforward way to handle this would be just using copy-paste:

However, such a scenario is really hard to maintain. It also slows down the Puzzles editor. Instead, you might employ procedures that will make your scenario way more compact:

Also, by using lists you can simplify the logic even further:

It's definitely worth spending a little time to learn these two techniques, since it may save you many hours later.

Enabling HDR Rendering when not required

Activating this feature causes excessive GPU memory consumption and rendering slowdowns. You still can use it in the following two cases:

• If you are using Bloom post-processing effect.
• There are procedural gradient nodes/maps in your materials.

Enabling HDR rendering will significantly improve the quality in both above-mentioned cases.

Contrary to popular belief, HDR rendering is NOT required for image-based lighting, even if it uses HDR maps.

Using non-power-of-two (NPOT) textures

Avoid textures which have resolutions like 1000x1000, 1200x600, 1920x1080. See NPOT Textures article for more info.

Huge shadow maps

Setting shadow size to high values basically kills performance on most devices:

Try to minimize shadow maps as much as possible. Instead of increasing shadow size, reduce pixelation of your shadows by using more advanced shadow filtering algorithms, like PCF or ESM.

Swapping object on click

Say you need to replace some object by another one given they both occupy the same place, e.g swap CubeGold by CubeSilver and vice versa. Most evident way would be using two when clicked puzzles:

This won't work however since both events happen right after another. So the first event handler will switch to CubeSilver, then the second will switch back to CubeGold.

A possible workaround could be delaying the actions by one render frame:

Alternatively, you could swap your objects using just one when clicked puzzle:

Forgetting to enable asset compression in the scene file

Say you enable asset compression in Puzzles but forgot to enable it in the modelling suite:

There will be one of the two possible situations as a result of this:

• Situation #1 (bad). You won't be able to load your scene, since your app expects the compressed asset (e.g my_awesome_app.gltf.xz) which is unavailable. As a result the app preloader will freeze forever.

• Situation #2 (even worse). You have file called my_awesome_app.gltf.xz in your app which you exported earlier. As a result it is now out of sync with the uncompressed version (my_awesome_app.gltf), and so with your source scene (.blend/.max/.mb). You will have hard time trying to figure out why Verge3D rendering no longer reflects the changes you make in your scene.

Forgetting to refresh cache in offline mode

Once you activate the Offline Mode in the App Manager settings, a persistent app cache will be created and populated on the first launch.

This cache will be reused for all subsequent launches of your app so if you make any changes to it, they won't apply. You can either press Refresh Cache each time you make changes or, which is better, keep Offline Mode disabled during the app development (and only enable it when the app is ready).

Adding custom CSS code with exec script

If you need to add custom CSS code to your application, the exec script won't do the job, since CSS is not a scripting language. Basically, the following puzzle will fail with syntax error (thinking the passed text is a piece of JavaScript):

Instead, you should create a new <style> element and insert your custom CSS code as its textContent property:

Upon adding this element to the page (e.g. to the canvas container), the browser will automatically apply the CSS style and modify the look of your page.

Switching system user when App Manager is running

Essentially, App Manager uses background web server process attached to the particular user. Even after you perform a log out, this process stays as is and will prevent another App Manager session to be started. This might cause real confusion and various unpredictable bugs. Always stop the App Manager (via About dialog) before you switch the user. If you missed to do that, the most clean solution would be restating the system.