Looking Glass Documentation
Buy Looking GlassDiscord
  • Looking Glass User Guide
  • NEW! โœจLooking Glass Goโœจ
  • Displays
    • ๐Ÿ”ฎLooking Glass Go
      • โšกGet Started with Looking Glass Go
      • ๐Ÿ“ฑUsing the Go Mobile App
      • ๐Ÿ”†Liteformsโ„ข
      • ๐Ÿ–ฅ๏ธStandalone and Desktop Modes
      • ๐Ÿ”ŒPower and LED States
      • ๐Ÿช„Default Playlist
      • โญ๏ธWhat's Next?
      • ๐Ÿ‘œAccessories
      • โš™๏ธAdvanced Playlist Creation
      • โš™๏ธManual Firmware Update
      • โ“Common Troubleshooting Issues
    • ๐Ÿ”ฎLooking Glass 16" Light Field Displays
      • ๐Ÿช„Looking Glass 16" Light Field Display (Landscape)
      • ๐Ÿช„Looking Glass 16" Light Field Display (Portrait)
      • โ“Common Troubleshooting Issues
    • ๐Ÿ”ฎLooking Glass 32" Light Field Displays
      • ๐Ÿช„Looking Glass 32" Light Field Display (Landscape)
      • ๐Ÿช„Looking Glass 32" Light Field Display (Portrait)
      • โ“Common Troubleshooting Issues
    • ๐Ÿ”ฎLooking Glass 65" Light Field Display
    • ๐Ÿ”ฎLooking Glass Portrait
      • โšกGet Started with Looking Glass Portrait
      • ๐ŸŽ‡Demo Holograms
      • โ“Common Troubleshooting Issues
  • Software Tools
    • ๐Ÿ“šOverview
    • ๐ŸŒ‰Looking Glass Bridge
      • โœจUsing Looking Glass Bridge
      • ๐ŸชŸDisplay Settings on Windows
      • ๐ŸŽDisplay Settings on macOS
      • ๐ŸงDisplay Settings on Linux
      • ๐Ÿ‘ทTroubleshooting
    • ๐Ÿ“ฝ๏ธLooking Glass Studio
      • ๐Ÿ“šUsing Looking Glass Studio
      • RGB-D Photo / Video
      • Quilt Images / Video
      • iPhone Portrait Photos
      • Android Depth Photos
        • Samsung Portrait Mode
      • Light Field Photosets
      • Exporting Holograms
      • Troubleshooting
    • ๐ŸงŠLooking Glass Blocks
      • โœจConvert any image into a hologram
      • โฌ†๏ธUploading, editing and sharing Quilts
      • ๐ŸฅฝViewing your holograms on different platforms
    • ๐ŸŽฌHologram Video
    • ๐Ÿ”†Liteformsโ„ข
      • ๐ŸชŸGet Started on Windows
      • ๐ŸŽGet Started on MacOS
      • ๐Ÿง™Making Custom Liteforms
      • ๐ŸชConfigure Liteforms for Kiosk Setup
    • ๐Ÿ‘€Looking Glass Model Viewer
    • ๐ŸงชExperiments
      • ๐Ÿ“ฝ๏ธMedia Encoder
      • โฉLooking Glass Media Encoder
  • Key Concepts
    • ๐Ÿ”‘Hologram 101
      • ๐ŸŽ‰Making great holograms
      • ๐ŸŒŽHolograms in the real world
      • ๐Ÿ‘พHolograms, but virtual
    • ๐Ÿ”How does Looking Glass Work?
    • ๐Ÿ“ธVirtual Camera
    • ๐ŸงŠ3D Design Guidelines
      • Lighting
      • Post-Processing
      • Scene Composition
      • Materials & Textures
      • Performance
    • ๐Ÿ’กQuilts
      • ๐ŸŽฌQuilt Video Encoding
    • ๐Ÿ’กLight Fields
      • โšกLinear Light Field Capture
    • ๐Ÿ“ฝ๏ธFilming a Looking Glass
  • Creator Tools
    • ๐ŸŽจOverview
    • ๐Ÿ”ŒUnity
      • โšกUsing Unity with Looking Glass
      • Setting up your Development Environment
      • Example Scenes
      • Prefabs
        • Hologram Camera
        • 3D Cursor
        • Dual Monitor Application
      • Script Reference
        • HologramCamera.cs
        • LKGDisplaySystem.cs
        • QuiltCapture.cs
        • Cursor3D.cs
        • OrbitControls.cs
        • BlockUploader.cs
        • MobileDMAController.cs
        • iOS Sample Scene Scripts
          • ChangeInteractionModality.cs
          • XYSlider.cs
          • XYSpotlight.cs
          • AudioRotateControl.cs
          • ModelController.cs
          • DemoIOSUIController.cs
          • PageHandler.cs
          • PageConnectHandler.cs
          • PageCalibrateHandler.cs
          • PageTestHandler.cs
          • DynamicAlcove.cs
      • Package Integrations
        • Built-in Render Pipeline Post-Processing
      • Developing for iOS
      • Depth of Field and Other Post-Processing Effects
      • Quilt Video Audio and Playback
      • Developing for Ultraleap Hand Tracking on Looking Glass
      • Looking Glass Pro (Legacy)
      • Additional Support
      • Change Log
    • ๐ŸนBlender
    • ๐Ÿ”ŒUnreal Engine
      • ๐Ÿ—’๏ธChange Log and Old Versions
      • ๐Ÿ’ฝInstalling the Unreal Engine plugin
      • ๐ŸŽฅUsing the Unreal Engine Plugin
        • Using the HoloPlay Capture
        • Exporting Quilt Images and Video with Sequencer
      • Accessing HoloPlay Data with Blueprint Scripting
      • Packaging the Project
      • Unreal Engine 4 (Legacy Support)
        • Unreal Engine 4 Quick Start
          • Using the HoloPlay Capture
          • Exporting Quilt Images and Video with Sequencer
    • ๐ŸŒWebXR
      • ๐Ÿ”ถPlayCanvas
      • 3๏ธโƒฃ3๏ธโƒฃ Three.JS
      • โš›๏ธReact-Three-Fiber
      • ๐ŸŒˆSpline
  • Tutorials
    • ๐Ÿ“ฑRunning Looking Glass Displays with iOS Devices
    • โ“‚๏ธCapturing Light Fields in Maya
    • ๐Ÿง‘โ€๐Ÿ”ฌUsing ShaderToy with Looking Glass
    • ๐ŸŽจSculpting with Adobe Medium and Looking Glass
    • ๐Ÿ”Turn Videogames Holographic with Refract
    • ๐Ÿ–๏ธBuilding with Leap Motion
  • Developer Docs
    • โš™๏ธLooking Glass Bridge SDK
      • ๐Ÿช›Web Application Integration
      • ๐Ÿ”ŒIntegrating Native Applications
      • ๐Ÿ““Native Function Reference
    • ๐ŸฆLooking Glass Core Migration Guide
  • Third Party Software
    • ๐Ÿ—ก๏ธ3D Slicer
    • ๐Ÿ”ฌVTK (Visualization Toolkit)
    • ๐Ÿ—บ๏ธParaView
    • ๐Ÿ”ฉCommunity Made Tools & Projects
  • Legacy Software
    • ๐Ÿ“ก3D Model Importer
      • 3D Model Importer App Guide
      • 3D Model Importer App Reference
    • ๐ŸŽญDiorama
      • Change Log
    • ๐ŸŽž๏ธDepth Recorder
    • ๐Ÿ“ธLightfield Photo App
    • ๐ŸLooking Glass Core Overview
    • ๐Ÿฝ๏ธLooking Glass Core SDK
      • C API Overview
        • HoloPlayCore.h
          • State Functions
          • General-Query-Functions
          • Device-Query-Functions
        • libHoloPlayCore.h
        • HoloPlayShaders.h
    • ๐Ÿ”ฐLooking Glass Core JS
      • API
        • HoloPlayCore.Client
        • HoloPlayCore.Message
        • HoloPlay Service Related
        • examples
  • Legacy Hardware
    • ๐Ÿ”ปLooking Glass 8.9"
    • ๐Ÿ”ปLooking Glass 15.6"
    • ๐Ÿ”ปLooking Glass 8K
    • ๐Ÿ”ปLooking Glass 16"
    • ๐Ÿ”ปLooking Glass 32"
    • ๐Ÿ”ปLooking Glass Pro
  • ๐Ÿ’ฌContact Us
  • ๐Ÿ› ๏ธFAQ & Troubleshooting
Powered by GitBook

Follow us

  • Twitter
  • Instagram
  • LinkedIn
On this page
  • Using PlayCanvas
  • Adding Looking Glass WebXR to your scene.
  • Adding the Looking Glass WebXR Scripts.
  • Creating a new Script
  • Adding Looking Glass WebXR to PlayCanvas
  • Setting up WebXR

Was this helpful?

  1. Creator Tools
  2. WebXR

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.

PreviousWebXRNext3๏ธโƒฃ Three.JS

Last updated 10 months ago

Was this helpful?

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 and creating an account. Once you've logged in you should see a getting started screen like this one:

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.6.0/dist/@lookingglass/bundle/webxr.js';  new LookingGlassWebXRPolyfill({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.

๐ŸŒ
๐Ÿ”ถ
PlayCanvas.com
The PlayCanvas Editor, with the starting scene.