I am really new to the 3D development and WebGL in general. I started pretty naively just throwing models into my scene and everything was good until some new models started to crash my app. It has nothing to deal with the number of polygons in my scene, I installed some debugging tools just to prove that this is not the case. The model that is problematic has less than 1k triangles. When I switch the graphic processor from the integrated one to my GPU the problem is gone HOWEVER this is not a solution since I cannot ask every user of the app to do the same. The file formats for models that I’m using are only FBX. I cannot share the model as it’s bought from a store and thus is illegal to do so but here’s a link to its description - Computer Monitor | 3D model . Does anyone know what could be in the model that makes my browser’s WebGL unhappy?
There’s 5 x 4K textures so that could be taking up all the VRAM. As a test, can you try deleting all the textures and see if it still crashes.
If it doesn’t then you would either need to use Basis texture compression to reduce the amount of VRAM used by the textures and/or resize the textures to something much smaller. (1K or 2K)
Yeah, that’s really high and probably exceeded integrated graphics VRAM. With the textures that are being used, are any really large that can be made smaller? e.g 4K down to 1K or lower?
I will reduce the textures for sure but I doubt this is the problem. As I said the app runs well when the model is disabled but when I enable the model the whole thing goes south.
I recommend checking your .glb (converted from your .fbx) model for errors. There are a lot of tools to validate your model. I am usually using https://sandbox.babylonjs.com/
BTW, more than 1Gb textures total? I am not sure about the newest integrated GPU, but if we are talking about an average PC with an integrated GPU, then I don’t think it is possible to run such a scene.
I disabled everything and started re-enabling stuff. The first thing that I notice is that my skybox that is 4MB in total (4k res) when enabled takes around 600MB VRAM in Textures. How come?
The 4MB filesize you report is the download size of your files. The images have to be decoded to plain bitmap color maps when uploaded to the GPU and for six 4096x4096 image files it’s to be expected they are that huge.
Normally you should be using texture compression for your texture assets, which can be easily enabled in editor.
But for cubemaps from what I know there is still an outstanding issue in the engine that won’t properly render compressed texture files. I would suggest at first reducing the resolution of your cubemap images.
Thank you guys VERY VERY much. After I applied the Basis compression on every texture my VRAM usage went down to 100MB and the app is no longer crashing.
Good to hear! I also recommend to look at texture dimension sizes. Do 4K textures need to be actually 4K given the size of the model on screen for example?