Single WebGL Context for all elements about model-viewer HOT 6 CLOSED

@jsantell @mrdoob could you take a stab at describing the approaches you each mentioned to using a shared context?

from model-viewer.

There is a limit of how many WebGL contexts a single document can have. I think it's 12.

One WebGLRenderingContext can be used to render all scenes by using Canvas2DRenderingContext's drawImage (three.js example, webxr-polyfill does the same thing to fake having two canvases). Might be a bit weird if elements are different sizes, may have to have the WebGL context at fullscreen size and change the viewport for every element. The WebGL context could be from an OffscreenCanvas on the main thread. Doesn't matter in this case.

I have a PR out for the webxr-polyfill that improves perf that handles the canvas copying with ImageBitmapRenderingContexts instead of Canvas2DRenderingContexts, using an async createImageBitmap(). In this case, each model element would be have an image bitmap and async create bitmaps from the WebGL context, which should be cheaper than drawImage. Bonus points, because then an OffscreenCanvas in a worker could be implemented resulting in the best perf option that won't block the main thread unless the GPU is completely clogged -- more info on this solution in the PR. OffscreenCanvas is still Chrome only, I think in 69.

An orthogonal solution could be using an Intersection Observer and lazily draw only models in view, but this probably not necessary off the bat.

from model-viewer.

@jsantell I like the fullscreen-sized context idea. Do you think that could obviate the need for post-processing antialiasing?

from model-viewer.

@cdata not using post processing, we can use the regular WebGL context attribute antialias which works, but if we do use PP, then we'll use render targets which do not work with antialias, which means if we use any sort of PP, we'll need to add SSAA in the chain

from model-viewer.

Updated this issue to directly address the single webgl context solution. Opening issues for other performance improvements.

FWIW 16 is the max WebGL contexts I could create without things breaking

from model-viewer.

FWIW 16 is the max WebGL contexts I could create without things breaking

I think it's 8 in mobile.

Try loading https://mrdoob.github.io/rome-gltf/ on mobile.

from model-viewer.