Successfully reported this slideshow.
Your SlideShare is downloading. ×

WebXR - Introduction and Workshop

WebXR - Introduction and Workshop

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.

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.

More Related Content

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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

Editor's Notes

  • 1 Aframe will handle everything, setup en controls
  • Alles is component:

×