Pro-tip: Press space bar to progress and it won't skip any slides

Web VR

What, why and how

About Me...

Wes Ruvalcaba

  • Sr. Front End Dev at Lullabot
  • BFA in Illustration
  • Worked 7 years as Web/UX Designer
  • Own Google Cardboard, Daydream and HTC Vive

@wesruv

Lullabot

We'll go over

  • The VR Landscape
    • Terminology
    • Applications of VR
    • Hardware & Software
    • User Experience
  • Web VR
  • Buiding a VR web site on Codepen.io

Terminology

Real Environment
Augmented Reality
Augmented Virtuality
Virtual Environment

(Milgram’s Reality to Virtuality Continuum)

Virtual Reality

Girl in VR petting a robot dog

Virtual Reality

A man in vr defending a castle with a bow and arrow from minions

Virtual Reality

Augmented Reality

Pokemon Go

Augmented Reality

Pokemon Go

Augmented Reality

Source psfk.com

Man navigating virtual interface that is overlayed over his living room

Augmented Reality

Man navigating virtual interface that is overlayed over his kitchen

Augmented Reality

Augmented Virtuality

A car sim with a steering wheel and pedal setup.

Source: autoblog.com

Experiences &
Interaction Types

Controls & Inputs

Gaze or Look & Press

A VR headset looking a a point in the image

Traditional Controllers

Media controller Video game controller Video game controller

Hands or Controllers do not appear in virtual reality.

VR Controllers

Vive and Oculus Rift VR Controllers

Image from Road to VR

Oculus Touch Controller Demo

Gestures

User doing a pinch gesture with hands to create cubes and stacking and throwing the cubes

Body Interaction

Sitting / Standing

A man on his couch with a VR headset turning his head while holding a controller

Source RoadToVR.com

Room Scale

A man on his couch with a VR headset turning his head while holding a controller

The Hardware

Low-End Headsets

Google Cardboard

Google Daydream

Daydream VR Controller
Daydream controller that works as a pointer in VR
Daydream controller that works as a pointer in VR

Samsung Gear VR

Gear VR Controls
There are additional controls on the side of the Gear VR

(Source: PC Mag)

Features

Google Cardboard Google Daydream Gear VR
Sitting / Standing Yes Yes Yes
VR Controller No Yes No
Room Scale No No No
Price $20 $49 $99

Control Interfaces

  • Look or Look & Click
  • Controllers
Daydream VR Controller
Daydream controller that works as a pointer in VR
Daydream controller that works as a pointer in VR

Higher End Headsets

Ocululs Rift

Oculus Touch Controllers

Sold separately

HTC Vive

Features

Gear VR Oculus Rift HTC Vive
Sitting / Standing Yes Yes Yes
VR Controller No Yes * Yes
Room Scale No No Yes
Price $99 $599, *$798 $799.99
Units Sold in 2016 5M 3.6M 2.1M

Source for units sold source: statista.com

Applications for VR

Entertainment

  • Gaming
  • Photos
  • Video

Education

  • 360 Video for Documentaries & Journalism
  • Demonstrate macro/micro scale
  • Tour Museums or Distant Locations
  • Event Re-enactment

Health

  • Surgery simulation
  • Exposure Therapy for Phobia or PTSD
  • Mental Rehabilitation for Stroke and Brain Injuries

Training Simulations

  • Driver’s Education
  • Flight training
  • Specialized controls for large vehicles or factories
  • Battlefield & Military
  • NASA

Web VR

WebVR Boilerplate

  • Starter kit for custom WebVR/3D experience in modern browsers
  • Very JS Heavy
  • Developer centric

A-Frame

  • Built on WebVR Boilerplate
  • Easy to learn markup language
  • Can further be modified with JS
  • Project goal is to enable more creators

A-Frame Tutorial

🤓 😆

Good news

  • A-Frame docs are fantastic
  • It's a single JS file
  • No compiling necessary!

Getting Started with A-frame

<html>
  <head>
    <script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
    </a-scene>
  <body>
</html>

A-Frame Docs

Adding a Background

<a-scene>
  <a-sky color="#222"></a-sky>
</a-scene>

or a background image:

<a-scene>
  <a-sky src="360image.jpg"></a-sky>
</a-scene>

A-Frame Docs

Adding a Sphere

<a-scene>
  <a-sphere color="orange" radius="1.5"></a-sphere>
  <a-sky color="#222"></a-sky>
</a-scene>

Alternate syntax, but identical result:

<a-scene>
  <a-entity geometry="primitive: sphere; radius: 1.5"
    material="color: orange;"></a-entity>
  <a-sky src="360image.jpg"></a-sky>
</a-scene>

A-Frame Docs

Positioning in 3D

Default Camera Position

Positioning in 3D

Positioning Our Sphere

<a-scene>
  <a-sphere
    color="orange"
    radius="1.5"
    position="2 3 -4">
  </a-sphere>
  <a-sky color="#222"></a-sky>
</a-scene>

A-Frame Docs

Animating Our Sphere

<a-scene>
  <a-sphere color="orange" radius="1.5" position="2 3 4">
    <a-animation
      attribute="position"
      from="2 3 -4"
      to="2 .75 -4">
    </a-animation>
  </a-sphere>
  <a-sky color="#222"></a-sky>
</a-scene>

A-Frame Docs

Demo time!

Sources

Wikipedia - Reality–virtuality continuum

XBOX Controller by Mark Davis from the Noun Project

Remote Control by Lemon Liu from the Noun Project

Most other icons sourced from Font Awesome