🔶PlayCanvas

PlayCanvas is a WebGL Engine with a built in editor UI, allowing you to build interactive 3D scenes with an intuitive interface and high quality graphics.

We recommend Chrome, or another Chromium based browser for best performance.

Using PlayCanvas

If you're totally new to PlayCanvas, you'll need to setup a new project. You can do this by going to PlayCanvas.com and creating an account. Once you've logged in you should see a getting started screen like this one:

The PlayCanvas Editor, with the starting scene.

Adding Looking Glass WebXR to your scene.

In order to add Looking Glass WebXR Support to the PlayCanvas editor you'll need to follow the steps below:

Adding the Looking Glass WebXR Scripts.

Creating a new Script

In the PlayCanvas Editor, navigate to the scripts directory, then right click and choose New Asset -> Script

Adding Looking Glass WebXR to PlayCanvas

In order to properly load the Looking Glass WebXR Library with PlayCanvas we need to change the order in which the script executes.

Select the script asset, and then in the right panel, choose Before Engine in the Loading Type drop down.

You must choose the Before Engine option in order for the script to load properly.

Double click the script asset you've created, and paste the following code into the editor once it opens up. Syntax is important here so we highly recommend copying directly from this code block.

(function () {
    window.lookingGlassSdkReady = false;

    console.log('this script is initializing');
    let script = document.createElement('script');
    script.type = "module";
    script.innerHTML = "import { LookingGlassWebXRPolyfill, LookingGlassConfig } from 'https://unpkg.com/@lookingglass/webxr@0.4.0-alpha.3/dist/@lookingglass/bundle/webxr.js';  new LookingGlassWebXRPolyfill({tileHeight: 512,numViews: 45,targetY: 0,targetZ: 0,targetDiam: 3,fovy: 14 * (Math.PI / 180),inlineView: 2}); console.log(navigator.xr, 'should be polyfilled'); const app = window.pc ? pc.Application.getApplication() : null; if (app) { app.fire('lookingGlassSdkReady'); } window.lookingGlassSdkReady = true;";

    document.head.appendChild(script);
})();

Make sure to save your script before returning to the editor.

Setting up WebXR

After you've added the script we now need to initialize the WebXR Session, you can do this in your main script or another script, the location doesn't matter as long as it is in a different location than the initialization code above, and the script is set to load as an Asset

In this case, we've named the script main.jshowever, you can use whatever name you wish.

var Main = pc.createScript('main');

Main.attributes.add('cameraEntity', {
    type: 'entity',
    description: 'Entity for the camera to focus on. If blank, then the camera will use the whole scene'
});

Main.prototype.initialize = function () {
    const onLookingGlassSdkReady = () => {
        this.app.xr._deviceAvailabilityCheck();
    };

    if (window.lookingGlassSdkReady) {
        onLookingGlassSdkReady();
    } else {
        this.app.once('lookingGlassSdkReady', onLookingGlassSdkReady);
    }

    var vrButton = document.createElement('button');
    function stylizeElement(element) {

        element.style.position = 'absolute';
        element.style.bottom = '20px';
        element.style.padding = '12px 6px';
        element.style.border = '1px solid #fff';
        element.style.borderRadius = '4px';
        element.style.background = 'rgba(0,0,0,0.1)';
        element.style.color = '#fff';
        element.style.font = 'normal 13px sans-serif';
        element.style.textAlign = 'center';
        element.style.opacity = '0.5';
        element.style.outline = 'none';
        element.style.zIndex = '999';
        element.textContent = "Looking Glass";

    }
    vrButton.id = "VRButton"; // the webxr.mjs will try finding this id for a limit of time. but without webxr.mjs modify the button, the code above seems good enough to trigger the Looking glass feature
    document.body.appendChild(vrButton);

    stylizeElement(vrButton);

    vrButton.addEventListener("click", (ev) => {
        if (this.app.xr.active) {
            this.cameraEntity.camera.endXr();
        } else {
            let canvas = this.app.graphicsDevice.canvas;
            const gl = canvas.getContext('webgl2');
            gl.makeXRCompatible();
            this.cameraEntity.camera.startXr(pc.XRTYPE_VR, pc.XRSPACE_LOCAL, {
                callback: function (err) {
                    if (err) {
                        console.log(err);
                    }
                }
            });    
        }
    });
};

After creating the script, you need to reference it in your scene. In this case we're going to add it to the root/scene component. This is the entity that's the at the top level of the scene structure.

Once you've added this script, click the Play button and you should see a small "Looking Glass" button in the scene.

Once you click the button, you should see a prompt to open a window, choose yes, the window should then automatically open on your screen if you're using Chrome. If you're using another browser, like Firefox, you'll need to manually move the window over to the device.