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 WebXR
  • Developing with the Looking Glass WebXR Library
  • Installation
  • Using NPM/Yarn
  • Using a Script Tag
  • Demos

Was this helpful?

  1. Creator Tools

WebXR

Let's turn the Internet Holographic.

PreviousExporting Quilt Images and Video with SequencerNextPlayCanvas

Last updated 10 months ago

Was this helpful?

The Looking Glass WebXR Library is open source and originally developed by . We're excited to continue working in and supporting open-source technology! If you're interested in contributing check out the library on .

In order to use Looking Glass WebXR with your Looking Glass you must install Looking Glass Bridge ->

The Looking Glass WebXR Library provides a WebXR API for targeting Looking Glass displays, this means that any 3D web framework that supports WebXR will work with the Looking Glass WebXR library. Ready to turn the internet holographic? Let's have some fun!

Looking Glass WebXR works in Chromium based browsers and Firefox, though we recommend Chrome-based browsers for best performance.

Safari is not currently supported.

We've tested our WebXR Library with the following WebGL frameworks. If you use one and don't see it here, reach out on discord! We'd love to support as many as possible, it's likely yours may work too!

  • Three.JS (v141+)

  • Babylon.JS (v5.0+)

  • PlayCanvas

Using WebXR

To view a WebXR project on your Looking Glass you'll need to click the "View in XR" button.

This will open up a small pop-up window.

Drag this over to your Looking Glass display and then double click to have the hologram display properly.

On MacOS systems you must have Chrome or Firefox be in windowed mode, and not running in Fullscreen. Running in full screen will cause the window to open in a new tab instead of a new window.

Developing with the Looking Glass WebXR Library

Developing with the Looking Glass WebXR Library is really straightforward.

Install the Looking Glass WebXR Library and paste the following snippet in to your WebXR project. Now your project supports the Looking Glass.

import { LookingGlassWebXRPolyfill, LookingGlassConfig } from "@lookingglass/webxr"
const config = LookingGlassConfig
config.targetY = 0
config.targetZ = 0
config.targetDiam = 3
config.fovy = (40 * Math.PI) / 180
new LookingGlassWebXRPolyfill()

There are two main imports you'll need to import as follows:

  • import {LookingGlassWebXRPolyfill, LookingGlassConfig }from "@lookingglass/webxr"

Once you've imported the packages you'll need to define both the LookingGlassConfig as well as the LookingGlassWebXRPolyfill.

The LookingGlassConfig controls the holographic camera and has the following properties:

  • quiltResolution.width - defines the resolution of the quilt's width

  • quiltResolution.height - defines the resolution of the quilt's height

  • columns - defines the number of columns in the quilt

  • rows - defines the number of rows in the quilt

  • targetX - defines the position of the camera on the X-axis

  • targetY - defines the position of the camera on the Y-axis

  • targetZ - defines the position of the camera on the Z-axis

  • trackballX - defines the rotation of the camera on the X-axis

  • trackballZ - defines the rotation of the camera on the Z-axis

  • targetDiam - defines the size of the camera, this makes your scene bigger or smaller without changing the focus.

  • fovy - defines the vertical FOV of your camera (defined in radians)

  • depthiness - modifies to the view frustum to increase or decrease the perceived depth of the scene.

  • inlineView - changes how the original canvas on your main web page is displayed, can show the encoded subpixel matrix, a single centered view, or a quilt view.

The LookingGlassWebXRPolyfill implements the WebXR override and allows you to target the Looking Glass.

Installation

Since Looking Glass WebXR is engine agnostic there are a few settings that will be the same regardless of what 3D engine you're working with.

Using NPM/Yarn

You can import the Looking Glass WebXR library by running the following command in your web project.

npm install @lookingglass/webxr

or, if you use the yarn package manager.

yarn install @lookingglass/webxr

Using a Script Tag

You can also use a <script> tag, like shown in the following examples:

<script type="module">
import { LookingGlassWebXRPolyfill, LookingGlassConfig } from "https://unpkg.com/@lookingglass/webxr@0.6.0/dist/webxr.js"
const config = LookingGlassConfig
config.targetY = 0
config.targetZ = 0
config.targetDiam = 3
config.fovy = (14 * Math.PI) / 180
new LookingGlassWebXRPolyfill()
</script>

Demos

We've got some demos setup for three.js, react-three-fiber, and Spline! Check them out on the following pages!

This library is published on you can install it by running npm install @lookingglass/webxr

🌐
Kai Ninomiya
GitHub
Download it here.
npm
3️⃣3️⃣ Three.JS
⚛️React-Three-Fiber
🌈Spline