Downloaded 45 times
![geildanke.com @fischaelameer
let vrDisplay;
navigator.getVRDisplays().then( function( displays ) {
if ( displays.length > 0 ) {
vrDisplay = displays[ 0 ];
} else {
console.log( 'No VR Displays found.' );
}
});](https://cdn.statically.io/img/image.slidesharecdn.com/2016-11-30jsconfau-161130054456/75/An-Introduction-to-WebVR-or-How-to-make-your-user-sick-in-60-seconds-41-2048.jpg)
![geildanke.com @fischaelameer
vrDisplay.requestPresent( [ { source: myCanvas } ] );](https://cdn.statically.io/img/image.slidesharecdn.com/2016-11-30jsconfau-161130054456/75/An-Introduction-to-WebVR-or-How-to-make-your-user-sick-in-60-seconds-43-2048.jpg)
![geildanke.com @fischaelameer
myButton.addEventListener( 'click', function() {
vrDisplay.requestPresent( [ { source: myCanvas } ] );
});](https://cdn.statically.io/img/image.slidesharecdn.com/2016-11-30jsconfau-161130054456/75/An-Introduction-to-WebVR-or-How-to-make-your-user-sick-in-60-seconds-44-2048.jpg)
![geildanke.com @fischaelameer
myButton.addEventListener( 'click', function() {
vrDisplay.requestPresent( [ { source: myCanvas } ] )
.then( function() {
vrDisplay.requestAnimationFrame( render );
});
});](https://cdn.statically.io/img/image.slidesharecdn.com/2016-11-30jsconfau-161130054456/75/An-Introduction-to-WebVR-or-How-to-make-your-user-sick-in-60-seconds-45-2048.jpg)
![geildanke.com @fischaelameer
let pose = vrDisplay.getPose();
console.log( pose.orientation );
// [ 0, 0, 0, 1 ]
// [ -0.0000724312, -0.06752134, 0.0028374712, 0.9977243 ]
console.log( pose.position );
// null
// [ 0.05234, -0.043485, 0.0003243 ]](https://cdn.statically.io/img/image.slidesharecdn.com/2016-11-30jsconfau-161130054456/75/An-Introduction-to-WebVR-or-How-to-make-your-user-sick-in-60-seconds-48-2048.jpg)
![geildanke.com @fischaelameer
let leftEyeParameters = vrDisplay.getEyeParameters( 'left' );
console.log( leftEyeParameters.offset );
// [ -0.03, 0, 0 ]
console.log( leftEyeParameters.renderWidth );
// 640.5
console.log( leftEyeParameters.renderHeight );
// 721](https://cdn.statically.io/img/image.slidesharecdn.com/2016-11-30jsconfau-161130054456/75/An-Introduction-to-WebVR-or-How-to-make-your-user-sick-in-60-seconds-49-2048.jpg)
Uploaded byGeilDanke
An Introduction to WebVR – or How to make your user sick in 60 seconds
The document provides an extensive introduction to WebVR, covering hardware concepts, APIs, and user experience design in virtual reality. It includes practical coding examples using the Three.js library, discussing browser compatibility and techniques to avoid motion sickness in VR environments. Additionally, it emphasizes the importance of comfort, interpretability, and design principles for effective VR application development.
An Introduction to WebVR – or How to make your user sick in 60 seconds
- 1. geildanke.com @fischaelameer An Introductionto WebVR How to make your user sick in 60 seconds. or
- 2. geildanke.com @fischaelameer You shouldcare about WebVR.
- 3.
- 4. geildanke.com @fischaelameer Hardware &Concepts WebVR API
- 5. geildanke.com @fischaelameer Hardware &Concepts WebVR API UX Design & VR
- 6. @fischaelameergeildanke.com Virtual Reality istricking our eyes and brain to think of a 2D image to be in 3D.
- 7. @fischaelameergeildanke.com Virtual Reality changesthe way we relate to technology.
- 8. geildanke.com @fischaelameer Mobile VRDesktop VR Standalone VR Google Cardboard Samsung Gear VR Google Daydream View
- 9. geildanke.com @fischaelameer Mobile VRDesktop VR Standalone VR Oculus Rift HTC Vive Playstation VR
- 10. geildanke.com @fischaelameer Mobile VRDesktop VR Standalone VR https://en.wikipedia.org/wiki/Virtual_Boy
- 11.
- 12.
- 13.
- 14.
- 15.
- 16. geildanke.com @fischaelameer IPD =Interpupillary distance
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34. geildanke.com @fischaelameer x: 0,y: 1.6, z: 0
- 35. geildanke.com @fischaelameer x: 0,y: 1.6, z: 0
- 36.
- 37. geildanke.com @fischaelameer let scene= new THREE.Scene(); let camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 10000 ); let renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); let geometry = new THREE.SphereGeometry( 500, 60, 40 ); geometry.scale( -1, 1, 1 ); let video = document.createElement( 'video' ); let videoTexture = new THREE.VideoTexture( video ); let videoMaterial = new THREE.MeshBasicMaterial( { map: videoTexture } ); let mesh = new THREE.Mesh( geometry, videoMaterial ); function render() { requestAnimationFrame( render ); renderer.render( scene, camera ); } render();
- 38. geildanke.com @fischaelameer let scene= new THREE.Scene(); let camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 10000 ); let renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); let geometry = new THREE.SphereGeometry( 500, 60, 40 ); geometry.scale( -1, 1, 1 ); let video = document.createElement( 'video' ); let videoTexture = new THREE.VideoTexture( video ); let videoMaterial = new THREE.MeshBasicMaterial( { map: videoTexture } ); let mesh = new THREE.Mesh( geometry, videoMaterial ); function render() { requestAnimationFrame( render ); renderer.render( scene, camera ); } render();
- 39. geildanke.com @fischaelameer let scene= new THREE.Scene(); let camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 10000 ); let renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); let geometry = new THREE.SphereGeometry( 500, 60, 40 ); geometry.scale( -1, 1, 1 ); let video = document.createElement( 'video' ); let videoTexture = new THREE.VideoTexture( video ); let videoMaterial = new THREE.MeshBasicMaterial( { map: videoTexture } ); let mesh = new THREE.Mesh( geometry, videoMaterial ); function render() { requestAnimationFrame( render ); renderer.render( scene, camera ); } render();
- 40. geildanke.com @fischaelameer let scene= new THREE.Scene(); let camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 10000 ); let renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); let geometry = new THREE.SphereGeometry( 500, 60, 40 ); geometry.scale( -1, 1, 1 ); let video = document.createElement( 'video' ); let videoTexture = new THREE.VideoTexture( video ); let videoMaterial = new THREE.MeshBasicMaterial( { map: videoTexture } ); let mesh = new THREE.Mesh( geometry, videoMaterial ); function render() { requestAnimationFrame( render ); renderer.render( scene, camera ); } render();
- 41. geildanke.com @fischaelameer let vrDisplay; navigator.getVRDisplays().then(function( displays ) { if ( displays.length > 0 ) { vrDisplay = displays[ 0 ]; } else { console.log( 'No VR Displays found.' ); } });
- 42.
- 43. geildanke.com @fischaelameer vrDisplay.requestPresent( [{ source: myCanvas } ] );
- 44. geildanke.com @fischaelameer myButton.addEventListener( 'click',function() { vrDisplay.requestPresent( [ { source: myCanvas } ] ); });
- 45. geildanke.com @fischaelameer myButton.addEventListener( 'click',function() { vrDisplay.requestPresent( [ { source: myCanvas } ] ) .then( function() { vrDisplay.requestAnimationFrame( render ); }); });
- 46. geildanke.com @fischaelameer function render(){ vrDisplay.requestAnimationFrame( render ); }
- 47. geildanke.com @fischaelameer function render(){ vrDisplay.requestAnimationFrame( render ); // update display pose // update scene and meshes }
- 48. geildanke.com @fischaelameer let pose= vrDisplay.getPose(); console.log( pose.orientation ); // [ 0, 0, 0, 1 ] // [ -0.0000724312, -0.06752134, 0.0028374712, 0.9977243 ] console.log( pose.position ); // null // [ 0.05234, -0.043485, 0.0003243 ]
- 49. geildanke.com @fischaelameer let leftEyeParameters= vrDisplay.getEyeParameters( 'left' ); console.log( leftEyeParameters.offset ); // [ -0.03, 0, 0 ] console.log( leftEyeParameters.renderWidth ); // 640.5 console.log( leftEyeParameters.renderHeight ); // 721
- 50. geildanke.com @fischaelameer function render(){ vrDisplay.requestAnimationFrame( render ); // update display pose // update scene and meshes vrDisplay.submitFrame( pose ); }
- 51.
- 52.
- 53.
- 54.
- 55. geildanke.com @fischaelameer Browser WebVRWebGL three.js WebVRPolyfill https://github.com/googlevr/webvr-polyfill
- 56. geildanke.com @fischaelameer Browser WebVRWebGL three.js three.js VRControlsthree.js VREffect WebVR Polyfill Ricardo Cabello https://github.com/mrdoob/three.js
- 57. geildanke.com @fischaelameer Browser WebVRWebGL three.js three.js VRControlsthree.js VREffect WebVR Manager WebVR Polyfill Boris Smus https://github.com/borismus/webvr-boilerplate
- 58. geildanke.com @fischaelameer WebGL &static image fallbacks
- 59. geildanke.com @fischaelameer WebGL Touch &Gyroscope Input
- 60. geildanke.com @fischaelameer Mobile andDesktop VR Devices
- 61. geildanke.com @fischaelameer Mobile andDesktop VR Devices Progressive Loading
- 62. geildanke.com @fischaelameer Browser WebVRWebGL three.js three.js VRControlsthree.js VREffect WebVR Polyfill WebVR Manager
- 63. geildanke.com @fischaelameer Browser WebVRGamepad WebGL three.js three.jsVRControls three.js VREffect WebVR Polyfill WebVR Manager
- 64. geildanke.com @fischaelameer Browser WebVRGamepad WebAudioWebGL three.js three.js VRControls three.js VREffect WebVR Polyfill WebVR Manager
- 65. geildanke.com @fischaelameer Browser WebVRGamepad WebAudio Web SpeechWebGL three.js three.js VRControls three.js VREffect WebVR Polyfill WebVR Manager
- 66.
- 67.
- 68.
- 69.
- 70.
- 71. geildanke.com @fischaelameer It wasthe pioneer days; people had to make their own interrogation rooms. Out of cornmeal. These endless days are finally ending in a blaze. When I say, 'I love you,' it's not because I want you or because I can't have you. It's my estimation that every man ever got a statue made of him was one kind of sommbitch or another. Oh my god you will never believe what happened at school today. From beneath you, it devours. I am never gonna see a merman, ever. It was supposed to confuse him, but it just made him peppy. It was like the Heimlich, with stripes! How did your brain even learn human speech? I'm just so curious. Apocalypse, we've all been there; the same old trips, why should we care? Frankly, it's ludicrous to have these interlocking bodies and not...interlock. I just don't see why everyone's always picking on Marie-Antoinette. You're the one freaky thing in my freaky world that still makes sense to me. You are talking crazy-person talk. http://www.commercekitchen.com/whedon-ipsum/
- 72.
- 73.
- 74.
- 75.
- 76.
- 77. geildanke.com @fischaelameer 130° Comfortably bending30° to each side
- 78. geildanke.com @fischaelameer 230° Stretching 80°to each side https://www.youtube.com/watch?v=00vzW2-PvvE
- 79.
- 80.
- 81. geildanke.com @fischaelameer avoid eyestrain:use darker colors avoid focussing on different depths do not trigger phobias use correct scales do not move things fast towards the camera do not attach things near the camera make the user comfortable
- 82. geildanke.com @fischaelameer avoid eyestrain:use darker colors avoid focussing on different depths do not trigger phobias use correct scales do not move things fast towards the camera do not attach things near the camera make the user comfortable
- 83. geildanke.com @fischaelameer avoid eyestrain:use darker colors avoid focussing on different depths do not trigger phobias use correct scales do not move things fast towards the camera do not attach things near the camera make the user comfortable
- 84. geildanke.com @fischaelameer avoid eyestrain:use darker colors avoid focussing on different depths do not trigger phobias use correct scales do not move things fast towards the camera do not attach things near the camera make the user comfortable
- 85. geildanke.com @fischaelameer avoid eyestrain:use darker colors avoid focussing on different depths do not trigger phobias use correct scales do not move things fast towards the camera do not attach things near the camera make the user comfortable
- 86. geildanke.com @fischaelameer avoid eyestrain:use darker colors avoid focussing on different depths do not trigger phobias use correct scales do not move things fast towards the camera do not attach things near the camera make the user comfortable
- 87. geildanke.com @fischaelameerIcon madeby Freepik from www.flaticon.com
- 88. geildanke.com @fischaelameerIcon madeby Freepik from www.flaticon.com
- 89.
- 90.
- 91. geildanke.com @fischaelameer no acceleration donot move the horizon or the camera always keep a low latency and a high frame rate avoid flicker and blur add a stable focus point support short usage abstract design is better than realistic do not make your users sick!
- 92. geildanke.com @fischaelameer no acceleration donot move the horizon or the camera always keep a low latency and a high frame rate avoid flicker and blur add a stable focus point support short usage abstract design is better than realistic do not make your users sick!
- 93. geildanke.com @fischaelameer no acceleration donot move the horizon or the camera always keep a low latency and a high frame rate avoid flicker and blur add a stable focus point support short usage abstract design is better than realistic do not make your users sick!
- 94. geildanke.com @fischaelameer no acceleration donot move the horizon or the camera always keep a low latency and a high frame rate avoid flicker and blur add a stable focus point support short usage abstract design is better than realistic do not make your users sick!
- 95. geildanke.com @fischaelameer no acceleration donot move the horizon or the camera always keep a low latency and a high frame rate avoid flicker and blur add a stable focus point support short usage abstract design is better than realistic do not make your users sick!
- 96. geildanke.com @fischaelameer no acceleration donot move the horizon or the camera always keep a low latency and a high frame rate avoid flicker and blur add a stable focus point support short usage abstract design is better than realistic do not make your users sick!
- 97. geildanke.com @fischaelameer no acceleration donot move the horizon or the camera always keep a low latency and a high frame rate avoid flicker and blur add a stable focus point support short usage abstract design is better than realistic do not make your users sick!
- 98. geildanke.com @fischaelameer It wasthe pioneer days; people had to make their own interrogation rooms. Out of cornmeal. These endless days are finally ending in a blaze. When I say, 'I love you,' it's not because I want you or because I can't have you. It's my estimation that every man ever got a statue made of him was one kind of sommbitch or another. Oh my god you will never believe what happened at school today. From beneath you, it devours. I am never gonna see a merman, ever. It was supposed to confuse him, but it just made him peppy. It was like the Heimlich, with stripes! How did your brain even learn human speech? I'm just so curious. Apocalypse, we've all been there; the same old trips, why should we care? Frankly, it's ludicrous to have these interlocking bodies and not...interlock. I just don't see why everyone's always picking on Marie-Antoinette. You're the one freaky thing in my freaky world that still makes sense to me. You are talking crazy-person talk. http://www.commercekitchen.com/whedon-ipsum/
- 99. geildanke.com @fischaelameer It wasthe pioneer days; people had to make their own interrogation rooms. Out of cornmeal. These endless days are finally ending in a blaze. When I say, 'I love you,' it's not because I want you or because I can't have you. It's my estimation that every man ever got a statue made of him was one kind of sommbitch or another. Oh my god you will never believe what happened at school today. From beneath you, it devours. I am never gonna see a merman, ever. It was supposed to confuse him, but it just made him peppy. It was like the Heimlich, with stripes! How did your brain even learn human speech? I'm just so curious. Apocalypse, we've all been there; the same old trips, why should we care? Frankly, it's ludicrous to have these interlocking bodies and not...interlock. I just don't see why everyone's always picking on Marie-Antoinette. You're the one freaky thing in my freaky world that still makes sense to me. You are talking crazy-person talk. http://www.commercekitchen.com/whedon-ipsum/
- 100.
- 101.
- 102. geildanke.com @fischaelameer Goodbye, UXmetaphors!
- 103. geildanke.com @fischaelameer Goodbye, UXmetaphors!
- 104.
- 105. @fischaelameergeildanke.com You are responsiblefor the well-being of your users!
- 106. geildanke.com @fischaelameer https://twitter.com/Tojiro https://twitter.com/joshcarpenter https://twitter.com/borismus https://twitter.com/thealphamike Amazing peopleto follow https://webvr-slack.herokuapp.com/ https://www.reddit.com/r/WebVR/ Community http://www.uxofvr.com/ https://mozvr.com/ https://iswebvrready.org/ General information https://github.com/clayallsopp/react-vr https://w3c.github.io/webvr/ https://aframe.io/ https://github.com/borismus/webvr-boilerplate https://github.com/googlevr/webvr-polyfill https://threejs.org/ API, frameworks, libraries https://twitter.com/Lady_Ada_King https://twitter.com/arturitu https://twitter.com/snickersnax
- 107.