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

1. Intro to the VR Web
JUST A/VR SHOW

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

6. WebVR Sample
Code

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

14. Demo

16. Three.JS A BASIC OVERVIEW

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

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

22. Recap

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

24. BRING WEBVR TO EDGE!
http://livi.link/WebVREdge