WebVR with A-Frame

WebVR

WebVR is an open standard that makes it possible to experience VR in your browser. The goal is to make it easier for everyone to get into VR experiences, no matter what device you have

https://webvr.info/

Why bother?

Why it's important for a Web Developer?

Yes but...

No Barriers

Can I use it?

Welcome Polyfill

https://github.com/googlevr/webvr-polyfill

A-Frame

The Good parts

Simplicity

Declarative

<html>
  <head>
    <script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-box position="-1 0.5 -3" rotation="0 45 0" color="red"></a-box>
      <a-sky color="green"></a-sky>
    </a-scene>
  </body>
</html>

Cross Device

Visual Inspector

Framework Agnostic

Community

https://github.com/aframevr/awesome-aframe/

https://aframe.io/aframe-registry/

The (not so) Bad parts

Monolith

Bundle size

Entity–component–system

Entity-component-system (ECS) is an architectural pattern that is mostly used in game development

it is better to compose what an object can do (HAS-A) than extend what it is (IS-A)

Entities are container objects into which components can be attached. Entities are the base of all objects in the scene.

Components are reusable modules or data containers that can be attached to entities to provide appearance, behavior, and/or functionality.

Systems provide global scope, management, and services for classes of components.

<a-entity geometry="primitive: sphere; radius: 1.5"
          light="type: point; color: white; intensity: 2"
          material="color: white; shader: flat; src: glow.jpg"
          position="0 0 -5"></a-entity>

Demo

What's Next?

AR.js

https://github.com/jeromeetienne/AR.js

Ego Slide

f.strazzullo@extrategy.net

@TheStrazz86

https://github.com/francesco-strazzullo

https://medium.com/@TheStrazz86

https://slides.com/francescostrazzullo

Thanks!

http://www.avanscoperta.it/it/training/frameworkless-frontend-workshop/

Workshop