Webxr Mirror Screen onto canvas

Questions
4

Hi Lucy,

There is a work around, and it’s not very difficult.

You’ll want to create a separate camera for your spectator, so you don’t have the multiple views renderer. In your animation frame callback, after you render the scene normally, you’ll want to conditionally render again.

// render as normal
renderer.render(scene, camera);

// ... then conditionally render the spectator view
if (renderer.xr.isPresenting
    // we don't have a good check for whether or not mirroring is possible
    && isDesktop()
    // Firefox is still on the old, prestandardized WebVR API, so it can't do this
    && !isFirefox()) {

    // Copy the XR Camera's position and rotation, but use your
    // main camera's projection matrix
    const xrCam = renderer.xr.getCamera(camera);
    spectator.projectionMatrix.copy(camera);
    spectator.position.copy(xrCam.position);
    spectator.quaternion.copy(xrCam.quaternion);

    // we'll restore this later
    const currentRenderTarget = renderer.getRenderTarget();

    // turn off the WebXR rendering
    renderer.xr.isPresenting = false;

    // render to the canvas on our main display
    renderer.setRenderTarget(null);
    renderer.render(scene, spectator);

    // reset back to enable WebXR
    renderer.setRenderTarget(currentRenderTarget);
    renderer.xr.isPresenting = true;
}
2 Likes