nell waliczek lewis weavervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b... · “webvr is an open...
TRANSCRIPT
![Page 1: Nell Waliczek Lewis Weavervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b... · “WebVR is an open specification that makes it possible to experience VR in your browser.The goal](https://reader034.vdocuments.mx/reader034/viewer/2022050506/5f9770affea3d34cee165fc0/html5/thumbnails/1.jpg)
#msedgesummit
Nell WaliczekSoftware Engineering Lead
@NellWaliczek
github.com/NellWaliczek
Lewis WeaverProgram Manager
@lew_weav
github.com/leweaver
![Page 2: Nell Waliczek Lewis Weavervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b... · “WebVR is an open specification that makes it possible to experience VR in your browser.The goal](https://reader034.vdocuments.mx/reader034/viewer/2022050506/5f9770affea3d34cee165fc0/html5/thumbnails/2.jpg)
#msedgesummit
Mixed Reality on the web using WebVR
![Page 3: Nell Waliczek Lewis Weavervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b... · “WebVR is an open specification that makes it possible to experience VR in your browser.The goal](https://reader034.vdocuments.mx/reader034/viewer/2022050506/5f9770affea3d34cee165fc0/html5/thumbnails/3.jpg)
#msedgesummitAvailable October 17th
![Page 4: Nell Waliczek Lewis Weavervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b... · “WebVR is an open specification that makes it possible to experience VR in your browser.The goal](https://reader034.vdocuments.mx/reader034/viewer/2022050506/5f9770affea3d34cee165fc0/html5/thumbnails/4.jpg)
![Page 5: Nell Waliczek Lewis Weavervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b... · “WebVR is an open specification that makes it possible to experience VR in your browser.The goal](https://reader034.vdocuments.mx/reader034/viewer/2022050506/5f9770affea3d34cee165fc0/html5/thumbnails/5.jpg)
WebVR
#msedgesummit
![Page 6: Nell Waliczek Lewis Weavervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b... · “WebVR is an open specification that makes it possible to experience VR in your browser.The goal](https://reader034.vdocuments.mx/reader034/viewer/2022050506/5f9770affea3d34cee165fc0/html5/thumbnails/6.jpg)
“WebVR is an open specification that makes it possible to experience VR in your browser. The goal is to make it easier for everyone to get into VR experiences, no matter what device you have”
https://webvr.info
![Page 7: Nell Waliczek Lewis Weavervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b... · “WebVR is an open specification that makes it possible to experience VR in your browser.The goal](https://reader034.vdocuments.mx/reader034/viewer/2022050506/5f9770affea3d34cee165fc0/html5/thumbnails/7.jpg)
Image: Hotel Room, Reno, Nevada / Bob Dass / Creative Commons 2.0
![Page 8: Nell Waliczek Lewis Weavervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b... · “WebVR is an open specification that makes it possible to experience VR in your browser.The goal](https://reader034.vdocuments.mx/reader034/viewer/2022050506/5f9770affea3d34cee165fc0/html5/thumbnails/8.jpg)
![Page 9: Nell Waliczek Lewis Weavervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b... · “WebVR is an open specification that makes it possible to experience VR in your browser.The goal](https://reader034.vdocuments.mx/reader034/viewer/2022050506/5f9770affea3d34cee165fc0/html5/thumbnails/9.jpg)
![Page 10: Nell Waliczek Lewis Weavervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b... · “WebVR is an open specification that makes it possible to experience VR in your browser.The goal](https://reader034.vdocuments.mx/reader034/viewer/2022050506/5f9770affea3d34cee165fc0/html5/thumbnails/10.jpg)
![Page 11: Nell Waliczek Lewis Weavervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b... · “WebVR is an open specification that makes it possible to experience VR in your browser.The goal](https://reader034.vdocuments.mx/reader034/viewer/2022050506/5f9770affea3d34cee165fc0/html5/thumbnails/11.jpg)
Tourism
Real Estate
Online Shopping
360 photos and videos
Gaming
& More
#msedgesummit
![Page 12: Nell Waliczek Lewis Weavervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b... · “WebVR is an open specification that makes it possible to experience VR in your browser.The goal](https://reader034.vdocuments.mx/reader034/viewer/2022050506/5f9770affea3d34cee165fc0/html5/thumbnails/12.jpg)
Browser WebVR Support
Firefox
Chromium *
Microsoft Edge
Servo *
#msedgesummit
Oculus Browser
Samsung Internet *
Chrome for Android *
Chromium *
* “experimental feature” or “origin trial”
![Page 13: Nell Waliczek Lewis Weavervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b... · “WebVR is an open specification that makes it possible to experience VR in your browser.The goal](https://reader034.vdocuments.mx/reader034/viewer/2022050506/5f9770affea3d34cee165fc0/html5/thumbnails/13.jpg)
HOW DOES IT WORK?
#msedgesummit
![Page 14: Nell Waliczek Lewis Weavervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b... · “WebVR is an open specification that makes it possible to experience VR in your browser.The goal](https://reader034.vdocuments.mx/reader034/viewer/2022050506/5f9770affea3d34cee165fc0/html5/thumbnails/14.jpg)
#msedgesummit
Resolution = VRDisplay.getEyeParameters()
Frame callback = VRDisplay.requestAnimationFrame()
Headset = VRDisplay
Pose, etc. = VRDisplay.getFrameData()
![Page 15: Nell Waliczek Lewis Weavervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b... · “WebVR is an open specification that makes it possible to experience VR in your browser.The goal](https://reader034.vdocuments.mx/reader034/viewer/2022050506/5f9770affea3d34cee165fc0/html5/thumbnails/15.jpg)
#msedgesummit
WebVR WebGL
![Page 16: Nell Waliczek Lewis Weavervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b... · “WebVR is an open specification that makes it possible to experience VR in your browser.The goal](https://reader034.vdocuments.mx/reader034/viewer/2022050506/5f9770affea3d34cee165fc0/html5/thumbnails/16.jpg)
WRITING CODE
#msedgesummit
![Page 17: Nell Waliczek Lewis Weavervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b... · “WebVR is an open specification that makes it possible to experience VR in your browser.The goal](https://reader034.vdocuments.mx/reader034/viewer/2022050506/5f9770affea3d34cee165fc0/html5/thumbnails/17.jpg)
Displaying WebVR content
#msedgesummit
1. Query for an available headset
2. Request access to use the headset
3. Draw to the headset using WebGL
4. Return to 2D
![Page 18: Nell Waliczek Lewis Weavervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b... · “WebVR is an open specification that makes it possible to experience VR in your browser.The goal](https://reader034.vdocuments.mx/reader034/viewer/2022050506/5f9770affea3d34cee165fc0/html5/thumbnails/18.jpg)
Displaying WebVR content
#msedgesummit
1. Query for an available headset
2. Request access to use the headset
3. Draw to the headset using WebGL
4. Return to 2D
![Page 19: Nell Waliczek Lewis Weavervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b... · “WebVR is an open specification that makes it possible to experience VR in your browser.The goal](https://reader034.vdocuments.mx/reader034/viewer/2022050506/5f9770affea3d34cee165fc0/html5/thumbnails/19.jpg)
var vrDisplay = null;
// Find connected displaysfunction findDisplays() {if (!navigator.getVRDisplays) {
/* Fall back to orientation APIs */return;
}
navigator.getVRDisplays().then((vrDisplays)=> {vrDisplay = (vrDisplays.length > 0) ? vrDisplays[0] : null;
}).catch( /* Fall back to orientation APIs */ );}
#msedgesummit
![Page 20: Nell Waliczek Lewis Weavervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b... · “WebVR is an open specification that makes it possible to experience VR in your browser.The goal](https://reader034.vdocuments.mx/reader034/viewer/2022050506/5f9770affea3d34cee165fc0/html5/thumbnails/20.jpg)
var vrDisplay = null;
// Finds connected displaysfunction findDisplays() {if (!navigator.getVRDisplays) {
/* Fall back to orientation APIs */return;
}
navigator.getVRDisplays().then((vrDisplays)=> {vrDisplay = (vrDisplays.length > 0) ? vrDisplays[0] : null;
}).catch( /* Fall back to orientation APIs */ );}
#msedgesummit
![Page 21: Nell Waliczek Lewis Weavervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b... · “WebVR is an open specification that makes it possible to experience VR in your browser.The goal](https://reader034.vdocuments.mx/reader034/viewer/2022050506/5f9770affea3d34cee165fc0/html5/thumbnails/21.jpg)
// Detect connected displays on initial loadfindDisplays();
// Listen for headset connectionwindow.addEventListener('vrdisplayconnect', findDisplays);
// Listen for headset disconnectionwindow.addEventListener('vrdisplaydisconnect', findDisplays);
#msedgesummit
![Page 22: Nell Waliczek Lewis Weavervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b... · “WebVR is an open specification that makes it possible to experience VR in your browser.The goal](https://reader034.vdocuments.mx/reader034/viewer/2022050506/5f9770affea3d34cee165fc0/html5/thumbnails/22.jpg)
Displaying WebVR content
#msedgesummit
1. Query for an available headset
2. Request access to use the headset
3. Draw to the headset using WebGL
4. Return to 2D
![Page 23: Nell Waliczek Lewis Weavervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b... · “WebVR is an open specification that makes it possible to experience VR in your browser.The goal](https://reader034.vdocuments.mx/reader034/viewer/2022050506/5f9770affea3d34cee165fc0/html5/thumbnails/23.jpg)
var canvas = document.getElementById("webgl-canvas");setupWebGLResources(canvas);
function enterVR() {// Request exclusive use of the headset for renderingvrDisplay.requestPresent([source:canvas]).then(()=>{
// Queue animation callbackqueueAnimationFrameCallback();
}).catch( /* Handle rejection */ );});
#msedgesummit
![Page 24: Nell Waliczek Lewis Weavervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b... · “WebVR is an open specification that makes it possible to experience VR in your browser.The goal](https://reader034.vdocuments.mx/reader034/viewer/2022050506/5f9770affea3d34cee165fc0/html5/thumbnails/24.jpg)
var callbackId;
function queueAnimationFrameCallback() {if (vrDisplay && vrDisplay.isPresenting)
// Callback at HEADSET refresh ratecallbackId = vrDisplay.requestAnimationFrame(
onVrFrameCallback);} else {
// Callback at WINDOW refresh ratecallbackId = window.requestAnimationFrame(
onWindowFrameCallback);}
}
#msedgesummit
![Page 25: Nell Waliczek Lewis Weavervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b... · “WebVR is an open specification that makes it possible to experience VR in your browser.The goal](https://reader034.vdocuments.mx/reader034/viewer/2022050506/5f9770affea3d34cee165fc0/html5/thumbnails/25.jpg)
var enterVRButton = document.getElementById('entervr');
// Handle user initiated button clickenterVRButton.addEventListener('click', enterVR);
#msedgesummit
![Page 26: Nell Waliczek Lewis Weavervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b... · “WebVR is an open specification that makes it possible to experience VR in your browser.The goal](https://reader034.vdocuments.mx/reader034/viewer/2022050506/5f9770affea3d34cee165fc0/html5/thumbnails/26.jpg)
var enterVRButton = document.getElementById('entervr');
// Handle user initiated button clickenterVRButton.addEventListener('click', enterVR);
#msedgesummit
Allow hotels to use immersive view?
(Press the Windows button to leave immersive view)
![Page 27: Nell Waliczek Lewis Weavervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b... · “WebVR is an open specification that makes it possible to experience VR in your browser.The goal](https://reader034.vdocuments.mx/reader034/viewer/2022050506/5f9770affea3d34cee165fc0/html5/thumbnails/27.jpg)
Displaying WebVR content
#msedgesummit
1. Query for an available headset
2. Request access to use the headset
3. Draw to the headset using WebGL
4. Return to 2D
![Page 28: Nell Waliczek Lewis Weavervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b... · “WebVR is an open specification that makes it possible to experience VR in your browser.The goal](https://reader034.vdocuments.mx/reader034/viewer/2022050506/5f9770affea3d34cee165fc0/html5/thumbnails/28.jpg)
var frameData = new VRFrameData();
function onVrFrameCallback() {
// If the headset pose is available,// update the canvas, draw the pixels, and send to headsetif (vrDisplay.getFrameData(frameData)) {
updateCanvasSize();drawVRScene();vrDisplay.submitFrame();
}
// Queue the next framequeueAnimationFrameCallback();
}
#msedgesummit
![Page 29: Nell Waliczek Lewis Weavervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b... · “WebVR is an open specification that makes it possible to experience VR in your browser.The goal](https://reader034.vdocuments.mx/reader034/viewer/2022050506/5f9770affea3d34cee165fc0/html5/thumbnails/29.jpg)
var frameData = new VRFrameData();
function onVrFrameCallback() {
// If the headset pose is available,// update the canvas, draw the pixels, and send to headsetif (vrDisplay.getFrameData(frameData)) {
#msedgesummit
updateCanvasSize();drawVRScene();vrDisplay.submitFrame();
}
// Queue the next framequeueAnimationFrameCallback();
}
![Page 30: Nell Waliczek Lewis Weavervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b... · “WebVR is an open specification that makes it possible to experience VR in your browser.The goal](https://reader034.vdocuments.mx/reader034/viewer/2022050506/5f9770affea3d34cee165fc0/html5/thumbnails/30.jpg)
// Update the canvas to be big enough for drawing both eyesfunction updateCanvasSize() {
// Get headset resolution var leftEye = vrDisplay.getEyeParameters("left");var rightEye = vrDisplay.getEyeParameters("right");
// Update the canvas widthcanvas.width = leftEye.renderWidth + rightEye.renderWidth;
// Update the canvas heightcanvas.height = Math.max(
leftEye.renderHeight,rightEye.renderHeight);
}
#msedgesummit
![Page 31: Nell Waliczek Lewis Weavervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b... · “WebVR is an open specification that makes it possible to experience VR in your browser.The goal](https://reader034.vdocuments.mx/reader034/viewer/2022050506/5f9770affea3d34cee165fc0/html5/thumbnails/31.jpg)
function drawVRScene() {// Update 3D sceneupdateScene(frameData);
// Render the left eyegl.setViewport(/* left half of canvas */);drawEye(
frameData.leftViewMatrix, frameData.leftProjectionMatrix);
// Render the right eyegl.setViewport(/* right half of canvas */);drawEye(
frameData.rightViewMatrix, frameData.rightProjectionMatrix);
} #msedgesummit
![Page 32: Nell Waliczek Lewis Weavervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b... · “WebVR is an open specification that makes it possible to experience VR in your browser.The goal](https://reader034.vdocuments.mx/reader034/viewer/2022050506/5f9770affea3d34cee165fc0/html5/thumbnails/32.jpg)
#msedgesummit
![Page 33: Nell Waliczek Lewis Weavervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b... · “WebVR is an open specification that makes it possible to experience VR in your browser.The goal](https://reader034.vdocuments.mx/reader034/viewer/2022050506/5f9770affea3d34cee165fc0/html5/thumbnails/33.jpg)
// Indicate intent to handle webglcontextrestoredfunction onContextLost( event ) {
event.preventDefault(); }canvas.addEventListener('webglcontextlost', onContextLost);
// Reload WebGL resources such as textures, etcfunction onContextRestored() {setupWebGLResources(canvas);
}canvas.addEventListener('webglcontextrestored', onContextRestored);
#msedgesummit
![Page 34: Nell Waliczek Lewis Weavervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b... · “WebVR is an open specification that makes it possible to experience VR in your browser.The goal](https://reader034.vdocuments.mx/reader034/viewer/2022050506/5f9770affea3d34cee165fc0/html5/thumbnails/34.jpg)
Displaying WebVR content
#msedgesummit
1. Query for an available headset
2. Request access to use the headset
3. Draw to the headset using WebGL
4. Return to 2D
![Page 35: Nell Waliczek Lewis Weavervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b... · “WebVR is an open specification that makes it possible to experience VR in your browser.The goal](https://reader034.vdocuments.mx/reader034/viewer/2022050506/5f9770affea3d34cee165fc0/html5/thumbnails/35.jpg)
var exitVRButton = document.getElementById('exitvr');
// Exit Presentfunction exitVR() {vrDisplay.exitPresent().catch( /* Handle rejection */ );
});
// Handle user initiated button clickexitVRButton.addEventListener('click', exitVR);
#msedgesummit
![Page 36: Nell Waliczek Lewis Weavervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b... · “WebVR is an open specification that makes it possible to experience VR in your browser.The goal](https://reader034.vdocuments.mx/reader034/viewer/2022050506/5f9770affea3d34cee165fc0/html5/thumbnails/36.jpg)
function onPresentChanged() {
// Cancel outstanding callbackif (vrDisplay.isPresenting) {
window.cancelAnimationFrame(callbackID);} else {
vrDisplay.cancelAnimationFrame(callbackID);}
// Queue next framequeueAnimationFrameCallback();
}
// Register for presentation state change eventwindow.addEventListener(
'vrdisplaypresentchange', onPresentChanged); #msedgesummit
![Page 37: Nell Waliczek Lewis Weavervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b... · “WebVR is an open specification that makes it possible to experience VR in your browser.The goal](https://reader034.vdocuments.mx/reader034/viewer/2022050506/5f9770affea3d34cee165fc0/html5/thumbnails/37.jpg)
Displaying WebVR content
#msedgesummit
1. Query for an available headset
2. Request access to use the headset
3. Draw to the headset using WebGL
4. Return to 2D
![Page 38: Nell Waliczek Lewis Weavervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b... · “WebVR is an open specification that makes it possible to experience VR in your browser.The goal](https://reader034.vdocuments.mx/reader034/viewer/2022050506/5f9770affea3d34cee165fc0/html5/thumbnails/38.jpg)
![Page 39: Nell Waliczek Lewis Weavervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b... · “WebVR is an open specification that makes it possible to experience VR in your browser.The goal](https://reader034.vdocuments.mx/reader034/viewer/2022050506/5f9770affea3d34cee165fc0/html5/thumbnails/39.jpg)
#msedgesummit
![Page 40: Nell Waliczek Lewis Weavervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b... · “WebVR is an open specification that makes it possible to experience VR in your browser.The goal](https://reader034.vdocuments.mx/reader034/viewer/2022050506/5f9770affea3d34cee165fc0/html5/thumbnails/40.jpg)
Interacting with WebVR content
#msedgesummit
• Targeting objects
• Providing user feedback
• APIs
![Page 41: Nell Waliczek Lewis Weavervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b... · “WebVR is an open specification that makes it possible to experience VR in your browser.The goal](https://reader034.vdocuments.mx/reader034/viewer/2022050506/5f9770affea3d34cee165fc0/html5/thumbnails/41.jpg)
Gaze-and-commit
#msedgesummit
Gamepad button
Mouse click
Keyboard press
Steady hover
![Page 42: Nell Waliczek Lewis Weavervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b... · “WebVR is an open specification that makes it possible to experience VR in your browser.The goal](https://reader034.vdocuments.mx/reader034/viewer/2022050506/5f9770affea3d34cee165fc0/html5/thumbnails/42.jpg)
Gaze-and-commit
#msedgesummit
Gamepad button
Mouse click
Keyboard press
Steady hover
Motion controller button
Point-and-commit
![Page 43: Nell Waliczek Lewis Weavervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b... · “WebVR is an open specification that makes it possible to experience VR in your browser.The goal](https://reader034.vdocuments.mx/reader034/viewer/2022050506/5f9770affea3d34cee165fc0/html5/thumbnails/43.jpg)
Interacting with WebVR content
#msedgesummit
• Targeting objects
• Providing user feedback
• APIs
![Page 44: Nell Waliczek Lewis Weavervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b... · “WebVR is an open specification that makes it possible to experience VR in your browser.The goal](https://reader034.vdocuments.mx/reader034/viewer/2022050506/5f9770affea3d34cee165fc0/html5/thumbnails/44.jpg)
#msedgesummit
Cursor
![Page 45: Nell Waliczek Lewis Weavervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b... · “WebVR is an open specification that makes it possible to experience VR in your browser.The goal](https://reader034.vdocuments.mx/reader034/viewer/2022050506/5f9770affea3d34cee165fc0/html5/thumbnails/45.jpg)
Pointing Ray
#msedgesummit
![Page 46: Nell Waliczek Lewis Weavervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b... · “WebVR is an open specification that makes it possible to experience VR in your browser.The goal](https://reader034.vdocuments.mx/reader034/viewer/2022050506/5f9770affea3d34cee165fc0/html5/thumbnails/46.jpg)
#msedgesummit
Motion Controllers and buttons
![Page 47: Nell Waliczek Lewis Weavervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b... · “WebVR is an open specification that makes it possible to experience VR in your browser.The goal](https://reader034.vdocuments.mx/reader034/viewer/2022050506/5f9770affea3d34cee165fc0/html5/thumbnails/47.jpg)
Interacting with WebVR content
#msedgesummit
• Targeting objects
• Providing user feedback
• APIs
![Page 48: Nell Waliczek Lewis Weavervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b... · “WebVR is an open specification that makes it possible to experience VR in your browser.The goal](https://reader034.vdocuments.mx/reader034/viewer/2022050506/5f9770affea3d34cee165fc0/html5/thumbnails/48.jpg)
#msedgesummit
Motion controller pose = Gamepad.pose
Gaze ray origin = VRFrameData.pose
Gamepads & controllers = navigator.getGamepads()
Mouse clicks = element.requestPointerLock()
![Page 49: Nell Waliczek Lewis Weavervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b... · “WebVR is an open specification that makes it possible to experience VR in your browser.The goal](https://reader034.vdocuments.mx/reader034/viewer/2022050506/5f9770affea3d34cee165fc0/html5/thumbnails/49.jpg)
#msedgesummit
Motion controller pose = Gamepad.pose
Gaze ray origin = VRFrameData.pose
Gamepads & controllers = navigator.getGamepads()
Mouse clicks = element.requestPointerLock()
![Page 50: Nell Waliczek Lewis Weavervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b... · “WebVR is an open specification that makes it possible to experience VR in your browser.The goal](https://reader034.vdocuments.mx/reader034/viewer/2022050506/5f9770affea3d34cee165fc0/html5/thumbnails/50.jpg)
#msedgesummit
Motion controller pose = Gamepad.pose
Gaze ray origin = VRFrameData.pose
Gamepads & controllers = navigator.getGamepads()
Mouse clicks = element.requestPointerLock()
![Page 51: Nell Waliczek Lewis Weavervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b... · “WebVR is an open specification that makes it possible to experience VR in your browser.The goal](https://reader034.vdocuments.mx/reader034/viewer/2022050506/5f9770affea3d34cee165fc0/html5/thumbnails/51.jpg)
#msedgesummit
Motion controller pose = Gamepad.pose
Gaze ray origin = VRFrameData.pose
Gamepads & controllers = navigator.getGamepads()
Mouse clicks = element.requestPointerLock()
![Page 52: Nell Waliczek Lewis Weavervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b... · “WebVR is an open specification that makes it possible to experience VR in your browser.The goal](https://reader034.vdocuments.mx/reader034/viewer/2022050506/5f9770affea3d34cee165fc0/html5/thumbnails/52.jpg)
#msedgesummit
Motion controller pose = Gamepad.pose
Gaze ray origin = VRFrameData.pose
Gamepads & controllers = navigator.getGamepads()
Mouse clicks = element.requestPointerLock()
![Page 53: Nell Waliczek Lewis Weavervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b... · “WebVR is an open specification that makes it possible to experience VR in your browser.The goal](https://reader034.vdocuments.mx/reader034/viewer/2022050506/5f9770affea3d34cee165fc0/html5/thumbnails/53.jpg)
// Event handler for vrdisplaypresentchangefunction onPresentChanged() {
…if (vrDisplay.isPresenting) {
canvas.requestPointerLock();} else {
document.exitPointerLock();}…
}
#msedgesummit
![Page 54: Nell Waliczek Lewis Weavervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b... · “WebVR is an open specification that makes it possible to experience VR in your browser.The goal](https://reader034.vdocuments.mx/reader034/viewer/2022050506/5f9770affea3d34cee165fc0/html5/thumbnails/54.jpg)
// Ensure pointerlock taken when restrictedwindow.addEventListener('vrdisplaypointerrestricted', () => {
canvas.requestPointerLock(); });
// Ensure pointerlock release when unrestrictedwindow.addEventListener('vrdisplaypointerunrestricted', () => {
document.exitPointerLock(); });
#msedgesummit
![Page 55: Nell Waliczek Lewis Weavervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b... · “WebVR is an open specification that makes it possible to experience VR in your browser.The goal](https://reader034.vdocuments.mx/reader034/viewer/2022050506/5f9770affea3d34cee165fc0/html5/thumbnails/55.jpg)
Interacting with WebVR content
#msedgesummit
• Targeting objects
• Providing user feedback
• Coding it up
![Page 56: Nell Waliczek Lewis Weavervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b... · “WebVR is an open specification that makes it possible to experience VR in your browser.The goal](https://reader034.vdocuments.mx/reader034/viewer/2022050506/5f9770affea3d34cee165fc0/html5/thumbnails/56.jpg)
LIBRARIES
#msedgesummit
![Page 57: Nell Waliczek Lewis Weavervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b... · “WebVR is an open specification that makes it possible to experience VR in your browser.The goal](https://reader034.vdocuments.mx/reader034/viewer/2022050506/5f9770affea3d34cee165fc0/html5/thumbnails/57.jpg)
#msedgesummit
![Page 58: Nell Waliczek Lewis Weavervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b... · “WebVR is an open specification that makes it possible to experience VR in your browser.The goal](https://reader034.vdocuments.mx/reader034/viewer/2022050506/5f9770affea3d34cee165fc0/html5/thumbnails/58.jpg)
#msedgesummit
BasicsWebGL context
switchingMotion
Controllers
Windows Mixed Reality support
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
3.1
0.7.0*
R88*
2.0.0*
![Page 59: Nell Waliczek Lewis Weavervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b... · “WebVR is an open specification that makes it possible to experience VR in your browser.The goal](https://reader034.vdocuments.mx/reader034/viewer/2022050506/5f9770affea3d34cee165fc0/html5/thumbnails/59.jpg)
#msedgesummit
• Lightweight 3D library
• Define scenes and geometry in JavaScript
• Fine grained control over rendering
• Provides WebVR built-in
• Motion controller support under development
![Page 60: Nell Waliczek Lewis Weavervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b... · “WebVR is an open specification that makes it possible to experience VR in your browser.The goal](https://reader034.vdocuments.mx/reader034/viewer/2022050506/5f9770affea3d34cee165fc0/html5/thumbnails/60.jpg)
#msedgesummit
• Familiar declarative style of React
• Use React components in VR
• React Libraries and Tools
• Motion controller example code available
![Page 61: Nell Waliczek Lewis Weavervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b... · “WebVR is an open specification that makes it possible to experience VR in your browser.The goal](https://reader034.vdocuments.mx/reader034/viewer/2022050506/5f9770affea3d34cee165fc0/html5/thumbnails/61.jpg)
#msedgesummit
• Make WebVR using HTML
• Handles VR setup
• Entity/Component system
• Component Registry
• Gaze-and-commit support
• Point-and-commit support
![Page 62: Nell Waliczek Lewis Weavervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b... · “WebVR is an open specification that makes it possible to experience VR in your browser.The goal](https://reader034.vdocuments.mx/reader034/viewer/2022050506/5f9770affea3d34cee165fc0/html5/thumbnails/62.jpg)
#msedgesummit
• JavaScript 3D engine
• High degree of control over rendering
• Add VR with 1 line of code
• Gaze-and-commit support
• Point-and-commit support
• Doc.BabylonJS.com
• BabylonJS-Playground.com
![Page 63: Nell Waliczek Lewis Weavervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b... · “WebVR is an open specification that makes it possible to experience VR in your browser.The goal](https://reader034.vdocuments.mx/reader034/viewer/2022050506/5f9770affea3d34cee165fc0/html5/thumbnails/63.jpg)
<a-scene>
A-Frame Example
#msedgesummit
<!-- VR Controllers --><a-entity laser-controls="hand: left"></a-entity><a-entity laser-controls="hand: right"></a-entity>
</a-scene>
<!-- Hotel Room --><a-sky src="hotel-room.jpg"></a-sky>
![Page 64: Nell Waliczek Lewis Weavervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b... · “WebVR is an open specification that makes it possible to experience VR in your browser.The goal](https://reader034.vdocuments.mx/reader034/viewer/2022050506/5f9770affea3d34cee165fc0/html5/thumbnails/64.jpg)
var scene = new BABYLON.Scene(engine);
BabylonJS Example
#msedgesummit
scene.createDefaultVRExperience();
var skybox = scene.createDefaultSkybox(newBABYLON.Texture(
"/assets/purple-room.jpg", scene, true), false);
skybox.material.reflectionTexture.coordinatesMode = BABYLON.Texture.FIXED_EQUIRECTANGULAR_MODE;
![Page 65: Nell Waliczek Lewis Weavervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b... · “WebVR is an open specification that makes it possible to experience VR in your browser.The goal](https://reader034.vdocuments.mx/reader034/viewer/2022050506/5f9770affea3d34cee165fc0/html5/thumbnails/65.jpg)
4 SUGGESTED PRACTICES
#msedgesummit
![Page 66: Nell Waliczek Lewis Weavervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b... · “WebVR is an open specification that makes it possible to experience VR in your browser.The goal](https://reader034.vdocuments.mx/reader034/viewer/2022050506/5f9770affea3d34cee165fc0/html5/thumbnails/66.jpg)
#msedgesummit
Prioritize frame rate over scene complexity
![Page 67: Nell Waliczek Lewis Weavervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b... · “WebVR is an open specification that makes it possible to experience VR in your browser.The goal](https://reader034.vdocuments.mx/reader034/viewer/2022050506/5f9770affea3d34cee165fc0/html5/thumbnails/67.jpg)
#msedgesummit
Start using a headset early on
![Page 68: Nell Waliczek Lewis Weavervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b... · “WebVR is an open specification that makes it possible to experience VR in your browser.The goal](https://reader034.vdocuments.mx/reader034/viewer/2022050506/5f9770affea3d34cee165fc0/html5/thumbnails/68.jpg)
#msedgesummit
Considerations for Maximum User Comfort
![Page 69: Nell Waliczek Lewis Weavervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b... · “WebVR is an open specification that makes it possible to experience VR in your browser.The goal](https://reader034.vdocuments.mx/reader034/viewer/2022050506/5f9770affea3d34cee165fc0/html5/thumbnails/69.jpg)
#msedgesummit
Test with diverse hardware
![Page 70: Nell Waliczek Lewis Weavervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b... · “WebVR is an open specification that makes it possible to experience VR in your browser.The goal](https://reader034.vdocuments.mx/reader034/viewer/2022050506/5f9770affea3d34cee165fc0/html5/thumbnails/70.jpg)
What’s next for WebVR
#msedgesummit
![Page 71: Nell Waliczek Lewis Weavervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b... · “WebVR is an open specification that makes it possible to experience VR in your browser.The goal](https://reader034.vdocuments.mx/reader034/viewer/2022050506/5f9770affea3d34cee165fc0/html5/thumbnails/71.jpg)
#msedgesummit
Thank you!
aka.ms/edgesummit-webvr
aka.ms/edgesummit-webvr-docs
@NellWaliczek, @lew_weav
github.com/NellWaliczek, github.com/leweaver