This is the slide deck for Episode 2 of Just A/VR Show. In this presentation, I talk about the basics of VR development for the web, and how to get started with the WebVR API.
Episode 2 of Just A/VR Show:
https://channel9.msdn.com/blogs/misslivirose/Introduction-to-the-VR-Web
2. Overview
WebVR: The API
A under-development browser interface to
interact with hardware
Abstract out the types of VR devices to be
handled by the browser so developers can
focus on content, not supporting specific
devices
The VR Web
Build out experiences for virtual reality on
the internet
Include VR-enabled content into the web
as it exists today
3. Benefits of WebVR
No installation of application is needed – run in the browser on any device
Automatically support mobile and desktop devices
Utilize the current set of tools and libraries for JavaScript
Easily switch between VR and non-VR mode
Offload interfacing with hardware to the browser
4. Downsides of WebVR
Performance hits for non-native graphics
Non-standard support for some browsers
Less insight and control into bugs with hardware
Relies on browser detection of devices
5. How it works
Desktop VR
Web page is rendered without VR support
Browser detects that there is a VR device
attached to the computer and stores the
information about it
Web page is put into VR mode by the user
and the site queries the browser for
information about the device
This information is then applied to render
the page stereoscopically
Mobile VR
Web page is rendered without VR support
Browser detects that the device is a phone
Web page is put into VR mode by the user and
special code included in the website creates a
stereoscopic rendering by querying the device size
and splitting down the middle with an offset on
each eye
The phone gyroscope updates orientation, view,
and position of the camera
7. WebVR Template
Hardware management is offloaded to the web browser (detection of device, position
state, attributes, field of view)
JavaScript code manages the changes in the hardware as the browser sees the device
VR Effect is applied to a WebGL canvas item
Updates loop in the browser similar to with a game logic loop
Boilerplate code made available from a Google engineer
http://github.com/borismus/webvr-boilerplate
8. What’s in a VR App?
Scene: Environment rendered through WebGL
VRControls: Listen for hardware position changes and use them to manipulate the
camera within the scene
VREffect / VR-Polyfill: Render your scene with two side by side cameras
(stereoscopic rendering)
VRManager: Query for devices and apply hardware transforms
17. What is Three.JS?
A (very powerful!) JavaScript library for building immersive 3D content
The primary building block of WebVR scenes
Utilize WebGL, the JavaScript abstraction layer of OpenGL
18.
19. Building Scenes
Primitive Shapes
Textures & Materials
The 3D coordinate system
Lights
Cameras
Characters
Hardware
Three.JS supports these all, right in the browser
20. Let’s Look at Some Examples!
http://threejs.org/examples
21. Looking Ahead
A-Frame is a new
project for
integrating virtual
reality content
directly into
markup on a
webpage
Aframe.io
23. WebVR is an insanely cool, new technology that has the potential to help
completely reshape the web
You can build for VR even if you don’t have a desktop VR headset yet
Create beautiful experiences with Three.JS
