WebXR mirroring vr view on web page canvas

Questions
1

As it is now, the canvas on the web page freezes after entering VR. Is it possible to mirror the view seen through the VR glasses on the web page canvas using three.js?

The Spectator Mode example on this page does something similar using the webxr api directly:

2

What VR device are you actually using? Depending on your hardware, there might be other options than a spectator mode in order to debug your app.

3

We use mostly the Vive and Vive Pro, and sometimes the Rift and the Varjo. We have used Unity before and were used to seeing the mirror in the Unity window. It is not only for debugging but for holding demos where it is useful for the other people to see what the person with the glasses are seeing.

After reading your post I checked out the Steam VR application and it does have a Display VR View that we can use.

We also did some more digging and found a hack to render to the web page canvas. This is code from the render loop and renderer is the WebGLRenderer:

// In order to show view in canvas while in vr, do an extra render to the canvas
        if (this.renderer.xr.isPresenting) {
            this.renderer.xr.isPresenting = false;

            this.renderer.setFramebuffer(null);
            this.renderer.setRenderTarget(this.renderer.getRenderTarget()); // Hack #15830

            this.renderer.clear();
            this.renderer.render(this.scene, camera);

            this.renderer.xr.isPresenting = true;
        }

It is slightly hacky since setFramebuffer is private.

4

Hey the solution proposed does not seem to work anymore, any new solution?

5

In case anyone ends up here from a Google search, I posted a new workaround here: Webxr Mirror Screen onto canvas - #4 by capnmidnight

1 Like