Interacting with the Looking Glass Holoplay Service in JavaScript

This repository collects together several examples of how to use JavaScript with looking glass devices, which exist on the internet but not on GitHub.

See the source here.

Quickstart

1. Make sure your Looking Glass light field display is connected over USB and HDMI.
2. Make sure the Holoplay Service is installed.
3. Click on one of the examples in https://chigozienri.github.io/holoplayjs-examples/#Examples

Running locally

To run the examples in this repository locally, you will need to run a local server. For example, after cloning the repo with

git clone https://github.com/chigozienri/holoplayjs-examples.git
cd holoplayjs-examples

you can run

python -m SimpleHTTPServer 8000

in the root of the repo, then visit http://localhost:8000/ in your browser.

Examples

Holoplaycore.js (without Three.js)

holoplaycore 0.0.7

• Test Setup shows how to directly send a quilt to a connected Looking Glass device using holoplaycore (without moving a window over). It is from https://codesandbox.io/s/hardcore-butterfly-l5o9d and is used here.
• Diagnostic displays the device calibration. It is the example from holoplaycore 0.0.7 examples

holoplaycore 0.0.8

The following 4 examples come from holoplaycore 0.0.8 examples

• calibrationDebugger is the example referenced here. This example demonstrates how to use HoloPlayCore.js to view calibration data and debug when there's a problem with the Looking Glass.
• esModuleImport is the example referenced here. This example demonstrates how to use the ES6 module version of HoloPlayCore.js, namely holoplaycore.module.js.
• nodejs is the example referenced here. This example demonstrates how to use HoloPlayCore.js in Node.js. (You will need to set up a Node.js project to run this example.)
• quiltLoader is the example referenced here. This is a more complex example, showing how to use the quilt viewing functionality in HoloPlayCore.js.

Holoplay.js (with Three.js)

The examples in lookingglass are from https://docs.lookingglassfactory.com/developer-tools/three.

They reference a copy of holoplay.js that is in this repository, but you can also find it on CDNs as holoplay

• basic shows how to use HoloPlay in place of a regular Three.js camera
• buttons shows how to receive events from the Looking Glass buttons (on models which have left/right/square/circle buttons)
• debugoptions shows how to switch between display modes (2D/3D/Quilt)
• gltf shows how to display a glTF

Muttyan's modified Holoplay.js (with Three.js)

The examples in stereo_jpn_org_lkg are from http://stereo.jpn.org/lkg

• 180 2D+Depth shows how to display a VR180 image with a RGB+Depth map image.
• 360 2D+Depth shows how to display a VR360 image with an equirectangular RGB+Depth map image.
• Crystal Ball shows how to display a skybox using 6 images, and add other objects into the scene.
• Calibration shows how to access the calibration values.
• Human's head shows how to add a decal with texture and normal map to a model dynamically (Paint splatters are added to a head model where you click on the surface).
• 2D+Depth shows how to display a RGB+Depth map image.
• 3D Model 2D+Depth shows how to combine separate RGB and depth map images.
• Dancing Doll shows how to load an FBX.
• FBX Viewer shows how to load an FBX.
• Half Width 2D+Depth shows how to switch between half/full width.
• Horizontal Shift movies shows how to infer a light field from a slow panning ordinary RGB movie with no depth data.
• 180 Horizontal Shift movies shows how to infer a light field from a slow panning VR180 RGB movie with no depth data.
• Panorama shows how to display an equirectangular spherical image (no depth data).
• iPhone shows how to display depth images from a dual lens iPhone (separate RGB and depth images).
• Quilt shows how to display quilt images/movies.
• Lucy model shows how to display a skybox and light refraction through a transparent model.
• Takamatsu shows how to display depth-only grayscale images.
• Octaminator shows how to display assimp files (animated 3D octaminator model).
• Little Tokyo shows how to display animated glTFs (a diorama of a cute Tokyo block with animated tram).
• Kandao shows how to display a VR360 image with an equirectangular RGB+Depth map image or movie.
• Flowers shows how to animate a static RGB+Depth image.
• Shift Movie misc shows several examples of inferring a light field from a slow panning ordinary RGB movie with no depth data.
• Planet shows how to display little planet RGB+Depth movies.
• Macro Room shows how to display quilt images which use the different angles for animation instead of a 3D effect (like an animated lenticular postcard).
• Depth misc shows various 2D RGB + Depth examples.
• Qoocam shows various VR180 RGB + Depth examples.
• Stereo Club Tokyo shows various 2D RGB + Depth examples.
• Sample Takamatsu shows various depth-only examples.
• Mt. Tsukuba shows a 2D RGB + Depth movie.
• Magic World shows some special effect RGB + Depth images.
• Rose shows how to display a quilt movie.
• Sample Misc shows various examples of 2D RGB + Depth images.

Other libraries

• A p5 library by @JuanIrache is available here.
• A WebXR library by @kainino0x is available here with live examples here.

Misc

Need to convert an ordinary RGB image to RGBD to use in these examples? Click here to access a hosted version of wrote RGB-Depthify by @jankais3r