Placing numerous meshes that are mostly alike but not exactly the same in a scene

We utilize a single geometry that is attached to every mesh within our scene.

var geometry = new three.PlaneGeometry(1, 1, 1, 1),

Each object has a texture that is generated and cached to form a new material and a mesh for the object.

this.material = new three.MeshLambertMaterial({
    transparent: true,
    emissive: 0xffffff
});
// Access the cached texture
this.material.map = this.getTexture(this.attributes);
this.shape = new three.Mesh(geometry, this.material);

Subsequently, we place these shapes into various Object3Ds to enable the movement of large groups of shapes.

While this system performs well on high-end devices with up to 5000 circles, the frame rate begins to decrease beyond that point. On less powerful devices, the performance is significantly slower even with just a hundred meshes. We understand that merging geometries can enhance performance; however, we only have a single shared geometry. Is it feasible to merge meshes in this scenario? Would it even be effective? Please note that these shapes are interactive and can be moved or clicked. What options do we have to optimize this situation?

Additional information:
We are using Ejecta on mobile devices, which performs well with a low number of meshes but struggles after reaching 100. We believe the issue lies in our lack of optimization knowledge rather than a fault of Ejecta. Even on desktop, our application shows some suspicious levels of CPU usage.

Answer №1

After much trial and error, we finally cracked the code! Our rendering performance skyrocketed from handling 5k objects at 60fps to a whopping 100k objects at around 40fps.

While we heeded the advice of many by merging meshes, it took some tinkering to fully grasp the concept and successfully implement multiple textures/materials.

for (var i = 0; i < 100000; i++) {
    // creates a mesh from the geometry and material from the question and returns an object
    circle = ourCircleFactory.create(); 
    circle.shape.updateMatrix();
    sceneGeometry.merge(circle.shape.geometry, circle.shape.matrix, circle.cachedMaterialIndex);
}
var finalMesh = new three.Mesh(sceneGeometry, new THREE.MeshFaceMaterial(cachedMaterials));
scene.add(finalMesh);

This snippet generates one geometry for each cached material. The cachedMaterialIndex serves as our tool for optimizing texture caching and material selection.

It's possible that this approach results in a unique geometry for each combination of material and geometry. For instance, with 5 geometries and 5 interchangeable materials, you could end up with 25 distinct geometries. Remarkably, the number of objects on the screen doesn't appear to impact performance significantly. Worth noting: we were achieving 15fps with 5000 geometries, making this solution quite cost-effective.

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

Transform an array of arrays object with multiple depths into an array of objects

Having some difficulty with the conversion of an array of arrays-like object into an array of objects. The reduce method is being used, and it successfully converts the array data to an object for the first set of arrays. However, on the second iteration, ...

WebDriver encounters difficulty clicking on a certificate error popup window

Currently, I am using webdriver 2.40.0 in C# to interact with my company's website. The issue arises when I encounter a certificate error page while trying to access certain elements. Specifically, after clicking the override link and entering some in ...

When getStaticPaths and getStaticProps are programmed to deliver results

Seeking assistance with my first attempt at using getStaticPaths and getStaticProps in nextJS as a beginner. Can anyone help me resolve this issue? const datas = [ { id: 1, name: "Banheiro", image: "https://res.cl ...

Error: JSON parsing encountered an unexpected character "D" at position 1

When I call a python script as a child process from my node.js app to extract data from an uploaded file, I encounter the error 'UnhandledPromiseRejectionWarning: SyntaxError: Unexpected token D in JSON at position 1" when uploading the file thro ...

Exploring Typescript within React: Creating a property on the current instance

Within my non-TypeScript React component, I previously implemented: componentWillMount() { this.delayedSearch = _.debounce((val) => { this.onQuerySearch(val); }, 1000); } This was for debouncing user input on an input field. The corres ...

While working in Next.js, I utilized an `<Image />` tag with a link to an image, only to encounter an unexpected error

I've attempted it numerous times, but the error persists. I even went ahead and created the next.config.js file. module.exports = { images: { domains: ['link.papareact.com', ], }, }; Error: The src prop (https://links.pap ...

The <servicename> is inaccessible within an error function in Angular2

I encountered an unusual issue in angular2. While the code below is functioning correctly: loginResult.subscribe( (data) => this.response = data, (err) => this._ajaxService.handleError(err, 'A string to summarize th ...

Having trouble retrieving items from local storage in NextJS?

After logging in to my NextJS application, I store some user data in local storage. I'm attempting to create a small component that always shows the user's name. The problem I'm encountering is that sometimes it displays correctly and other ...

React JS - State values are not persisting and rendering properly upon clicking

Recently, I followed a step-by-step tutorial on creating a todo list using functional components. However, I encountered an issue when attempting to delete or mark items as complete in the list. In both the deleteHandler and completeHandler functions, I tr ...

In the XHTML mode, MathOverflow's invaluable mathematical expertise shines brightly

I am interested in incorporating the unique “piece of valuable flair™” from MathOverflow onto my website. The issue I am facing is that I want my webpage to comply with XHTML5 standards, meaning it should be served with the MIME type application/xht ...

Utilizing Bootstrap 4: Opting for <select> over tabs (<li>)

Is there a way to customize the appearance of Bootstrap tabs by replacing them with a dropdown select menu instead of the standard tab layout created with <ul> and <li> elements? I am working with a relatively small area (such as col-3) where ...

What could be the reason behind the successful execution of the Node fs.writeFile() method, yet leading to the browser receiving an empty file?

Here is an example of a callback function that appears to be sending an empty file to the browser, despite the fact that the server actually contains the word 'helloworld': router.get('/Download', function(req, res) { var fs = requ ...

The position of the camera remains static even after it is attached to a mesh

Looking to implement a TPS (third-person shooter) camera that follows the player? I have added the camera to a cube which represents the player's movement. You can view the coordinates of both the camera and cube in this example. While the camera is f ...

What is the best way to arrange this object alphabetically by name using Angular?

My client is in need of an AngularJS application that will interact with an API from an existing app. The API returns JSON data structured like the following: { "groups":{ "60":{ "name":"History" }, "74":{ "n ...

Refresh the context whenever the state object changes

Within my application, I am utilizing a PageContext to maintain the state of various User objects stored as an array. Each User object includes a ScheduledPost object that undergoes changes when a user adds a new post. My challenge lies in figuring out how ...

trouble encountered while sending data to php using ajax and json

Despite trying multiple solutions, my script is still not working properly. It functions without the $_POST value and without JSON, but when both are included, it fails to work. The error message displayed by the function is as follows: <b>Notice< ...

Having trouble getting web components registered when testing Lit Element (lit-element) with @web/test-runner and @open-wc/testing-helpers?

Currently, I am working with Lit Element and Typescript for my project. Here are the dependencies for my tests: "@esm-bundle/chai": "^4.3.4-fix.0", "@open-wc/chai-dom-equals": "^0.12.36", "@open-wc/testing-help ...

Managing cookies in PHP and JavaScript can present challenges due to variations in how different browsers

Our website utilizes ExpressionEngine as the CMS and Magento's cart for e-commerce. I am encountering challenges with cookies and their accessibility in various sections. A cookie is used for storing search selections, allowing users to return to our ...

Introduce a timeout in the ajax request

I'm currently facing an issue with adding a 2-second delay between the loader icon and the success message displaying the data as html. I attempted to use setTimeout in my ajax code with a specified delay number, but it doesn't seem to be workin ...

What strategies can be implemented to effectively utilize both client-side and server-side validation without redundant efforts?

Currently, I am validating user input on the server side using PHP. However, the client side sends XMLHttpRequest calls and highlights invalid fields with red borders. While this method works well, I believe it can be time-consuming for users to wait for a ...