how to make your users sick in 60 seconds – about ux design, webvr and react vr

geildanke.com @ RuhrJS17 @fischaelameer

How to Make Your User Sick in 60 Seconds

About UX Design, WebVR, and ReactVR

http://geildanke.com


You Should Care About WebVR Because You Care About Your Users.



Concepts



Concepts Code



Concepts Code Design



Virtual Reality Is Tricking Our Eyes And Brain to Think of a 2D Image to Be in 3D.



Virtual Reality Changes The Way We Relate to Technology.



VR Is Good For Understanding Spatial Relationships



VR Is Good For Multi Tasking



VR Is Good For Simulations



What Is VR Bad At?



https://www.reddit.com/r/VRFail/comments/4p9zgj/pool_shot/



VR Concepts:Stereoscopic Images



IPD



InterPupillary Distance



VR Concepts:Tracking



Rotation Position



http://bit.ly/2iK1Zv7



Rotation Position



WebVR Concepts:Tech Stack



Browser

https://github.com/mrdoob/three.js




Browser

WebGL





Browser

WebGL WebVR





Browser

WebGL WebVR

three.js

Ricardo Cabello





https://caniuse.com/#search=webvr



Browser

WebGL WebVR

three.js WebVR Polyfill

https://github.com/googlevr/webvr-polyfill



Static Image With Fallback




WebGL With Touch And Gyroscope




WebGL With Touch And Gyroscope

Mobile & Desktop VR Devices



WebVR Code:Full-Sphere Video



x: 0, y: 0, z: 0



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();



let vrDisplay;

navigator.getVRDisplays().then( function( displays ) { if ( displays.length > 0 ) { vrDisplay = displays[ 0 ]; } else { console.log( 'No VR Displays found.' ); }});



VRDisplay.isConnectedVRDisplay.isPresenting

VRDisplay.getEyeParameters()VRDisplay.requestAnimationFrame()



vrDisplay.requestPresent( [ { source: myCanvas } ] );



myButton.addEventListener( 'click', function() { vrDisplay.requestPresent( [ { source: myCanvas } ] );});



myButton.addEventListener( 'click', function() { vrDisplay.requestPresent( [ { source: myCanvas } ] ) .then( function() { vrDisplay.requestAnimationFrame( render ); });});



function render() { vrDisplay.requestAnimationFrame( render );

}




// update display pose // update scene and meshes

}



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 ]



let leftEyeParameters = vrDisplay.getEyeParameters( 'left' );

console.log( leftEyeParameters.offset );// [ -0.03, 0, 0 ]console.log( leftEyeParameters.renderWidth );// 640.5console.log( leftEyeParameters.renderHeight );// 721




// update display pose // update scene and meshes

vrDisplay.submitFrame( pose );}



Browser

WebGL WebVR




Browser

WebGL WebVR


A-Frame



Browser

WebGL WebVR


A-FrameReact VR



A-Frameby Mozilla


<a-box> <a-cone> <a-cylinder> <a-dodecahedron><a-icosahedron> <a-octahedron> <a-ring> <a-sphere><a-tetrahedron> <a-torus-knot> <a-torus>


<a-video> <a-videosphere> <a-image> <a-sound><a-gltf-model> <a-obj-model> <a-text><a-light> <a-sky> <a-cursor>

<a-box> <a-cone> <a-cylinder> <a-dodecahedron><a-icosahedron> <a-octahedron> <a-ring> <a-sphere><a-tetrahedron> <a-torus-knot> <a-torus>



React VRby Facebook



import React from 'react';import { AppRegistry, VideoPano, View } from 'react-vr';

class GEILDANKE_REACTVR_PANO extends React.Component { render() { return ( <View> <VideoPano source={{uri: 'video.mp4'}} /> </View> ); }};

AppRegistry.registerComponent('GEILDANKE_REACTVR_PANO', () => GEILDANKE_REACTVR_PANO);



Box Cylinder CylindricalPanel Plane Sphere

AmbientLight DirectionalLight PointLight SpotLight

Model Sound VrButton

Pano Video VideoPano



Browser

WebGL WebVR


React VR A-Frame



Browser

WebGLGamepad WebVR


React VR A-Frame



Browser

WebGLGamepad Audio WebVR


React VR A-Frame



Browser

WebGLGamepad Audio WebVR Speech


React VR A-Frame



Libraries Like React VRWill Not Fix Your UX Design



UX DesignFor WebVR Applications



Comfort

Interpretability

Usefulness

Delight

Beau Cronin

https://medium.com/@beaucronin/the-hierarchy-of-needs-in-virtual-reality-development-4333a4833acc




PresenceComfort

Interpretability

Usefulness

Delight

Beau Cronin





Presence Comfort

Interpretability

Usefulness

Delight

Safety



UX Design For WebVRComfort & Ergonomics



It was the 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/



70°



130°

Comfortably bending 30° to each side



Stretching 80° to each side

https://www.youtube.com/watch?v=00vzW2-PvvE


https://www.youtube.com/watch?v=00vzW2-PvvE


0.5m

20m



~10ppd

60ppd

Today’s Pixel Density

Optimal Pixel Density


geildanke.com @ RuhrJS17 @fischaelameerhttps://www.youtube.com/watch?v=ES9jArHRFHQ



DMM



Distance-Independent MillimeterDMM


https://sizecalc.com


UX Design For WebVRInterpretability



Use correct scales



Add feedback



Add gaze cues



UX Design For WebVRSafety



Do Not Trigger Phobias.



Do Not Move Things FastTowards the Camera.

Do Not Trigger Phobias.



Do Not Attach ThingsNear the Camera.



Do Not Attach ThingsNear the Camera.

Respect the Personal Space.


geildanke.com @ RuhrJS17 @fischaelameerIcon made by Freepik from www.flaticon.com


http://www.flaticon.com


Do Not Use Acceleration.

https://web.colby.edu/cogblog/2016/05/09/2451/



Do Not Move the Horizon Or the Camera.





Do Not Move the Horizon Or the Camera.


Keep a Low Latency And a High Framerate.




Add a Stable Focus Point.

http://vtrav.com/2015/04/nose-reduces-simulator-sickness/



Avoid Flicker Or Blur.


http://vtrav.com/2015/04/nose-reduces-simulator-sickness/



Avoid Flicker Or Blur.


Support Short Usage.http://vtrav.com/2015/04/nose-reduces-simulator-sickness/



Abstract Patterns Are Better Than Realistic Ones.

https://blog.mozvr.com/a-painter/ http://www.kotaku.co.uk/2016/12/16/the-state-of-virtual-reality-in-2016



You Are Responsible For The Well-Being Of Your Users.



https://www.reddit.com/r/Vive/comments/4i49d3/when_instinct_takes_over/

https://www.reddit.com/r/VRFail/comments/4s7nc1/friend_loses_his_vrginity_and_then_some_crappy/



You Are Responsible For The Well-Being Of Your Users.



http://www.uxofvr.com/

https://webvr.rocks/

General Information

https://webvr-slack.herokuapp.com/

Community

https://www.reddit.com/r/WebVR/

https://w3c.github.io/webvr/

https://github.com/googlevr/webvr-polyfill

https://threejs.org/

API, Frameworks, Libraries

https://facebook.github.io/react-vr/

https://aframe.io/

https://geildanke.com/en/vr/

Geil,Danke!

https://bit.ly/webvrcomet



Thanks For Listening!
