Common gotchas with Verge3D

From Verge3D Wiki
Revision as of 13:21, 30 May 2022 by Alexander (talk | contribs)
Jump to navigationJump to search

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).

Enabling HDR Rendering when not required

Hdr rendering setting.jpg

Activating this feature causes excessive GPU memory consumption and rendering slowdowns. Use it in two cases only:

  • You have the Bloom post-processing effect.
  • You use procedural gradients in your node-based material.

Beware, setting this option is not required to get cool lighting with 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:

Huge shadows.jpg

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 (Poisson Disk) 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:

Swap objects wrong.png

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:

Swap objects correct.png

Too much copy-paste in Puzzles

Say you need to perform 10 different actions for 5 objects on your scene. Most straightforward solution to that problem would be using copy-paste feature:

Copy pasting problem1.png

This approach is quite time-consuming and it's really hard to maintain such scenario. With procedures you can make this script less cumbersome:

Copy pasting problem2.png

And by using object lists the logic can be improved even further:

Copy pasting problem3.png