Carsten Sandtner
September 30, 2017
98

# WebVR - Virtual Realities in your Browsers

My Slides for my Talk about WebVR at code.talks 2017 in Hamburg.

Create immersive expiriences without getting deep into WebGL and 3D-Mathematics.

## Carsten Sandtner

September 30, 2017

## Transcript

8. ### „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. Handcuﬀs displayed in such a room would be conﬁning, 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

13. ### Oculus Rift DK1: 2013 DK2: 2014 Consumer Version: 2016 Image

by Oculus VR, LLC

Inc.

25. ### 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

});
32. ### (HMD) VR Device for (var i = 0; i <

devices.length; ++i) { if (devices[i] instanceof HMDVRDevice) { gHMD = devices[i]; break; } }
33. ### Position Sensor // If device found, get Position Sensor. if

(gHMD) { for (var i = 0; i < devices.length; ++i) { if (devices[i] instanceof PositionSensorVRDevice && devices[i].hardwareUnitId === gHMD.hardwareUnitId) { gPositionSensor = devices[i]; break; } } }
34. ### Position State var posState = gPositionSensor.getState(); if (posState.hasPosition) { posPara.textContent

= 'Position: x' + (posState.position.x) + ' y' + (posState.position.y) + ' z' + (posState.position.z); } if (posState.hasOrientation) { orientPara.textContent = 'Orientation: x' + (posState.orientation.x) + ' y' + (posState.orientation.y) + ' z' + (posState.orientation.z); }
35. ### Eye Parameters if (gHMD.getEyeParameters !== undefined) { var eyeParamsL =

gHMD.getEyeParameters('left'); var eyeParamsR = gHMD.getEyeParameters('right'); eyeTranslationL = eyeParamsL.eyeTranslation; eyeTranslationR = eyeParamsR.eyeTranslation; eyeFOVL = eyeParamsL.recommendedFieldOfView; eyeFOVR = eyeParamsR.recommendedFieldOfView; } else { ... }
36. ### Field Of View function setCustomFOV(up, right, down, left) { var

testFOV = new VRFieldOfView(up, right, down, left); gHMD.setFieldOfView(testFOV, testFOV, 0.01, 10000.0); var lEye = gHMD.getEyeParameters('left'); var rEye = gHMD.getEyeParameters('right'); console.log(lEye.currentFieldOfView); console.log(rEye.currentFieldOfView); }

38. ### Stereoscopic Rendering in WebGL /* https://hacks.mozilla.org/2015/09/stereoscopic-rendering-in-webvr/ */ function update() {

// ... other stuff happens here ... // left eye gl.viewport(0, 0, canvas.width / 2, canvas.height); mat4.multiply(mvpMatrix, leftEyeProjectionMatrix, leftEyeViewMatrix); gl.uniformMatrix4fv(uniforms.uMVPMatrixLocation, false, mvpMatrix); gl.drawElements(mode, count, type, offset); // right eye gl.viewport(canvas.width / 2, 0, canvas.width / 2, canvas.height); mat4.multiply(mvpMatrix, rightEyeProjectionMatrix, rightEyeViewMatrix); gl.uniformMatrix4fv(uniforms.uMVPMatrixLocation, false, mvpMatrix); gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_SHORT, 0); requestAnimationFrame(update); }

40. ### three.js WebVR Renderer <script src="js/three.min.js"></script> <script src="js/effects/VREffect.js"></script> <script src="js/controls/VRControls.js"></script> <script>

... var effect = new THREE.VREffect( renderer ); ... effect.render( scene, camera ); </script>
41. ### Import WebVR polyﬁll Set up camera Initialize scene Set up

lights Declare and pass canvas Install VREﬀect Listen to window resize Create render loop Instantiate renderer Figure out responsiveness Preload assets Deal with metatags and mobile

43. ### – https://aframe.io/ „Use markup to create VR experiences that work

across desktop, iOS, Android, and the Oculus Rift.“
44. ### Hello World <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hello, World!</title>

<script src=“/aframe.min.js“></script> </head> <body> <a-scene> <a-box id="mybox" color="#6173F4" width="1" height="1" depth="1" position="1 1 1" rotation="0 0 0" scale="1 1 1"> </a-box> <a-sky color="#bbb"></a-sky> </a-scene> </body> </html>
45. ### Animated Box <!DOCTYPE html> <html> <head>. . .</head> <body> <a-scene>

<a-box id="mybox" color="#6173F4" width="1" height="1" depth="1" position="1 1 1" rotation="0 0 0" scale="1 1 1"> <a-animation attribute="rotation" repeat="indefinite" to="0 180 0"></a-animation> </a-box> </a-scene> </body> </html>
46. ### Pointer <!DOCTYPE html> <html> <head>. . .</head> <body> <a-scene> <a-box

id="mybox" color="#6173F4" width="1" height="1" depth="1" position="1 1 1" rotation="0 0 0" scale="1 1 1"> <a-animation attribute="rotation" repeat="indefinite" to="0 180 0"></a-animation> </a-box> <a-camera position="0 0 0"> <a-cursor color="#0000ff"> </a-camera> </a-scene> </body> </html>

<a-box id="mybox" color="#6173F4" width="1" height="1" depth="1" position="1 1 -5" rotation="0 0 0" scale="1 1 1"> <a-animation attribute="rotation" repeat="indefinite" to="0 180 0"></a-animation> <a-event name="mouseenter" color="#ff0000"></a-event> <a-event name="mouseleave" color="#6173F4"></a-event> </a-box> <a-camera position="0 0 0"> <a-cursor color="#0000ff"> </a-camera> <a-sky color="#bbb"></a-sky> </a-scene> </body> </html>
48. ### 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'}); });

50. ### Composing an Entity <a-entity geometry="primitive: sphere; radius: 1.5" material="color: #343434;

roughness: 0.4; sphericalEnvMap: #texture">
51. ### Composing an Entity <a-entity geometry="primitive: sphere; radius: 1.5" material="color: #343434;

roughness: 0.4; sphericalEnvMap: #texture" position="-1 2 4" rotation="45 0 90" scale="2 2 2">
52. ### Composing an Entity <a-entity geometry="primitive: sphere; radius: 1.5" material="color: #343434;

roughness: 0.4; sphericalEnvMap: #texture" position="-1 2 4" rotation="45 0 90" scale="2 2 2" animation="property: rotation; loop: true; to: 0 360 0" movement-pattern="type: spline; speed: 4">

63. ### Some use cases • Immersive reportages • 3D Handbooks/Instructions •

Panorama view without stupid plugins • Marketing instrument. (Supplements in magazines) • simple Games