WebGL context sharing across iframes

[kbs1]

I am developing a service that allows users to embed a 3D model on their site. Generated embed code uses iframe, inside this iframe model-viewer is initialised normally and everything works. Iframe has sufficient attributes to allow WebXR, fullscreen and similar.

One area where this approach falls short is when the user inserts multiple embed snippets (iframes) on one page. In this scenario, model-viewer ^3.0 is not able to share WebGL context, and after some number of iframes are inserted, WebGL contexts start becoming lost. Maximum number of simultaneous WebGL contexts seems to be browser and device specific.

When model viewer is used without iframes, it does successfully share it's WebGL context, and many models can be displayed simultaneously without issues.

I've tried looking at the code and at Renderer.ts, but I don't see any obvious way model-viewer can be made "aware" of it's multiple instances accross different iframes. According to some information I have found, sharing WebGL context accross iframes should be possible.

Is there any way to make WebGL context shared when using model-viewer in iframes?

[elalish]

I'm not aware of that being possible - I sort of thought the purpose of iframes partly was to sandbox code separately. Additionally, I think each iframe has to load the MV library separately, which is also not ideal. Is there any way to avoid the iframes?

[kbs1]

Thank you very much for your response. Avoiding iframes could be possible - but then our javascript code could come into conflict with javascript code on site that is embedding the model - for example, we use Vue3, and it might come into conflict with existing code on the remote site. There could also be problems with CSS (even when using CSS reset on our elements), and there is also a possibility that the remote site is already using model viewer, has it loaded, but a version that we don't support, so we wouldn't be able to load our own.

That's why we chose iframes as the most straight-forward solution. Could usage of <embed> or <object> instead of <iframe> somehow help? Or is the only way rewriting our embed system from scratch, without using iframes, and dealing with problems that pop-up as we go?

Would it, for example, be possible to create the 3D Canvas for Three.js renderer in parent document (window.parent), when passing a special flag to model-viewer? So that model viewer or Three.js would create some elements in the parent window, instead of using the current frame (so that the renderer could be shared)?

[elalish]

I honestly don't know. I'll be interested to see the solution you come up with though! I think trying to dig into MV's underlying three.js renderer will be a very difficult path - try the other options.