What are the memory-saving benefits of using the .clone() method in Three.js?

As I work on my game project, I am including a whopping 100,000 trees, each represented as a merged geometry. Utilizing the tree.clone() method to add them from a cloned model has helped save a significant amount of memory. Unfortunately, the game's performance is suffering as it runs at a mere 3 FPS due to the abundance of geometries.

If I aim to improve the game's framerate to a smooth 60 FPS, it will be necessary to combine these trees into a smaller number of geometries. However, every time I attempt this, Google Chrome crashes as a result of the excessive memory consumption.

I am puzzled by the excessive memory usage that occurs when merging these trees. Could it be that I am negating the benefits obtained from using the .clone() function in the process?

Answer №1

Exploring instancing is essential for your specific use case. It is designed to handle scenarios like yours.

Alternatively, opting for BufferGeometry instead of traditional geometry can help reduce memory consumption.

edit

The memory consumption issue is primarily due to the overhead of the merge operation when working with THREE.Geometry. This is attributed to the extensive allocation of JS objects such as Vector3, Vector2, Face3, etc., which eventually get discarded because the original geometry is no longer present. This situation causes strain on the system, leading to potential performance degradation even if no crashes occur. Buffer geometry proves to be more efficient because it utilizes typed arrays, ensuring that only primitives are copied around, and there is no need for object allocation.

Nevertheless, it results in increased GPU memory usage since multiple instances are stored in the same buffer, causing repetition and pre-transformation of data. This is where instancing can offer assistance by optimizing the process.

Mesh (Node, Object)

A Mesh describes a 3D object within a scene graph, detailing its parent-child relationship, position, rotation, scale, geometry, material, and other attributes.

Geometry

This component holds the fundamental geometry data, including vertices, UVs, normals, etc. It serves as the foundation for modeling programs, potentially creating ambiguity.

It is crucial to grasp that these elements exist in "object (model) space," which entails initial translation, rotation, and scale set by the modeler. This allows the object to be placed and manipulated within a 3D environment effectively.

To address the issue mentioned in the title, one must understand the concept of instancing and streamline the rendering process to focus on individual objects instead of processing an entire forest model.

By utilizing instancing, draw calls can be minimized while rendering tree models singularly rather than collectively as a forest, leading to improved performance and reduced memory overhead.

/edit

In scenarios with a high volume of geometries like 100k, optimizing draw calls becomes crucial for enhancing performance. It is vital to leverage techniques such as instanced rendering and efficient buffer management to address performance bottlenecks associated with handling large numbers of geometries.

The game experiences a significant memory saving transformation, but the performance is hindered by the multitude of draw calls linked to the 100k geometries.

The challenge lies in managing the overhead generated by a large number of draw calls rather than the individual geometries. Various strategies can be employed to overcome this performance issue effectively.

Answer №2

The issue with memory lies not in the utilization of the clone() function, as it only creates a duplicate of your object's geometry and material.

The problem arises when the program hits its memory limit during the merging process.

Merging is a resource-intensive task that involves combining all vertices and faces of two objects to create a new one. As this merged geometry grows, it can become too large for the browser to handle, leading to crashes.

Have you considered splitting the merged geometry into smaller segments, such as 100 objects, instead of storing all 100K trees in one merged object?

To optimize performance, try reducing the number of vertices and faces in the tree mesh itself.

When dealing with a large number of trees, it may be helpful to implement techniques like using simplified versions for trees in the distance, such as 2-3 plane meshes, to conserve resources.

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

Is it possible to balance proper CSS and Javascript maintenance with the use of a Template Engine?

When using a template engine like Velocity or FreeMaker, you have the ability to break up your HTML into reusable components. For example, if you have an ad <div> that appears on multiple pages of your site, you can create a file containing that < ...

Parsing JSON data received through a URL using Ruby

When attempting to send a JSON object from JavaScript to Ruby, I am encountering issues with parsing it in Ruby. Despite trying various methods and conducting extensive research, I have not been able to find a solution. It is important to note that I am r ...

Difficulty encountered when attempting to implement custom filtering based on condition in HTML using Angular

I'm still new to angular, so please bear with me if this question seems trivial. I have a collection of integers in my controller and I need to filter it to only show items that meet a certain condition. Initially, I attempted the following: <div ...

Enhancing Functionality: JavaScript customization of jQuery (or any other object's) function

Within this jsfiddle, the author has created a test for a custom knockout binding. A key aspect of the test involves extending jQuery. My question pertains to lines 30. $.fn.on = function(event, callback) { where it appears that any existing definition o ...

Angular's ng-include functionality allows developers to dynamically load

As a beginner in angular.js, I've written my first 'hello world' script. I'm attempting to use ng-include to bring in a navbar from the local file /templates/nav.html. Despite following a tutorial closely, I'm struggling to underst ...

Changing the hidden input value to the data-id of a selected <a> element

I've set up a form with a dropdown menu and subdropdowns, generated using a foreach loop through a @Model. When I click on one of the options, I want the value of my hidden input field to match the data-id of the clicked item. This is what I have in ...

Overcome the issue of 'Parsing Error: Kindly verify your selector. (line XX)' in Javascript/AWQL

Hello there! Just to clarify, I am not a developer and my coding skills are limited to basic HTML. Your patience is greatly appreciated ...

How about this: "Unveil the beauty of dynamically loaded

var request = new Request({ method: 'get', url: 'onlinestatusoutput.html.php', onComplete:function(response) { $('ajax-content').get('tween', {property: 'opacity', duration: 'long&apos ...

Can we utilize the elements in Array<keyof T> as keys in T?

Hello, I am trying to develop a function that accepts two parameters: an array of objects "T[]" and an array of fields of type T. However, I am encountering an issue when I reach the line where I invoke el[col] Argument of type 'T[keyof T]' i ...

Is a DOM lookup performed each time Vue's ref is utilized?

Exploring the capabilities of Vue.js, I have integrated a few refs into my current project. However, I am curious about the efficiency of calling refs in methods. Does Vue perform a DOM lookup every time a ref is called, or does it store all refs once for ...

Adding a <link> tag with a specific onload attribute in the <head> using Next.js

While working on a Next.js project, I am trying to include the following HTML content within the <head>: <link href="..." rel="stylesheet" media="print" onload="this.media='all'" /> The code I ...

What is the best way to send a file object to a user for download?

When working within a route: app.get('some-route', async (req, res) => { // ... } I am dealing with a file object called file, which has the following structure: https://i.stack.imgur.com/ByPYR.png My goal is to download this file. Cur ...

Disabling dynamic color updates upon refresh

I am currently using chartjs and I want to generate new random colors each time the page is refreshed. However, I need these colors to remain fixed and not change after a page refresh or reload. Below is the function I am working with: getRandomRgb() { ...

Why isn't the jQuery function being triggered from an Angular callback?

Here is the code snippet that I am currently working with: $http({method: 'GET', url: 'api/participants/areyouhuman'}) .success(function(data, status, headers, config) { console.log(data); $( ...

Manage how child components are displayed in React in a dynamic manner

My React parent component contains child components that are rendered within it. <div id="parent"> {<div style={{ visibility: isComp1 ? "visible" : "hidden" }}><MyComponent1 {...props}/></div>} ...

Converting a JavaScript array to formData

Struggling with sending an array via Ajax to PHP. For more information, visit jsfiddle https://jsfiddle.net/CraigDavison/9spyn7ah/ function autoPopulate() { var cast = "John Wayne, Julia Roberts, Kevin Spacey"; cast = cast.split(', '); ...

Ways to resolve BuildJobExitNonZero issue on Digital Ocean

Hey everyone, this is my first time using Digital Ocean. I'm trying to deploy my app via Launch App, and my code is hosted on GitHub. However, when I try importing the code and building it, I'm encountering the following error that I don't u ...

The CORS middleware seems to be ineffective when used in the context of Node.js

I have set up my REST API on a Raspberry Pi server and connected it to the public using localtunnel. I am trying to access this API from a localhost Node.js application. The Node application is running on Express and includes some static JS files. However, ...

utilizing React.js, learn how to extract the most recent user input and store it within an array

My Input component generates input tags dynamically based on JSON data. I've implemented the onChange method in the input tag, which triggers a function called "handleChange" using contextAPI to record the values in another component. The issue aris ...

AngularJS makes it easy to retrieve data from a server using the $

I am interested in using Bootstrap datatable with AngularJS. Here is the code I have been working on: https://codepen.io/bafu2203/pen/VzBVmy Upon inspection, you will notice that when attempting to populate the table with data from a $http.get call, the t ...