A long running THREE.js application experiences a GPU crash despite having a clean JavaScript Heap profile

Our long-standing THREE.js application has been running 24/7 but is facing crashes after a few days of continuous use. I have conducted stress tests that mimic user interactions, running in a loop until a WebGL_Context_Lost event occurs, indicating a possible GPU process crash.

Despite my thorough examination using the Chrome Dev Tools Heap profiler, no memory leaks were found in the JavaScript heap after multiple tests simulating user interactions.

The screenshots provided show only system objects remaining, with no significant increase leading up to the crashes, suggesting that there might not be a memory leak causing the issue.

I have observed both JavaScript and GPU memory usage increasing in the Chrome task manager, stabilizing over time due to probable garbage collection delays caused by frequent operations.

System Details: Chrome version 65-66, Windows 10, THREE.js r91

Questions:

  1. Can there be a scenario where the JavaScript heap is free from leaks, but the GPU experiences memory leaks?

  2. What tools are available to identify GPU memory leaks?

  3. Is it possible to determine the exact cause of a WebGL_context_lost event, perhaps through Chrome logs?

  4. Has anyone encountered a similar issue before?

  5. Any suggestions or ideas?

Thank you in advance for any assistance provided.

UPDATE:

The simulation was run at 30-minute intervals, capturing heap snapshots along with Chrome task manager screenshots. As far as I know, capturing heap snapshots also triggers garbage collection.

5:00 - Initial Snapshot from Home Screen

https://i.sstatic.net/STPcK.png

5:30

https://i.sstatic.net/sFJYC.png

6:00

https://i.sstatic.net/p1wxe.png

6:30

https://i.sstatic.net/YePFO.png

7ish

https://i.sstatic.net/C8od5.png

8PM

https://i.sstatic.net/1bknO.png

An interesting observation was made when manual garbage collection did not reduce GPU memory consumption until tab switching occurred.

https://i.sstatic.net/Qhaia.png

This raises speculation about how Chrome handles GPU object disposal, potentially causing memory pressure on the machine leading to eventual crashes.

Note: Tests conducted on Intel i5 with Iris Graphics 540 running latest drivers (ver. 23.20.16.4973) and Iris 640 with updated drivers.

A comparison between heap snapshots captured at 7:30 and 5:30 can be viewed here:

https://i.sstatic.net/aM0Wz.png

UPDATE 2 - leaning towards driver issues

Upon page reload, the GPU crashed within 2 minutes with a "Rats, WebGL hit a Snag" error message, indicating a sudden failure rather than a gradual memory leak.

Windows System logs show warnings of graphics driver failures occurring simultaneously with the GPU crashes.

https://i.sstatic.net/AAy76.png

Timestamp of WebGL Context lost error in Chrome: 10:07:52.938PM

Timestamp of Windows System log driver issue (rounded up): 10:07:53PM

1. Can we attribute this issue to a driver problem?

2. Did Chrome initiate the GPU process termination due to the misbehaving driver, or vice versa?

The current driver is updated via Windows Update; I plan to uninstall and reinstall using the latest Intel driver for further testing.

javascriptgoogle-chromethree.jswebgl

Answer №1

Facing a similar challenge: My project based on three.js constantly retrieves data from the server to animate content over an extended period of time.

Despite disposing unnecessary meshes and materials, the GPU memory usage continued to escalate until leading to crashes.

To tackle this issue, I devised a strategy involving utilizing an HTML container page with dual iframe elements stacked one on top of the other. The main application loads into the top iframe, while at regular intervals, it reloads into the second iframe before toggling visibility between them.

By setting the previous iframe.src to "", the GPU memory is effectively cleared, and as the main application operates in a stateless manner, users do not experience any disruptions.

Hopefully, this approach proves helpful for anyone encountering a similar predicament.

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

Merge two arrays by matching their corresponding identifiers

I have 2 separate arrays that I need to merge. The first array looks like this: const Dogs[] = [ { id: '1', name: 'Buddy' }, { id: '2', name: 'Max' }, ] The second one: const dogAges[] = [ { id: '4&ap ...

javascriptreactjstypescript

What is the correct method for exporting an ES6 module function as a library to be utilized in a Node.js application?

Imagine having a node.js application that does not pass through webpack bundling: Node App const Html = require('./build/ssr-bundle.js'); let result = Html.ssrbundle.render(); console.log(result); Here is my ES6/JSX file, which undergoes web ...

javascriptnode.jswebpackes6-modules

Mastering NodeJS Promises: Efficiently Handling Multiple http.get Requests

I have recently started learning about NodeJS and Promise functionality, so please be patient with me if this question seems uninformed. My goal is to first retrieve a database of records and then verify that the links associated with these records return ...

javascriptnode.js

What exactly is NPM and what makes it necessary for me to have?

I have experience creating websites using Notepad in the past, which involved organizing a folder tree and including files like .htm, JavaScript, and CSS. However, I am still trying to grasp the true value of NPM. It seems like it automates processes, but ...

javascriptnode.jstwitter-bootstrapnpm

AJAX request made to a specific local directory, instead of the usual localhost

Currently, I am working on a project to create a database that can be filtered using various options. My approach was to keep it simple by using HTML for sliders and checkboxes, along with JavaScript/jQuery for filtering the results. This setup allows me t ...

javascriptjqueryajax

Collaborative gaming experience with three.js and socket.io

I created a basic scene in three.js that I find really fun to interact with. However, I wanted to enhance it by adding multiplayer functionality through a socket.io server. To achieve this, I prompt the user for their username: var username = prompt("what ...

javascriptnode.jssocket.iothree.jsmultiplayer

Issue with Material UI React JS Select component: Unable to deselect multiple values when more than one item is selected

Implementing a multiselect dropdown in material ui with specific conditions: The dropdown will contain [0 Apples, 1 Oranges, 2 Grapes]. By default, 0 Apples should be selected. None of the options can be unselected. If 0 Apples is selected and the user se ...

javascriptreactjsarraysmaterial-uidropdown

Develop the 3D structure of a building using three.js to establish the foundation area

After sharing my previous post last week on how to programmatically create a plane from dataset in three.js, I am reaching out to the community again to solve an issue regarding defining the surface area occupied by a 3D building on the ground. While the s ...

three.js3d

Material-UI: The Mystery of Missing CSS Properties

Struggling to apply a CSS class to an element from Material-UI: bw:hover { -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */ filter: grayscale(100%); } Tried using makeStyles: import { makeStyles } from '@material-ui/core/styles' ...

javascriptcssreactjsmaterial-ui

Exploring the jQuery Solution for Enhancing Dojo Widget Framework

My experience with Dojo in the past has been great, especially with its widget infrastructure. Being able to easily separate code and HTML content, having a seamless connection with the require system used by Dojo, and the convenient builder that compresse ...

javascriptjquerydojo

Ways to create a group label to modify various textboxes when a click event occurs

Is it possible to change multiple textboxes with corresponding labels after a click event? Issue: The current output only displays the value of the last textbox. $(function () { $('a.edit').on('click', function (e) { e.pre ...

javascriptjqueryhtml

What is the reason why modifying a nested array within an object does not cause the child component to re-render?

Within my React app, there is a page that displays a list of item cards, each being a separate component. On each item card, there is a table generated from the nested array objects of the item. However, when I add an element to the nested array within an ...

javascriptreactjsarraystypescriptdom

Having trouble retrieving information using JSON from openweather.com

Currently, I am facing an issue while attempting to retrieve weather information from the openweather.com API using geo-location (latitude and longitude) data. Despite my efforts, I cannot seem to figure out why the data is not being retrieved successfully ...

javascriptjqueryjsonajax

What is the best way to incorporate distinct keys into the React/Material UI Autocomplete feature?

I am currently working on developing a Material UI Autocomplete component that will showcase search results to the user. Some of the option names may be duplicates, but each will have a unique ID associated with it. I am encountering a warning message th ...

javascriptreactjsmaterial-uijsx

What is the best way to calculate the total of a field with matching Project and Employee names?

My task involves grouping data from an Array of objects by Project Name and Employee Name, whereby existing projects and employees have their hours added together. projects = [ { "project": { "id": 1, "name": "M ...

javascriptreactjsjavascript-objects

Locating the ASP.NET validator's Control with the help of JQUERY or basic Javascript

On my webpage, I have several textboxes with corresponding ASP.NET validators for validation. I know that I can validate all the validators using a JavaScript function: Page_ClientValidate("myvalidators") where "myvalidators" is the group name of my val ...

javascriptjqueryasp.netvalidationserver-side-validation

Ways to verify if an element includes a specific class in JavaScript

When the mouse hovers over each paragraph within the DIVs with the "change" class, the font color should turn red, and revert back to black when the mouse is not on them. Here's my current code: var paragraphs = document.getElementsByTagName('p& ...

javascripthtml

Encountering a challenge while attempting to execute JavaScript unit tests using Intern with a Chrome Driver on a Selenium Docker Image

I'm attempting to execute my javascript unit tests using Intern with a Chrome Driver on a Selenium Docker Image (Please note that these tests are successful when run locally with versions of Intern and Selenium). I have completed the following 5 steps ...

dockerseleniumgoogle-chromeselenium-webdriverselenium-chromedriver

Navigating to an HTML anchor programmatically within a shiny application

Is it possible to programmatically send the window to #anchor_box when results are available at the end of an observeEvent() with a long running time, instead of relying on the user clicking on a link like a("Go to Results", href = '#anchor_box') ...

javascriptrshiny

What is the process of implementing a page change using a GET request in JavaScript using Node.js and Express?

Within this application, users are provided with a table where they can input data. Each row in the table is equipped with an "Edit" button that, when clicked, should redirect them to a new page labeled "/update" where modifications to the specific row can ...

javascriptnode.jsexpressasynchronoushandlebars.js