WebXR experience in fullscreen

Hi everyone,
with the following code I tried to switch to fullscreen mode after entering WebXR.

  async startWebXRExperience(canvas) {
    if (!this.webXRSupported) {
      return;
    }
    if (!this._xrHelper) {
      this._xrHelper = await BABYLON.WebXRExperienceHelper.CreateAsync(this.scene);
      canvas.onfullscreenchange = () => {
        if (document.fullscreenElement === canvas) {
          // enter fullscreen
          this.engine.setSize(screen.width, screen.height);
        }
        else {
          // leave fullscreen
          this.exitWebXRExperience();
        }
      }
      this._xrHelper.onStateChangedObservable.add(async (state) => {
          switch (state) {
            case BABYLON.WebXRState.NOT_IN_XR:
              // either our or not yet in XR
              if (document.fullscreenElement === canvas) {
                document.exitFullscreen();
              }
              break;
          }
      });
    }
    this._xrHelper.enterXRAsync('immersive-vr', 'local-floor');
    canvas.requestFullscreen();
  }

  async exitWebXRExperience() {
    if (this._xrHelper) {
      await this._xrHelper.exitXRAsync();
    }
  }

The problem is that the rendering in the canvas is deformed when it is displayed in fullscreen.

Does anyone have an idea how to solve this issue?

Many thanks
gwulf

Hi,

do you mean you want to see the scene on your desktop while in XR? can you reproduce this on the playground so we can test the code ourtselves?