Slide 1

Slide 1 text

WebVR Virtual Reality in your browsers Carsten Sandtner (@casarock) mediaman// GmbH

Slide 2

Slide 2 text

about:me Carsten Sandtner @casarock Technical Director mediaman// GmbH

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

Short History Of VR

Slide 7

Slide 7 text

View Master ~1939 https://flic.kr/p/hkLi6g

Slide 8

Slide 8 text

„The ultimate display would, of course, be a room within which the computer can control the existence of matter. A chair displayed in such a room would be good enough to sit in. Handcuffs displayed in such a room would be confining, and a bullet displayed in such a room would be fatal. With appropriate programming such a display could literally be the Wonderland into which Alice walked.“ —Ivan Sutherland

Slide 9

Slide 9 text

Virtual Boy 1995 https://flic.kr/p/6Vn8WN

Slide 10

Slide 10 text

VR Today

Slide 11

Slide 11 text

Oculus Rift DK1: 2013 DK2: 2014 Consumer Version: 2016 Image by Oculus VR, LLC

Slide 12

Slide 12 text

Google Cardboard 2014 By Evan-Amos https://commons.wikimedia.org/w/index.php?curid=45580283

Slide 13

Slide 13 text

HTC Vive 2016 Image © by HTC Corporation

Slide 14

Slide 14 text

Playstation VR Oct. 2016 Image © by Sony Computer Entertainment Inc.

Slide 15

Slide 15 text

Microsoft Hololens AR, not VR DevKit: 2016

Slide 16

Slide 16 text

VR In A Nutshell

Slide 17

Slide 17 text

https://twitter.com/guystufff/status/713075541738393600/video/1

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

Mobile Based Setup https://developer.mozilla.org/en-US/docs/Web/API/WebVR_API/WebVR_concepts

Slide 20

Slide 20 text

Computer Based Setup https://developer.mozilla.org/en-US/docs/Web/API/WebVR_API/WebVR_concepts

Slide 21

Slide 21 text

Sensors https://developer.mozilla.org/en-US/docs/Web/API/WebVR_API/WebVR_concepts

Slide 22

Slide 22 text

Field Of View https://developer.mozilla.org/en-US/docs/Web/API/WebVR_API/WebVR_concepts

Slide 23

Slide 23 text

Concepts For VR Apps https://developer.mozilla.org/en-US/docs/Web/API/WebVR_API/WebVR_concepts

Slide 24

Slide 24 text

Concepts For VR Apps • Eye strain • Motion Sickness • Latency • FPS • Degrees of Freedom ( DoF ) • Cone of focus • 3D Positional Audio -> Web Audio API! https://media.giphy.com/media/3o6gaVAxUrXlEFYpWw/giphy.gif

Slide 25

Slide 25 text

Friction of VR Ecosystems Gatekeeper Installs Closed

Slide 26

Slide 26 text

WebVR - open VR platform Open Connected Instant

Slide 27

Slide 27 text

What Is WebVR?

Slide 28

Slide 28 text

–https://w3c.github.io/webvr/ „Browser APIs that enable WebGL rendering to headsets and access to VR sensors“

Slide 29

Slide 29 text

Available APIs • VRDisplay • VRDisplayCapabilities • VRDisplayEvent • VRFrameData • VRPose • VREyeParameters • VRFieldOfView • VRLayerInit • VRStageParameters

Slide 30

Slide 30 text

Get VR Displays navigator.getVRDisplays().then(function(devices) { // Handle found Devices here... });

Slide 31

Slide 31 text

VR Display // If a display is available, use it to present the scene if(displays.length > 0) { vrDisplay = displays[0]; // Now we have our VRDisplay // object and can do what we want with it }

Slide 32

Slide 32 text

Example var frameData = new VRFrameData(); var vrDisplay; navigator.getVRDisplays().then(function (displays) { vrDisplay = displays[0]; console.log('Display found'); // Starting the presentation when the button // is clicked: It can only be called in response to a user gesture btn.addEventListener('click', function () { vrDisplay.requestPresent([{ source: canvas }]).then(function () { drawVRScene(); }); }); });

Slide 33

Slide 33 text

Example cont. function drawVRScene() { // WebVR: Request the next frame of the animation vrSceneFrame = vrDisplay.requestAnimationFrame(drawVRScene); // Populate frameData with the data of the next frame to display vrDisplay.getFrameData(frameData); // You can get the position, orientation, etc. // of the display from the current frame's pose curFramePose is a VRPose object var curFramePose = frameData.pose; var curPos = curFramePose.position; var curOrient = curFramePose.orientation; // Here happens some WebGL Stuff! // WebVR: Indicate that we are ready to present the rendered frame to the VR display vrDisplay.submitFrame(); }

Slide 34

Slide 34 text

„Learn WebGL And Start Creating VR …“

Slide 35

Slide 35 text

Stereoscopic Rendering in WebGL gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); var projectionMatrixLocation = gl.getUniformLocation(shaderProgram, "projMatrix"); var viewMatrixLocation = gl.getUniformLocation(shaderProgram, "viewMatrix"); // WebVR: Render the left eye‚ÀÙs view to the left half of the canvas gl.viewport(0, 0, canvas.width * 0.5, canvas.height); gl.uniformMatrix4fv(projectionMatrixLocation, false, frameData.leftProjectionMatrix); gl.uniformMatrix4fv(viewMatrixLocation, false, frameData.leftViewMatrix); drawGeometry(); // WebVR: Render the right eye‚ÀÙs view to the right half of the canvas gl.viewport(canvas.width * 0.5, 0, canvas.width * 0.5, canvas.height); gl.uniformMatrix4fv(projectionMatrixLocation, false, frameData.rightProjectionMatrix); gl.uniformMatrix4fv(viewMatrixLocation, false, frameData.rightViewMatrix); drawGeometry(); function drawGeometry() { // draw the view for each eye }

Slide 36

Slide 36 text

„… or use a Boilerplate or Frameworks!“

Slide 37

Slide 37 text

Import WebVR polyfill Set up camera Initialize scene Set up lights Declare and pass canvas Install VREffect Listen to window resize Create render loop Instantiate renderer Figure out responsiveness Preload assets Deal with metatags and mobile

Slide 38

Slide 38 text

A-Frame Building blocks for the virtual reality web

Slide 39

Slide 39 text

– https://aframe.io/ „Use markup to create VR experiences that work across desktop, iOS, Android, and the Oculus Rift.“

Slide 40

Slide 40 text

Hello World Hello, World!

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

Animated Box . . .

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

Pointer . . .

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

Add Events . . .

Slide 47

Slide 47 text

Add Events (Pure JS) var box = document.querySelector('#mybox'); box.addEventListener('mouseenter', function () { box.setAttribute('material', {color: '#ff0000'}); }); box.addEventListener('mouseleave', function() { box.setAttribute('material', {color: '#6173F4'}); });

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

Entity Component System

Slide 50

Slide 50 text

Composing an Entity

Slide 51

Slide 51 text

Composing an Entity

Slide 52

Slide 52 text

Composing an Entity

Slide 53

Slide 53 text

Slide 54

Slide 54 text

Input Devices?

Slide 55

Slide 55 text

Image © 2015 Microsoft

Slide 56

Slide 56 text

Image by Oculus VR, LLC

Slide 57

Slide 57 text

Image © by HTC Corporation

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

By Evan-Amos - Own work, CC BY-SA 3.0, https://commons.wikimedia.org/w/index.php?curid=18936731

Slide 60

Slide 60 text

Use cases for WebVR?

Slide 61

Slide 61 text

–Internet „VR is just for Gaming!“

Slide 62

Slide 62 text

–Internet „Using WebGL is complicated.“

Slide 63

Slide 63 text

Some use cases • Immersive reportages • 3D Handbooks/Instructions • Panorama view without stupid plugins • Marketing instrument. (Supplements in magazines) • simple Games

Slide 64

Slide 64 text

Some great examples

Slide 65

Slide 65 text

http://www.360syria.com/

Slide 66

Slide 66 text

https://aframe.io/examples/showcase/city-builder/

Slide 67

Slide 67 text

https://pepsigoback.com/

Slide 68

Slide 68 text

https://aframe.io/a-painter/

Slide 69

Slide 69 text

https://s3.amazonaws.com/vr-asset-repo/heart_demo_slack.html

Slide 70

Slide 70 text

http://inspirit.unboring.net/

Slide 71

Slide 71 text

https://aframe.io/examples/showcase/a-blast/

Slide 72

Slide 72 text

https://github.com/wmurphyrd/adit

Slide 73

Slide 73 text

Bonus Level: Mixed Realities?

Slide 74

Slide 74 text

Marker based AR https://aframe.io/blog/arjs/

Slide 75

Slide 75 text

Mixed Realities ARKit/ARCore

Slide 76

Slide 76 text

–https://blog.mozilla.org/blog/2017/10/20/bringing-mixed-reality-web/ „Bringing Mixed Reality to the Web“

Slide 77

Slide 77 text

Conclusion

Slide 78

Slide 78 text

VR is amazing

Slide 79

Slide 79 text

WebVR is amazing… … but it’s not ready 
 (Editors Draft, Browser support) … HMD Devices are not cheap. 
 (Except: Google Cardboard) … and has high Hardware Requirements! … and it’s a pleasure to create content! … and WebXR is getting more amazing!

Slide 80

Slide 80 text

WebXR is amazing Carsten Sandtner @casarock [email protected]