The synergy of THREEJS and GC in creating dynamic and interactive

In an effort to optimize my threejs scene, I noticed that the CPU usage was high even when the scene was not in use. After exploring various solutions, I tried removing the memory of mesh using the dispose() method to prevent memory leaks.

labelMesh[i].geometry.dispose();
labelMesh[i].material.dispose();

However, upon inspecting the Javascript Profiler, I found that the dispose() method actually increased the CPU usage of the garbage collector by 2 times.

Comparison without using dispose(): https://i.sstatic.net/k7VkI.png

Comparison with dispose(): https://i.sstatic.net/uSQcp.png

Should I continue using this solution or explore other alternatives for optimization?

javascriptperformancethree.jsgarbage-collectioncpu

Answer №1

What should I do with this solution? Is there a better option available?

It is highly recommended to use .dispose() in this scenario. There is an official guide dedicated to this topic which can be found here:

.

Despite this recommendation, there is an issue that prevents three.js from releasing resources completely even after calling .dispose() correctly (refer to https://github.com/mrdoob/three.js/issues/12447). This is because certain objects are still referenced in three.js's internal render lists. While GPU memory is freed by calling .dispose(), CPU memory may still be retained due to these hidden references.

To address this issue, it is recommended to use renderer.renderLists.dispose().

three.js R107

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

What is the most efficient way to clear the input field in Angularjs when the backspace or delete keys are pressed?

Is there a way to reset an input field with AngularJS when the backspace or delete keys are pressed? I've implemented this fantastic directive, and it's been working great, except for when the user uses the backspace or delete key to clear the f ...

javascriptangularjsvalidationfielddirective

What is the best way to divide a single object in an array into multiple separate objects?

In my dataset, each object within the array has a fixedValue property that contains category and total values which are fixed. However, other keys such as "Col 2", "Col 3", etc. can have random values with arbitrary names like "FERFVCEEF erfe". My goal is ...

javascriptarraysjsonforeachkey-value

Ways to determine if prototype methods vary

Is there a technique to verify if functions are distinct despite originating from the same prototype? I'm inquiring because I want to save functions in an array, and when attempting to delete one, it removes all functions due to sharing prototypes. ...

javascriptcomparisonprototype

Tips on obtaining outcome by invoking a route outside of app.js

Within my file containing the request methods, the structure appears as follows: article.js router .route("/") .all((req, res) => { console.log("this should happen for any call to the article route"); }) .get((req, res) = ...

javascriptnode.jsexpressroutes

Instant Access to a Precise Slide

Using a slider named mySlider or SL_Slider, which is powered by the MooTools library. When on the page with the slider, there is a simple script for the href to call the appropriate slide: <a href="javascript:mySlider.numPress(3);">link</a> ...

javascripthtmlmootools

Implementing file uploads using AJAX in CodeIgniter will continue to run, even if the value is null or undefined

I need to trigger another ajax request if the file has not been input yet. However, it is currently still carrying out the form action. Below is my view code: <form method="POST" id="quiz_file" action="<?php echo site_url('home/upload_quiz/&ap ...

javascriptphpjqueryajaxcodeigniter

Using Node.js to retrieve child processes associated with a daemon and terminate them

I am attempting to create a node application that allows me to send the command kill -9 to all child processes of a single daemon. Just to clarify, there is one daemon running on our server. Upon startup, it initiates a process for communicating with clie ...

javascriptnode.jsprocesskill

Error message: npm command not recognized while running commands within an Electron application

While developing an electron app, I utilize shell commands with child_process.exec. One of the commands I use is npm run start, which functions perfectly in a development environment. However, upon building the application for production, all npm commands ...

javascriptnode.jsnpmelectronelectron-packager

In React, learn how to dynamically generate and return a specified number of HTML tags from a function based on the input number

In my React project, I am utilizing an icon library that includes both filled stars (FaStar) and empty stars (FaRegStar). I have written a function that takes a number between 1 and 5 as an argument, and based on this input, the function should return the ...

javascriptreactjs

Is there a way to efficiently navigate a local JSON file using React JS?

What is the best way to extract data from a JSON file and utilize it within my code? I attempted importing the file and logging it in the console, but all I get is Object {}: import jsonData from "./file.json"; console.log(jsonData); This is the content ...

javascriptjsonreactjs

Creating a platform for users to share their thoughts and engage in

A friend and I are working on creating a commenting system for our website. We have written some code to insert values into a mysql database so that they can be read and displayed as comments later on. Unfortunately, we are facing an issue where the data i ...

phpjavascriptajaxformscomments

Can an EJS variable be transferred to an Angular ng-repeat filter?

I am currently working on a profile page where I need to display a user's name in plain text using <%= user.local.name %>. This requires querying the database through Mongoose. My issue now is figuring out how to pass that value to an Angular ng ...

javascriptangularjsnode.jsejs

Is it possible to impose a different style on an element from another culture?

I am currently developing a themes library along with a demo page. The challenge I'm facing is that the demo page needs to showcase styles from the library without using all of the elements. For instance, consider the following style in an external s ...

javascripthtmlcss

Attempting to eliminate any dates that have already occurred

I am faced with an array containing various dates in string format such as "2016-08-12". My goal is to eliminate any dates that have already passed by comparing them to today's date. I am using TypeScript for this task. Here is a snippet of my datoAr ...

javascripttypescript

Having a minor problem in attempting to retrieve a random value

Having trouble generating a random number from a function. Can someone help explain? const MyButton = document.querySelector(".Flipper"); MyButton.addEventListener("click", recordLog); function recordLog (){ MyButton.style.backgr ...

javascript

Unable to locate npm module called stream

For some reason, our tests have stopped running since yesterday. The error message reads: module stream not found Upon investigation, we discovered that 'stream' is available as a core node module: https://nodejs.org/api/stream.html#apicontent ...

javascriptnode.jsnpm

Tips for exporting and importing Blender 3D meshes with animations using JSON format and loading them into Three.js version r90

Does anyone know how to import a mesh with animation from Blender 3D animation to JSON and load it using Three.js version 90? I'm having trouble getting this to work. loader.load( 'models/fox/fox_run.json', function ( geometry, materials ...

jsonthree.jsblender

External JavaScript functions remain hidden from the HTML page

Having issues with JavaScript functions. I created functions in a separate file named index.js, but when I use them in index.html like "onclick = function()", the file doesn't recognize the function. <!doctype html> <html lang="{{ app()-> ...

javascripthtmlfunctionreference

The express response fails to include the HTML attribute value when adding to the href attribute of an

When using my Nodejs script to send an express response, I encounter a problem. Even though I set the href values of anchor tags in the HTML response, they are not visible on the client side. However, I can see them in the innerHTML of the tag. The issue ...

javascriptnode.jsexpress

Guide on incorporating arrays into an array using JavaScript

Is there a way to achieve the specified outcome in JavaScript? I attempted to find a method for it on MDN but was unsuccessful. let a, b let allNumbers = [] for (a = 10; a < 60; a = a + 10) { for (b = 1; b <= 3; b++) { allNumbers.push(a ...

javascript