The performance of Three.js is directly influenced by the quantity of objects present

Question

The performance of Three.js is directly influenced by the quantity of objects present

Just completed a project in WebGL using Javascript and the 3D library known as three.js

Unfortunately, the performance of the project is less than impressive - slow from the start with occasional moments of adequacy.

In this game, there are: 1 car, 6 oranges, 161 cheerios, 1 table, 1 fork, and 6 candles.

The player controls the car in a race-like game, navigating through a circuit enclosed by cheerios. The car consists of various three.js geometries like box, torus, cylinder, and sphere. When an orange collides with the car, the player restarts and loses a life.
All oranges move uniformly in straight lines, posing a threat to the car upon collision. Their structure consists of sphere and cylinder geometries in three.js.
A cube-shaped table scaled to be 300x1x300 in xyz coordinates.
Each candle acts as a pointlight source, flickering for added effect.
In addition to the 6 pointlights, there is ambient light and 1 directional light, all created with three.js.
The fork behaves like a billboard, constantly pointing towards the active camera represented by a plane.
An explosion of particles occurs when an orange reaches its destination or when the car completes a lap. Each explosion includes at least 100 small plane particles following a billboard-like movement pattern.
Upon creation, each particle within an explosion is individually added to the scene before eventually expiring after a set period of time (usually around 1000 milliseconds).
All objects within the game feature their own textures, some not optimized with dimensions as powers of 2. Textures are loaded using the deprecated method THREE.ImageUtils.loadTexture(URL).
Everything within the game, including scenes, cameras, lights, meshes, geometries, and materials, was built using three.js.

It has come to my attention that adding numerous cheerios significantly impacted the performance. Is there a way to use a single model for all cheerios similar to OpenGL's VS libs?

How can I enhance the overall performance of the project?

Please feel free to request more specific information if needed regarding this issue.

javascript three.js

Answer 1

Answer №1

To optimize your scene, start by constructing a geometric shape. Next, generate individual cheerios meshes without immediately adding them to the scene. Instead, merge each mesh into the geometry using:

var globalCheeriosGeometry = new THREE.Geometry();
// iterate through 161 cheerios meshes and merge them into the global geometry
globalCheeriosGeometry.mergeMesh( cheeriosMesh );

This approach consolidates all cheerios into a single geometry object. Afterwards, create a new mesh utilizing this combined geometry and then introduce it to the scene. By following this method, you can significantly reduce the number of draw calls required for your scene rendering.

Answer 2

To optimize your scene, start by constructing a geometric shape. Next, generate individual cheerios meshes without immediately adding them to the scene. Instead, merge each mesh into the geometry using:

var globalCheeriosGeometry = new THREE.Geometry();
// iterate through 161 cheerios meshes and merge them into the global geometry
globalCheeriosGeometry.mergeMesh( cheeriosMesh );

This approach consolidates all cheerios into a single geometry object. Afterwards, create a new mesh utilizing this combined geometry and then introduce it to the scene. By following this method, you can significantly reduce the number of draw calls required for your scene rendering.

Answer 3

Answer №2

It seems likely that the issue arises from calling a resource-intensive three.js method too frequently, leading to high computation demands. To address this, I suggest profiling your game to determine whether the bottleneck lies in CPU or GPU processing.

In addition to the presence of 6 pointlights, there exists ambient light and 1 directional light, all generated using three.js.

The calculations for lighting can be costly at an individual pixel level, necessitating computation for every pixel. Consider reducing the number of light sources to optimize performance.

Each explosion may consist of multiple particles (minimum 100), with each particle behaving like a small plane with billboard-like properties.

Ideally, utilize a billboard particle system instead of handling particles as individual planes to avoid potential inefficiencies where three.js may perform one draw call per plane.

Answer 4

It seems likely that the issue arises from calling a resource-intensive three.js method too frequently, leading to high computation demands. To address this, I suggest profiling your game to determine whether the bottleneck lies in CPU or GPU processing.

In addition to the presence of 6 pointlights, there exists ambient light and 1 directional light, all generated using three.js.

The calculations for lighting can be costly at an individual pixel level, necessitating computation for every pixel. Consider reducing the number of light sources to optimize performance.

Each explosion may consist of multiple particles (minimum 100), with each particle behaving like a small plane with billboard-like properties.

Ideally, utilize a billboard particle system instead of handling particles as individual planes to avoid potential inefficiencies where three.js may perform one draw call per plane.

The performance of Three.js is directly influenced by the quantity of objects present

Answer №1

Answer №2

Similar questions

Upload a JSON file to a server using a JavaScript app

React Native's state changes dynamically, however, the JSX conditional rendering fails to update the user interface accordingly

Sending data with React using POST request

Is there a way to incorporate external HTML files into my webpage?

steps to verify the status of a sent request

How to remove an image input type using jQuery

What is the process for using express and Postman to send a PUT request and modify a specific field in MongoDB?

Issue with JQuery: Inability to deactivate an element after receiving an Ajax response

What are the steps to integrating D3js into a WordPress website?

Refreshable div element in a Code Igniter-powered web application

Do not use unnecessary variables for storing references in ES6

To calculate the sum of input field rows that are filled in upon button click using predetermined values (HTML, CSS, JavaScript)

Unauthorized access detected during ajax request triggered by onpaste event

Why is it that a JSX element can take a method with parentheses or without as its child?

Securing page access with a straightforward password protection using Flask

Jquery Validate doesn't consistently give a positive response

Building custom directives on AngularJS pages without a specified ng-app module

How does the 'this' variable function when it comes to models in embedded documents?

Allow all images on the webpage to be easily dragged and dropped into a designated upload section

What is the best way to add an insert button to every row?