Potential risk of memory leakage when utilizing the CanvasRenderer

I've encountered a memory leak problem within my application. After some investigation, I've been able to simplify the issue into a test case found here: http://jsfiddle.net/729sv/

It seems that adding and removing geometry from a scene is causing the memory leak to occur.

If you open the JavaScript console when running the fiddle, and click on the object a few times, you'll notice that the Three.js __objectsRemoved[] array never reaches 0, indicating that the garbage collector isn't properly removing them.

Similarly, if you use Chrome's Profiles->Record Heap Allocation feature, run the app, click a few times, stop the profile, and filter by 'mesh', you'll find that there are still numerous THREE.Mesh objects lingering in memory according to the browser.

Switching the renderer to WebGLRenderer resolves both of these issues.

Could this be a bug in the CanvasRenderer or am I simply not using it correctly?

javascriptthree.js

Answer №1

This bug appears to be related to the CanvasRenderer and has been discussed on Stack Overflow regarding a potential garbage collection issue in ThreeJS. More information can be found here.

When creating a new scene in ThreeJS, make sure to check if the renderer is an instance of THREE.CanvasRenderer. If so, you may need to manually handle certain properties within the scene object.

scene = new THREE.Scene();

if ( renderer instanceof THREE.CanvasRenderer ) {

    scene.__lights = { length: 0, push: function(){}, indexOf: function (){ return -1 }, splice: function(){} }
    scene.__objectsAdded = { length: 0, push: function(){}, indexOf: function (){ return -1 }, splice: function(){} }
    scene.__objectsRemoved = { length: 0, push: function(){}, indexOf: function (){ return -1 }, splice: function(){} }

}

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

"Enhance your gaming experience with Three JS special effects

I'm in the process of creating a multiplayer web game using Three JS. So far, I have successfully implemented the game logic on both client and server sides, mesh imports, animations, skill bars, health bars, and the ability for players to engage in c ...

javascriptthree.jsparticle-systemparticles

Is there a way to submit the value of a textbox that has been generated dynamically using jQuery?

I am currently using the CodeIgniter framework and am attempting to incorporate textboxes in an HTML form. When the user clicks a button, a new textbox should be generated automatically using jQuery. However, when I submit the form, the values of the dynam ...

phpjavascriptjqueryhtmlcodeigniter

Can someone show me how to implement arrow functions within React components?

I am facing an issue while working on a node and react project. Whenever I use an arrow function, it shows an error stating that the function is not defined. Despite trying various tutorials and guides, I am unable to resolve this issue. Below is the snipp ...

javascriptreactjs

Utilizing client-side properties in an onClick event within Next.js framework

class homeNotLoggedIn extends React.Component { componentDidMount() { function logout(){ localStorage.clear() location.reload() } } render() { return ( <div> < ...

javascriptreactjsnext.js

Item 'unreachable' displayed in Firefox console

I am working with several divs that have the class='class_name'. I have also defined var A = document.getElementsByClassName('class_name'); console.log(A[0]); Upon checking in the Chrome console, it displays: <div class="class_n ...

javascripthtmlfirefoxgetelementsbyclassname

Tips for embedding a script into an HTML document

I've been experimenting with tinymce npm and following their guide, but I've hit a roadblock. Including this line of code in the <head> of your HTML page is crucial: <script src="/path/to/tinymce.min.js"></script>. So, I place ...

javascriptnpmtinymce

Guide to naming Vite build JS and CSS bundles in Vue

As I work on building a SPA using Vite+Vue3 and JavaScript, I have encountered an issue when running npm run build. After making changes, the resulting .css and .js files have names that appear to be generated from a hash, which is not ideal. I would like ...

javascriptvue.jsvuejs3vite

Looking for a piece of JavaScript code that can effectively query a MySQL database and show the results when a

I need a solution for a combo box that will display a list of choices. When a user selects an option, I want JavaScript to execute a MySql query based on the selection and return a simple value to be shown on the page next to the combo box. The query will ...

javascriptmysqlajaxcombobox

Patiently anticipating the completion of a jQuery animation

I am currently working on some jQuery code that handles toggling containers and buttons. The specific snippet of code I am focused on is the following: var id = $(this).data('id'); if ($('#container').is(':visible')) { $( ...

javascriptjqueryanimationjquery-animate

Tips for displaying a modal within a modal in React

Currently, I have two components with modals. My goal is to open one modal from a button in the other component but clicking the button only closes the current active modal and doesn't open a new one. //Modal 1 <div className="modal fade" ...

javascriptreactjsexpressbootstrap-4

Creating a dropdown menu in React

Imagine having an options array like the one below: options = [ { name: 'My profile' }, { name: 'Sign out' } ] public selectOptions(showOptions: boolean) { this.setState({ showOptions: !showOptions }) return options.map((opt ...

javascriptreactjs

Latest iOS and Safari updates are now stripping away classes that have been dynamically added through jQuery scripts during scrolling

Ever since the recent iOS Update (8+), Safari seems to be interfering with a jQuery script I rely on for my mobile navigations. The markup is a standard unordered list generated from Contao. What happens now is that when I view my page on iOS 8+, the scri ...

javascriptjqueryhtmlscrollios8

Is the state variable not being properly set by using React's setState within the useCallback() hook?

Within a React FunctionComponent, I have code that follows this pattern: const MyComponent: React.FunctionComponent<ISomeInterface> = ({ someArray, someFunction }) => { const [someStateObjVar, setSomeStateObjVar] = React.useState({}); const [ ...

javascriptreactjstypescriptusecallback

I am facing an issue where adjusting the width of an iframe based on the browser using jquery is not

Having an issue with setting the height and width of a div and iframe based on browser window size using the following code: var newheight = $(document).height(); var newH = parseInt(newheight) - 170; var newHI = parseInt(newheight) - 215; ...

javascriptjquery

What is stopping me from adjusting the brightness on my canvas?

When using canvas to adjust the luminosity of an image, everything works fine if the luminosity is only set once. However, when trying to reset the luminosity back to 0, the default image does not appear as expected. Here is the code that calls the effect ...

javascriptcanvas

Save this page for later by using JavaScript to create a

Does anyone have a solution as to why window.location.href does not save the current webpage URL as a bookmark? Thank you ...

javascript

What are the best practices for handling dynamically generated fields?

I have a web layout with multiple dynamically created links using AJAX functions, and they are functioning correctly. However, I am unsure how to interact with these dynamically generated links. How can I call a JavaScript or jQuery function when I click ...

javascriptjquerydynamic-data

Retrieving the value of an inputtext component in PrimeFaces using jQuery

I have the following code snippet: <h:form id="calcForm"> <h:panelGrid columns="3" styleClass="panelGridNoBorder"> <p:inputText id="value" /> <p:commandButton value="calculate " onclick="calc()" /> </h:panelGrid> ...

javascriptjqueryprimefaces

When I utilize $router.push() to navigate to a different page, the back button will take me back to the previous page

Within my Vue project, there is an HTML page that I am working on. Here is the link to the page: https://i.sstatic.net/cbtqM.png Whenever I click on the "+"" button, it redirects me to this specific page: https://i.sstatic.net/0rmMD.png This page funct ...

javascripthtmlvue.js

Node Js seems to be taking quite a while to output to the console

Hello, this is my first time posting on Stack Overflow so please bear with me if I make any mistakes. I created a button that, when clicked, decrements the quantity by one. After updating the UI, I send the data to the server. However, when I console log t ...

javascriptnode.jsreactjsexpress