WebXR screen mirroring

Help & Support
19

Here is my final script which will mirror the left eye to the html canvas:

var ScreenMirroring = pc.createScript('screenMirroring');

ScreenMirroring.prototype.initialize = function () {
    this.app.on('postrender', this.postRender, this);

    this.app.xr.on('start', function () {
        this.isActive = true;
    }, this);
    this.app.xr.on('end', function () {
        this.isActive = false;
    }, this);

    this.isActive = false;
};

ScreenMirroring.prototype.postRender = function () {
    if (this.isActive) {
        let gd = this.app.graphicsDevice;
        let webglLayer = this.app.xr.session.renderState.baseLayer;
        let cs = getComputedStyle(gd.canvas);
        let canvasWidth = parseInt(cs.width);
        let canvasHeight = parseInt(cs.height);
        let aspect = canvasWidth / canvasHeight;
        let croppedHeight = parseInt(gd.width / 2 / aspect);
        let heightOffset = (gd.height - croppedHeight) / 2;

        gd.gl.bindFramebuffer(gd.gl.READ_FRAMEBUFFER, webglLayer.framebuffer);
        gd.gl.bindFramebuffer(gd.gl.DRAW_FRAMEBUFFER, null);
        gd.gl.blitFramebuffer(0, heightOffset, gd.width / 2, gd.height - heightOffset, 0, 0, gd.width, gd.height, gd.gl.COLOR_BUFFER_BIT, gd.gl.NEAREST);
        gd.gl.bindFramebuffer(gd.gl.FRAMEBUFFER, webglLayer.framebuffer);
    }
};

Important: Anti aliasing needs to be disabled!

1 Like