Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

WebVR - JAX 2016

563 visualizaciones

Publicado el

My Slides from my WebVR Talk at JAX 2016 in MAyence.

Publicado en: Internet
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

WebVR - JAX 2016

  1. 1. WebVR Virtual Reality in your browsers… Carsten Sandtner (@casarock)
  2. 2. about:me Carsten Sandtner @casarock Head of Software Development //mediaman GmbH
  3. 3. Short History Of VR
  4. 4. View Master ~1939 https://flic.kr/p/hkLi6g
  5. 5. Project Headsight 1961
  6. 6. Sega VR 1991
  7. 7. Virtua Racer 1992 CCBY-SA3.0,https://commons.wikimedia.org/w/index.php?curid=14111884
  8. 8. Virtual Boy 1995 https://flic.kr/p/6Vn8WN
  9. 9. Pop-Cultural References Tron (1982), Star Trek (1987), Matrix (1999)
  10. 10. VR Today
  11. 11. Oculus Rift DK1: 2013 DK2: 2014 Consumer Version: 2016 ImagebyOculusVR,LLC
  12. 12. Google Cardboard 2014 ByEvan-Amoshttps://commons.wikimedia.org/w/index.php?curid=45580283
  13. 13. HTC Vive Apr. 2016 Image©byHTCCorporation
  14. 14. Playstation VR Oct. 2016 Image©bySonyComputerEntertainmentInc.
  15. 15. Microsoft Hololens More AR, not really VR DevKit: 2016
  16. 16. VR In A Nutshell
  17. 17. https://twitter.com/guystufff/status/713075541738393600/video/1
  18. 18. Mobile Based Setup https://developer.mozilla.org/en-US/docs/Web/API/WebVR_API/WebVR_concepts
  19. 19. Computer Based Setup https://developer.mozilla.org/en-US/docs/Web/API/WebVR_API/WebVR_concepts
  20. 20. Sensors https://developer.mozilla.org/en-US/docs/Web/API/WebVR_API/WebVR_concepts
  21. 21. Field Of View https://developer.mozilla.org/en-US/docs/Web/API/WebVR_API/WebVR_concepts
  22. 22. Concepts For VR Apps https://developer.mozilla.org/en-US/docs/Web/API/WebVR_API/WebVR_concepts
  23. 23. 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
  24. 24. What Is WebVR?
  25. 25. Disclaimer Currently an Editors Draft! https://mozvr.github.io/webvr-spec/
  26. 26. Available APIs • Navigator.getVRDevices • VRDevice/HMDVRDevice • PositionSensorVRDevice • VRPositionState • VREyeParameters • VRFieldOfView/VRFieldOfViewReadOnly
  27. 27. Get VR Devices navigator.getVRDevices().then(function(devices) { // Handle found Devices here... });
  28. 28. (HMD) VR Device for (var i = 0; i < devices.length; ++i) { if (devices[i] instanceof HMDVRDevice) { gHMD = devices[i]; break; } }
  29. 29. 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; } } }
  30. 30. 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); }
  31. 31. 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 { ... }
  32. 32. 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); }
  33. 33. „Learn WebGL And Start Creating VR …“
  34. 34. 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); }
  35. 35. „… or use a Boilerplate or Frameworks!“
  36. 36. 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>
  37. 37. „Don’t reinvent the squared wheel!“
  38. 38. WebVR Boilerplate three.js + webVRControls https://github.com/borismus/webvr-boilerplate
  39. 39. Mozilla A-Frame Building blocks for the virtual reality web
  40. 40. – https://aframe.io/ „Use markup to create VR experiences that work across desktop, iOS, Android, and the Oculus Rift.“
  41. 41. Hello World <!DOCTYPE html> <html> <head> <meta charset="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>
  42. 42. 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>
  43. 43. 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>
  44. 44. 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>
  45. 45. 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'}); });
  46. 46. Input Devices?
  47. 47. Image©2015Microsoft
  48. 48. ImagebyOculusVR,LLC
  49. 49. Image©byHTCCorporation
  50. 50. ByEvan-Amos-Ownwork,CCBY-SA3.0,https://commons.wikimedia.org/w/index.php?curid=18936731
  51. 51. ByEvan-Amos-Ownwork,CCBY-SA3.0,https://commons.wikimedia.org/w/index.php?curid=18936731
  52. 52. Great Experiences
  53. 53. http://vizor.io
  54. 54. – http://vizor.io/ „You don’t need 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.“
  55. 55. http://www.360syria.com/
  56. 56. http://inspirit.unboring.net/
  57. 57. http://a-way-to-go.com/
  58. 58. https://www.washingtonpost.com/video/mars/public/
  59. 59. Conclusion
  60. 60. VR is amazing
  61. 61. 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!
  62. 62. WebVR is amazing Carsten Sandtner @casarock sandtner@mediaman.de

×