Will the new HTML-in-Canvas API allow layer/CSS3D content to render inside WebGL (incl. VR mode)?

  • Hi Klaus,

    First, thanks as always for krpano.

    I have a question about a possible future direction. As I understand it, the krpano HTML5 viewer renders the panorama using
    WebGL (a <canvas> element), and VR mode is also WebGL-based. Because of this, layer / CSS3D content that is built from
    real HTML elements lives outside the WebGL canvas — so these HTML-based layers are not visible inside VR mode.

    Recently the Chrome team announced the HTML-in-Canvas API (currently an Origin Trial in Chromium 147+, behind
    chrome://flags/#canvas-draw-element). It adds, among other things, a texElementImage2D() method that uploads a
    fully-styled, interactive and accessible HTML element's rendering directly into a WebGL texture, plus a paint event for
    updates. The official use cases even mention "immersive WebXR experiences placing fully interactable web UI into 3D
    scenes."

    Spec/info:
    - https://html-in-canvas.dev/
    - https://developer.chrome.com/blog/html-in-canvas-origin-trial
    - https://github.com/WICG/html-in-canvas/

    My questions:
    1. Could this API eventually let krpano render layer / CSS3D / HTML-based content inside the WebGL pipeline, so that it
    appears in VR mode without a separate HTML overlay path?
    2. Do you see this as a realistic way to unify the HTML-layer and WebGL-rendered worlds in krpano, or are there practical
    blockers (performance, per-frame texture upload cost, interaction/hit-testing in stereo VR, browser support)?
    3. Is this something on your radar for a future krpano version?

    Thanks a lot for your thoughts!

    • New
    • Official Post

    Hi,

    I have also seen the news about the new HTML-in-Canvas API and it does indeed look very interesting!

    It uses an interesting approach by moving an invisible dom element below the actual mouse cursor to trigger interactivity, but I'm not sure yet, how this works with WebXR rendering where no cursor is...?

    Texture-update performance will be also very interesting. Hopefully, the HTML/canvas rendering is also done on the GPU, then it could be just a texture ref and very fast. If not, large-textures updates might be still problematic...

    I will have a look of course and do real tests in future, then I can say more about it. But generally it could be very usable, html-to-canvas is along awaited feature.

    Best regards,
    Klaus

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!