Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

WebXR - Introduction and Workshop

26 views

Published on

Slidedeck used to give an introduction to WebXR. It also contains the slides for a short introduction to WebVR using A-Frame and Glitch.me by showing the HTML and JavaScript.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

WebXR - Introduction and Workshop

  1. 1. Timmy Kokke
  2. 2. What is WebVR? A set APIs that enable an immersive experience through web technology
  3. 3. What is WebVR? • Frictionless access • W3C standard • Widely supported • Works everywhere
  4. 4. WebXR? • WebXR Device API Specification • Augmented Reality • Sensors • Gamepad • ARKit / ARCore • Still in draft, finished this year (probably)
  5. 5. Where is WebVR?
  6. 6. Cardboard DayDream Oculus ViveGearVR Windows MR Chrome Android Samsung Internet Chrome Android Oculus Browser Samsung Internet Chrome FireFox Opera Supermedium Chrome FireFox Servo Opera Edge Where is WebVR?
  7. 7. three.js
  8. 8. Use cases • 360 photo / video tours • Web shops • Art / Music • IoT • Games https://xr-store.webxrexperiments.com/
  9. 9. DEMOVizor 360 tour DEMO
  10. 10. DEMOUnity3D
  11. 11. DEMOA-frame
  12. 12. Tips • Require HTTPS • Progressive VR/AR • For “write once, run anywhere”  start with mobile • Google OriginTrials • https://github.com/GoogleChrome/OriginTrials • Firefox Shader Debugger
  13. 13. Thank you! Timmy Kokke Consultant @ Centric Microsoft MVP https://timmykokke.com https://youtube.com/c/sorskoo t @sorskoot WebXR NL https://webxr.nl September 20th – WebXR on Hardware @webxrnl
  14. 14. Timmy Kokke
  15. 15. A-Frame web framework for building virtual reality experiences
  16. 16. • VR Made Simple • Declarative HTML • Cross platform • Component based • Tool agnostic • Inspector • Community + Slack A-Frame
  17. 17. A-Frame Components <a-scene> <a-box position="-1 0.5 -3" rotation="0 45 0" ></a-box> <a-sphere position="0 1.25 -5" radius="1.25" ></a-sphere> <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" ></a- cylinder> <a-plane position="0 0 -4" width="4" height="4" ></a-plane> <a-sky color="#ECECEC"></a-sky> </a-scene>
  18. 18. A-Frame <a-scene> <a-box position="-1 0.5 -3"></a-box> </a-scene> HTML Attribute name HTML Tag HTML Attribute Value HTML Closing Tag
  19. 19. Glitch • https://glitch.com • Code in the browser • Custom url for testing • Remix other projects
  20. 20. WebVR - Primitives • https://aframe-start.glitch.me <a-scene> <a-box position="-1 0.5 -3"></a-box> </a-scene> Other Primitives: • a-entity • a-sphere • a-cylinder • a-plane • a-sky Other Attributes: • rotation=“X Y Z” • color = “red” • scale=“X Y Z” Other: • Nesting elements • Inspector
  21. 21. WebVR - Textures • https://timmykokke.com/360.jpg (equirectangular) • http://texturelib.com/ • “src” attribute with URL or ID src="https://url.com/image.jpg" <a-assets> <img id="boxTexture" src="https://url.com/image.jpg"> </a-assets> … <a-box src=“#boxTexture”></a-box>
  22. 22. WebVR - Cursor <a-camera position=“0 1.6 0” <a-entity cursor="fuse: true; fuseTimeout: 500“ position="0 0 -1" geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03" material="color: purple; shader: flat"> </a-entity> </a-camera>
  23. 23. Webvr – Custom Component AFRAME.registerComponent('change-color', { schema: { color: {default: 'green'} }, init: function () { this.el.addEventListener('click’,() => { this.el.setAttribute('material', 'color', this.data.color); }) } }); <a-sphere color="blue" change-color="color:pink"...
  24. 24. A-frame – what else? • Systems • Animations • Shaders • Three.js
  25. 25. Thank you! Timmy Kokke https://timmykokke.com https://youtube.com/c/sorskoo t https://webxr.nl @sorskoot A-Frame https://aframe.io Slack

×