I am loading a 3D model using three.js. After some random amount of time, This error appears in the console and 3D model disappears. I tried handling it using restore context but doesn’t resolve anything.
renderer.domElement.addEventListener('webglcontextlost', function(e) {
setTimeout(renderer.forceContextRestore, 100);
});
Also, The 3D model appears to be there but I cannot see it. But all the clicks on model works fine even when it’s not visible.
Your event listener is wrong. First, you should listen to the webglcontextrestored event. Second, you should not force a context restore in the event listener. It’s the responsibility of your app to ensure that the correct state for rendering is restored in this handler like mentioned in the following github issue:
But when I use
renderer.forceContextLoss();
This event fires up alright. Also, I know three.js should do this by default, But I guess it’s not happening in this case as my 3D model seems to disappear.
Simulating a context loss via WebGLRenderer.forceContextLoss() is just for testing purposes.
As stated in the github issue, three.js can’t restore all application specific logic.
As I mentioned earlier, my 3D model clicks works fine but model is not visible. Why do you think that is? Is it so that the context is restored but there is something like lighting which is not there?
Can you share a link to your application? Without reproducing the problem it’s hard to tell what’s going wrong.
The application runs on Intranet. However, I am sharing the console output. @mrdoob
Sry, but the console output is not helpful in this case.
I understand that but it’s not possible for me to share URL. But let’s say if the model disappears and there is a message as shown in console output regarding “webgl context lost” but all the raycaster clicks are working fine and I cannot see the model, Can you make a guess that what could it be? May be in which direction I should look to fix this issue?
You should start commenting-out parts of code bit by bit until your error no longer occurs. Ask yourself common debugging questions: “Does it work with a simple cube?”, “Does it happen after a specific event?”, “Does it happen in all brorwsers, or just Chrome?”.
Really hard to tell without a minimal example. You could go to https://jsfiddle.net/ and re-create the issue with the minimal amount of code necessary so maybe others can help you look into it.
Actually, everything works fine. There is a 3D model loaded. But model goes away randomly over time in Chrome browser and that too on specific machines. I have compared the configuration of those machines with the machines where the error doesn’t come at all. The only difference is the graphics card memory. I cannot reproduce this error at will as this happens randomly let’s say in 20-25 mins
If it’s the GPU memory, try loading smaller textures and a simpler 3D model. But like Mugen87 and I have said, it’s impossible to know without a minimal example. JSFiddle is a great way to show your bugs to others.
Calling renderer.forceContextRestore() did not make any display come back in my case, but I noticed that resizing the window somehow fixed it, it turns out resizing the canvas element itself “wakes things up” 
(at least on Chrome, Ubuntu).
Here’s what I do now after webglcontextrestored is triggered :
canvas.width -= 1;
canvas.width += 1;
Do I understand this thread correctly, you actually want/expect the webgl context to be lost? Why?
I have this problem in a long-running electron app. If the user leaves the app in the background (not using it) for an hour or so the context is always lost. I’m not really sure how to force restore the context (except perhaps @wmcmurray’s approach).
Hmm… I’ve never needed to use this, but maybe have you tried renderer.resetGLState()?
Alternatively, you could check if the context has been lost. If true, display a button to refresh the page to re-start everything.
When i get context Lost its often because i dont have enough memory available.
Monitor what happens with your available memory in the Task manager → Performance when you start the app/game.
Maybe you need to specify minimum hardware req or you need to make the objects smaller in size. Or maybe you have a memory leak that can be fixed/optimized.