Enter the Metaverse – Introducing Virtual Reality for the Web

View Github Repository Open presentation in a new window

poshaughnessy

See all presentation from poshaughnessy

Enter the Metaverse – Introducing Virtual Reality for the Web

0 2

enter-the-metaverse-webvr

Slides for my Front Endgineers presentation "Enter the Metaverse: Introducing Virtual Reality for the Web", November 25th 2014

On Github poshaughnessy / enter-the-metaverse-webvr

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

Introduction to WebGL & Three.js:

bit.ly/third-dimension

For desktop browsers

Render scene twice, once for each eye

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

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