Dealing with WebGL crashes in three.js

Struggling to determine how to handle webgl loss in my application (created with electron js) using three js. We are utilizing these two functions:

// renderer is THREE.WebGLRenderer
renderer.context.canvas.addEventListener("webglcontextlost", contextLostFunction);
renderer.context.canvas.addEventListener("webglcontextrestored", contextRestoredFunction);

When I artificially trigger context loss like this:

var canvas = document.getElementById("playground").childNodes[0].childNodes[0];
var gl = canvas.getContext("webgl");
var WEBGL_lose_context = gl.getExtension('WEBGL_lose_context');
WEBGL_lose_context.loseContext();

The webglcontextrestored event is triggered and everything restores correctly.

However, when webgl is lost for real or forced like this:

renderer.context.getExtension( 'WEBGL_lose_context' ).loseContext();

The webglcontextrestored event never triggers. What could be the issue? How can I detect when the context is truly lost?

Appreciate any insights.

Answer №1

To maintain the context, make sure to utilize the same extension reference that was used to release the context when restoring it using the restoreContext() method of the object:

var canvas = document.getElementById("playground").childNodes[0].childNodes[0];
var gl = canvas.getContext("webgl");
var WEBGL_lose_context = gl.getExtension('WEBGL_lose_context');
WEBGL_lose_context.loseContext();

window.setTimeout(()=> {
    WEBGL_lose_context.restoreContext();
}, 2000);

You can also simulate this process iteratively from the inspector...

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

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

Obtain an indeterminate value from a variable

My situation involves a dynamic variable assigned from a service, requiring a real-time calculator to update another variable using its value. Below is the relevant code snippet: $scope.getSubTotalSCTax = function(){ TableService.checkOut('SubTo ...

The ng-click method on the checkbox input field in AngularJS is not being triggered

I'm trying to trigger a function in a toggle switch using ng-click, but the customerActiveDeactive function isn't being executed. <a title="Active/ Deactivate" > <input type="checkbox" class="js-switch" ng-init="status=True" ng-model ...

How to work with multiple selections in React material-ui Autocomplete

I'm currently using Material-ui Autocomplete in multiple selection mode. My goal is to retrieve all the selected values when the form is submitted. Although I found a solution on how to get individual values through the onChange event handler from thi ...

observing calls made with twilio using javascript

My goal is to track the status of a phone call happening between two people using their phone numbers. Let's say +558512344321 and +558543211234 are currently on a call. As soon as the call begins, I want the browser to display "Call in progress," and ...

When using jQuery to add an item to a List, it disappears immediately after

I am facing an issue with the code I have. Whenever I click on the "Add" button to add an item, it briefly appears in the list but then disappears. I'm having trouble figuring out why this is happening. $(document).ready(function() { $("#submitB ...

Error in parsing the HTML code

However, the issue persists on my website located at The following error message keeps appearing: HTML Parsing Error: Unable to modify the parent container element before ...

What is the best approach to establish multiple global prefixes in a NestJS project?

I am looking to define multiple Global Prefixes for my application such as: admin/products admin/users admin/... api/products api/search api/... shop/products shop/cart shop/... In the main.ts file, I can set a single global prefix using th ...

Having trouble with the preview feature when resizing images

Before trying to implement the JSFiddle was working correctly: http://jsfiddle.net/qa9m7t33/ However, after attempting to implement it, I encountered some issues: http://jsfiddle.net/z1k538sm/ While trying to resize an image, I realized that this example ...

An existing INPUT value can be modified by dynamically adding or subtracting values from SELECT OPTION

I currently have an <input readonly> field that displays the total_price value retrieved from a shopping cart stored in the database table. Moreover, I have included a <select> element with different transport options that can either increase o ...

Fading out, switching HTML, and fading back in

I'm encountering some challenges with a basic jQuery function that is supposed to fade an element out, switch the image inside it, and then fade back in. Here's how my function looks: function flipPage() { $("#leftPage").fadeOut("slow", ...

Code written in JQuery functions correctly when executed within the console, yet encounters issues when located within the script tag or

I'm attempting to build an online drawing tool reminiscent of an Etch-A-Sketch by using a grid of div elements. However, I'm facing an issue where the code responsible for highlighting the boxes when the mouse hovers over them (using the mouseent ...

Troubleshooting IE compatibility for $.trim() jQuery functionality

Having trouble with $.trim() not working in IE but works fine in Firefox. Any ideas why this might be happening? Thanks. $('#GuestEmailAddress').on('blur', function () { var $inputValue = $(this).val(); ...

Using the useState() hook with a component as an argument

I have a unique idea for my app - I want the App component's state to store another component that it will render. This way, any component should be able to update the state and trigger a re-render of the App component. function HomePage() { retur ...

Employ the power of a static force layout to forge an intricate web of connections within the realm of

I have found a great network that works really well. It automatically updates the node position when the size of the window changes. Now, I want to make it fixed. What I mean by this is that I want to compute a certain number of ticks (let's call it ...

Discovering the method to access a getter from a different JavaScript file

In a laravel + vuejs project, I am trying to access my currentUser role in my Acces.js file using store.getters.currentUser but encountering an error: Error in render: "TypeError: Cannot read property 'getters' of undefined I have tried mu ...

Transferring callback functions from JavaScript to Java in Android

As I work on developing an Android app using HTML5/JavaScript, I've encountered some limitations. One challenge I face is calling a function implemented in Java code from within JavaScript, specifically to create a particular type of dialog. While the ...

When an ajax call is made to load more content, the loading gif only appears with the divs that were originally

//ajax to load more $(document).on( 'click', '.loadmorebutton', function() { $(this).parent().find(".loadmore").show(); $.ajax({ type: "post", url: "something.php", data: variable, dataType: "text", ...

What are the best methods for testing REST API and Client-side MVC applications?

When dealing with a RESTful server that only responds with JSON data fetched from a database, and having a client-side application like Backbone, Ember or Angular, where should application testing take place? Is it necessary to have two sets of tests - on ...

Utilizing imported components to set state in React

In my project, I created a functional component named Age and imported it into another functional component called Signup. This was done in order to dynamically display different divs on a single page based on the authentication status of the user. By sett ...

encountering a problem with retrieving the result of a DOM display

private scores = [] private highestScore: number private studentStanding private studentInformation: any[] = [ { "name": "rajiv", "marks": { "Maths": 18, "English": 21, "Science": 45 }, "rollNumber": "KV2017-5A2" }, { "n ...