Download - Introduction to WebVR Autodesk Forge 2016
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 [email protected] +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/
The Next Platform
VR and 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
Friction Downloads/installs Controlled distribution Limited business models Silo experiences Proprietary development Closed culture Experts only
http://commonspace.wordpress.com/2014/03/12/happybirthday/
The World Wide Web No downloads - no friction Instant sharing - post a link Freedom of choice - no gatekeepers Culture of collaboration Instant publishing Runs everywhere
Total Immersion
Image: http://cordonmedia.com/
Browse and communicate in 3D
Endless information within our grasp
The ultimate dope for a dopamine culture
Built on Standards Universal playback engine aka “VR browser” Standard formats and APIs for 3D graphics and 360 VR video
Free, open source tools Collaborative effort
Cardboard VR and Mobile Browsers
Works today. Just render side-by-side using
WebGL and pop it into a Carboard viewer.
The WebVR API
Quake 3 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
WebVR Development Status Developer builds 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/
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
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
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
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…
The WebVR Ecosystem
Frameworks JavaScript libraries
Markup systems 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); }
JavaScript Libraries
Three.js Babylon.js Scene.js
Three.js - de facto choice for WebGL http://www.threejs.org
<a-scene>
<a-sphere position="0 1.25 -1" radius="1.25" color="#EF2D5E"></a-sphere> <a-box position="-1 0.5 1" rotation="0 45 0" width="1" height="1" depth="1" color="#4CC3D9"></a-box> <a-cylinder position="1 0.75 1" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder> <a-plane rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
</a-scene>
Markup Languages A-Frame GLAM SceneVR
Mozilla A-Frame https://www.aframe.io
https://github.com/KhronosGroup/glTF Runtime asset format for 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
"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
glTF Adoption Three.js Loader https://github.com/mrdoob/three.js/
Babylon.s Loader 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!
Authoring Tools
Unity, Unreal export via Emscripten/asm.js PlayCanvas game engine Vizor in-browser VR development tool
Vizor Browser-based VR creation