I have app with modal which contains canvas(Three.js scene) with 6572 geometries into scene.
My app worked on desktop browsers.
But when i’m trying to test app in mobile and when i open modal with canvas my page is stops near 5-10 seconds and reloads with black content.
Checked devices
Can we help, there are any ideas ?
Yep - do not have 6572 geometries at once.
Mobile browsers enforce quite strict limits on memory - so any memory leak or huge amounts of geometries / textures will inevitably lead to just crashing the browser - thus forcing it to reload.
You can check your CPU allocation % using:
performance.memory.totalJSHeapSize / performance.memory.jsHeapSizeLimit * 100.0
(Not sure if there’s any way to check the GPU though.)
@mjurczyk Ok thank you for answer. So it’s mean that no any solution for that, just i must not draw so many geometries?
If geometries same, then can use instances and then will 1 geometries, 1 draw call, not 6572 calls
@Chaser_Code Ok i will try thank you
you can also test the amount of vram available in a given browser with navigator.deviceMemory, it’s an experimental feature which isn’t yet supported by firefox, from reading a bit on this mobile browsers seem to be limited to 4gb wheras desktop browsers are limited to 8gb see this test, there are a lot of resources online to check how a process is allocated to vram memory on execution…
Also if gegometries have same material, can merge geometry into one big geometry and will 1 drawcall not 6572
Take caution with this - merging geometries into a single, giant geometry prevents frustum culling, which can lead to significant performance drops - especially on mobile. Instancing you mentioned earlier is usually a better way of solving draw-calls.
Also for static objects can set mesh.updateMatrix=function(){}; it save some milliseconds
