Problems with lights (using three.js)

Question

I have a simple indoor scenario I've exported from blender. It has a room with 3 spheres on the ceiling, and the respective light sources inside them. Each one of the lights work well on their own, but when I insert all of them in the scene, only one of them works! Works with 2, sometimes, but never with the three of them. Here's my code for the lights:

luz_sala1 = new THREE.PointLight(0xFFFFFF,0.5, 50.0);
luz_sala1.position = new THREE.Vector3(16.14323,2.52331,13.93375);
scene.add(luz_sala1);

luz_sala2 = new THREE.PointLight(0xFFFFFF, 0.5, 50.0);
luz_sala2.position = new THREE.Vector3(27.70114,2.52331,-6.20571);
scene.add(luz_sala2);

luz_sala3 = new THREE.PointLight(0xFFFFFF, 0.5, 50.0);
luz_sala3.position = new THREE.Vector3(21.50580,3.10719,-27.82775);
scene.add(luz_sala3);

If I set the distances to 0, it works well, but I need these lights to influence only the area they are in. I've also tried with THREE.Spotlight(0xFFFFFF,0.5,50.0,Math.PI, 0) but with the same result. It looks like the lights negate each other when they share the same distance somehow?

Please help, this is very confusing.

EDIT: Also, I have another section of the room with some spotlight models (I have about 4 of them), but I'm getting shader compiling errors when I add those 4 more spotlights to the scene. After searching for the problem, I saw that I need to set the maxLights property in the renderer. I set it to 10, but the problem still occurs, I can't have more than 4 lights in the scene. Is there anything else I can do?

EDIT 2: Here are some images. For reference, the "luz_sala1" is the one closer to the TV, the "luz_sala2" is the middle one, and the "luz_sala3" is the one more far away.

This one is with the code above (all 3 lights), except with 0.8 intensity. http://www.mediafire.com/view/?s85qr4rplhort29

And this is with the 2 and 3 turned on (commented the "scene.add(luz_sala1);"): http://www.mediafire.com/view/?83qbbua9f8ee3b4

So, as you can see, 2 point lights work well together, but with 3 they seem to "add up" to the first?

I tried on 2 machines, one with Windows 7 with a ATI HD5850, another with Windows XP (can't remmember the card), and same thing happens on both. I can try to upload it, but the code is very big. I'll post some images shortly. — CoreyTaylor
Posted 2 images. Same thing happens if the lights are Spotlights instead of PointLights. — CoreyTaylor

Tapio Tapio · Accepted Answer · 2012-09-14T09:28:19

The maxLight property not having any effect is most likely due to your hardware, drivers or ANGLE (library that translates WebGL to Direct3D) not supporting enough varying vectors in shaders - each light requires one and other things too. This might also be in the background of your general problem.

In order to have more lights there are three options:

Try if it helps if you make your browser prefer native OpenGL over ANGLE (google for instructions). Make sure you have up-to-date OpenGL drivers installed though.
Implement a deferred renderer. This is nowadays very common in the desktop world, but it's tricky if not impossible to implement with good performance in WebGL due to framebuffer limitations.
Implement a light manager that only ever uses some lights, disabling the rest. Simplest, though far from perfect method would be to select the lights closest to the camera.

Also worth mentioning is that currently SpotLights are just PointLights that cast shadow to one direction.

Problems with lights (using three.js)

1 Answers