`Inefficacy of Memory Deallocation for Dynamically Added Mesh`

I am working with a Mesh instance that utilizes a TubeGeometry for its path. Whenever I make changes to the underlying curve that the TubeGeometry instance is based on, I remove the mesh from the scene and create a new one.

Although the scene updates properly, the memory usage is skyrocketing, indicating that I am not deallocating the removed mesh correctly after it is removed from the scene.

Below is the code snippet I am using for deallocation:

$.each(parent.children, function (idx, obj) {
  parent.remove(obj);
  renderer.deallocateObject(obj);
  obj.deallocate();
});

Here, parent represents an Object3D where I place the Mesh, and renderer is an instance of WebGLRenderer.

Could someone point out where I am going wrong and suggest the correct approach to handle this?

I have included a Plunk with my current example. The relevant code can be found in the scene.js file, specifically lines 76-86. Note that the example is using r53.

Answer №1

It is important to properly deallocate the used geometry in your code.

When iterating through each child of the parent, don't forget to remove the object and deallocate its geometry and other properties using the renderer. Here is an example of how it can be done:
$.each(parent.children, function (idx, obj) {
  parent.remove(obj);
  renderer.deallocateGeometry(obj.geometry);
  renderer.deallocateObject(obj);
  obj.geometry.deallocate();
  obj.deallocate();
});

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

Unleashing the Power of Lodash Debounce in Vue

Currently, I have integrated debounce from lodash into my main.js file. import lodash from 'lodash' Vue.prototype._ = lodash I've been utilizing it like this._.find(...), and everything has been functioning smoothly. However, when attemptin ...

The primary view seamlessly integrates with the page following the invocation of the partial view

Whenever the button is clicked, a different partial view is returned based on the selected value from the drop-down list. Controller: [HttpPost] public ActionResult Foo(SomeViewModel VM) { var model = VM; if (Request.IsAjaxRequest()) { ...

Encountering Unmet Dependency Issue When Running 'npm install' on Laravel in Windows 8

Currently, I am in the process of working on a Laravel project and looking to utilize Elixir to handle my front-end tasks. After running 'npm install', I encountered a warning stating "npm WARN unmet dependency". What steps should I take in order ...

Struggling to forward POST Request using Express and EJS

I'm currently developing an application using Node.js, Express, and EJS. The goal is to have the app redirect users to a different page (for example, from localhost:3000/ to localhost:3000/about) upon clicking a button. Despite successfully receiving ...

What steps are involved in forming a JavaScript promise that resolves into a thenable object?

When using the faye browser client with promises, I encountered an issue with a function that creates a faye client after performing an asynchronous operation: function fayeClient() { return doSomethingAsychronous().then(function() { var faye_client ...

Having trouble getting the npm package with @emotion/react and vite to function properly

Encountering an issue with the npm package dependencies after publishing, specifically with @emotion/react. This problem arose while using vite for packaging. Upon installing the package in another project, the css property appears as css="[object Ob ...

"Exciting Changes in Color According to the Active State of vue-route-link

I am trying to find a way to customize the CSS based on whether a link is exact or active. Essentially, when a user clicks on a menu item, I want the underline to change depending on whether the link is an active router-link. Although I was able to accompl ...

Using AngularJS to Apply a Class with ng-repeat

Using ng-repeat in my markup, I am trying to add text to each li element and also include an additional class (besides the 'fa' class). This is what I have done so far: <ul class='social-icons' ng-repeat="social in myCtrl.socialArr" ...

What is the best way to delete the onclick event of an anchor element?

Struggling to remove the onclick attribute using jQuery? Here's my code: function getBusinesses(page){ if(page==0){ alert("you are already on First Page"); $("#previous a").removeAttr("onclick ...

Observing the innerHTML of a Vue component

Currently, I am utilizing an npm package called vue3-markdown-it to display markdown within some of my content. When the component renders, I need to access its innerHTML and make customized modifications before displaying it in my div. However, there is ...

Download a JSON file from an angularjs client device

I'm in the process of adding offline functionality to a Cordova app I'm developing. I have a PHP file that retrieves a list of images as JSON, which I then save on the client device using the FILESYSTEM API. However, when I try to display the ima ...

What is the best way to extract menu and submenu information from an array?

I'm in the process of building a webpage with the help of smart admin and I'm facing an issue with displaying left menu data properly. The data is being retrieved from an array and I need to arrange the menus and submenus based on the parent ID o ...

Scraping a JavaScript page using Python without requiring a browser installation

Currently, I am facing a challenge in scraping an HTML element from a webpage. The content within this element is dynamically generated by Javascript, making it impossible to retrieve using a simple requests.GET: response = requests.get(url). While explor ...

Execute two operations using jQuery and PHP

I recently created a form for users to fill out, with the data being sent to my email. However, I also wanted the email information to be posted to my MailChimp account using their API. Unfortunately, this feature is currently not functioning correctly. B ...

Unable to extract query parameters from URL using Express JS as req.query returns an empty object

I came across discussions about this issue here and here, but unfortunately, the solutions provided didn't work for me. I'm attempting to extract parameters from the URL using req.query. In my server.js file, I've implemented the following: ...

The significance of package-lock.json: Understanding demands vs dependencies

Within the dependency object of package-lock.json, there exist both requires and dependencies fields. For example: "requires": { "@angular-devkit/core": "0.8.5", "rxjs": "6.2.2", "tree-kill": "1.2.0", "webpack-sources": "1.3.0" }, "d ...

Exploring the intersecting viewports in three.js

I'm attempting to create a camera (GUI camera) that renders above the scene camera. My idea was to make the GUI camera have a transparent background, allowing for visibility through it. However, it's not working as expected. Here is how I define ...

Uploading videos to a single YouTube channel using the YouTube Data API

I have been tasked with creating a node js app for a select group of individuals who need to upload videos. However, our budget is quite limited and we are unable to afford cloud storage services. I am curious if it would be feasible to create a key syste ...

Incorporate socket.io into multiple modules by requiring the same instance throughout

I am feeling a bit lost when it comes to handling modules in Node.js. Here's my situation: I have created a server in one large file, utilizing Socket.io for real-time communication. Now, as my index.js has grown quite big, I want to break down the ...

Encountering excessive re-renders while using MUI and styled components

Hey there! I recently worked on a project where I used MUI (Material-UI) and styled-components to render a webpage. To ensure responsiveness, I made use of the useTheme and useMediaQuery hooks in my web application. My goal was to adjust the font size for ...