Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
WebVR
Virtual Reality in your browsers…
Carsten Sandtner (@casarock)
about:me
Carsten Sandtner
@casarock
Head of Software Development
//mediaman GmbH
Short History Of VR
View Master
~1939
https://flic.kr/p/hkLi6g
Project Headsight
1961
Sega VR
1991
Virtua Racer
1992
CCBY-SA3.0,https://commons.wikimedia.org/w/index.php?curid=14111884
Virtual Boy
1995
https://flic.kr/p/6Vn8WN
Pop-Cultural
References
Tron (1982), Star Trek (1987), Matrix (1999)
VR Today
Oculus Rift
DK1: 2013
DK2: 2014
Consumer Version: 2016
ImagebyOculusVR,LLC
Google Cardboard
2014
ByEvan-Amoshttps://commons.wikimedia.org/w/index.php?curid=45580283
HTC Vive
Apr. 2016
Image©byHTCCorporation
Playstation VR
Oct. 2016
Image©bySonyComputerEntertainmentInc.
Microsoft Hololens
More AR, not really VR
DevKit: 2016
VR In A Nutshell
https://twitter.com/guystufff/status/713075541738393600/video/1
Mobile Based Setup
https://developer.mozilla.org/en-US/docs/Web/API/WebVR_API/WebVR_concepts
Computer Based Setup
https://developer.mozilla.org/en-US/docs/Web/API/WebVR_API/WebVR_concepts
Sensors
https://developer.mozilla.org/en-US/docs/Web/API/WebVR_API/WebVR_concepts
Field Of View
https://developer.mozilla.org/en-US/docs/Web/API/WebVR_API/WebVR_concepts
Concepts For VR Apps
https://developer.mozilla.org/en-US/docs/Web/API/WebVR_API/WebVR_concepts
Concepts For VR Apps
• Eye strain
• Motion Sickness
• Latency
• FPS
• Degrees of Freedom ( DoF )
• Cone of focus
• 3D Posi...
What Is WebVR?
Disclaimer
Currently an Editors Draft!
https://mozvr.github.io/webvr-spec/
Available APIs
• Navigator.getVRDevices
• VRDevice/HMDVRDevice
• PositionSensorVRDevice
• VRPositionState
• VREyeParameter...
Get VR Devices
navigator.getVRDevices().then(function(devices) {
// Handle found Devices here...
});
(HMD) VR Device
for (var i = 0; i < devices.length; ++i) {
if (devices[i] instanceof HMDVRDevice) {
gHMD = devices[i];
bre...
Position Sensor
// If device found, get Position Sensor.
if (gHMD) {
for (var i = 0; i < devices.length; ++i) {
if (device...
Position State
var posState = gPositionSensor.getState();
if (posState.hasPosition) {
posPara.textContent = 'Position: x' ...
Eye Parameters
if (gHMD.getEyeParameters !== undefined) {
var eyeParamsL = gHMD.getEyeParameters('left');
var eyeParamsR =...
Field Of View
function setCustomFOV(up, right, down, left) {
var testFOV = new VRFieldOfView(up, right, down, left);
gHMD....
„Learn WebGL And Start Creating VR …“
Stereoscopic Rendering in WebGL
/*
https://hacks.mozilla.org/2015/09/stereoscopic-rendering-in-webvr/
*/
function update()...
„… or use a Boilerplate or Frameworks!“
three.js WebVR Renderer
<script src="js/three.min.js"></script>
<script src="js/effects/VREffect.js"></script>
<script src...
„Don’t reinvent the squared wheel!“
WebVR Boilerplate
three.js + webVRControls
https://github.com/borismus/webvr-boilerplate
Mozilla A-Frame
Building blocks for the virtual reality web
– https://aframe.io/
„Use markup to create VR experiences that work
across desktop, iOS, Android, and the Oculus Rift.“
Hello World
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello, World!</title>
<script src="https://aframe....
Animated Box
<!DOCTYPE html>
<html>
<head>. . .</head>
<body>
<a-scene>
<a-box id="mybox" color="#6173F4" width="1" height...
Pointer
<!DOCTYPE html>
<html>
<head>. . .</head>
<body>
<a-scene>
<a-box id="mybox" color="#6173F4" width="1" height="1"
...
Add Events
<!DOCTYPE html>
<html>
<head>. . .</head>
<body>
<a-scene>
<a-box id="mybox" color="#6173F4" width="1" height="...
Add Events (Pure JS)
var box = document.querySelector(‚#mybox');
box.addEventListener('mouseenter', function () {
box.setA...
Input Devices?
Image©2015Microsoft
ImagebyOculusVR,LLC
Image©byHTCCorporation
ByEvan-Amos-Ownwork,CCBY-SA3.0,https://commons.wikimedia.org/w/index.php?curid=18936731
ByEvan-Amos-Ownwork,CCBY-SA3.0,https://commons.wikimedia.org/w/index.php?curid=18936731
Great Experiences
http://vizor.io
– http://vizor.io/
„You don’t need to be a game developer to create VR
content on the web. With Vizor's visual editor,
any...
http://www.360syria.com/
http://inspirit.unboring.net/
http://a-way-to-go.com/
https://www.washingtonpost.com/video/mars/public/
Conclusion
VR is amazing
WebVR is amazing…
… but it’s not ready 

(Editors Draft, Browser support)
… and has high Hardware Requirements!
… HMD Devi...
WebVR is amazing
Carsten Sandtner
@casarock
sandtner@mediaman.de
WebVR -  JAX 2016
WebVR -  JAX 2016
WebVR -  JAX 2016
WebVR -  JAX 2016
WebVR -  JAX 2016
WebVR -  JAX 2016
WebVR -  JAX 2016
WebVR -  JAX 2016
Nächste SlideShare
Wird geladen in …5
×

WebVR - JAX 2016

550 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Internet
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

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

×