🌐
WebXR
Let's turn the Internet Holographic.
The Looking Glass WebXR Library is open source and originally developed by Kai Ninomiya. We're excited to continue working in and supporting open-source technology! If you're interested in contributing check out the library on Github.
In order to use Looking Glass WebXR with your Looking Glass you must install Looking Glass Bridge -> Download it here.
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
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 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.tileHeight = 512
config.numViews = 45
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:tileHeight- defines the height of the individual quilt view, the width is then set based on the aspect ratio of the connected device.numViews- defines the number of views to be renderedtargetXtargetYtargetZtrackballXtrackballZtargetDiamfovydepthinessinlineView- 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.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.
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
You can also use a
<script> tag, like shown in the following examples: ES6 Script
1
<script type="module">
2
import { LookingGlassWebXRPolyfill, LookingGlassConfig } from "https://unpkg.com/@lookingglass/[email protected]/dist/webxr.js"
3
const config = LookingGlassConfig
4
config.tileHeight = 512
5
config.numViews = 45
6
config.targetY = 0
7
config.targetZ = 0
8
config.targetDiam = 3
9
config.fovy = (14 * Math.PI) / 180
10
new LookingGlassWebXRPolyfill()
11
</script>
We've got some demos setup for three.js, react-three-fiber, and Spline! Check them out on the following pages!
Last modified 2mo ago