Disable overlapping of lights

Questions
,
1

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?

overlappingLights
overlappingLights751×912 43.5 KB

2

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
3

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

2 Likes
4

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:

image
image1191×859 13.8 KB

EDIT2
Yeah, its probably possible with .holes: three.js docs I’ll try share demo later :slight_smile:

5

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

image
image800×512 162 KB

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
6

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:

image
image1060×1012 30.3 KB

7

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