Is there a method to remove a buffer in threejs in order to minimize GPU memory leakage?

I am facing an issue with a large mesh containing over 5 million triangles. I utilized BufferGeometry with attributes such as position, color, normal, and index. However, there comes a point where I need to remove certain indices from the index attribute.

Upon exploration, I realized that there is no direct method to eliminate elements from the existing index buffer. The only solution seems to be creating a new BufferAttribute and replacing it as the index buffer of the geometry. Unfortunately, I have not been able to find a way to delete the previous index buffer that has already been uploaded to the GPU. This continuous accumulation is causing a GPU memory leak, and I am reluctant to dispose of the previous geometry and start anew.

Therefore, my inquiry is - does anyone know of a way to remove the previous index buffer without disposing of the BufferGeometry altogether?

Answer №1

If you need to get rid of a buffer, simply use the following code:

BufferGeometry.dispose()

By executing this, the object will be removed from the GPU.

UPDATE:

Upon reading about the onGeometryDispose method, it became clear that the solution involves removing the attribute by invoking what seems to be a private JavaScript function that is still accessible.

Example of the code:

if ( buffergeometry.index !== null ) {
    deleteAttribute( buffergeometry.index );
}

Find more information about this solution here: https://github.com/mrdoob/three.js/blob/dev/src/renderers/webgl/WebGLGeometries.js#L52-L56

Final Step:

Remember to set the update flags accordingly.

For more details, visit: http://github.com/mrdoob/three.js/wiki/Updates

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

How to automatically reset a form after submission in React using Ant Design?

When using the antd template for form design, I encountered an issue where form input values were not getting cleared after submission. I attempted to use this.props.form.resetFields(), but it resulted in the following error: Unhandled Rejection (TypeErro ...

Issue: (SystemJS) Unable to find solutions for all parameters in $WebSocket: ([object Object], [object Object], ?)

Upon running the code snippet below, an error is thrown: Error: (SystemJS) Can't resolve all parameters for $WebSocket: ([object Object], [object Object], ?). app.component.ts import { Component } from '@angular/core'; import {$WebSocket} ...

A beginner's guide to crafting a knex query with MySQL language

Within MySQL Workbench, I currently have the following code: USE my_db; SELECT transactions.created_at, price FROM transactions JOIN transactions_items ON transactions.id = transactions_items.transaction_id JOIN store_items ...

When using json_decode with $_POST, it may return NULL

Having difficulty with json_decode and a valid JSON being sent via $_POST. Here's the JSON object, stored in the "inventory" variable: [{"item_name":"Screw Driver","item_desc":"asdasd","item_type":"weapon"}, {"item_name":"Brown Shoes","item_desc": ...

The success function of the Ajax request remains untouched by the response

My ajax call isn't triggering the success:function(resp){ ...} Despite receiving a response status of 200 and a non-null Json response. This is my ajax setup: $.ajax({ url: '/url/', type: 'GET', data: { pass_ ...

Bring the element to the top of the page by clicking on the anchor within the element or anywhere within the specified div ID

I am looking to implement a functionality where the page scrolls to the top of the navigation div ID when a link inside the navigation div is clicked, or ideally even when clicking anywhere within the div itself that contains the navigation links. After r ...

Canvas image zoom and crop feature ensures fixed selection area across all platforms

After finding inspiration from a source I cannot name, I developed a plugin that allows for image cropping on both mobile and desktop devices. The key features of my plugin include touch support, dynamic canvas sizing based on image dimensions, and the ab ...

Guide on utilizing exported API endpoint in Node and Express

Seeking a deeper understanding of express and its utilization of various endpoints. Recently came across an example of an endpoint that reads in a json file, demonstrated as follows: const fs = require('fs'); const path = require('path&apos ...

D3: Ensuring Map is Scaled Correctly and Oriented Correctly

I am attempting to integrate a map into a website using D3 and topoJSON that resembles the following: https://i.sstatic.net/1brVx.png However, when I create the map with D3/topoJSON, it shows up small and inverted. https://i.sstatic.net/LgQBd.png Even ...

Issue with returning value from promise object in Next.js

Hello! I am fairly new to JS and React, so I would appreciate your patience as I try to navigate through this. It has been quite a journey so far. In my component, I am fetching JSON data from a URL and attempting to extract a specific value from it to d ...

Omit any items from an array that do not have any child elements

Upon receiving data from the server in the format of a flat tree, I proceed to transfer this data to the JsTree library for tree building. Before sending the data to JsTree, I filter out any empty elements of type "folder" that do not have children. Below ...

How can one determine if an array in javascript contains anything other than null values?

I am dealing with an array that typically contains: [null, null, null, null, null] However, there are instances where the array may change to something like: ["helloworld", null, null, null, null] Instead of using a for loop, I am curious if it is po ...

Misconception about the usage of jQuery's .each() function clarified with an illustrative example

Problem Description (See Fiddle): When clicking on the red boxes, they transform into kittens and display an alert with the current value of i. Clicking on a large fading kitten will reset everything. I am puzzled as to why alert(i) is triggering multipl ...

Error TS2346: The parameters provided do not match the signature for the d3Service/d3-ng2-service TypeScript function

I am working with an SVG file that includes both rectangular elements and text elements. index.html <svg id="timeline" width="300" height="100"> <g transform="translate(10,10)" class="container" width="280" height="96"> <rect x ...

Guide for populating the chosen item in a combobox when the form control option has various parameters

I need help populating the selected saved item into the form control. <select class="form-control"> <option data-parameter-id="685" data-parent-id="1052" data-aggregation-id="null" data-aggregation-parameter="null">ABC</option> & ...

How can I capture the 'ended' event from an HTML5 video tag using Ember in a controller?

I am having an issue with an hbs file that contains an html5 video tag: <video id="externalVideo" controls loop> <source src="../assets/videos/test.mp4" type="video/mp4"> Your browser does not support HTML5 video. </video> I am ...

Navigating through a collection of elements

I am currently working on my Stripe Checkout Session, attempting to pass an array of product data to the backend node.js server and iterate over it. The object of products I have is structured like this: { products: [ { _id: '62129d518468 ...

Steps to finish (refresh) a mongoDB record

Currently, I am dealing with the following scenario: An API request from one service is creating multiple MongoDB documents in a single collection. For example: [ {_id: 1, test1: 2, test: 3}, {_id: 2, test1: 3, test: 4} ] Subsequently, a second service ...

When I expand the accordion next to it, the accordion disappears, and it also vanishes when I close that accordion

After incorporating accordions into my site, I encountered a peculiar issue (as shown in this video): when I open one accordion, the adjacent accordion also opens unexpectedly. Similarly, closing one accordion causes its neighboring accordion to mysterious ...

A guide on sorting an array based on elements from a different array

We are currently in the process of developing an application using Vue and Vuex. Our goal is to display a list of titles for venues that a user is following, based on an array of venue IDs. For instance: venues: [ {venue:1, title: Shoreline} {venue:2, ti ...