Difference between revisions of "Common gotchas with Verge3D"

From Verge3D Wiki
Jump to navigationJump to search
m (Alexander moved page Common Gotchas with Verge3D to Common gotchas with Verge3D without leaving a redirect)
m
 
(23 intermediate revisions by the same user not shown)
Line 1: Line 1:
This page includes common gotchas you might experience when creating 3D web content. These issues might cause problems with rendering or performance (or both).  
[[Category:Tutorials]]
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).


== Using HDR Rendering when it's not required ==
== 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:
 
[[File:copy_pasting_problem1.png|1000px]]
 
However, such a scenario is really hard to maintain. It also slows down the Puzzles editor. Instead, you might employ [https://www.soft8soft.com/docs/manual/en/puzzles/Procedures.html procedures] that will make your scenario way more compact:
 
[[File:copy_pasting_problem2.png|1000px]]
 
Also, by using [https://www.soft8soft.com/docs/manual/en/puzzles/Lists.html lists] you can simplify the logic even further:
 
[[File:copy_pasting_problem3.png|1000px]]
 
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 ==


[[File:Hdr_rendering_setting.jpg|490px]]
[[File:Hdr_rendering_setting.jpg|490px]]


Activating this feature causes excessive GPU memory consumption and rendering slowdowns. Use it in two cases only:
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's 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:
 
[[File:huge_shadows.jpg|400px]]
 
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 [https://www.soft8soft.com/docs/manual/en/puzzles/Events.html#when_clicked when clicked] puzzles:
 
[[File:swap_objects_wrong.png|1000px]]
 
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:
 
[[File:swap_objects_correct.png|1000px]]
 
== 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:
 
[[File:Asset_compression_issue.jpg|1000px]]
 
There will be one of the two possible situations as a result of this:


* You have the Bloom post-processing effect.
* 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.
* You use procedural gradients in your node-based material.


Beware, setting this option is not required to get cool lighting with HDR maps!
* 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.

Latest revision as of 12:52, 20 October 2022

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

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:

Copy pasting problem1.png

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:

Copy pasting problem2.png

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

Copy pasting problem3.png

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

Hdr rendering setting.jpg

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's 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:

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

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:

Asset compression issue.jpg

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.