"Encountering a Three.js issue when attempting to incorporate over 37 spotlights in the scene

My project involves utilizing Three.js r58 (with the WebGLRenderer) to display a 3D model of a building with detailed information about the positions and dim levels of the lights inside.

For each light sourced from the database, I create a CubeGeometry object (to represent the physical light) and a SpotLight (to simulate the light output). Here is the code snippet:

// 'this' refers to an existing custom object retrieved from the database - all code within it is functional
var geometry = new THREE.CubeGeometry(4.8, 0.6, 1.36);
var material = new THREE.MeshBasicMaterial({color:0x444444, vertexColors:THREE.FaceColors});

this.objectMesh = new THREE.Mesh(geometry, material);
this.objectMesh.position.set(0, 20, 0);

scene.add(this.objectMesh);

this.lightEmitter = new THREE.SpotLight(0xffffff, 0, 22, true);
this.lightEmitter.position.set(this.objectMesh.position.x, this.objectMesh.position.y - (this.objectMesh.geometry.height / 10), this.objectMesh.position.z);
this.lightEmitter.rotation.set(this.objectMesh.rotation.x, this.objectMesh.rotation.y, this.objectMesh.rotation.z)
this.lightEmitter.target.position.set(this.objectMesh.position.x, 0, this.objectMesh.position.z);
this.lightEmitter.angle = 0.9;
scene.add(this.lightEmitter);

Initially, everything was functioning well with up to 37 lights in the scene. However, upon adding the 38th light, I encountered the following error:

Could not initialise shader
VALIDATE_STATUS: false, gl error [1285]

This issue arose across Firefox and Chrome on a Windows 7 PC with a GeForce GTX 650, as well as Firefox on an Ubuntu laptop. Additionally, Chrome on an Android Nexus 7 displayed another error:

(0): error C6007: Constant register limit exceeded; more than 256 constant registers needed to compile program
50 lines, 1 errors
. I'm uncertain if these are related.

When I replaced the building model with a flat plane, I encountered the ERROR: too many uniforms message with 38 lights, while 37 worked fine. Disabling shadows for lights and objects did not resolve the issue.

Is this due to hardware or OpenGL/WebGL limitations from displaying numerous lights in the scene? If not, any insights into what could be causing this problem would be appreciated.

Answer №1

When working with forward rendering in OpenGL ES or WebGL, there is typically a maximum number of lights that can be active at once, often around 8. It's surprising that you were able to have 37 lights on simultaneously. However, if you switch to deferred rendering, you'll find that there is no limit on the number of lights you can use. In this case, it would be beneficial to utilize the WebGLDeferredRenderer instead of the traditional WebGLRenderer.

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

How can I generate cone shapes with a flat base using three.js?

Could anyone help me with creating a design similar to the one shown in the image below? I've been searching for a solution but haven't been able to find one... ...

Exploring Angular Factory: Creating the getAll method for accessing RESTful APIs

In my Angular.JS factory, I am retrieving data from a REST Api. The REST Api endpoint is "/api/getSsls/1", where 1 represents the page number. The API response is in JSON format and contains the first ten items along with total pages/items information. I ...

Are there any Ruby scripts or JavaScript libraries available for validating the correct format of HTML code?

I've attempted to scrape HTML from a URL using '.errors' in Nokogiri, but it's not working with the following example: <table> <td></td> </table> I'm not sure why it's returning 'TRUE' a ...

Validating HTML Forms

By incorporating an internal JavaScript function like the one shown below: <script> function validateForm() { var x=document.forms["myForm"]["firstName"].value; if (x==null || x=="") { document.getElementById('usernameError& ...

Angular promise fails to resolve after an extended period of waiting for a response

My application is designed to send GET requests to my node/express server. In order to monitor changes in the server code, I have implemented a setTimeout function. While the promise function on the client side initially functions properly for a short peri ...

Tips for retrieving data from a Node.js server with a POST request in a React application

I'm currently working on a MERN authentication project, but I've hit a roadblock. Whenever the information is submitted on my register page, it triggers an add user function on the front end. async function addUser(user) { const config = { ...

exploring the network of connections

This is what the HTML structure of the webpage looks like: <body> <form> <input type='file'/> </form> <div id='list'> <div>value here<input id='delete' type='button'/>< ...

React: image appearing in DOM but failing to render on screen

As I work on developing a web application using React, my focus is on creating cards that consist of header text and an image. However, I have encountered a problem with displaying the image properly. When I import the image and attempt to use it in my co ...

Exporting stylesheets in React allows developers to separate

I am trying to figure out how to create an external stylesheet using MaterialUI's 'makeStyles' and 'createStyles', similar to what can be done in React Native. I'm not sure where to start with this. export const useStyles = m ...

personalized XMLHttpRequest method open

var open = XMLHttpRequest.prototype.open; XMLHttpRequest.prototype.open = function(method, uri, async, user, pass) { this.addEventListener("readystatechange", function(event) { if(this.readyState == 4){ var self = this; var respons ...

What is the best way to ensure that empty strings are not included in the length of my array?

I have encountered an issue with a JSON file that I fetch. The array syllables is capable of holding up to strings max. However, when I exclude 2 words, I end up with 2 words and 2 empty strings. Nevertheless, my front-end still expects 4 "strings". So, it ...

Personalize Tooltip on Highchart Area Chart

I am currently in the process of customizing the tooltip for my area chart using Highchart. Within this area chart, I have plotted 3 series. My goal is to display the tooltip at a fixed location on the chart's top center. When hovering over any point ...

Do ES6 features get transpiled into ES5 when utilized in TypeScript?

After implementing ES6 features such as template strings, arrow functions, and destructuring in a TypeScript file, I compile the code to regular JavaScript... Does the TypeScript compiler also compile the ES6 syntax, or do I need to utilize another compil ...

Manipulating an element in the JSON data is causing alterations to the preceding elements

I am facing a challenge with two JSON arrays. $scope.arr1 = [ { "id": 1, "first_name": "Philip", "last_name": "Kim", "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1e6e7577732e5e737b7a777f78776c7b307d717 ...

What causes the ongoing conflict between prototype and jquery?

I have researched how to effectively load both prototype and jQuery together, but the solutions I found did not resolve my issue. My current setup involves loading jQuery first, followed by this specific file: http:/music.glumbo.com/izzyFeedback.js, and t ...

Is there a way to trigger $q notify without initiating a $digest cycle?

Within my application, the $digest cycle typically takes around 5ms to complete. I heavily utilize $q.defer with deferred.notify throughout my codebase, but I've encountered an issue. Each time deferred.notify is triggered, it schedules a new digest c ...

Anguar server encountered a startup issue and failed to initialize

My server.js file looks like this: var express = require('express'), api = require('./api'), app = express(); app .use(express.static('./public')) .use('./api', api) .get('*', ...

Tips for refreshing jQuery to ensure it functions smoothly for subsequent tasks

I am facing an issue with running a second process under JQuery, as shown in the code snippet below: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head> <body> <script type=" ...

The AngularJs project is currently experiencing issues when trying to function as a single page web application

I'm currently working on incorporating AngularJS into an existing web project that uses jQuery. Here is a snippet of my code: <div class="medya" ng-repeat="d in data" masonry-item-dir> <a href="{{d.Url}}" class="onizleme"><img src="{ ...

Issue with JavaScript not executing upon clicking the submit button on a form within the Wordpress admin page

In the admin pages of my Wordpress installation, I have created an HTML form. My goal is to validate the data inputted when the submit button is pressed using a Javascript function. If the data is not correctly inserted, I want alerts to be displayed. Desp ...