Lag during create a new light

Questions
,
1

I have a very strange problem.
While creating a dynamically new light the first time, the screen is temporarily lagging. It happens only the first time, each time you create a dynamically new light it is ok.
What is more, when I create two lights in a row, it lags again - but only once. Each subsequent attempt to create more lights ends in a lag, but similarly only the first time.
and it happens with every value:

first 3 times clicked createLight 3 times a row? -> LAG.

For example, I have such a code:

function createLight(){
                const possiton = [ 1, 0, -2 ];
                const light = new THREE.PointLight( 0xF77C3F, 3, 100);
                light.position.set(...possiton);
                scene.add(light)

                setTimeout(() => {
                    scene.remove(light)
                }, 2000);
            }
       }

the light is created and then removed after 2 seconds

the only thing i have is this error, when lags appear:

gl.getProgramInfoLog() C:\fakepath(265,12): error X6077: texld/texldb/texldp/dsx/dsy instructions with r# as source cannot be used inside dynamic conditional 'if' blocks, dynamic conditional subroutine calls, or loop/rep with break*. 

Warning: D3D shader compilation failed with default flags. (ps_3_0)
 Retrying with avoid flow control

It looks like some kind of problem with the buffer - it unlocks to a given number as soon as it loads another light. The only question is, how to increase this buffer before creating the lights?

2

Can you please share a live example that produces the mentioned log? Since its a DirectX error, I highly assume you work with Windows, right?

The mentioned lag occurs since adding or removing lights from the scene can trigger shader compilations. Hence, it’s recommended to modulate Light.intensity instead if you just have to turn on/off lights in your scene.

Unfortunately, there is no way around the shader compilation when adding/removing lights. Besides, the shader compilation overhead on Windows is a bit higher because additional shader transformation steps are required compared to other platforms.

3 Likes
3

Also, if you’re using a lot of lights mind this.
And overall expect stuff to start disappearing and glitching if you use too many lights. I may be wrong, but if I remember correctly materials like PBR / Lambert have lights limits.

4

yup, im using windows.
Sure, here is an example

I guess the problem lies with compilation - but it’s very strange that the lag appears only after the first addition.
Removing every next instance and creating a new one after a while does not cause this effect, so I think it must be some kind of bug on the buffer side.

What’s more, when I run the project through firefox, lag happens every time - only chrominium can handle it.

Is it not possible to pre-recompile these shaders before, for a given amount of lights on stage?

5

Maybe Chromium is internally caching the shader program somehow. The only thing I can say for sure is that changing the number of lights requires a shader compilation (since the number of lights is embedded in the shader source code).

Is it not possible to pre-recompile these shaders before, for a given amount of lights on stage?

You can use WebGLRenderer.compile() to do that.