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.

1. Timmy Kokke

3. What is WebVR?
A set APIs that enable an
immersive experience
through web technology

4. What is WebVR?
• Frictionless access
• W3C standard
• Widely supported
• Works everywhere

5. WebXR?
• WebXR Device API Specification
• Augmented Reality
• Sensors
• Gamepad
• ARKit / ARCore
• Still in draft, finished this year (probably)

6. Where is WebVR?

7. 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?

8. three.js

9. Use cases
• 360 photo / video tours
• Web shops
• Art / Music
• IoT
• Games
https://xr-store.webxrexperiments.com/

10. DEMOVizor
360 tour
DEMO

11. DEMOUnity3D

12. DEMOA-frame

13. Tips
• Require HTTPS
• Progressive VR/AR
• For “write once, run anywhere”  start with mobile
• Google OriginTrials
• https://github.com/GoogleChrome/OriginTrials
• Firefox Shader Debugger

14. 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

15. Timmy Kokke

16. A-Frame
web framework for building
virtual reality experiences

17. • VR Made Simple
• Declarative HTML
• Cross platform
• Component based
• Tool agnostic
• Inspector
• Community + Slack
A-Frame

18. 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>

19. 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

20. Glitch
• https://glitch.com
• Code in the browser
• Custom url for testing
• Remix other projects

21. 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

22. 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>

23. 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>

24. 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"...

25. A-frame – what else?
• Systems
• Animations
• Shaders
• Three.js

26. Thank you!
Timmy Kokke
https://timmykokke.com
https://youtube.com/c/sorskoo
t
https://webxr.nl
@sorskoot
A-Frame
https://aframe.io
Slack