Hi,I have a problem with WebGL in Three js
I have a scene in three js and I import 3dmodels and add to the scene.
(I download them from sketchfab in gltf format ,some of them with animation and some of them not)
My PC hardware has 8 GB RAM,CPU i5-3,SSD 128 (But I tested again with a laptop that has 16 GB RAM but again I faced with this problem)
When I run my Program in Chrome browser after adding 3-6 models with size 30MB,5MB,25MB,7MB,… for example
(2 of them have animation and I add those animations from gltf.animations to gltf.scene.animations in gltfloader by travers,mixer … and add gltf.scene to main scene as a group 3dobject with animations)
Sometimes these oprations fill my RAM about 4GB(just add and show 5 3dmoedls that have animations but I do not play them)
And Sometimes I faced with these errors:
Is it possible for you to demonstrate the issue with a live example? Alternatively, can you share a link to your application? That would make it easier to investigate the errors.
Context loss problems are in general hard to debug since they often appear only on a group of devices. So depending on your computer, the application might run fine.
The few occasions I have encountered a WebGL context loss were caused by resource intensive apps. Simplifying models, reducing the number of displayed models and especially avoiding high texture resolutions can easily mitigate context loss.
Properly authored models will look good and also be compatible with low-end devices.
Rendering models with millions of vertices and 4K textures with no compression techniques push many devices to their limits. This is no three.js or WebGL problem but a problem caused by inexperienced developers.
Before updating the models in a content creation tool like Blender, you might want to try to optimize your glTF assets with gltfpack - npm.
Make sure to use compressed textures and also compress geometry data. Both things can be done with the above tool. Such a compressed asset can then be loaded like demonstrated in the following example: three.js examples
Nevertheless, even with compression techniques you hit hardware limitations at some point.
Keep in mind that PNG and JPEG textures cost a lot more memory than their original file size, because they’re fully decompressed on the GPU. Use only a small number of textures, no larger than 2K–4K resolution.
Ideally this should be done in Blender, with UV layouts that suit the texture resolution. But if you need to reduce texture resolution later, there are options: