๐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
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.
This library is published on npm you can install it by running npm install @lookingglass/webxr
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 widthquiltResolution.height
- defines the resolution of the quilt's heightcolumns
- defines the number of columns in the quiltrows
- defines the number of rows in the quilttargetX
- defines the position of the camera on the X-axistargetY
- defines the position of the camera on the Y-axistargetZ
- defines the position of the camera on the Z-axistrackballX
- defines the rotation of the camera on the X-axistrackballZ
- defines the rotation of the camera on the Z-axistargetDiam
- 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.
or, if you use the yarn package manager.
Using a Script Tag
You can also use a <script>
tag, like shown in the following examples:
Demos
We've got some demos setup for three.js, react-three-fiber, and Spline! Check them out on the following pages!
3๏ธโฃ3๏ธโฃ Three.JSโ๏ธReact-Three-Fiber๐SplineLast updated