Intro to the VR WebJUST A/VR SHOW

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

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

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

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

WebVR Sample Code

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

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

Demo

Three.JS A BASIC OVERVIEW

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

Building Scenes

Primitive Shapes Textures & Materials The 3D coordinate system Lights Cameras Characters Hardware

Three.JS supports these all, right in the browser

Let’s Look at Some Examples!

http://threejs.org/examples

Looking Ahead

A-Frame is a new project for integrating virtual reality content directly into markup on a webpage

Aframe.io

Recap

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

BRING WEBVR TO EDGE!

http://livi.link/WebVREdge