Spotlight Limit: How to display projection surfaces

Hello there,
I try to display many projection surfaces of surveillance cameras on objects. For this purpose
SpotLights, which I let shine through a rectangular shape, are perfect for this:

Unfortunately, I noticed that I reach the limit of SpotLights already with a small number of SpotLights:
“Program Info Log: Statically used varyings do not fit within packing limits.”
During my research I didn’t find a workaround either. Do you have any ideas or
a hint for me?

Light works pretty well for me in this context, as it naturally reproduces the field of view of a camera. In total I need to render about 200-500 such projections.
However, besides the idea of using SpotLights, I have only suboptimal ideas, like coloring the surface and drawing rectangular cones (which are not stopped by shadow casting objects :frowning: )

Thanks for any help and your time :slight_smile:

1 Like

Here are some ideas for bypassing the problem of multiple light. Maybe some of them can be adapted for your case?

  1. Assumption: if you have 500 lights total, but you do not see all of them at the same time. In this case, you can have only 500 light spots (not spot lights!), but only 2 actual spot lights. Whenever you change the camera position and orientation, you move these two lights to the spots that affect the objects in the screen.

  2. Assumption: many spot lights are parallel. In this case you can replace parallel spot lights with one directional light. You must increase the size of the rectangular light blockers.

  3. Assumption: you can write shaders. Maybe Three.js implements lights by sending data to the GPU. These data are using variables (data slots) that are limited and the limit depends on the graphical card. To overcome this limitation, data can be passed as a texture (image), but this is more complex to implement. First, the light data must be encoded in a texture, then in the shader these data must be decoded, so a modified shader is needed. Textures also have limits, but it is much larger.

1 Like

Hello PavelBoytchev,
thanks for your answer… the ideas are all brilliant!
Unfortunately, 1 is not suitable, because I want to observe the entire scene. 2 is also not possible because there are too many rows depending on the environment. 3 Sounds like a promising solution for me!
I will try it out the next few days and keep you up to date.
Many, many thanks!

From time to time I have no control over my brain. Here is a slow and dirty way to render 100 spot lights. I’m not proud of this code, it is the worst piece of code I have produced today. There is a lot of room for optimization.

The idea is the following. Render one light. Then render another light, but combine the new image with the old image and keep the brightest parts – thus the bright surfaces will be combined, and the dark surfaces will remain unchanged. Combining is achieved by a custom blending mode (see lines 44-47). Accumulation of images is done by multiple renderings (lines 117-123). Here is the result, move the camera vertically for a nice sub-surface side effect:


1 Like