Multiple floodlights Three.js

Question

I do a racing game on three .js and I stuck to the following problem ...

I have 2 cars, so we need to make 4 spotlights (minimum) for the rear lights of the car and the front lights of the car for each car ...

We also need lights on the road ...

So, I have this code:

//front car1 light var SpotLight = new THREE.SpotLight( 0xffffff, 5, 300, Math.PI/2, 1 ); SpotLight.position.set( 50, 10, 700 ); SpotLight.target.position.set(50, 0, 800); SpotLight.castShadow = true; SpotLight.shadowCameraVisible = false; SpotLight.shadowDarkness = 0.5; scene.add(SpotLight); //front car2 light var SpotLight = new THREE.SpotLight( 0xffffff, 5, 300, -Math.PI/2, 1 ); SpotLight.position.set( -50, 10, 40 ); SpotLight.target.position.set(-50, 0, 100); SpotLight.castShadow = true; SpotLight.shadowCameraVisible = false; SpotLight.shadowDarkness = 0.5; scene.add(SpotLight); //rear car1 light var SpotLight = new THREE.SpotLight( 0xff0000, 2, 200, Math.PI/2, 2 ); SpotLight.position.set( 50, 20, 660 ); SpotLight.target.position.set(50, 0, 600); SpotLight.castShadow = true; SpotLight.shadowCameraVisible = false; SpotLight.shadowDarkness = 0.5; scene.add(SpotLight); //rear car2 light var SpotLight = new THREE.SpotLight( 0xff0000, 2, 100, Math.PI/2, 1 ); SpotLight.position.set( -50, 20, -35 ); SpotLight.target.position.set(-50, 0, -100); SpotLight.castShadow = true; SpotLight.shadowCameraVisible = false; SpotLight.shadowDarkness = 0.5; scene.add(SpotLight); //some road light var SpotLight = new THREE.SpotLight( 0x404040, 3, 500, Math.PI/2, 2 ); SpotLight.position.set( 0, 300, 0 ); SpotLight.target.position.set(0, 0, 0); SpotLight.castShadow = true; SpotLight.shadowCameraVisible = false; SpotLight.shadowDarkness = 0.5; scene.add(SpotLight); 

Nothing special .. but the performance dropped to 20-30 FPS, and this is a bit of a lag: -1: And if I add some lights in the future, the performance will be taken even further ...

Has anyone encountered similar problems? How to deal with it? Or maybe I'm doing something wrong?

Answer 1

When rendering in real time, the lights are very tiring. You will need to find the cheapest approach that mimics the result you are after.

For example, you might have a textured plane in front of your car with a texture that looks as if there were spotlights aimed at the floor. It will be wrong, but it will give the impression that it is right, and you will save 4 spotlights, and your game will work at a speed of 60 frames per second.

Answer 2

The shadows are most likely the culprit in this case - under the hood, the scene should be visualized from the point of view of each light reflecting the shadow. If possible, save them for the most important, turn off the shadows on other lights.

For many light sources, you can try using WebGLDeferredRenderer, it can handle several indicators much better than the default rendering tool. However, this is experimental work, so you are likely to run into other problems. Also, I'm not sure if this helps shadow rendering performance.

Answer 3

I had exactly the same problem, besides the mrdoob and yaku suggestions that were really useful, another approach was to reduce the number of segments and polygons in your geometry.

ie If you have a simple cylinder in your scene, you can reduce the number of segments by assigning heightSegments and radialSegments during initialization:

As a very simple example, avoid doing something like this if you need to create a simple cylinder:

 sampleCylinderGeo = new THREE.CylinderGeometry(2, 2, 5, 16, 32); 

try instead:

 sampleCylinderGeo = new THREE.CylinderGeometry(2, 2, 5, 8, 1); 

Of course, if you want a smoother cylinder, you can increase the radial segments from 8 to about 16 or more according to your needs, but for heightSegments it is simply useless to have more than 1 segment in a simple cylinder.

So just adjust the number of segments to suit your needs to save a lot of unnecessary segments and achieve a lot more FPS when working with lights, especially when you have a lot of geometries in your scene.