Enhancing performance with multiple spotlights in Three.js

Currently working on a racing game using three.js and encountering a specific issue...

There are 2 cars in the game, each requiring a minimum of 4 spotlights for rear and front car lights...

In addition, there is a need for lights on the road...

Here is the code snippet in question:

//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);

However, performance has significantly dropped to 20-30 FPS causing lag :negative_squared_cross_mark: Adding more lights in the future will only worsen the performance...

Has anyone faced similar issues? Any suggestions on how to optimize this? Or could there be a mistake in the code?

Answer №1

Efficient use of lighting is crucial in real-time rendering. It's important to come up with a cost-effective strategy that still achieves the desired visual effects.

One example could be creating a textured plane in front of your car that simulates the appearance of spotlights shining on the ground. While it may not be perfect, it can create the illusion of accurate lighting while also reducing the strain on your system, allowing your game to maintain a smooth 60fps performance.

Answer №2

It seems that shadows may be the culprit in this scenario - the scene must be rendered from the perspective of each light source that casts a shadow. Consider prioritizing important shadows and disabling them on less crucial lights.

If dealing with multiple lights, experimenting with WebGLDeferredRenderer might be beneficial as it can manage numerous lights more efficiently than the regular renderer. Keep in mind that this approach is still a work in progress and could potentially introduce new challenges. Additionally, its impact on shadow mapping performance is uncertain.

Answer №3

I encountered the same issue and found mrdoob's & yaku's suggestions to be incredibly helpful. In addition to their advice, another effective approach is to reduce the number of segments and polygons in your geometries.

For example, when working with a simple cylinder in your scene, consider decreasing the number of segments by specifying heightSegments and radialSegments during initialization:

Instead of creating a cylinder with a high number of segments like this:

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

Try optimizing it by using fewer segments:

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

If you require a smoother cylinder, you can increase the radial segments accordingly. However, for heightSegments in a simple cylinder, having more than one segment is unnecessary and inefficient.

By adjusting the number of segments based on your requirements, you can eliminate unnecessary segments and significantly improve FPS, especially when dealing with multiple geometries in your scene.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using createContext in React.tsx to pass the state through useState

There is a context called Transaction that accepts an object and a function as parameters. In the AppProvider component, the Transaction.Provider is returned. The following code snippet is from the GlobalState.tsx file: import { createContext, useState } f ...

Developing a synchronous loop in Node.js using the web-kit module

My goal with my app using node.js and webkit is to scan each proxy listed in a file.txt and determine if the proxy is working. However, I am encountering an issue where my loop does not wait for the "http.get" test on line 11 to complete before moving on ...

Unable to make anchor tag inside button effectively collapse another div

My Nuxt 2 SSR + Bootstrap 5 application includes the following code snippet: <button v-for="file of orderProduct.files" class="collapsed son-collapse" type="button" data-bs-toggle=&quo ...

Make the checkbox font-weight bold when it is checked

Attempting to apply custom CSS to enhance the appearance of checkboxes using input and label elements. The goal is to make the font-weight bold when a user clicks on the checkbox, and then revert it back to regular if clicked again. Currently stuck on this ...

Is it possible for me to create a list in alphabetical order beginning with the letter B instead of A

My task involves creating a summary of locations using the Google Maps API. The map displays letters corresponding to different waypoints, and I have a separate <div> containing all the route information. Currently, I have the route information stru ...

Is it considered acceptable to house a myriad of variables within the token object in NodeJS?

Currently working on implementing authentication with NodeJS, expressJS, mongodb and React Native. Is it acceptable to include multiple variables in the token object like shown in this example? const token = jwt.sign( { userId: user. ...

Jquery loop using closures

I've been working on creating a plugin that involves passing handler functions for specific events. Consider the scenario below: I have two buttons, and when I click button 1, its label is supposed to change to 'Button A', while clicking but ...

designing various containers and adjusting their divisions

I have a pop-up window that contains the code snippet below, defining a template within a "container": <form method="post" class="signin" action="#"> <div id='container'> <div> <div id="divFeeTitle"&g ...

Customizing the main icon in the Windows 10 Action Center through a notification from Microsoft Edge

I am facing an issue with setting the top icon of a notification sent from a website in Microsoft Edge. Let's consider this code as an example: Notification.requestPermission(function (permission) { if (permission == "granted") { new ...

Trigger an Event Handler only after ensuring the completion of the previous event handling

When attaching an event handler to a callback, it is important to consider the timing of the actions. For example: $("someSelector").on('click',callBackHandler); function callBackHandler(){ //Some code $.ajax({ //Ajax call with succe ...

Content sliding to the left due to modal prompt

I've searched through various questions and answers but haven't been able to resolve this issue. There's a modal on my page that is causing the content to shift slightly to the left. I've created a sample fiddle, although it doesn&apo ...

Guide on displaying link parameter information on a separate webpage using only JavaScript

While doing some research, I came across an issue. I have a page called specifications.html with three links: details.html?id=1, details.html?id=2, and details.html?id=3. My goal is to display the details of each link when someone clicks on it. For examp ...

Retrieve or update the selected option value in a Select2 multiple dropdown

I'm currently using Select2 for multiselect on an input field. My goal is to identify which choice has been clicked, but when I inspect the event triggered upon clicking a choice ("choice-selected"), all I see is event.target.value which contains the ...

Encountering an issue: ReferenceError: regeneratorRuntime is not defined when implementing react-speech-recognition in nextjs13

Encountering the errorReferenceError: regeneratorRuntime is not defined in my NextJS project I'm currently using Redux toolkit. Link to my project. Please note that the code triggering the error can be found under the nextjsfrontend branch. I' ...

HTML5 input placeholder adapts its size and position dynamically as data is being

During my interaction with the input fields on my bank's website, I noticed that the placeholder text undergoes a unique transformation. It shrinks in size and moves to the upper-left corner of the input field while I am entering information. Unlike t ...

Obtaining the route name in Vue.js within the App.vue component

After utilizing vue-cli with webpack to construct the vue project, I incorporated vue-meta-info for SEO purposes. I am facing an issue in setting up the page title using templates and route names. Unfortunately, I am unable to access the variable in the r ...

Issues with Laravel 8's datatable scripts causing dysfunction

In my practice with the AdminBSB template, I am facing an issue where the Jquery datatable plugin JS is not functioning properly in my blade template. I aim to achieve a datatable layout similar to this example: https://i.sstatic.net/krfPl.jpg However, t ...

Modifying various items depending on the variable's value

I'm attempting to adjust various variables depending on which button the user clicks. For instance, there are three buttons: <button id="button1" onclick="isClicked(this.id)">B1</button> <button id="button2" onclick="isClicked(this.id) ...

Various concatenated and compressed JavaScript files across multiple HTML documents within a single application

In my express.js application, I have different routes such as /home and /dashboard. For example, on the home page, I include: jquery.js, underscore.js, somemodule1.js, somemodule2.js. On the dashboard, I include: jquery.js, underscore.js, somemodule3.js, ...

Execute the getJSON calls in a loop for a count exceeding 100, and trigger another function once all

In order to process a large grid of data, I need to read it and then make a call to a $getJSON URL. This grid can contain over 100 lines of data. The $getJSON function returns a list of values separated by commas, which I add to an array. After the loop fi ...