[Bug] VR Example on Mobile Device don't work properly

[Sebas20oo]

Bug description

We cloned and deployed the cone VR example (https://kitware.github.io/vtk-js/examples/VR.html#VR) to used it locally to have a base code to start working with VR projects on mobile devices (using Google CardBoard)....

The example works as expected if we work with it directly from the webpage. If we click the "Start VR mode" button, we get the divided screen and we can visualize the cone...

...but when we tried to do the same thing with our local example, it is not working properly, we get a split screen and pretty much empty space, and the back arrow and settings config gear don't seem to work, it seems to be frozen...

This issue is pretty similar to this one (#1462), but there was not reported a proper solution to continue working with mobile devices and it was already closed 4 years ago.

1. Is this issue solved for mobile devices?
2. am I missing a configuration to work with mobile devices?

I have tried the local example with an Oculus Quest 2 connected to the PC and it works fine, but my objective is to deployed this examples on mobile devices :(

Hope you could help me with this situation

Steps to reproduce

Local project branch;
https://github.com/Sebas20oo/dinamico_vtk/blob/PruebaVR/src/index.js

Example cloned locally:
`// For streamlined VR development install the WebXR emulator extension
// https://github.com/MozillaReality/WebXR-emulator-extension

import '@kitware/vtk.js/favicon';

// Load the rendering pieces we want to use (for both WebGL and WebGPU)
import '@kitware/vtk.js/Rendering/Profiles/Geometry';

import vtkActor from '@kitware/vtk.js/Rendering/Core/Actor';
import vtkCalculator from '@kitware/vtk.js/Filters/General/Calculator';
import vtkConeSource from '@kitware/vtk.js/Filters/Sources/ConeSource';
import vtkFullScreenRenderWindow from '@kitware/vtk.js/Rendering/Misc/FullScreenRenderWindow';
import vtkWebXRRenderWindowHelper from '@kitware/vtk.js/Rendering/WebXR/RenderWindowHelper';
import vtkMapper from '@kitware/vtk.js/Rendering/Core/Mapper';
import { AttributeTypes } from '@kitware/vtk.js/Common/DataModel/DataSetAttributes/Constants';
import { FieldDataTypes } from '@kitware/vtk.js/Common/DataModel/DataSet/Constants';
import { XrSessionTypes } from '@kitware/vtk.js/Rendering/WebXR/RenderWindowHelper/Constants';

// Force DataAccessHelper to have access to various data source
import '@kitware/vtk.js/IO/Core/DataAccessHelper/HtmlDataAccessHelper';
import '@kitware/vtk.js/IO/Core/DataAccessHelper/HttpDataAccessHelper';
import '@kitware/vtk.js/IO/Core/DataAccessHelper/JSZipDataAccessHelper';

import vtkResourceLoader from '@kitware/vtk.js/IO/Core/ResourceLoader';

// Custom UI controls, including button to start XR session
import controlPanel from './controller.html';
//console.log(controlPanel); // Verifica si se está cargando correctamente

// Dynamically load WebXR polyfill from CDN for WebVR and Cardboard API backwards compatibility

if (navigator.xr === undefined) {
vtkResourceLoader
.loadScript(
'https://cdn.jsdelivr.net/npm/webxr-polyfill@latest/build/webxr-polyfill.js'
)
.then(() => {
// eslint-disable-next-line no-new, no-undef
new WebXRPolyfill();
});
}

// ----------------------------------------------------------------------------
// Standard rendering code setup
// ----------------------------------------------------------------------------

const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance({
background: [0, 0, 100],
});
const renderer = fullScreenRenderer.getRenderer();
const renderWindow = fullScreenRenderer.getRenderWindow();
const XRHelper = vtkWebXRRenderWindowHelper.newInstance({
renderWindow: fullScreenRenderer.getApiSpecificRenderWindow(),
});

// ----------------------------------------------------------------------------
// Example code
// ----------------------------------------------------------------------------
// create a filter on the fly, sort of cool, this is a random scalars
// filter we create inline, for a simple cone you would not need
// this
// ----------------------------------------------------------------------------

const coneSource = vtkConeSource.newInstance({ height: 100.0, radius: 50 });
const filter = vtkCalculator.newInstance();

filter.setInputConnection(coneSource.getOutputPort());
// filter.setFormulaSimple(FieldDataTypes.CELL, [], 'random', () => Math.random());
filter.setFormula({
getArrays: (inputDataSets) => ({
input: [],
output: [
{
location: FieldDataTypes.CELL,
name: 'Random',
dataType: 'Float32Array',
attribute: AttributeTypes.SCALARS,
},
],
}),
evaluate: (arraysIn, arraysOut) => {
const [scalars] = arraysOut.map((d) => d.getData());
for (let i = 0; i < scalars.length; i++) {
scalars[i] = Math.random();
}
},
});

const mapper = vtkMapper.newInstance();
mapper.setInputConnection(filter.getOutputPort());

const actor = vtkActor.newInstance();
actor.setMapper(mapper);
actor.setPosition(0.0, 0.0, -20.0);

renderer.addActor(actor);
renderer.resetCamera();
renderWindow.render();

// -----------------------------------------------------------
// UI control handling
// -----------------------------------------------------------

fullScreenRenderer.addController(controlPanel);
const representationSelector = document.querySelector('.representations');
const resolutionChange = document.querySelector('.resolution');
const vrbutton = document.querySelector('.vrbutton');

representationSelector.addEventListener('change', (e) => {
const newRepValue = Number(e.target.value);
actor.getProperty().setRepresentation(newRepValue);
renderWindow.render();
});

resolutionChange.addEventListener('input', (e) => {
const resolution = Number(e.target.value);
//console.log("Resultado: " + Number);
coneSource.setResolution(resolution);
renderWindow.render();
});

vrbutton.addEventListener('click', (e) => {
if (vrbutton.textContent === 'Send To VR'){
XRHelper.startXR(XrSessionTypes.HmdVR);
vrbutton.textContent = 'Return From VR';
} else {
XRHelper.stopXR();
vrbutton.textContent = 'Send To VR'
}
console.log("Botón clickeado"); // Asegúrate de que esto se imprima
});

// -----------------------------------------------------------
// Make some variables global so that you can inspect and
// modify objects in your browser's developer console:
// -----------------------------------------------------------

global.source = coneSource;
global.mapper = mapper;
global.actor = actor;
global.renderer = renderer;
global.renderWindow = renderWindow;
`

Detailed Behavior

No response

Expected Behavior

Local example (cloned from master vtk-js repo) should work as the one in the webpage(https://kitware.github.io/vtk-js/examples/VR.html#Live-example) when we go to VR Mode on Mobile Devices (mobile browser)

Environment

• vtk.js version: 32.1.2

• Browsers: Google Chrome, Google Chorme Canary, Google Chrome Beta

• OS: Android (Google Pixel 7)

• vtk.js version: 32.2.0

• Browsers: Google Chrome, Google Chorme Canary, Google Chrome Beta

• OS: Android (Google Pixel 7)