Download as PDF, PPTX
![var self = this;
var vrDisplay;
navigator.getVRDisplays().then( gotVRDisplays );
function gotVRDisplays ( displays ) {
if (displays.length > 0) {
vrDisplay = displays[0];
self.left = vrDisplay.getEyeParameters( "left" );
self.right = vrDisplay.getEyeParameters( "right" );
self.vrDisplay = vrDisplay;
}
}
1. Query for VR Displays
Enumerate available
VR devices
Get left/right eye
(camera) information:
horizontal offset,
field of view,
viewport width;
we’’ use WebGL to
render the scene from
two cameras](https://cdn.statically.io/img/image.slidesharecdn.com/introductiontowebvrforge2016-160615203335/75/Introduction-to-WebVR-Autodesk-Forge-2016-18-2048.jpg)
![var vrGamepads = [];
var gamepads = navigator.getGamepads();
for (var i = 0; i < gamepads.length; ++i) {
var gamepad = gamepads[i];
if (gamepad && gamepad.pose) {
vrGamepads.push(gamepad);
}
}
}
4. Input: 6DOF Controllers
Loop through Gamepads and see if any of them have
a ‘pose’ property; if so it’s a VR gamepad
NOTE: Gamepad 6DOF support is NOT part
of the WebVR spec. These are experimental
extensions to the Gamepad API…](https://cdn.statically.io/img/image.slidesharecdn.com/introductiontowebvrforge2016-160615203335/75/Introduction-to-WebVR-Autodesk-Forge-2016-21-2048.jpg)
!["nodes": {
"LOD3sp": {
"children": [],
"matrix": [
// matrix data here
],
"meshes": [
"LOD3spShape-lib"
],
"name": "LOD3sp"
},
…
"meshes": {
"LOD3spShape-lib": {
"name": "LOD3spShape",
"primitives": [
{
"attributes": {
"NORMAL": "accessor_25",
"POSITION": "accessor_23",
"TEXCOORD_0": "accessor_27"
},
"indices": "accessor_21",
"material": "blinn3-fx",
"primitive": 4
}
]
}
},
The Structure of a glTF File
Scene structure defined as a hierarchy
of nodes
"buffers": {
"duck": {
"byteLength": 102040,
"type": "arraybuffer",
"uri": "duck.bin"
}
},
Meshes and other visual types
access low-level data defined in
buffers Rich data e.g. vertices
and animations stored in
binary files](https://cdn.statically.io/img/image.slidesharecdn.com/introductiontowebvrforge2016-160615203335/75/Introduction-to-WebVR-Autodesk-Forge-2016-26-2048.jpg)
Uploaded byTony Parisi
Introduction to WebVR Autodesk Forge 2016
The document is an introduction to WebVR by Tony Parisi, detailing the integration of virtual reality with the web and its potential for broad user adoption. It highlights the challenges of current VR and AR applications, emphasizing the need for a frictionless experience and open standards. The WebVR API and associated technologies aim to enable immersive web experiences without barriers, leveraging existing web infrastructure and tools.
Introduction to WebVR Autodesk Forge 2016
- 1. An Introduction to WebVR TonyParisi June 15, 2016
- 2. About me get GLAM http://www.glamjs.org/ meetups http://www.meetup.com/WebGL-Developers-Meetup/ http://www.meetup.com/Web-VR/ creds Co-creator,VRML and X3D Designer and Spec Editor, glTF get the books! Learning Virtual Reality Programming 3D Applications with HTML and WebGL WebGL: Up and Running http://www.amazon.com/-/e/B008UZ888I Tony Parisi is VP of Web and Open Technologies at Wevr tony@wevr.com +1 (415) 902 8002 @auradeluxe http://www.tonyparisi.com/ advice http://www.rothenbergventures.com http://www.uploadvr.com http://www.highfidelity.io http://www.shiift.world/
- 3. The Next Platform VRand AR will become the predominant way that we work, play, transact and communicate using digital technologies. Billions invested 2020 market projections range from $14B to $120B
- 4. Q: How doVR and AR reach 5B users by 2020? A: Not one app at a time.
- 5. Friction Downloads/installs Controlled distribution Limited businessmodels Silo experiences Proprietary development Closed culture Experts only
- 6. The Metaverse istoo big of an idea… for an app store.
- 7. http://commonspace.wordpress.com/2014/03/12/happybirthday/ The World WideWeb No downloads - no friction Instant sharing - post a link Freedom of choice - no gatekeepers Culture of collaboration Instant publishing Runs everywhere
- 8. Introducing: WebVR Bringing VR andthe Web Together
- 9. No Friction See link,clink link, go Shareable, searchable, discoverable
- 10. Web Scale Advertising Digital marketing E-commerce Socialmedia Long tail content and apps
- 11. Total Immersion Image: http://cordonmedia.com/ Browseand communicate in 3D Endless information within our grasp The ultimate dope for a dopamine culture
- 12. Built on Standards Universalplayback engine aka “VR browser” Standard formats and APIs for 3D graphics and 360 VR video Free, open source tools Collaborative effort
- 13. The 3D RenderingStandard Runs on all desktop and mobile browsers 3B seats!
- 14. Cardboard VR and MobileBrowsers Works today. Just render side-by-side using WebGL and pop it into a Carboard viewer.
- 15. The WebVR API Quake3 WebVR demo, developed by Brandon Jones of Google http://media.tojicode.com/q3bsp/ Multi-vendor effort to define new browser API and features Head tracking and fullscreen stereo VR mode Desktop and mobile
- 16. WebVR Development Status Developerbuilds of Chrome, Firefox (desktop and mobile) Samsung Internet browser for Gear VR! Coming soon to Daydream VR! WebVR 1.0 API - preliminary spec http://mozvr.github.io/webvr-spec/ W3C Community Group https://www.w3.org/community/webvr/ Slack Channel https://webvr.slack.com/ Examples https://webvr.info/samples/
- 17. A Quick Tourof the WebVR API
- 18. var self =this; var vrDisplay; navigator.getVRDisplays().then( gotVRDisplays ); function gotVRDisplays ( displays ) { if (displays.length > 0) { vrDisplay = displays[0]; self.left = vrDisplay.getEyeParameters( "left" ); self.right = vrDisplay.getEyeParameters( "right" ); self.vrDisplay = vrDisplay; } } 1. Query for VR Displays Enumerate available VR devices Get left/right eye (camera) information: horizontal offset, field of view, viewport width; we’’ use WebGL to render the scene from two cameras
- 19. someButton.addEventListener(’click', onStartPresent); function onStartPresent() { vrDisplay.requestPresent({ source : webGLCanvas }); } 2. Present to the VR Display VR presentation must be initiated by user action, e.g. mouse click The WebGL canvas contains the rendered content to be presented on the VR display
- 20. vrDisplay.requestAnimationFrame(runloop); function runloop() { //set up for the next frame vrDisplay.requestAnimationFrame(runloop); // render the content var pose = vrDisplay.getPose(); if (vrDisplay.isPresenting) { renderScene(pose, "left”); renderScene(pose, ”right")); } vrDisplay.submitFrame(pose); } 3. Render WebVR introduces a new version of requestAnimationFrame() specifically for VR devices, making >60FPS rendering possible! Get HMD position/orientation Render scene once for each eye Submit rendered content to the HMD
- 21. var vrGamepads =[]; var gamepads = navigator.getGamepads(); for (var i = 0; i < gamepads.length; ++i) { var gamepad = gamepads[i]; if (gamepad && gamepad.pose) { vrGamepads.push(gamepad); } } } 4. Input: 6DOF Controllers Loop through Gamepads and see if any of them have a ‘pose’ property; if so it’s a VR gamepad NOTE: Gamepad 6DOF support is NOT part of the WebVR spec. These are experimental extensions to the Gamepad API…
- 22. The WebVR Ecosystem Frameworks JavaScript libraries Markupsystems Polyfills Formats The “JPEG of 3D” Tools Unity, Unreal export Browser-based VR creation <glam> <scene> <cube id="photocube”></cube> </scene> </glam> #photocube { image:url(../images/photo.png); }
- 23. JavaScript Libraries Three.js Babylon.js Scene.js Three.js -de facto choice for WebGL http://www.threejs.org
- 24. <a-scene> <a-sphere position="0 1.25-1" radius="1.25" c <a-box position="-1 0.5 1" rotation="0 45 0" w <a-cylinder position="1 0.75 1" radius="0.5" h <a-plane rotation="-90 0 0" width="4" height=" <a-sky color="#ECECEC"></a-sky> </a-scene> Markup Languages A-Frame GLAM SceneVR Mozilla A-Frame https://www.aframe.io
- 25. https://github.com/KhronosGroup/glTF Runtime asset formatfor WebGL, OpenGL ES, and OpenGL applications Compact representation for download efficiency Loads quickly into memory JSON for scene structure and other high-level constructs GL native data types require no additional parsing Full-featured 3D constructs (hierarchy, cameras, shaders, animation, lights and standard materials via extensions) Full support for shaders and arbitrary materials Runtime-neutral Can be created and used by any tool, app or runtime File Formats
- 26. "nodes": { "LOD3sp": { "children":[], "matrix": [ // matrix data here ], "meshes": [ "LOD3spShape-lib" ], "name": "LOD3sp" }, … "meshes": { "LOD3spShape-lib": { "name": "LOD3spShape", "primitives": [ { "attributes": { "NORMAL": "accessor_25", "POSITION": "accessor_23", "TEXCOORD_0": "accessor_27" }, "indices": "accessor_21", "material": "blinn3-fx", "primitive": 4 } ] } }, The Structure of a glTF File Scene structure defined as a hierarchy of nodes "buffers": { "duck": { "byteLength": 102040, "type": "arraybuffer", "uri": "duck.bin" } }, Meshes and other visual types access low-level data defined in buffers Rich data e.g. vertices and animations stored in binary files
- 27. glTF Adoption Three.js Loader https://github.com/mrdoob/three.js/ Babylon.sLoader http://www.babylonjs.com/ Cesium - native format is glTF http://cesiumjs.org/ FBX Converter https://github.com/cyrillef/FBX-glTF Import/Export glTF to/from any FBX application!
- 28. Authoring Tools Unity, Unrealexport via Emscripten/asm.js PlayCanvas game engine Vizor in-browser VR development tool Vizor Browser-based VR creation
- 29. One Platform. Billions ofSeats. No Barriers.
- 30. An Introduction to WebVR TonyParisi June 15, 2016