RectAreaLight causing low frame rates in three.js

In my futuristic setting, I am incorporating RectAreaLights to mimic strip lights. However, I am encountering a performance issue as my frames per second (fps) drop significantly when using these lights, typically not exceeding 20 or 30. On the other hand, switching to different types of lights such as PointLight or SpotLight resolves this problem and maintains a stable 60 fps.

Are there any techniques or solutions available to enhance performance while using RectAreaLights?

Answer №1

Rectangular area lights can be quite costly to use, especially in large numbers. One workaround could be to use just one or two lights and strategically place them behind geometry for a similar effect. Another option is to incorporate the UnrealBlur post processing effect through EffectComposer to achieve multiple glowing elements, although this may sacrifice some realism and require careful adjustment of contrast to make the glow stand out.

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

An error in AngularJS occurred, stating: "TypeError: Attempted to access an undefined property 'apply'"

Having issues with my angularjs app that includes a form with a dropdown list and a datetimepicker. Whenever I change the dropdown list selection, I want the date displayed in the datetimepicker to be updated accordingly. After changing the selected item ...

Unable to transfer the component between components

This is the code I have: index.js: import React from "react"; import ReactDOM from "react-dom"; import {dest, People} from './components/people'; import json from './people.json'; function initFromJson() { let names = []; for(let ...

Creating dynamic charts in Javascript using Firebase

My dad recently asked me to enhance our motor home by integrating an Arduino with Firebase to monitor the water and propane tanks. He's hoping to be able to check tank levels from his phone so he can see when they need refilling. I've successful ...

Is there a way to change the color of a row in react jsx based on a condition from another row?

I am looking to highlight rows in red color based on a specific condition. If the ratio value in a column is greater than or equal to 0.96, I want to apply this styling. However, I'm unsure about where exactly to insert the necessary lines of code to ...

What are the steps for skipping, sorting, and limiting with dynamoose?

After being familiar with MongoDB and mongoose, I am now exploring dynamoose for my app. In order to replicate the below-shown mongoose query using dynamoose, how can I write it? Specifically, I want to achieve the same functionality as the following mong ...

Recalling the layout following the user's computer restart

I am creating a simple online editing tool (similar to Microsoft Outline) for coursework and I would like the outline details to be saved even if the user restarts the system. How can I achieve this? <html> <head> <title>Editor</ ...

Finding the index of a row using jQuery

I am encountering an issue with the following code: $("#myTable td").each(function(){ if($(this).html()=="") { rIndex1=$(this).parent().index(); //this value remains "1" rIndex2=$(this).rowIndex; //this value stays as "undefined" Un ...

Executing JavaScript functions when a browser tab is closed

When a user closes the browser tab, I want to call a specific JavaScript function. However, I only want this to occur when the user is actually closing the browser, not during page refreshes, link navigation, form submissions, or pressing the back button. ...

Adjusting the background opacity when the sidebar is open in a React + Typescript project

I am currently working on customizing a sidebar using the react-pro-sidebar library along with React and Typescript. The sidebar layout seems to be in order, but I am facing difficulty in adjusting the background color of the rest of the screen when the si ...

Improving the code of a JavaScript compiler through refactoring

I recently delved into the intricacies of a JavaScript package compiler and decided to revamp its fundamental structure. Each time a string is compiled, it gets appended to the SrcTable array and then outputted. However, for the output to be obtained, the ...

The Zip file generated in memory is experiencing corruption

I'm encountering an issue while attempting to serve a zip file generated in memory by Flask to a JavaScript front-end. However, the downloaded file appears corrupted and I am unsure of what mistake I may be making. @app.route('/route') def ...

Running a Selenium test with Loadrunner - A step-by-step guide

I've come across a situation where I have to conduct performance tests on a web application to ensure that the UIs respond quickly when multiple users log in and use the app. I'm looking for a way to run my current selenium UI tests from Loadrunn ...

Pass the code from the webpage to the PHP script

On my website, I have implemented a feature using JavaScript that dynamically changes the page content. Now, I am looking for a way to send this updated content to a PHP script. How can I achieve this functionality? ...

What is the best way to retrieve a variable in AngularJS1 after the HTML has been divided into multiple child HTML files?

I have segmented my main HTML page into multiple subpages and included them in the main file. However, it seems that each subpage is referencing different '$scope' variables. I am trying to reference ng-modle="My-model" from one subpage to anothe ...

Is there a way to make the text on my Bootstrap carousel come alive with animation effects?

My website features a Bootstrap Carousel with three elements structured like this: <a><img data-src="img" alt="Third slide" src="img"> </a> <div class="carousel-caption"> <h2> <u ...

The callback function is triggered prior to the completion of the request.on function

A custom npm module was developed for downloading files and displaying progress bars using the request and progress libraries. https://github.com/MaxySpark/maxyspark-download However, during testing, the callback function is executing prematurely instead ...

Using ThreeJS in conjunction with NextJS requires that class constructors be called with the 'new' keyword

Seeking assistance with rendering a basic scene within a nextJS route named "lab2". Encountering the following error: Error: class constructors must be invoked with 'new' Call Stack: renderWithHooks mountIndeterminateComponent ...

Having difficulty importing SVG files into the canvas

I'm encountering difficulties when attempting to import SVGs to the canvas and use setZoom() with FabricJS. I am currently working with version "2.0.0.rc4". I have made attempts to import them using two different methods, each with its own set of cha ...

Expanding and collapsing DIV elements using JavaScript upon clicking navigation menu items

At present, the current code unfolds the DIVs whenever a user clicks on a menu item. This results in the DIV folding and unfolding the same number of times if clicked repeatedly on the same link, without staying closed. My desired functionality is to have ...

Unable to navigate using ui-sref or $state.go in initial directive execution

There seems to be an issue with my ng-repeat on a directive where I'm passing in 3 pieces of information. The directive includes a button that is supposed to pass that information on to another view using params like this: ui-sref='profiles.sho ...