Three.js struggles with efficiency when rendering just 40 seemingly uncomplicated models

Explore this test scenario. Click on model1-model4 to add additional models. Be sure to adjust the camera view (using your mouse) to experience optimal FPS performance.

I have experimented with various simple models... whether utilizing reflection or not, and smoothing vertices or not; however, when approximately 40 models are rendered, the FPS drops to around 20-25 (especially when moving the scene!)... By increasing the number of models to 55, the FPS decreases further to about 12! Any insights into the cause of this issue? It doesn't seem to be related to the graphics card or computer specifications... as tests were conducted on a Quad Core 4x3.6Ghz, 8GB RAM, Geforce 880GTX system. Similarly, the Xperia Z1 yielded similar results.

Could there be an error in my approach? What measures can I take to enhance the performance? For instance, Ogre has the capability to render up to 5000 identical models seamlessly without any performance hiccups (through DirectX).

Answer №1

To prevent loading a new obj each time, utilize obj.clone() if it has already been loaded. This will allow you to reuse geometries and textures effectively.

It seems like you're aiming for a cubemap, but your textures are not power of 2 (432x432). Consider resizing them to either 256x256 or 512x512 for optimal results.

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

Enable JSON Data Management through Express

I am utilizing the lowDB dependency to manage JSON data in conjunction with Express, and for the most part, it is functioning properly. However, I have encountered a bug that I am struggling to resolve. I have created a /create page where users can input ...

What is the process behind Express and React Routes when the browser sends an initial GET request?

Embarking on my journey into the realm of React and full-stack development, I find myself in need of guidance on a particular issue that has been eluding me. In my quest to create an app using React and Express, authentication plays a crucial role. My pla ...

Error: Element type is invalid: a string was anticipated, but not found

I recently experimented with the example provided in React's documentation at this link and it functioned perfectly. My objective now is to create a button using material-ui. Can you identify what is causing the issue in this code? import * as R ...

Upon submission in Vue, the data variable becomes undefined

I set isError to false in the data, but when there is an error from Laravel, I receive a 422 error. I want to then set isError to true, but when I do, I get an error in the console saying that isError is undefined even though it has been defined. What coul ...

Problem encountered during JSON parsing in JavaScript causing loss of the "id" field

Upon parsing this string using JSON.parse(), I noticed that some objects contain id = null. However, upon inspection, I am unable to find any object with id = null. Is there a potential issue here? console.log("TERRITORIES000: "); ...

3D model viewer with WebGL using Three.js embedded as a DOM element within an HTML document

Is it feasible to incorporate a 3D model viewer on my website using Three.js as a DOM element in HTML? Are there any demonstrations of this implementation available? ...

Utilizing ngModel with the radio group component from the API in Angular

Here's the code. component.html <form nz-form [formGroup]="taskFormGroup" (submit)="saveFormData()"> <div nz-row *ngFor="let remark of checklist"> <div nz-col nzXXl="12" *ngFor="let task of remark.tasks" style="paddi ...

Having issues with the Firebase EmailAuthProvider credential not functioning properly

While working with Firebase and React, I encountered an issue where I needed to convert an anonymous account to a permanent one. I followed the instructions in the Firebase documentation but encountered an error message stating that the function could not ...

Having trouble grasping the purpose of app.use('/') in the Express framework

Below is the code snippet I am currently working with: // Initializing express, body-parser, mongodb, http, and cors var app = express(); app.use(cors()); app.use(express.urlencoded()); // Parse incoming JSON data from API clients app.use(express.json()); ...

Trouble with HTML Contact Page Email Delivery

Hello there, I recently set up a contact page for my html website but unfortunately, it's not sending the messages to my email as expected! You can see what I mean in this screenshot -> https://i.stack.imgur.com/2xPXw.png I'm a bit puzzled b ...

The error message indicates that the argument cannot be assigned to the parameter type 'AxiosRequestConfig'

I am working on a React app using Typescript, where I fetch a list of items from MongoDB. I want to implement the functionality to delete items from this list. The list is displayed in the app and each item has a corresponding delete button. However, when ...

Webpack - Internet Explorer 11 showing blank app: SCRIPT1010 error - Identifier was expected

I am currently utilizing Webpack in conjunction with my Vuejs application. Unfortunately, I am encountering an issue where my application fails to load on Internet Explorer 11. Here is a snapshot of the console error message: https://i.sstatic.net/eYwWm. ...

Patience is key as we wait for the webpage to finish loading

I've been searching for a solution to this issue for quite some time without any success... On my webpage, I have a square texture as the background which is set to repeat in order to fill the entire page. However, when a user first enters my site, t ...

The Bootstrap DateTime Picker is not displaying correctly; it appears to be hidden behind the screen

Need assistance with displaying the full datetime picker on the screen. I attempted using position:relative but it's not working as expected. Can someone please help me with this issue? HTML code : <div style="position:relative"> <div class ...

Tips for fixing syntax errors after an Angular update

Considering an upgrade to the latest stable Angular branch 1.4.7 from version 1.2.13, there is a customized angular-leaflet-directive in the project that requires syntax changes in a specific function to avoid errors. Error: [$parse:syntax] Syntax Error: ...

Place a div element on top of the others by using the onClick() event to "dock" it

Can someone help me with setting/docking a div element above another div? The div contains some other divs and form objects, serving as an inputbox dialog that should appear right above an element when clicked. I have set the onClick() event for a Click &l ...

Implement functionality in Angular to perform tasks when the page is reloaded

I need to perform certain actions in Angular when the page is reloaded, such as adding items to local storage before the page loads and removing items after the page has fully loaded. In other words, I want to execute some tasks both before and after refr ...

Editing HTML using the retrieved jQuery html() content

I need to modify some HTML that is stored in a variable. For example: var testhtml = $('.agenda-rename').html(); console.log($('input',testhtml).attr('name')); I also tried the following: console.log($(testhtml).find(' ...

Help with Web Scraping: Setting up Noodle.js and Using jQuery

After successfully installing noodle.js using npm install, my code looks like this. However, when I try to run the file (noodleTest.js) in the terminal with the command 'node noodleTest.js', I encounter the error message: jQuery.getJSON is not a ...

Inconsistency with Mobile Viewport Problem

Apologies for the chaos below, but I've spent quite some time attempting to fix this on my own. It's time to surrender and seek assistance! Here are some screenshots to illustrate the issue: The problem is that sometimes the webpage functions c ...