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:
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.