Emyno Comments - Answer Overflow

Emyno

•Created by Emyno on 1/18/2025 in #questions

WebGL + Canvas randomly going black [Helldive Difficulty]

This is getting really long winded so I'm not sure if anyone will read all of this, but I have 1 more important point. The way the external library seems to handle rendering is that it has the concept of a RenderingEngine. You can have many images per rendering engine and it seems to create a large atlas map of each "viewport" with separate cameras in WebGL land. Somehow this gets projected to the <canvas /> on the DOM. However, the <canvas /> on the DOM does not itself have a WebGL context, I've tried console logging every type of canvas context you can get and the one that's on the DOM only has the regular CanvasRenderingContext2D. So somehow the library makes that connection on it's own. This means I can't listen for the webglcontextlost event because the <canvas /> I have access to never gets one. I could be completely wrong about this but it's just what I'm experiencing so idk. Hopefully that adds some context to what could be going on here for anyone with a lot of experience with this stuff.

4 replies

TTCTheo's Typesafe Cult

•Created by Emyno on 1/18/2025 in #questions

WebGL + Canvas randomly going black [Helldive Difficulty]

I'm not sure if my bandaid solution will end up working, we will have to see next week if that small collection of users are still experiencing the problem. Even if it does fix it, it doesn't sit easy with me that I don't know what could be causing this and not actually fixing it. There is an edge case where if the image they are viewing happens to be an all black image they could get themselves in an infinite loop 😅 . Although it's a very slow infinite loop since it will only remount the component every 30 seconds and it would only happen as long as they have that image open lol. It's highly unlikely that any of our users would have uploaded images that are just black and nothing else, but it's still an edge case that I want to handle. I'm not exactly sure how to handle it though because I'm not sure if the data array for the image (that I can access through the external library) is randomly disappearing or if it's somewhere deeper. The external library uses VTK JS in the background and any of those things would be very hard to get access to because the library abstracts it out so heavily. So my only choice seemed to be looking at the canvas element and going through every pixel in the imageData because that's all I really have access to. This is a pretty complicated scenario so any WebGL experts opinion on this would be greatly appreciated. I really just want to know if my hunch is correct where going idle to the point of your PC going to sleep, or having the tab open but not active for extended periods of time could result in WebGL resources automatically being cleaned up without any warning.

4 replies

TTCTheo's Typesafe Cult