Unable to load more than 15 thumbnails per library folder in Chrome/Safari - Too many WebGL contexts

[DarrenF-G]

Hi,

If you have more than 15 or 16 objects in your library, when you scroll down past the 15th or 16th preview it will start flushing out the previews from previously rendered thumbnails as seen below

Get this in the console;

This only happens on chrome and safari, firefox can render them all fine. I can add an argument into the chrome shortcut to allow for more contexts that fixes the problem as seen this post - https://bugs.chromium.org/p/chromium/issues/detail?id=771792 OS: macOS 12.1 + Windows 20H2:19042 Browser: Chrome Version 99.0.4844.84 + Safari Version 15.2 (17612.3.6.1.6)

Van_dam is a great app, thanks for sharing it.

[Floppy]

Thanks! I think this related to the fact that something in the app is hilariously leaky, it kills my Firefox browser tabs quite often. It should be handling the cleanup better so the contexts don't run out, and I've been meaning to take a look for ages. This is useful info, it'll help debug what's going on for sure. Thank you!

[Floppy]

The idea of https://github.com/Floppy/van_dam/blob/44de0fd5f46d74454e58eb33ec749b385c5874d5/app/javascript/src/preview.ts#L136 is that when a preview leaves the viewport, it gets cleaned up neatly. The fact that that's being reported as an error for you in the console means that the organised cleanup isn't working properly.

Some potentially relevant things:

• https://developer.mozilla.org/en-US/docs/Web/API/WEBGL_lose_context
• https://stackoverflow.com/questions/54323838/how-to-fully-clean-up-the-context-and-canvas-in-three-js

It's entirely possible we shouldn't be creating and destroying contexts like this, just using one and swapping it around between previews.

[Floppy]

Looks like the sensible thing to do is use this method to use the same WebGL context to render multiple scenes: https://threejs.org/examples/webgl_multiple_elements.html

[Floppy]

More info here: https://r105.threejsfundamentals.org/threejs/lessons/threejs-multiple-scenes.html

[Floppy]

I really need to get to this soon, but I noticed quite how different the performance is in anything that's not Firefox when I started testing Arc recently, which is Chrome-based. Need to get this done.

[Floppy]

It took me a long time to get to it, but I've finally managed to address this, I hope! Bit more testing to do, but this will be in the next release, and should give significantly better performance.