Lately, I have been developing with A-Frame, a web framework for VR development on web. You can checkout my blogpost on VR, WebVR & A-Frame to read basics. I played with different components and capabilities of A-Frame in my VR-Ram repository which is deployed at gh-pages. It was really easy to get started with A-Frame. This repository is demonstrating different capabilities of A-Frame – The home page of the repository shows curved images and gazing on each of them takes to different section of the app to demonstrate that part. One of the apps in the repository called Lyrics VR, plays a song in background & lyrics of the song are displayed floating around. I also created an app for virtual tour of an office, which is hosted on this github page. This was very interesting to make these apps more interactive by providing many input/feedback options to user (including gazing and clicking method).
Listing here few of the Concepts / APIs used for the demo:
- <a-scene>: The scene is the global root object, and all entities are contained within the scene.
- <a-sky>: The sky primitive adds a background to a scene or display a 360-degree photo. It is an entity that prescribes a large sphere with the material mapped to the inside. Checkout the source code to see how panorama is added as background image of the panorama demo page & simple colored is added as sky for the vr-ram demo page.
- camera component – to define perspective the user views the scene
- looks-control component – to make the scene rotate when mouse is moved (when you have it mounted on cardboard) or when user clicks & drags the screen
- wasd-controls component – to enable W-A-S-D keys to move in-out-left-right of/on the scene
- <a-animation>: Defined as child to and entity to animate. The API is roughly based after the Web Animationsspecification. Following piece of code is used to rotate the Rubiks cube from ‘0 0 0’ xyz position to ‘360 180 360’ position as shown on the demo page.
<a-animation easing=”linear” attribute=”rotation” fill=”forwards” to=”360 180 360″ dur=”3000″ repeat=”indefinite”></a-animation>
- AFRAME.registerComponent(): To register custom component which can be used with an entity. E.g. I have added auto-enter-vr custom component to vr-ram demo’s apps. It is added to a-scene so that whenever we load this page it automatically enters in the VR mode (user doesn’t have to click on VR mode icon in bottom right corner of the scene on mobile phone for VR mode). Checkout the source code to see the definition & use of auto-enter-vr custom component.
My interaction with the community over Slack & StackOverflow was very supportive. From my experience & exploration, following are my observations about A-Frame:
What is making A-Frame very popular?
- It is very simple to get started with A-Frame. — All boilerplate involved with setting up WebGL, three.js, and WebVR is reduced to one line of HTML: `<a-scene>`.
- It can be used alongside 3D tools – Create models and scenes in tools like MagicaVoxel, Blender, Maya etc and export them to A-Frame.
- With its declarative entity-component-system framework, it is also very powerful.
What is the community like?
- There is a very active GitHub community: 60+ contributors, 3000+ stargazers
- There are active discussions on Slack: 1300 members
- There is a lot of active development: hundreds of projects featured on awesome-aframe (a GitHub repository) and A Week of A-Frame (a weekly roundup on the A-Frame blog)
- The community is also active on StackOverflow
Few cool sites built using AFrame:
- More project at https://github.com/aframevr/awesome-aframe
Contributing to A-Frame:
Being an open source project, A-Frame welcomes volunteers to join. If you are interested, check out the Contributing Guide to jump in!