Preview image for Overunder Panorama Viewer. A field of floating spheres with worlds inside.

Overunder Panorama Viewer

My entry to Virtuleap's WebVR hackathon (2016). This is a webapp for viewing and sharing stereoscopic panoramas. The sharing features are rough and experimental, but the local "drag-and-drop" mode is a nice alternative to paying $15 to view Ansel panoramas with Virtual Desktop. Unfortunately, I didn't win the grand prize trip to Amsterdam (´；ω；`)

Demo GitHub
Preview image for Iris Graph. A 3D scatterplot comparing three species of Iris.

Iris Graph

This is a proof-of-concept 3D visualization of Fisher's Iris data set. It was built using a customized version of my aframe-scatter-component which relies heavily on D3.js.

Demo Gist
Preview image for Controller-Cursor. An animated gif of a Vive controller with a laser pointer being used to change the color of some floating spheres.

Controller-Cursor Component

An A-Frame component for adding a laser-style cursor to a tracked controls (e.g., HTC Vive, Oculus Touch). Integrated into A-Frame core in version 0.6.0 thanks to Kevin Ngo!

GitHub
Preview of terrain model. A multicolored wireframe mountain range.

Terrain Model Component

An A-Frame component for visualizing Digital Terrain Models (DTMs). I ended up using this project to experiment with ES6 (classes, arrow functions, destructuring) and GLSL. NASA's HiRISE is a great source of Martian terrain data BTW!

Demo GitHub
Planetary scaling preview. The eight planets in our Solar System lined up and scaled.

Planetary Scaling (Linear vs Log)

A visualization comparing the radii of planets in the Solar System. A-Frame provides the 3D and WebVR support, D3.js creates the visualization and runs the transitions. The large textures make this particularly performance intensive!

Demo
A-Frame and Ansel preview. A rainbow over a tower, blue skies and flowers; a stereo panorama from The Witcher 3.

A-Frame and NVIDIA Ansel

The first stereopanoramic project I worked on! The challenge was simply to get Ansel and Google Cardboard images to display (by any means necessary). I hadn't yet figured out how to display overunder images directly, so I resorted to splitting them into two images, one for each eye, with a command line utility called "ImageMagick".

Demo
Bmfont-text preview image. A quote by William Blake and a red cube to demonstrate Matt DesLauriers' three-bmfont-text.

Bmfont-text Component

An A-Frame component for rendering bitmap and signed distance field font text (basically a wrapper for Matt DesLauriers' excellent three-bmfont-text). An SDF text component partly based on this one was added to A-Frame core in version 0.5.0.

Demo GitHub

For more A-Frame/D3.js experiments, checkout my bl.ock and CodePen collections.