🔶
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.
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.
In order to add Looking Glass WebXR Support to the PlayCanvas editor you'll need to follow the steps below:
In the PlayCanvas Editor, navigate to the scripts directory, then right click and choose
New Asset -> Script
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/[email protected]/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.
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
AssetIn 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.
Last modified 3mo ago