Introducing

WebVR

And the Virtual Reality Web

Peter O'Shaughnessy | @poshaughnessy

Imagine the possibilities...

Strange world

mind-criminal

VR web apps possible now

8 million web devs rejoice!

New Web API!

Browsers implementing:

  • Device discovery
  • Full screen extensions
  • Sensor integration, e.g. orientation
  • Rendering for different hardware

“WebVR”

  • "Version Zero"
  • Not even in alpha channels yet

Step 1: Develop WebGL app as usual

I recommend three.js

Three.js examples

threejs.org

Step 2: Add WebVR goodness

Get available VR devices

if( navigator.getVRDevices ) {
    navigator.getVRDevices().then( ... );
}
(This is the only code I'll show - promise!)

Render scene twice, once for each eye

Stereo with no distortion

Oculus Rift

WebVR provides recommended eye FOV & translation

Request full screen on the VR device

Stereo with distortion for Oculus

Oculus Rift

The browser will handle the distortion!

Step 3: Ensure you have included at least one dinosaur

Oculus Rift Web TRex!

Thanks to DK and eyeon Software for lending me the content.

Just set transform-style: preserve-3d

CSS3D Globe

edankwan.com

And request full screen on VR device

CSS3D Globe

edankwan.com

Google Cardboard

Google Cardboard

Google Cardboard

  • No WebVR support yet
  • But we can use HTML5 Orientation API
  • Three.js provides DeviceOrientationControls
  • ...and StereoEffect
  • Just the distortion, then.

Cardboard TRex! (Minus Cardboard)

Thanks again to DK for lending the dinosaur.

Code examples from Google

bit.ly/oculus-example

bit.ly/cardboard-example

Bonus!

Unity

Project Fishfinder

Come say hi to the T-rex!

TRex close-up

Thank you.

web-vr mailing list: bit.ly/web-vr-mailing-list

me: @poshaughnessy