Scene Clearing Function
window.CANCEL = () => {
console.warn('called > window.CANCEL');
if (cancelInProgress) return;
cancelInProgress = true;
scene.clear();
canvas?.removeEventListener("touchstart", touchStartHandler);
canvas?.removeEventListener("touchend", touchEndHandler);
if (window.RAF) cancelAnimationFrame(window.RAF);
[BasePlane, pseudoPlane].forEach((plane) => {
while (plane.children.length > 0) {
const child = plane.children[0];
plane.remove(child);
}
});
scene.traverse((obj) => {
if (obj instanceof Mesh) {
obj.geometry?.dispose();
if (Array.isArray(obj.material)) {
obj.material.forEach((mat) => {
mat.map?.dispose();
mat.dispose();
});
} else {
obj.material?.map?.dispose();
obj.material?.dispose();
}
}
});
const toRemove = scene.children.filter(obj => obj instanceof Mesh);
toRemove.forEach(obj => scene.remove(obj));
renderer.renderLists.dispose();
setTimeout(() => {
cancelInProgress = false;
}, 1000);
};
Our application requests data from the server via API, then I form objects (Plane), form a circle using shaders, add a user profile picture to it.
When you click on this rounded plane, you go to the user profile.
The application itself is written in flutter web, threejs is imported via flutter web.
There is something like page navigation …
It looks like a slider with pictures, by swipe, only in three.js.
The problem is that on the iPhone the application crashes after a certain time, so much so that Safari can no longer show WEBGL until it is cleared or rebooted.
The problem has been observed since 2021, with WEBGL specifically. They still haven’t solved it.
I looked, it seems that WEBGPU is not supported on the iPhone yet.
We tried different ways, trying to get out of this situation, but no matter how we wrote and optimized, sooner or later it starts to crash.
That is, you swipe, swipe, then the page reloads with, as I understand it, the loss of the GL context at all, since simply reloading does nothing (if you try to reload the page), only clearing or reloading the browser.
Any ideas?
At some point, something like memory filling occurs, and the browser crashes, but this is related specifically to WEBGL. As for memory leaks, everything is fine. Flutter itself still takes up a lot of RAM, but the application can no longer be rewritten, there is no time.
In the sense that we do not observe any particular jumps, namely, in RAM, when using the application. It is difficult for me to say about video memory on the iPhone, since we did not measure it.
We tested in different ways.
We tried to add the scene itself via iframe, but this only delayed the crash. We need the application to work, for example, 20 minutes without failures, and it works for a maximum of 10.
On other OS and devices, everything is fine.
We tried to clear the memory of the iPhone 16 PRO MAX, then the application crashes much later. But we cannot ask our users to clear the memory before using our application.