WebXR DOM Overlay adding

[butis21]

Is your feature request related to a problem? Please describe.
Yes, the feature request is related to the challenges developers face when using the default Unity UI in WebXR applications. The Unity UI often has issues with scaling and proper functionality in WebXR environments, which can hinder the user experience. The Dom Overlay feature, which works well in the WebXR Viewer, addresses these issues effectively. However, implementing this feature using framework.js is unclear, and existing examples (e.g., from ChatGPT) either do not work correctly or break functionality.

Describe the solution you'd like
I would like a clear and functional implementation guide or example for integrating the Dom Overlay feature into a WebXR project using framework.js or another way to work. The solution should resolves the scaling and functionality issues present in the default Unity UI when using WebXR Viewer on iOS Devices.

Describe alternatives you've considered
I was considering a way to change the zoom, but without success.

Additional context
For easiest help and introduce I provide this example code for WebXR DOM Overlay:

let camera, scene, renderer, walls;
let xrSession = null;

init();
animate();

function init() {
  const container = document.getElementById('canvas-container');

  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 20);

  renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.xr.enabled = true;
  container.appendChild(renderer.domElement);

  // AR Button with DOM Overlay
  document.body.appendChild(ARButton.createButton(renderer, {
    requiredFeatures: ['local-floor', 'dom-overlay'],
    domOverlay: { root: document.body }
  }));

  window.addEventListener('resize', onWindowResize, false);
}

function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
}

function animate() {
  renderer.setAnimationLoop(render);
}

function render() {
  renderer.render(scene, camera);
}

// Switch on WebXR with DOM Overlay
async function startXRSession() {
  xrSession = await navigator.xr.requestSession('immersive-ar', {
    requiredFeatures: ['local-floor', 'dom-overlay'],
    domOverlay: { root: document.body }
  });
  xrSession.addEventListener('end', onSessionEnd);
  renderer.xr.setSession(xrSession);
}

function onSessionEnd() {
  xrSession = null;
}

[De-Panther]

Thanks for the suggestion.

The code is not relevant, as it's a ThreeJS code.
In earlier versions of WebXR Export we used the DOM Overlay to catch touch input on mobile AR. Later removed it as figured out a better way to calculate touch position and notify Unity about it.

Seems like the reason you wants to implement it is because of issues with touch input. So maybe it's better to fix those issues instead?

The problem with implementing DOM Overlay for general purposes, is less code/technical, but more a design challenge.
What would be the steps for a developer to activate it? (Tell the WebXR Export that it wants to use DOM Overlay as option or as required)
How can a developer implement the HTML/CSS/JS parts of the DOM? (Is it part of the page in the WebGLTemplate?)
Lots of other questions and issues around this.