Forum Discussion
LTST2025.00
7 months agoHonored Guest
Alternative to the DOM Overlays Module for displaying DOM elements in an immsersive-ar session
Hello,
I'm working on developing a WebXR application and want to display DOM Elements during the immersive-ar session. I understand Meta Quest 3 currently does not support the DOM Overlays Module.
Does anyone know an alternative approach to achieve what I want to do?
Thanks in advance!
2 Replies
Replies have been turned off for this discussion
- thehurzExplorer
What is the nature of the DOM elements you want to display? Over the last couple of years, I have built my own framework to create interactive 2D elements inside a VR space. The programming model is similar to React. However it's not very mature yet. This here was built with the framework: https://youtu.be/J6bDe54Koe0
Again, it can't do everything you can do with HTML, but all the basic stuff is there.
- jameswood32Protege
Hi!
If you’re looking for alternatives to the DOM Overlays Module to display DOM elements in an immersive AR session, here are a few approaches you can consider:
WebXR Layers API:
The WebXR Layers API is an emerging standard that allows you to composite 2D elements, including DOM or canvases, directly into the XR scene. It provides more flexibility and better performance compared to traditional DOM overlays, but browser support is still evolving.
Rendering UI as Textures on 3D Objects:
Instead of using DOM overlays, you can render your UI as a texture on a 3D plane or mesh inside your AR scene. For example, render your HTML or UI content to a canvas, then map that canvas as a texture onto a virtual panel positioned in the AR space. This approach works well in frameworks like three.js or Babylon.js.
Use XR UI Libraries:
Consider using libraries designed for XR UI elements, like React-360/ui, XR UI components for A-Frame, or ViroReact. These provide components that are meant to work natively inside immersive sessions without relying on DOM overlays.
Custom WebXR Input and UI:
Build custom UI elements within the 3D environment using primitives (meshes, sprites, text geometries) and handle interactions through WebXR input events. This approach gives you full control and is future-proof.
Hybrid Approach:
Use standard DOM overlays for non-immersive views and switch to textured UI panels or WebXR layers for immersive AR sessions.Note: The DOM Overlays Module has limited browser support, mostly in Chromium-based browsers on certain platforms. If cross-browser compatibility is critical, exploring texture-based UI or WebXR layers might be a better long-term solution.
If you share your specific use case or platform (e.g., WebXR in Chrome, Oculus Browser, etc.), I can suggest more targeted options or sample code!
Quick Links
- Horizon Developer Support
- Quest User Forums
- Troubleshooting Forum for problems with a game or app
- Quest Support for problems with your device
Other Meta Support
Related Content
- 10 months ago