Certain models are crashing my app

Hi there,

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)

Thanks for the answer, I tried with and without the textures and the result is still the same.

Could still be texture related.

Could you open the profiler and check the VRAM usage (screenshot would be handy)

Here’s the VRAM when there’s no crash (and model is disabled):

And here is during the crash (model is enabled):

When I enable the models even the editor crashes, so I need few restarts of the editor in order to disable the models.

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?

Also consider using texture compression as that can greatly reduce VRAM usage of textures: https://developer.playcanvas.com/en/user-manual/assets/textures/texture-compression/

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.

If the model is disabled, the textures aren’t uploaded to VRAM.

If you are still running into issues, add yaustar with write permissions and I can take a look to help pinpoint the issues :slight_smile:

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.

1 Like

I will try to reduce the textures footprint now and let you know if this did help. Thanks for the help so far.

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.

1 Like

Try compression on the skybox though to see what it looks like. The issue may only affect certain types like HDR?

1 Like

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.

1 Like

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?