I have a scene: PlayCanvas | HTML5 Game Engine
There ~150 000 triangles and 128 meshes.
Model of scene UV mapped and textures baked.
No static lightmaps prepared.
Dyamic lightmap (checkbox ‘Lightmapped’ in ‘States’ ) enabled for scene’s model. I’m not sure why =)
And suppose: it’s takes no effect.
Cause lightmap checkbox for all light objects disabled.
Shadows also disabled for light sources.
There are 15 light sources. They unmarked as static (‘static’ checkbox is off).
They static by position in my scene.
But dynamic by nature: i’m toggling on & off them with help of scripts.
Toggling (on & off, especially on’ing) is incredible slow. It hangs whole scene for 1-1.5 secs.
Please, help me to improve performance.
Some advice required
Lightmapped - should be matched on light and model to benefit from lightmapping. It will prepare textures for lightmapped geometry and will render lights data into those textures. It will do it automatically on start. And can be called by app.lightmapper.bake().
But in your case your light are actually static. Static - means they do not move / rotate and have the same range. If you have geometry that doesn’t move, then you can mark it as static too. Then on launch it will split static geometry based on lights AABB’s, so that lights affect only parts of static geometry that are under their range. It will still affect all the dynamic.
Each material have shader, if that material is semantically same as others, they will share the shader. Otherwise it will have own shader.
With more complexity on material and light setup in scene, that shader will become bigger and bigger. Then your browser have to re-compile and upload this shader if you change data that affects structure of material.
Re-compilation is very slow in browsers, and it is down to generally WebGL + underlying GAPI. And that is actually a blocker problem that we trying to talk to browser vendors so that they find a better ways to avoid this long blocks.
So your blocks are because shaders have to recompile.
15 dynamic lights is a lot for WebGL, there are ways to make renderers that can handle dynamic light on/off with large quantities, but so far WebGL 1.0 is not sufficient enough in many cases to allow that.
So what you can do: simplify. Have less lights or try to move light more than enable/disable.
I’ve found the way: instead of rude enabling/disabling the light source (which is leading to shaders to recompile), i’ve enabled all my light sources and just tuning their intensity.
It works like a charm to emulate its on/off states!
Bear in mind, on different platforms there are different number of uniforms available, so on some weak GPU’s it might not fit into shader, and lead to shader compilation errors.
