X3DOM + WebVR Examples

This site demonstrates various examples of implementing WebVR to develop web based Immersive Applications for devices like Oculus Rift. The examples here use X3DOM to develop web based 3D Models. Input devices like Leap Motion and XBOX Game Controller have been used to navigate through the virtual environment

Jagathshree Suryanarayanan Iyer Dr. Nicholas F. Polys

Master's candidate, Computer Science Director of Visual Computing

Virginia TechVirginia Tech

X3DOM

X3DOM (pronounced X-Freedom) is an open-source framework and runtime for 3D graphics on the Web. It aims to fulfil the current HTML5 specification for declarative 3D content and allows including royalty-free ISO standard X3D elements as part of any HTML5 DOM tree. More information can be at www.x3dom.org

WebVR

WebVR is an experimental Javascript API that provides access to Virtual Reality devices, such as the Oculus Rift or Google Cardboard, in your browser. More information can be found at webvr.info

Oculus Rift

The Oculus Rift is a virtual reality headset developed and manufactured by Oculus VR, released on March 28, 2016. More information can be found at www.oculus.com

Leap Motion

Leap Motion Controller is a small USB peripheral device that senses our hands and fingers and follows our every gesture. More information can be found at www.leapmotion.com

Gamepad

A gamepad (also called joypad or controller), is a type of game controller held in two hands, where the fingers (especially thumbs) are used to provide input. The examples here use the seventh generation XBOX 360 controller.

Photosphere in X3DOM

This example displays a Photosphere in X3DOM. The Photosphere is a JPEG image which is wrapped as an Image Texture on a sphere. Left click and drag the mouse to look around. Enjoy the demo here!

Photosphere in Oculus Rift using X3DOM and WebVR

This example displays a Photosphere in Oculus using X3DOM & WebVR. The Photosphere is a JPEG image which is wrapped as an Image Texture on a sphere. In WebVR 1.0 example, the scene is first rendered in Desktop. To enter VR, click Enter VR button to present in Oculus and Exit VR to turn off Oculus presentation. For old WebVR, click the button with Oculus Logo in the bottom right corner of the browser to enable viewing in Oculus. Enjoy the demo that implements WebVR 1.0 here and one that uses the old WebVR version here!

Photosphere with Leap Motion

This example displays a Photosphere in Oculus Rift illustrating the benefit of Virtual Reality in conducting virtual tours or field trips for students. In WebVR 1.0 example, the scene is first rendered in Desktop. To enter VR, click Enter VR button to present in Oculus and Exit VR to turn off Oculus presentation. For old WebVR, click the button with Oculus Logo in the bottom right corner of the browser to enable viewing in Oculus. Leap Motion device is used to navigate through the virtual world. In the full screen mode, after wearing the Oculus, bend your hand forward to move in the forward direction, bend it backward or sideward for movement in respective directions. Enjoy the demo that implements WebVR 1.0 here and one that uses the old WebVR version here!

Photosphere with Gamepad

This example displays a Photosphere in Oculus Rift illustrating the benefit of Virtual Reality in conducting virtual tours or field trips for students. In WebVR 1.0 example, the scene is first rendered in Desktop. To enter VR, click Enter VR button to present in Oculus and Exit VR to turn off Oculus presentation. For old WebVR, click the button with Oculus Logo in the bottom right corner of the browser to enable viewing in Oculus. XBOX Game Controller is used to navigate through the virtual world. In the full screen mode, after wearing the Oculus, Push the right Joystick forward to move forward, backwards/sidewards for movements in respective directions. Enjoy the demo that implements WebVR 1.0 here and one that uses the old WebVR version here!

Segmented Volume in Oculus using X3DOM & WebVR with Gamepad

This example displays Segmented Volume in Oculus Rift illustrating the benefit of Virtual Reality in medicine to analyse the inner parts of a human body. In WebVR 1.0 example, the scene is first rendered in Desktop. To enter VR, click Enter VR button to present in Oculus and Exit VR to turn off Oculus presentation. For old WebVR, click the button with Oculus Logo in the bottom right corner of the browser to enable viewing in Oculus. XBOX Game Controller is used to navigate through the virtual world. In the full screen mode, after wearing the Oculus, Push the right Joystick forward to move forward, backwards/sidewards for movements in respective directions. Enjoy the demo that implements WebVR 1.0 here and one that uses the old WebVR version here!

ICAT with Leap Motion

This example displays in Oculus Rift, the 3D Model of Virginia Tech's Moss Arts Center developed as part of Mirror Worlds Project. This work can be extended for virtual collaborations at ICAT. In WebVR 1.0 example, the scene is first rendered in Desktop. To enter VR, click Enter VR button to present in Oculus and Exit VR to turn off Oculus presentation. For old WebVR, click the button with Oculus Logo in the bottom right corner of the browser to enable viewing in Oculus. Leap Motion device is used to navigate through the virtual world. In the full screen mode, after wearing the Oculus, bend your hand forward to move in the forward direction, bend it backward or sideward for movement in respective directions. Enjoy the demo that implements WebVR 1.0 here and one that uses the old WebVR version here!

ICAT with Gamepad

This example displays in Oculus Rift, the 3D Model of Virginia Tech's Moss Arts Center developed as part of Mirror Worlds Project. This work can be extended for virtual collaborations at ICAT. In WebVR 1.0 example, the scene is first rendered in Desktop. To enter VR, click Enter VR button to present in Oculus and Exit VR to turn off Oculus presentation. For old WebVR, click the button with Oculus Logo in the bottom right corner of the browser to enable viewing in Oculus. XBOX Game Controller is used to navigate through the virtual world. In the full screen mode, after wearing the Oculus, Push the right Joystick forward to move forward, backwards/sidewards for movements in respective directions.Enjoy the demo that implements WebVR 1.0 here and one that uses the old WebVR version here!

System Information

Windows 7 64 bit Desktop with i7-3770k processor

NVIDIA GeForce GTX 680 with driver version 365.19

X3DOM - 1.7.2 dev

All WebVR 1.0 examples are implemented under the following environment:

Oculus DK2 with Runtime version 1.6

Latest Chromium Build for Windows with WebVR enabled in chrome://flags

All examples that use old WebVR version are implemented under the following environment:

Oculus DK2 with Runtime version 0.8

Mozilla Nightly browser - 48.0a1

Addon - Mozilla WebVR Plus 0.5.0

References

All examples with old WebVR version are based on Classroom examples found in X3DOM Examples

Leap Motion Javascript API

Gamepad API reference

All WebVR 1.0 examples are based on WebVR samples

Thanks to X3DOM community & WebVR community for the insights and suggestions