Enter the Metaverse

Introducing Virtual Reality
for the Web

Peter O'Shaughnessy | @poshaughnessy

  • 1. Why now?
  • 2. VR + the Web
  • 3. Interactivity
  • 4. Tips & resources
  • 5. Play time!

1. Why now?

We're on the edge of something...

VR isn't new...

Virtual Boy, 1995

It’s only in the past couple years that it has become possible to make a VR device that is low-cost and high-performance

- Palmer Luckey

CV1 - 2015?

Vrvana Totem - Oct 2015

Sony Project Morpheus - 2015?

Google Cardboard - now

Samsung Gear VR - beta next month

Virtual reality was once the dream of science fiction. But the internet was also once a dream, and so were computers and smartphones.

- Mark Zuckerberg

Presence

I've made a lot of desktop & mobile applications & nothing I ever created was ever going to make someone laugh, cry, recoil, scream or have that reaction that VR lets you have.

- Josh Carpenter

labs.pearson.com/prototypes/fishfinder

2. VR + The Web

“Metaverse”

  • Shared virtual spaces
  • Interconnected virtual worlds
When you think about Neuromancer & Snow Crash
[and their] interconnected seamless worlds... it's pretty much the web that they're describing. It's the open web.

- Josh Carpenter

What if millions of Web developers
were empowered
to create virtual worlds?

“WebVR”

“WebVR”

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

Warning!

three.js

Three.js examples

Introduction to WebGL & Three.js:

bit.ly/third-dimension

For desktop browsers

Render scene twice, once for each eye

Stereo with no distortion
WebVR provides recommended eye FOV & translation

if( navigator.getVRDevices ) {
    navigator.getVRDevices().then( onVRDevices );
}

                
function onVRDevices( vrDevices ) {
    for( var i=0; i < vrDevices.length; i++ ) {
        if( instance of HMDVRDevice ) {
            vrHMD = vrDevices[i];
            // These will be applied to 'camera' in scene
            leftTrans = vrHMD.getEyeTranslation('left');
            leftFOV = vrHMD.getRecommendedEyeFieldOfView(
                    'left');
            ...
        }
    }
}

Request full screen on the VR device

Stereo with distortion for Oculus
The browser will handle the distortion

if( canvas.webkitRequestFullscreen ) {
    canvas.webkitRequestFullscreen({vrDisplay: vrHMD});

} else if( container.mozRequestFullScreen ) {
    container.mozRequestFullScreen({vrDisplay: vrHMD});
}

Three.js has VREffect for this


var vrEffect = new THREE.VREffect(renderer);

vrEffect.render(scene, camera);

...

vrEffect.setFullScreen(true);

Orientation + Position


function onVRDevices( vrDevices ) {
    for( var i=0; i < vrDevices.length; i++ ) {
        if( instance of PositionSensorVRDevice ) {
            vrInput = device;
            return;
        }
    }
}
                
function update() {
    var state = vrInput.getState();
    if ( state.orientation !== null ) {
        // Apply orientation to 'cameras'
    }
    if ( state.position !== null ) {
        // Apply position to 'cameras'
    }
}

Three.js has VRControls for this


var vrControls = new THREE.VRControls(camera);

...

vrControls.update();

Add a dinosaur and...

TRex Rift

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

Being worked on - not in latest browser build!

Set perspective-origin: preserve-3d

Use perspective, perspective-origin & transforms

And request full screen on VR device

Google Cardboard

Cardboard web dev

  • No WebVR support (yet)
  • But we can just make a WebGL mobile app
    • Plus stereoscopic effect
    • Plus HTML5 Orientation API
    • (Plus distortion)

var effect = new THREE.StereoEffect( renderer );
...
effect.render( scene, camera );

                

var controls = new THREE.DeviceOrientationControls(
    camera, true);

controls.connect();
...
controls.update();

Add a dinosaur and...

Cardboard TRex (Minus Cardboard)

3. Interactivity

LeapJS


Leap.loop(function(frame){
    console.log( frame.hands );
});

github.com/leapmotion/leapjs

Leap Plugins


Leap.loopController.use('boneHand', {
    scene: scene,
    arm: true     // Display the arm
});

github.com/leapmotion/leapjs-plugins

bit.ly/oculusleapfire

4. Tips & Resources

Nausea is a big problem

  • Be extra careful of performance - lag is bad
  • Be careful moving user around too much / too fast
  • Ramp up usage gradually (but test frequently)

IDEs to keep an eye on

Useful resources

I'll share the slides with the links afterwards!

We can now create whole new worlds

Let's go build our Metaverse!

Thank you.

Questions & play time!

@poshaughnessy