Downloaded 11 times
![(HMD) VR Device
for (var i = 0; i < devices.length; ++i) {
if (devices[i] instanceof HMDVRDevice) {
gHMD = devices[i];
break;
}
}](https://image.slidesharecdn.com/webvrjax16-160421113736/85/WebVR-JAX-2016-31-320.jpg)
![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;
}
}
}](https://image.slidesharecdn.com/webvrjax16-160421113736/85/WebVR-JAX-2016-32-320.jpg)
Uploaded byCarsten Sandtner
WebVR - JAX 2016
This document provides an overview of WebVR and its history. It discusses early VR devices from the 1930s through the 1990s. Modern VR head-mounted displays like the Oculus Rift and HTC Vive are described. The WebVR API allows creating VR experiences within browsers by accessing sensors and rendering to VR displays. Frameworks like A-Frame simplify development with markup. While WebVR has potential, the specification is not finalized and high-end VR hardware can be expensive.
More Related Content
WebVR - JAX 2016
- 1. WebVR Virtual Reality inyour browsers… Carsten Sandtner (@casarock)
- 2. about:me Carsten Sandtner @casarock Head ofSoftware Development //mediaman GmbH
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11. Pop-Cultural References Tron (1982), StarTrek (1987), Matrix (1999)
- 12.
- 13. Oculus Rift DK1: 2013 DK2:2014 Consumer Version: 2016 ImagebyOculusVR,LLC
- 14.
- 15.
- 16.
- 17. Microsoft Hololens More AR,not really VR DevKit: 2016
- 18. VR In ANutshell
- 19.
- 21.
- 22.
- 23.
- 24.
- 25. Concepts For VRApps https://developer.mozilla.org/en-US/docs/Web/API/WebVR_API/WebVR_concepts
- 26. Concepts For VRApps • 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
- 27.
- 28. Disclaimer Currently an EditorsDraft! https://mozvr.github.io/webvr-spec/
- 29. Available APIs • Navigator.getVRDevices •VRDevice/HMDVRDevice • PositionSensorVRDevice • VRPositionState • VREyeParameters • VRFieldOfView/VRFieldOfViewReadOnly
- 30. Get VR Devices navigator.getVRDevices().then(function(devices){ // Handle found Devices here... });
- 31. (HMD) VR Device for(var i = 0; i < devices.length; ++i) { if (devices[i] instanceof HMDVRDevice) { gHMD = devices[i]; break; } }
- 32. Position Sensor // Ifdevice 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; } } }
- 33. 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); }
- 34. 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 { ... }
- 35. Field Of View functionsetCustomFOV(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); }
- 36. „Learn WebGL AndStart Creating VR …“
- 37. Stereoscopic Rendering inWebGL /* 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); }
- 38. „… or usea Boilerplate or Frameworks!“
- 39. three.js WebVR Renderer <scriptsrc="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>
- 40. „Don’t reinvent thesquared wheel!“
- 41. WebVR Boilerplate three.js +webVRControls https://github.com/borismus/webvr-boilerplate
- 42. Mozilla A-Frame Building blocksfor the virtual reality web
- 43. – https://aframe.io/ „Use markupto create VR experiences that work across desktop, iOS, Android, and the Oculus Rift.“
- 44. Hello World <!DOCTYPE html> <html> <head> <metacharset="utf-8"> <title>Hello, World!</title> <script src="https://aframe.io/releases/0.2.0/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>
- 46. 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>
- 48. 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>
- 50. Add Events <!DOCTYPE html> <html> <head>.. .</head> <body> <a-scene> <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>
- 51. Add Events (PureJS) var box = document.querySelector(‚#mybox'); box.addEventListener('mouseenter', function () { box.setAttribute('material', {color: '#ff0000'}); }); box.addEventListener('mouseleave', function() { box.setAttribute('material', {color: '#6173F4'}); });
- 54.
- 55.
- 56.
- 57.
- 58.
- 59.
- 60.
- 61.
- 62. – http://vizor.io/ „You don’tneed to be a game developer to create VR content on the web. With Vizor's visual editor, anyone can create and share their own VR experiences in a web browser, and it’s free.“
- 63.
- 64.
- 65.
- 66.
- 67.
- 68.
- 69. WebVR is amazing… …but it’s not ready (Editors Draft, Browser support) … and has high Hardware Requirements! … HMD Devices are not cheap. (Except: Google Cardboard) … and it’s a pleasure to create content!
- 70. WebVR is amazing CarstenSandtner @casarock sandtner@mediaman.de