A-Frame is a declarative WebVR framework for web developers. We'll introduce the game-changing concepts of A-Frame, showcase what the community has built with A-Frame in the last several months, and present sneak peeks of novel experiments that we have rapidly prototyped using A-Frame. Watch the talk at https://www.youtube.com/watch?v=wRqoSdPZQBY Download presentation materials and videos at https://github.com/ngokevin/aframe-sfhtml5-presentation

1. A-FRAME
VR for Web Developers
@andgokevin / @dmarcos / aframe.io
SFHTML5 / 25 May 2016

3. A-Frame Community Sneak Peeks

4. Too hard to create WebVR experiences.
Import WebVR Polyfill
Initialize scene
Instantiate renderer
Create render loopSearch for VREffect
Build UI for Entering VR
Set up Camera
Add lighting
Listen to window resize
Declare canvas
Geometry + Material + Add

5. <a-scene>

6. <a-box src=“texture.png” width=“5”>
<a-obj-model src=“fox.obj”>
<a-sky src=“360-image.png”>
Not powerful enough.

7. Escape hatches for extensibility.

8. Entity-Component-System

9. COMPOSING AN ENTITY
<a-entity>

10. COMPOSING AN ENTITY
<a-entity geometry=“primitive: sphere; radius: 100”
material=“color: skyblue”>

11. COMPOSING AN ENTITY
<a-entity geometry=“primitive: sphere; radius: 100”
material=“color: skyblue”
entity-generator=“mixin: rain; num: 100”>

12. COMPOSING AN ENTITY
<a-entity geometry=“primitive: sphere; radius: 100”
material=“color: skyblue”
entity-generator=“mixin: rain; num: 100”>
<a-mixin id=“rain”
geometry=“primitive: sphere; radius: 0.05”
material=“color: white; opacity: 0.5”>

13. COMPOSING AN ENTITY
<a-entity geometry=“primitive: sphere; radius: 100”
material=“color: skyblue”
entity-generator=“mixin: rain; num: 100”>
<a-mixin id=“rain”
geometry=“primitive: sphere; radius: 0.05”
material=“color: white; opacity: 0.5”
event-set=“_event: collide; explode: true”>

14. COMPOSING AN ENTITY
<a-entity geometry=“primitive: sphere; radius: 100”
material=“color: skyblue”
entity-generator=“mixin: rain; num: 100”>
<a-mixin id=“rain”
geometry=“primitive: sphere; radius: 0.05”
material=“color: white; opacity: 0.5”
event-set=“_event: collide; explode: true”
random-position=“min: -10 50 -10;
max: 10 80 10”>

15. COMPOSING AN ENTITY
<a-entity geometry=“primitive: sphere; radius: 100”
material=“color: skyblue”
entity-generator=“mixin: rain; num: 100”>
<a-mixin id=“rain”
geometry=“primitive: sphere; radius: 0.05”
material=“color: white; opacity: 0.5”
event-set=“_event: collide; explode: true”
random-position=“min: -10 50 -10;
max: 10 80 10”
template=“src: #rain-animation”>

16. – @wizgrav
“A-Frame is like when MVC landed in traditional
front-end work…[where] three.js is like jQuery.”

17. Reduces boilerplate
Empowers web developers and designers
Declarative ECS framework for three.js

18. A-Frame Community Sneak Peeks

20. obj-model
rotation
scale material
fog geometry
position
lightcontrols
sound
text collada-model

21. obj-model collada-model
rotation
scale material
fog geometry
position
lightcontrols
sound
text
along-path
leap-motion-controls
proxy-controls
layout
lazy-load
extrude-geometry
collider
entity-generator
physics
gamepad-controls
lathe-geometry
randomizertemplate
gltf
fbx
firebase audio-visualization
follow
meshline
crease
html-shadermouse-cursor
no-click-look-controls
ocean
universal-controls
draw
hreffence mesh-line
hud
gif-shader
aframe-react
grid-helper
interpolation
stereo
aframe-extras
draggable
selectableexplode
noise
text
fit-texture
look-at
d3
aframe-meteor
altspace
orbit-controls

22. 780 members on Slack (http://aframevr-slack.herokuapp.com/)
2000 stars, 40 contributors on GitHub
Over 120 projects featured on https://aframe.io/blog

23. A-Frame Community Sneak Peeks

24. [MULTIUSER]
Multiuser
See you at tiny.cc/aframe-multi

25. A-Frame Editor

27. Embedded Scenes

29. Room Scale

31. Local Multiplayer

33. LinkTraversal

35. Try it out https://aframe.io
Join us on Slack http://aframevr-slack.herokuapp.com/
Follow us @aframevr