Too many active WebGL contexts

[laurens-lamberts]

I'm trying to render our entire client app on the web.
Suprisingly (for me at least), this works really well out of the box!
Pretty much our entire mobile app displays as intended, and react-native-skia is able to do all its drawing on web just fine!

In our app we use lists with Skia images rendered in each list item. Each of those images are drawn on their own Canvas.
Running on iOS or Android, this works fine. All canvasses are drawn as intended.
But when I tried to run on the web, I stumbled upon a limit of WebGL contexts that are allowed to be active simultaneously.
Many Skia canvas drawings didn't show up.

Does anyone have any idea how to face this issue?
Would I need to rasterize canvasses in some way, reduce the amount of canvasses, or is there a way to allow more WebGL contexts?

[wcandillon]

created an issue for it at #956

[laurens-lamberts]

@wcandillon, Thanks for creating an issue for it!

[Sundarcj]

I faced the similar issue,

const {CanvasKit} = global;
CanvasKit.MakeWebGLCanvasSurface = CanvasKit.MakeSWCanvasSurface;

this will create SWSurface instead of WebGL Surface.
I hope the browser has an upper limit for WebGL Context Creation.

[wcandillon]

@Sundarcj The problem here is that this would be a CPU canvas, and it might be slower. Flutter seems to be facing the same issue, I am not sure how to approach this problem yet.

[wcandillon]

you can check out this diff: https://github.com/Shopify/react-native-skia/compare/test-surface-cleanup?expand=1 I tried to copy one to one the code from flutter to try to have a proper cleanup but couldn't manage to get it to work. I am still missing something here 🤔

[laurens-lamberts]

Thanks for looking into this.
Should ctx be deleted when the component unmounts?
I noticed there is a deleteContext function on CanvasKit, to fully remove the context.
https://chromium.googlesource.com/skia/+/450f8565c7f36205cc72e5f7f5e01eb024e8c38a/modules/canvaskit/canvaskit/types/index.d.ts

/**
  * Deletes the associated WebGLContext. Function not available on the CPU version.
  * @param ctx
  */
  deleteContext(ctx: WebGLContextHandle): void;

Or is that too rigorous?

[wcandillon]

I tried this method as well but still couldn't avoid the error