Running multiple instances of objects simultaneously can diminish the performance of a WEBGL application

Currently, I am working on a THREE.JS WebGL project where I am faced with a bottleneck. The issue lies in the instancing of multiple objects with the same geometry. Despite my efforts, I can't seem to pinpoint the exact problem causing the slowdown in performance. Perhaps someone could lend me a hand in resolving this mystery. In my application, I utilize a PointCloud with normals to determine the positioning and orientation of each instanced object using quaternions. However, even after researching various methods like instancing and merging, I'm still unable to identify the root cause of the issue at hand.

Here is a snippet of the code for reference:

bitbucket.org/snippets/electricganesha/Mdddz

Even after numerous reviews, I remain puzzled by what might be causing the drastic drop in FPS from 60 to 20 when executing this particular method.

javascriptopengl-es3dthree.jswebgl

Answer №1

You may be compensating too much in your optimization efforts.

Consider incorporating the following snippet into your loop for merging geometries:

var maxVertices = 1 << 16;

// If adding a new object exceeds the maximum vertex count, store the current geometry and create a new one
if (singleGeometry.vertices.length + newObject.geometry.vertices.length > maxVertices) {
  scene.add(singleGeometry);
  singleGeometry = new Geometry();
}

singleGeometry.merge(newObject.geometry, newObject.matrix);

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

Ways to decrease a value in an array comprised of nested arrays

Within my array of products, each product contains an array of categories. My goal is to extract and return the unique values of the type property from the category object. Both the Lodash and standard versions provided below accomplish this task. I am ...

javascriptarrayslodashreduce

Custom template for prefetched data is not displaying in Typeahead.js

I'm currently utilizing Twitter's typeahead.js plugin for displaying autocomplete suggestions. Here is the code snippet: $.ajax({ url:'/getlocals/', success: function(data){ $('.local-type').typeahead({ ...

javascriptjquerytypeahead.js

Encountering a "require is not defined" error when trying to launch a Selenium

I have developed a basic selenium application and now I am looking to implement a graphical user interface for it. Here is the code snippet: index.html: <html> <head> <meta charset="UTF-8" /> <title>Selenium Ap ...

javascriptseleniumelectron

NextJS TypeScript website no longer rendering after integrating Express middleware

For my project, I am utilizing NextJS with Typescript. Everything was functioning smoothly until I integrated ExpressJS typescript as the middleware. Surprisingly, React Devtools fails to recognize it as React. Upon inspecting the page contents, it appears ...

javascriptnode.jstypescriptexpressnext.js

Unique identifier for multiple datepicker fields

Managing a lengthy HTML document with numerous datepickers, each assigned a unique ID in the format of "DueDate'num'", such as "DueDate401": <div id="DueDate"> <label for="DueDate">Due date:<br></label> <input name ...

javascriptjquerydatepicker

Scrolling to the latest message in Vuejs when a new message is received

I am currently working on a chat application, but I am facing an issue with scrolling to the bottom when new messages are received. I have attempted both methods: document.getElementById('msg_history').scrollTop = document.getElementById('m ...

javascriptvue.js

Selecting options in the <select> tag on iPhone iOS 15 is not displaying the picker wheel on a React-JS PWA

My select input and box are displaying differently on IOS versions 12 and 15. In IOS 12, it appears as a wheel picker, but in IOS 15, it shows up as a black box. I want it to consistently appear as a wheel picker across all IOS versions. <InputWrapper&g ...

javascriptiosreactjsprogressive-web-apps

React Native - Issue with Chart not updating correctly when new data is added

I'm struggling to create a dynamic chart using the Victory-Native library (click here for documentation). The goal is to modify the chart after pressing the "Get Data" button, but I've encountered a problem that has me stumped after hours of att ...

javascriptandroidreactjsreact-native

Is there a way to establish a condition for an onSubmit event?

I have a form that I'm working on, and I would like for an error message to pop up upon the first onSubmit, and then function normally on subsequent submissions. Here is the current setup: const [submitting, setSubmitting] = useState(false); const ha ...

javascriptreactjsformsuse-state

Refreshed page causing hide/show div to reset

Hello there, I'm currently working on a web application and I need to implement some JavaScript code. The application consists of three sections, each with its own title and button. When the button is clicked, a hidden div tag is displayed. Clicking t ...

javascripthtmlshow-hide

Dealing with delays in rendering certain values with Angular interpolation & ways to eliminate an element from an array of TypeScript objects

I am currently developing a web application using ASP.NET Core - Angular. The app allows users to select a customer as the starting point and then calculates the distance & duration to other customers using Google Maps Distance Matrix Service. Although I a ...

javascriptangulargoogle-mapstypescriptgoogle-maps-api-3

Utilizing the arr.push() method to replace an existing value within an array with a new object, rather than simply adding a new

Seeking help to dynamically render a list of components that should expand or shrink based on values being added or removed from an array of custom objects. However, facing an issue where pushing a value into the array only replaces the previous value inst ...

javascriptarraysreactjstypescript

ThreeJS - Implementing point light shadows as spotlights

In my current scene, I have both ambient light and a point light. I want to achieve shadows underneath the meshes similar to the image provided, but the central area shows an unwanted shadow. It appears that the point light is behaving like a spot light i ...

javascripthtmlthree.js

Currently in the process of executing 'yarn build' to complete the integration of the salesforce plugin, encountering a few error messages along the way

I've been referencing the Github repository at this link for my project. Following the instructions in the readme file, I proceeded with running a series of commands which resulted in some issues. The commands executed were: yarn install sfdx plugi ...

javascripttypescriptnpmsalesforceyarnpkg

Conceal certain components when a user is authenticated

Below is the content of my app.component.html: <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class='container'> <ul class="nav navbar-nav"> <li class='nav-item'> <a clas ...

javascriptangulartypescriptfirebasefirebase-authentication

Is it possible to use AJAX to change the class name of a Font Awesome icon?

I am considering updating the icon after deleting a row. Should I initially include the font awesome icon once in the blade, then remove the class name and add it back with ajax? blade: <div id="status-{{ $country->id }}"> <div id ...

javascripthtmlajaxlaravel

How can I navigate through all the divs by setting an interval slider with a random starting point?

I have a Jsonp request that returns a block of HTML with the following structure: <div id="slider_wrapper" style=""> <div style="xxx" ><section style="xx">xx</section></div> <div style="xxx" ><section style=" ...

javascriptjqueryhtml

Creating dynamic properties in JavaScript based on another object is a powerful way to manipulate data

In my current scenario, I am faced with the task of creating a new object named result based on an existing object called source. This new object must contain all properties from source, and also include additional "methods" named after the properties to ...

javascriptjquery

What could be causing my AngularJS errors to display like this in the Firefox console and Firebug?

Currently, I am working on an application using angularjs. However, I have encountered an issue with the 'smart-table' plugin not being added to my app modules array. What I'm interested in understanding is why Firefox and Firebug are displa ...

javascriptangularjsfirefoxfirefox-addonfirebug

Take action upon window.open

I have a code snippet here that opens a window. Is it possible to make an ajax call when this window is opened? window.open("http://www.google.com"); For instance, can I trigger the following ajax call once the window is open: var signalz = '1&apos ...

javascriptjquery