[SOLVED] Rectangle light source


Is there a tutorial to create the same rectangle light source like in this example of the documentation ?

I want it for a night mode of my next game. Thanks


Hi @vogloblinsky,

Yes, area lights are supported in the engine, you can check the following example on how to start working with them:


Note that these are pretty expensive lights, and you probably won’t be able to use more than a few of these, especially if you want your app to run on mobile as well.

1 Like

Thanks guys.
I will try this approach (Light Halos | Learn PlayCanvas) which may be less expensive than ara lights, i first target mobile phones for my game.

I have this environment

and want this kind of environment :


Maybe spotlights with cookies are an option, or is this just as expensive?


yep, almost as expensive.

1 Like

The solution like in Light halos tutorial with glow halo material work fine.

I just now have an error on iOS (ok on PC) with all the Spot lights i have used for the lampposts in the streets.

Failed to link shader program. Error: FRAGMENT shader uniforms count exceeds.

May be too much lights for WebGL rendering ?

Scene link : https://playcanvas.com/editor/scene/1196860

1 Like

Ok i just found a logic solution. I will only activate lights that are in a big circle around the player.

1 Like

also, your lights don’t use shadows … and perhaps clustered lighting is a good candidate to be used.


Thanks, i will look at this too, but a simple solution first would be easy i think to implement.

Hey guys,

I have tried to optimize the rendering i want, and i still have a little performance bottleneck.
I have now 61 lights in the map.
I have a simple algorithm to calculate all the lights in a circle around the player, and toggle off/on lights. I have for each check, i have to toggle on around 10-15 lights. Like @Leonidas in the thread mentioned before, i see a little lag when i toggle them on.

Is there another way to optimize that ? May be with lights less intensive ? Thanks

Try setting the intensity to 0.0 instead of disabling light entities, since that would force the light cells to be recalculated.

1 Like

Your solution needs to have all the lights activated if i understand well. So i will reach the WebGL error mentioned before MAX_FRAGMENT_UNIFORM_VECTORS

It’s not a great solution, but one thing you can do to avoid the MAX_FRAGMENT_UNIFORM_VECTORS problem is to split your scene objects (and duplicate materials if they are shared) and lights onto different layers. That way you won’t be exposing all objects/materials to lights that they don’t have to be affected by.

1 Like

Calling @mvaligursky , curious what he thinks.

The lights are linked to default World layer


I understand, but you can start splitting your geometry and lights up on different layers. Lights will affect all objects/materials on the same layer, regardless of whether they are in range or not. If you split your level up onto separate layers, and then the lights for those respective areas onto those same new layers, you can control the number of uniforms that are being passed to each material.

You might have some trouble lighting the player, since he would need to be lit by practically all the lights, which would cause an overload. A quick and dirty way to address that would be to have a single light for the player on his own layer that adjusts its brightness based on the proximity to the other lights.

Is this with clustered lighting enabled? As long as you don’t need shadows, it should be pretty straightforward to setup: PlayCanvas Examples

No clustered lights not enabled. All the lights are added in 3D editor mode, and just activated by code in my final game.

What would be the advantage for my use-case ?

Increased performance and it may be able to get around the iOS light limit?