WebGL scene does't render because of lost context

Question

I have a 3d model of a road with textures and without.

When I load road without textures everything works fine ~ 60fps. But when I load road with textures there are 2 variants:

1) If 3D model is not big then it loads and works but with very low fps ~ 10-20

2) If 3D model is big it loads without any errors and warnings but after that I get this error:

WebGL: CONTEXT_LOST_WEBGL: loseContext: context lost
THREE.WebGLShader: gl.getShaderInfoLog() null 

This error here:

animate = function() {
    renderer.render(scene, camera); <--- error occurs here
    stats.update();
    controls.update(clock.getDelta());
    return requestAnimationFrame(animate);
};

I've read that this error means: 'browser or the OS decides to reset the GPU to get control back' but how can I solve this problem?

Answer 1

1. The reason

It's exactly happening what you already said.

Your browser is hanging while rendering the WebGL scene and loses its context because the browser has effectively lost control on your GPU.

Either you have a huge memory leak in your application or your machine does not have enough power to run your texturized model on a WebGL scene. Squeezing too much by trying to render a heavy object with a really big texture resolution, can lead to a context loss.

2. Diagnosis

If 3D model is not big then it loads and works but with very low fps ~ 10-20

makes me think your machine actually can't handle 3D on a browser very well.

3. Troubleshooting

The first advice is to decrease the resolution of your scene, you can do this halving by 2 or 3 the setSize of your renderer object.

For performance intensive games, you can also give setSize smaller values, like window.innerWidth/2 and window.innerHeight/2, for half the resolution. This does not mean that the game will only fill half the window, but rather look a bit blurry and scaled up.

This means you need to add this to your renderer:

renderer.setSize( window.innerWidth/2, window.innerHeight/2 );

Also tweaking the far distance rendering of your camera helps to gain some performance too. Generally those are the most used values: new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );, if you bring down the far to 800 or 700 you can squeeze extra FPS from your scene (at the price of rendering distance, of course.)

If your application after these tweaks then start running fine then you're actually facing resource-starving problems, which means your computer is not fit to run WebGL or you have a huge memory leak

You can also test your application on another, better computer and see how it performs and how smooth it runs.

If your computer is cutting edge high-end monster gaming machine then the only thing I can suggest you is to start also looking at the resolution of your texture and scale it a bit down.

I'll leave also this link: WebGL - HandlingContextLost (probably you have already seen this), which provides some troubleshooting and ways to recover a crashed instance of WebGL.

4. Solution (to this specific answer)

After a quick chat with Eugene, the problem at the root of his project was Ram usage, his 3D model wasted a lot of Ram that Chrome was taking up to 1.6GB.
The blue bumps are when his WebGL app is running.

After flagging this to him he came back with his solution:

I’ve solved my problem. I’ve concatenated roads to one file and changed renderer size