WebGL Scene Not Displaying Due to Lost Context

Question

I have a three-dimensional road model with and without textures.

When I load a road without textures, everything works fine ~ 60 frames per second. But when I load the road with textures, there are 2 options:

1) If the 3D model is small, it loads and works, but with very low fps ~ 10-20

2) If the 3D model is large, 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 is here:

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

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

Answer 1

This happens exactly as you said.

Your browser gets hung from WebGL and stops it so that your graphics processor (and computer) does not freeze indefinitely, or your computer does not have enough power to run your textured model on WebGL, or you are actually compressing too much while trying to make a heavy object with really high resolution textures, as you said:

If the 3D model is small, it loads and works, but with very low fps ~ 10-20

makes me think that your machine really cannot efficiently handle the 3D browser in the browser. The first tip is to reduce the resolution of your scene, you can double it by 2 or 3 setSize of your rendering object.

For games with intense intensity, you can also provide lower setSize values, such as window.innerWidth / 2 and window.innerHeight / 2, for half the resolution. This does not mean that the game fills only half the window, but looks a bit blurry and scalable.

This means you need to add this to your renderer:

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

In addition, viewing the image at a far distance from your camera also helps to get a certain performance. As a rule, these are the most used values: new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); if you reduce to 800 or 700, you can compress the extra FPS from your scene (of course, at the cost of a rendering distance).

If your application starts working normally after these settings, you are actually facing problems with starving resources, which means that your computer is not suitable for launching WebGL. You can also test your application on another, improved computer and see how it works and how it works, if you do not have access to other machines, I suggest you share the link of your WebGL application so that we can look at it and also show the reverse communication.

If your computer is an ultramodern game machine for monsters, then the only thing I can offer you is to start looking at the resolution of your texture and slightly reduce it, you also need to start looking at your model and see if you can cut it into different models and place them in parts within the scene.

I will also leave this link: WebGL - HandlingContextLost (you may have already seen this), which contains some troubleshooting methods and ways to recover a broken WebGL instance.

Edit: for views looking at this answer.

After a quick conversation with Eugene, the problem at the root of his project was used by Ram, his 3D model spent a lot of money on the fact that Chrome takes up to 1.6 GB.
Blue strokes are when his WebGL application is running.

Having noted this, he returned with his decision:

I solved my problem. Ive merged roads into one file and changed the rendering size