getting started in vr with js
TRANSCRIPT
![Page 1: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/1.jpg)
Getting Started in VR with JS
![Page 2: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/2.jpg)
Getting Started in VR with JSThe Dream of the 90s is Alive!
#empirejs2015
![Page 3: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/3.jpg)
![Page 4: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/4.jpg)
![Page 5: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/5.jpg)
![Page 6: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/6.jpg)
![Page 7: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/7.jpg)
MARRY ME, ALICIA!
![Page 8: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/8.jpg)
GO SARNIA BEES!
![Page 9: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/9.jpg)
![Page 10: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/10.jpg)
![Page 11: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/11.jpg)
![Page 12: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/12.jpg)
![Page 13: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/13.jpg)
![Page 14: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/14.jpg)
20 years later …
![Page 15: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/15.jpg)
![Page 16: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/16.jpg)
![Page 17: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/17.jpg)
![Page 18: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/18.jpg)
Why would this time be any different?
![Page 19: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/19.jpg)
VR SHE WROTE
![Page 20: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/20.jpg)
JavaScript FTWWebVR allows us to work in JS “native” browser environment.
![Page 21: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/21.jpg)
![Page 22: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/22.jpg)
![Page 23: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/23.jpg)
![Page 24: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/24.jpg)
What’s a headset?
WOAH! your app renders
1. delivers position data to
2. surface to displaystereoscopic image
.js
![Page 25: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/25.jpg)
A device that gives positional data & a surface to draw on?Sounds awful like a smart phone!
![Page 26: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/26.jpg)
![Page 28: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/28.jpg)
I’ll be giving these outCome see me in the Q&A lounge after this and throughout the conference.
![Page 29: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/29.jpg)
Forgiveness please …
![Page 30: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/30.jpg)
I AM A (DEMO) GOD HERE
![Page 32: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/32.jpg)
Download ALL THE THINGS!Drivers and SDK from developer.oculus.com Firefox WebVR Browser from mozvr.com/downloads Chromium WebVR Browser from bit.ly/1DPjgDQ
![Page 33: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/33.jpg)
What is WebVR?
![Page 34: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/34.jpg)
What it's not!
![Page 35: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/35.jpg)
Not a Virtual Reality DOM
![Page 36: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/36.jpg)
![Page 37: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/37.jpg)
![Page 38: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/38.jpg)
![Page 39: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/39.jpg)
Not a WebGL replacementWebGL is a framework to build your own 3D graphics rendering pipeline.
![Page 40: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/40.jpg)
Math is HARDComputing per pixel transform and coloring takes a lot of work.
![Page 41: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/41.jpg)
![Page 42: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/42.jpg)
Use three.jsProvides a higher level abstraction that is easier to work with.
![Page 44: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/44.jpg)
no_vr.html<!DOCTYPE html> <html lang="en"> <head> <title>No VR</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <meta name="mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <style> body { background-color: #000; color: #fff; margin: 0px; padding: 0; overflow: hidden; } </style> </head> <body> <script src="js/three.js"></script> <script src="js/no_vr.js"></script> </body> </html>
![Page 45: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/45.jpg)
no_vr.html</style> </head> <body> <script src="js/three.js"></script> <script src="js/no_vr.js"></script> </body> </html>
![Page 46: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/46.jpg)
no_vr.js - Create a Renderervar renderer = new THREE.WebGLRenderer({antialias: true}); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement);
var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.3, 10000 );
var light = new THREE.PointLight(0xffffff, 1.0, 0); light.position.set(0,0,0); scene.add(light);
var bitGeometry = new THREE.DodecahedronGeometry(0.5); var bitMaterial = new THREE.MeshLambertMaterial({
![Page 47: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/47.jpg)
no_vr.js - Let Your Scene be Seenvar renderer = new THREE.WebGLRenderer({antialias: true}); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement);
var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.3, 10000 );
var light = new THREE.PointLight(0xffffff, 1.0, 0); light.position.set(0,0,0); scene.add(light);
var bitGeometry = new THREE.DodecahedronGeometry(0.5); var bitMaterial = new THREE.MeshLambertMaterial({
![Page 48: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/48.jpg)
no_vr.js - Let there be light!var renderer = new THREE.WebGLRenderer({antialias: true}); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement);
var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.3, 10000 );
var light = new THREE.PointLight(0xffffff, 1.0, 0); light.position.set(0,0,0); scene.add(light);
var bitGeometry = new THREE.DodecahedronGeometry(0.5); var bitMaterial = new THREE.MeshLambertMaterial({
![Page 49: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/49.jpg)
no_vr.js - Have Something to Seevar light = new THREE.PointLight(0xffffff, 1.0, 0); light.position.set(0,0,0); scene.add(light);
var bitGeometry = new THREE.DodecahedronGeometry(0.5); var bitMaterial = new THREE.MeshLambertMaterial({ color: 0x00ffff, shading: THREE.FlatShading }); var bit = new THREE.Mesh(bitGeometry, bitMaterial); bit.position.z = -2; scene.add(bit);
var planeGeometry = new THREE.PlaneBufferGeometry(1000, 1000, 1000); var planeMaterial = new THREE.MeshPhongMaterial({ color: 0x0000ff, shading: THREE.DoubleSide
![Page 50: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/50.jpg)
no_vr.js - Get Animatedscene.add(plane);
function animate(time) { bit.position.x = Math.sin(time/1000) * 2; bit.position.y = Math.sin(time/2000); bit.rotation.y += 0.01; bit.rotation.z += 0.01;
renderer.render(scene, camera);
requestAnimationFrame( animate ); }
animate();
![Page 51: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/51.jpg)
no_vr.js - Get Animatedscene.add(plane);
function animate(time) { bit.position.x = Math.sin(time/1000) * 2; bit.position.y = Math.sin(time/2000); bit.rotation.y += 0.01; bit.rotation.z += 0.01;
renderer.render(scene, camera);
requestAnimationFrame( animate ); }
animate();
![Page 52: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/52.jpg)
no_vr.js - Get Animatedscene.add(plane);
function animate(time) { bit.position.x = Math.sin(time/1000) * 2; bit.position.y = Math.sin(time/2000); bit.rotation.y += 0.01; bit.rotation.z += 0.01;
renderer.render(scene, camera);
requestAnimationFrame( animate ); }
animate();
![Page 53: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/53.jpg)
no_vr.js - Get Animatedscene.add(plane);
function animate(time) { bit.position.x = Math.sin(time/1000) * 2; bit.position.y = Math.sin(time/2000); bit.rotation.y += 0.01; bit.rotation.z += 0.01;
renderer.render(scene, camera);
requestAnimationFrame( animate ); }
animate();
![Page 54: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/54.jpg)
no_vr.js - Get Animatedscene.add(plane);
function animate(time) { bit.position.x = Math.sin(time/1000) * 2; bit.position.y = Math.sin(time/2000); bit.rotation.y += 0.01; bit.rotation.z += 0.01;
renderer.render(scene, camera);
requestAnimationFrame( animate ); }
animate();
![Page 55: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/55.jpg)
Apply some WebVR and …
![Page 57: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/57.jpg)
What is WebVR?
![Page 58: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/58.jpg)
![Page 59: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/59.jpg)
WebVR is a device interfaceDetect and poll Head Mounted Displays (HMDs) and other position reporting devices.
![Page 60: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/60.jpg)
navigator.getVRDevices()Through callback or promise returns a list of VR devices of two types …
![Page 61: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/61.jpg)
PositionSensorVRDeviceInformation about position and orientation
![Page 62: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/62.jpg)
HMDVRDeviceInforms you have a surface to render on and information about the eyes.
![Page 63: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/63.jpg)
Math is HARDTranslating all this is difficult, but luckily three.js comes to the rescue.
![Page 64: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/64.jpg)
Nearly all WebVR demos use VRControls and VREffectFound in three.js examples alongside other great utilities.
github.com/mrdoob/three.js/tree/master/examples/js
![Page 65: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/65.jpg)
basic_vr.html<!DOCTYPE html> <html lang="en"> <head> <title>Basic VR</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <meta name="mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <style> body { background-color: #000; color: #fff; margin: 0px; padding: 0; overflow: hidden; } </style> </head>
<body>
<script src="js/three.js"></script> <script src="js/VRControls.js"></script> <script src="js/VREffect.js"></script> <script src="js/basic_vr.js"></script> </body> </html>
![Page 66: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/66.jpg)
basic_vr.html</style> </head> <body> <script src="js/three.js"></script> <script src="js/VRControls.js"></script> <script src="js/VREffect.js"></script> <script src="js/basic_vr.js"></script> </body> </html>
![Page 67: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/67.jpg)
basic_vr.js - Introduce VRControlsvar renderer = new THREE.WebGLRenderer({antialias: true}); renderer.setPixelRatio(window.devicePixelRatio); document.body.appendChild(renderer.domElement);
var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.3, 10000 );
var controls = new THREE.VRControls(camera); var effect = new THREE.VREffect(renderer); effect.setSize(window.innerWidth, window.innerHeight);
var light = new THREE.PointLight(0xffffff, 1.0, 15); light.position.set(0,0,0); scene.add(light);
![Page 68: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/68.jpg)
VRControlsHandles PositionSensorDevice and manipulates the camera orientation.
![Page 69: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/69.jpg)
VRControl.js - Initializationfunction gotVRDevices( devices ) devices = filterInvalidDevices( devices );
for ( var i = 0; i < devices.length; i ++ ) { if ( devices[ i ] instanceof PositionSensorVRDevice ) { vrInputs.push( devices[ i ] ); } }
if ( onError ) onError( 'HMD not available' ); }
if ( navigator.getVRDevices ) { navigator.getVRDevices().then( gotVRDevices ); }
![Page 70: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/70.jpg)
basic_vr.js - Introduce VREffectvar renderer = new THREE.WebGLRenderer({antialias: true}); renderer.setPixelRatio(window.devicePixelRatio); document.body.appendChild(renderer.domElement);
var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.3, 10000 );
var controls = new THREE.VRControls(camera); var effect = new THREE.VREffect(renderer); effect.setSize(window.innerWidth, window.innerHeight);
var light = new THREE.PointLight(0xffffff, 1.0, 15); light.position.set(0,0,0); scene.add(light);
![Page 71: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/71.jpg)
VREffectHandles HMDVRDevice and uses it to render a stereoscopic view
![Page 72: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/72.jpg)
VREffect.js - Initialization
function gotVRDevices( devices ) { for ( var i = 0; i < devices.length; i ++ ) { if ( devices[ i ] instanceof HMDVRDevice ) { ///… }
if ( vrHMD === undefined ) { if ( onError ) onError( 'HMD not available' ); } }
![Page 73: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/73.jpg)
VREffect.js - Remember the "..."
var eyeParamsL = vrHMD.getEyeParameters( 'left' ); var eyeParamsR = vrHMD.getEyeParameters( 'right' );
eyeTranslationL = eyeParamsL.eyeTranslation; eyeTranslationR = eyeParamsR.eyeTranslation; eyeFOVL = eyeParamsL.recommendedFieldOfView; eyeFOVR = eyeParamsR.recommendedFieldOfView;
![Page 74: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/74.jpg)
basic_vr.js - Go Full Screenvar vrMode = false;
function enterVR() { effect.setFullScreen(true); vrMode = true; }
function exitVR() { effect.setFullScreen(false); vrMode = false; };
function toggleVR() { if (!vrMode) { enterVR(); } else {
![Page 75: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/75.jpg)
VREffect - Full Screen VR display
this.setFullScreen = function ( boolean ) { if ( vrHMD === undefined ) return; if ( isFullscreen === boolean ) return;
if ( canvas.mozRequestFullScreen ) { canvas.mozRequestFullScreen( { vrDisplay: vrHMD } ); } else if ( canvas.webkitRequestFullscreen ) { canvas.webkitRequestFullscreen( { vrDisplay: vrHMD } ); } };
![Page 76: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/76.jpg)
basic_vr.js - Let Reality Take Controlfunction animate(time) { bit.position.x = Math.sin(time/1000) * 2; bit.position.y = Math.sin(time/2000); bit.rotation.y += 0.01; bit.rotation.z += 0.01;
controls.update(); effect.render(scene, camera);
requestAnimationFrame( animate ); }
animate();
![Page 77: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/77.jpg)
VRControls.js - Get State from VR Devicethis.update = function () { for ( var i = 0; i < vrInputs.length; i ++ ) { var vrInput = vrInputs[ i ]; var state = vrInput.getState();
if ( state.orientation !== null ) { object.quaternion.copy( state.orientation ); }
if ( state.position !== null ) { object.position.copy( state.position ) .multiplyScalar( scope.scale ); } } };
![Page 78: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/78.jpg)
basic_vr.js - The Full VR Effectfunction animate(time) { bit.position.x = Math.sin(time/1000) * 2; bit.position.y = Math.sin(time/2000); bit.rotation.y += 0.01; bit.rotation.z += 0.01;
controls.update(); effect.render(scene, camera);
requestAnimationFrame( animate ); }
animate();
![Page 79: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/79.jpg)
Two Cameras for the price of ONE!It creates a camera for each eye, shifts them from the main camera location based on HMDVRDevice eye information, then renders the view for each!
![Page 80: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/80.jpg)
Confession
![Page 81: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/81.jpg)
This doesn’t work on mobile browsers!WebVR is still in development.
![Page 82: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/82.jpg)
![Page 83: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/83.jpg)
webvr-polyfillSupplies Mobile device gyroscope as PositionSensorVRDevice, screen as HMDDevice.
github.com/borismus/webvr-polyfill
![Page 84: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/84.jpg)
webvr-boilerplateA very basic skeleton much like you’ve seen here today.
github.com/borismus/webvr-boilerplate
![Page 85: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/85.jpg)
basic_vr_mobile.html - Drop It In<!DOCTYPE html> <html lang="en"> <head> <title>Basic VR Mobile</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <meta name="mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <style> body { background-color: #000; color: #fff; margin: 0px; padding: 0; overflow: hidden; } </style> </head>
<body>
<script src="js/three.js"></script> <script src="js/VRControls.js"></script> <script src="js/VREffect.js"></script> <script src="js/webvr-polyfill.js"></script> <script src="js/basic_vr.js"></script> </body> </html>
![Page 86: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/86.jpg)
basic_vr_mobile.html - Drop It In
</style> </head> <body> <script src="js/three.js"></script> <script src="js/VRControls.js"></script> <script src="js/VREffect.js"></script> <script src="js/webvr-polyfill.js"></script> <script src="js/basic_vr.js"></script> </body> </html>
![Page 87: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/87.jpg)
I know what you’re thinking …
![Page 88: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/88.jpg)
![Page 89: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/89.jpg)
![Page 90: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/90.jpg)
Simulator Sickness is Real …Need to hit 60-90 fps. Motion data already laggy. Additional disadvantage of being in browser. More graphics you push the harder this gets.
![Page 91: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/91.jpg)
Consider 360 Video
![Page 92: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/92.jpg)
Spherically map videos around each camera/eyeAgain, math is HARD! See three.js vr_video or eleVR-Web-Player for example.
![Page 93: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/93.jpg)
Interaction
![Page 94: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/94.jpg)
All the HTML5 ThingsKeyboard, mouse, gamepad …
![Page 95: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/95.jpg)
![Page 96: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/96.jpg)
Leap Motion is Strongly Embracing WebVRWorks directly with three.js
leapmotion.com/product/vr
![Page 98: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/98.jpg)
leap_motion.html<!DOCTYPE html> <html lang="en"> <head> <title>Leap Motion VR</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <meta name="mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <style> body { background-color: #000; color: #fff; margin: 0px; padding: 0; overflow: hidden; } </style> </head> <body> <script src="js/three.js"></script> <script src="js/VRControls.js"></script> <script src="js/VREffect.js"></script> <script src="js/webvr-polyfill.js"></script> <script src="//js.leapmotion.com/leap-0.6.3.min.js"></script> <script src="//js.leapmotion.com/leap-plugins-0.1.9.min.js"></script> <script src="//js.leapmotion.com/leap.rigged-hand-0.1.7.min.js"></script> <script src="js/leap_motion.js"></script> </body> </html>
![Page 99: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/99.jpg)
leap_motion.html</style> </head> <body> <script src="js/three.js"></script> <script src="js/VRControls.js"></script> <script src="js/VREffect.js"></script> <script src="js/webvr-polyfill.js"></script> <script src="//js.leapmotion.com/leap-0.6.3.min.js"></script> <script src="//js.leapmotion.com/leap-plugins-0.1.9.min.js"></script> <script src="//js.leapmotion.com/leap.rigged-hand-0.1.7.min.js"></script> <script src="js/leap_motion.js"></script> </body> </html>
![Page 100: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/100.jpg)
leap_motion.jsLeap.loop(); Leap.loopController.use('transform', { vr: true, effectiveParent: camera });
Leap.loopController.use('riggedHand', { parent: scene, renderer: renderer, materialOptions: { emissive: new THREE.Color(0x00aaaa) } });
animate();
![Page 101: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/101.jpg)
Confession 2.0
![Page 102: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/102.jpg)
This doesn’t work on mobile*
* without hacks
![Page 103: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/103.jpg)
One interaction to rule them all
![Page 104: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/104.jpg)
GazeWhere you are looking can trigger changes, from environment to storyline.
![Page 105: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/105.jpg)
![Page 107: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/107.jpg)
raycast.js - Gazevar raycaster = new THREE.Raycaster(); var center = new THREE.Vector2(); function gaze() { if(!audioPlaying) { raycaster.setFromCamera(center, camera); var intersects = raycaster.intersectObjects([bit]);
if (intersects.length > 0) { audioPlaying = true; if (Math.random() < 0.5) { switchBitTo(1); yes.play(); } else { switchBitTo(0); no.play(); }
![Page 108: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/108.jpg)
Responsive VRFor “simple” devices, it’s a roller coaster ride. More complex, more interactions.
![Page 109: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/109.jpg)
Math is HARDCollision detection, physics, etc.
![Page 110: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/110.jpg)
![Page 111: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/111.jpg)
Unity publishes to multiple platformsPlugins for VR available. Support directly baked in 5.1
![Page 112: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/112.jpg)
![Page 113: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/113.jpg)
![Page 114: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/114.jpg)
#pragma strict
var center : GameObject; var axis : Vector3;
function Start () { }
function Update () { transform.RotateAround( center.transform.position, axis,30 * Time.deltaTime ); }
Orbit.js
![Page 115: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/115.jpg)
Cores.jsfunction beingLookedAt() { var hit : RaycastHit; var ray = new Ray(Camera.main.transform.position, Camera.main.transform.forward); return GetComponent .<Collider>() .Raycast(ray, hit, Mathf.Infinity); }
![Page 116: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/116.jpg)
Unity now exports to WebGLAn idea …
![Page 117: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/117.jpg)
Build a WebVR Unity pluginBridges when publishing to WebGL. Design once, distribute everywhere, run anywhere. NOW YOU’RE PLAYING WITH POWER
![Page 118: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/118.jpg)
Gotchas
![Page 119: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/119.jpg)
Again, Simulator Sickness is Real …It’ll get better, but start with easy motions
![Page 120: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/120.jpg)
3D Modelling is HardSpent most of my time on it. Develop interactions first! Then find a friend.
![Page 121: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/121.jpg)
The ground is constantly changingBeta Software running on Beta Hardware. Things break constantly.
![Page 122: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/122.jpg)
So that’s it …
![Page 123: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/123.jpg)
![Page 124: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/124.jpg)
Except for one thing …?
![Page 125: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/125.jpg)
Why would this time be any different?
![Page 126: Getting Started in VR with JS](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55a5ee381a28ab126b8b46f1/html5/thumbnails/126.jpg)
Answer: Because of you …