Encountering a three.js issue while generating a large number of point lights

//////twinkling stars
for (let index = 0; index < 1000; index++) {
    const stargeometry = new THREE.SphereGeometry(1, 24, 24); //create star sphere size
    const starmaterial = new THREE.MeshStandardMaterial({ color: 0xffffff }); //define star texture
    const star = new THREE.Mesh(stargeometry, starmaterial); //initialize the star

    const [starx, stary, starz] = Array(3).fill().map(() => THREE.MathUtils.randFloatSpread(10000)); //set random position for star within range
    star.position.set(starx, stary, starz); //position the stars
    this.scene.add(star); //add stars to the scene

    const light = new THREE.PointLight(0xffffff, 2, 50 );
    light.position.set( starx, stary, starz );
    this.scene.add( light );
}

An error encountered in Chrome browser:

THREE.WebGLProgram: shader error: 0 35715 false gl.getProgramInfoLog Fragment shader is not compiled.

**Recent observations: **

at index<100 everything works fine creating twinkling stars with point lights

at index<200 the loading process slows down significantly

at index<300 and above the system encounters an error instead of generating more stars.

Answer №1

When it comes to forward rendering, which is a commonly used method in rendering (including by three.js), there is a restriction on the number of dynamic point lights that can be present in a scene, and this limit is relatively low. The rendering cost increases significantly with each additional light, and hardware constraints may be encountered even at around 12 lights. You can read more about this limitation in this issue.

To work around this limitation, one strategy is to pre-calculate lighting offline (e.g. using Blender), or utilize emissive materials along with a screenspace bloom effect. While these techniques may not actually cast light onto dynamic objects within the scene, they can still achieve visually pleasing results when implemented thoughtfully.

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

Having trouble with input event listeners in JavaScript?

I've been attempting to trigger the keyup event using EventListener for an input tag, but it doesn't seem to be working and I'm unsure why. Here is the code I have: document.getElementById("ajax").addEventListener("keyup", function() { ...

Ways to invoke a specific component within ReactDOM.render in React

Currently, I am facing an issue where 2 components need to be rendered present in a single div using myProject-init.js, but both are getting called at the same time. In myProject-init.js file: ReactDOM.render( <div> <component1>in compone ...

Using the .each() method in jQuery to dynamically assign an attribute to a parent element in JavaScript

I'm new to JavaScript and jQuery and I need help transitioning my code from jQuery to pure JS. Within my HTML, there are multiple parent divs each containing a child div. My goal is to assign a class to both the child and parent elements, with the p ...

Ways to ensure that a function completes in an Express route

I currently have a route set up like this: app.get("/api/current_user", (req, res) => { //It takes about 3 seconds for this function to complete someObj.logOn(data => { someObj.setData(data); }); //This will return before ...

Removing elements in AngularJS using ngRepeat

Many have questioned how to implement item removal within the ngRepeat directive. Through my research, I discovered that it involves using ngClick to trigger a removal function with the item's $index. However, I haven't been able to find an exam ...

Can you explain how to break down secured routes, users, and posts all within a single .create() function in Mongoose/JavaScript

I am seeking guidance on utilizing the .create() method within a protected route while implementing deconstructed JavaScript. In the absence of the protected route, I can deconstruct my schema and utilize req.body in .create(...) as shown below. const { ti ...

Ways to verify the presence of an empty array object

I'm trying to determine whether all arrays inside an object are empty. To illustrate, consider the following object: var obj = { arr1: [0, 1, 2], arr2: [1, 2, 3], arr3: [2, 3, 4] }; After pop()ing values from the arrays within the object, I ...

What causes objects to be added to an array even when the condition is not met?

In the process of creating a terminal game using node.js, I am developing a random field consisting of different elements such as hats, holes, and pathways. The player's objective is to navigate through the maze and locate their hat within the field. ...

leaving code block using Express and Node

My code is displayed below: // Implement the following operations on routes ending with "users" router.route('/users') .post(function(req, res, next) { var user = new User(); user.username = req.body.username; user.p ...

Switching between components in vue.js: A beginner's guide

In my project, I created a Dashboard.vue page that consists of three child components: Display, sortBooksLowtoHigh, and sortBooksHightoLow. The Dashboard component also includes a select option with two choices: "Price: High to Low" and "Price: Low to High ...

Achieving a centralized child entity upon instantiation

To demonstrate the issue I am facing, I have created a test case on this glitch. Basically, each time I click, I am attempting to generate a sphere with a text-geometry child where the text is perfectly centered on the sphere, like "X marks the spot". Th ...

Having trouble getting Angular 2 animations to fade in

I've been trying to figure out how to make the html fadeIn for hours. Every time ngFor displays it, the opacity stays at 1 immediately, without fading in. FadingOut works fine, but the fadeIn effect is not working as expected. @Component({ selector:& ...

Adjusting the width of a div element using a button

I am currently diving into the world of JavaScript, React, and Node.js. My current challenge involves attempting to adjust the width of a div element using a button. However, I keep encountering the same frustrating error message stating "Cannot read prope ...

Navigating through arrays in JavaScript - optimizing performance

I've noticed this code snippet used in various places: for (var i = 0, len = myArray.length; i < len; i++) { } I understand that this is caching the length of the array. Recently, I encountered this alternative approach: var len = myArray.le ...

Utilize jQuery to apply inline styles to dynamically created div elements

I am attempting to apply inline styles to a div using jQuery. The current state of the div, as seen in Firebug, is shown below: https://i.sstatic.net/rqhIc.jpg My goal is to retain the existing CSS while adding margin-left:0 and margin-right:0 to the cur ...

Experiencing difficulties with Magento operations

Currently facing an issue while attempting to set up Magento on my server. I have transferred all files from another server to mine, but now encountering an error. Could this be related to the symlinks I generated or is it caused by something else? Encoun ...

Contrast the differences between arrays and inserting data into specific index positions

In this scenario, I have two arrays structured as follows: arr1=[{room_no:1,bed_no:'1A'}, {room_no:1,bed_no:'1B'}, {room_no:2,bed_no:'2A'}, {room_no:3,bed_no:'3A'}, {room_no:3,bed_no:'3B ...

Upon successful authorization, the Node Express server will pass the access token to the React client app via OAuth in the callback

I am currently working on a node server that authenticates with a third party using oauth, similar to how Stack Overflow does. After authorizing the request and obtaining the access token and other essential information from the third party, my goal is to ...

Efficient method invocation for objects within an array using functional programming techniques

Is there a way to execute a method that doesn't require arguments and doesn't return anything on each object within an array of objects that are all the same type? I've been trying to find a solution without resorting to using a traditional ...

The attribute of the Angular div tag that lacks an equal sign

Apologies if this question has been asked before. I've noticed in some people's code that they use the following syntax: <div ui-grid="myUIGrid" ui-grid-selection ui-grid-resize-columns class="grid" /> Can someone explain what ui-grid-sel ...