Disable overlapping of lights

Hi, I’m using Spotlight for lightining characters in my game. When 2 or more characters meet in the game, there is a problem with a different color of lighting. The area between the players burns my eyes. How can you avoid light overlapping?

I’m afraid this behavior can’t be changed without modifying the library. Lights are additive by default (since this is the natural and expected behavior). The following example demonstrates this quite obvious:

https://threejs.org/examples/webgl_lights_spotlights

1 Like

Perhaps your scene is too bright. Have you tried adjusting the renderer.toneMappingExposure?

2 Likes

Have you maybe an idea, how can I create lights / shadows system similar to League of Legends? Example: https://youtu.be/MFwSJllmm68?t=1006

Is it possible with Three.js?

I tried with huge number of PointLights located in whole map and by turning on intensity only for specific areas. But, it was a very bad solution because it led to the error “shader uniforms count exceeds”. Now I’m looking for other new methods, but currently I have no idea how to bite it.

EDIT1
Is it possible to create and change in real time “holes” in mesh/geometry? Here is my vision of solution:

EDIT2
Yeah, its probably possible with .holes: https://threejs.org/docs/#api/en/extras/core/Shape.holes I’ll try share demo later :slight_smile:

Hej Michał :slight_smile:

I believe what you’re looking for is an implementation of fog of war. In fact, League might actually be using very simple lighting (if any :open_mouth: ). Area outside your character’s view - the “shadows” - is just a dark layer mask on top of the actual game objects.

Take a look at this wonderful post by Alex: Fog of War for games

This is very similar to League, except LoL uses a mask thats transparent, so the objects underneath it are still visible, just darkened, giving this shadowy look.

So basically

  1. Create a scene as if everything is perfectly lit
  2. Draw a layer of “darkness/fog/shadow” on top of it, with post-processing

The logic behind revealing parts of the mask is all yours to choose :slight_smile:

5 Likes

Yeah, it works great! Thanks!
I’ve got last question, do you know how to make borders of shadow a little bit smoother?

Here is my result:

I don’t have much experience with it personally. I think it would be better if you ask for next steps & details in the thread I linked