A-Frame Quickstart for Augmented City

06 Jul 2017vraraframewebvraugmented city

Hello! This guide is written for the Augmented City AR/VR lab in Singapore on July 15th 2017, but might be helpful for anyone looking to jump into A-Frame. This first post will orient you to A-Frame itself, and the couple following will focus on VR and AR. Enjoy!

A post shared by rockintosh (@rockintosh) on Jun 9, 2017 at 8:52pm PDT

Augmented City #

The Augmented City event is an all-day workshop focused on quickly prototyping AR/VR experiences on the web, and with a theme of Singapore itself.

What does an augmented Singapore look like? What can it do? What can you do in it? Maybe it tells its own story - its history. Maybe it shows you what music is happening nearby, or which hawker stalls you should try. Maybe lets you see trees that used to be, or shows visualizations of the changing waterline over time as the city grew.

Some more ideas:

• I love these visuals from @rockintosh on Instagam - the ArtScience Museum disintegrating and floating away is fantastic.

• Use public data to create 3D and virtual maps with tools like Vizicities.

• Vive put up a post with a bunch of examples of teaching history through VR, and the BBC made this exploration of the Pantheon in Rome. I've been playing with a model of Kowloon Walled City in Hong Kong (but it's not ready yet...). What in Singapore's history can you recreate virtually?

• These "following eyes" from NYPSIDM students here in Singapore are fantastic. Imagiine an AR version, placed all around the city!

• Tell a story about the musical history of Singapore, or showcase contemporary music using AR. I like this use of AR for scanning record covers to listen and learn more about the music they contain.

• To be honest, I want an AR app that translates the kopitiam menus into something I can understand so I can order coffee the right way... somehow I always order it wrong!

A-Frame #

This guide will help you quickly get up to speed on using A-Frame, Mozilla's library for declarative authoring of 3D content for virtual reality and augmented reality web experiences. The guide contains links to documentation, learning tools, useful components, tips and tools for debugging, and locations for finding help.

Documentation and Learning #

• The official A-Frame website has documentation and examples.
• A-Frame School is a short interactive curriculum for learning A-Frame.
• Check out the A-Frame posts on the Mozilla Hacks blog.
• If you're a podcasty person, check out this interview with A-Frame core developers on the Voices of VR podcast, to learn more about how A-Frame got to where it is, and where it's going.

Start Coding #

Glitch.com lets you author and run full web projects, with HTML, CSS, JavaScript and Node.js. Create a free account and you can start hacking on A-Frame right away. If you're a more experienced developer, check out the A-Frame installation page to add it to your development environment.

• Get started with the A-Frame Glitch example. Click the link and choose "Remix your own". Then try moving the objects around, changing their color, or animating them, to get a feel for what A-Frame can do.
• Try remixing some more advanced examples like the trippy shooting stars or a webcam circus mirror.
• Here's a basic A-Frame example on Codepen

Features and Components #

Some basic things to try:

• Positioning of objects in your scene
• Animation of objects in your scene
• Link traversal - navigating between different VR web pages!

A-Frame's extensibility is an entity component system, which has enabled a huge number of components to be created to add functionality. A few useful modules are listed below. You can create your own components also.

• Add physics to your scenes and objects with Don McCurdy's aframe-physics-system component. Check out Belén Albeza's guide to A-Frame physics on Mozilla's Hacks blog.
• The A-Frame environment component allows you to preconfigure and generate whole worlds.
• Networked A-Frame lets you build multi-user easily. Can you think of a way to augment your city by creating social experiences in VR and AR?

Other A-Frame Projects To Try

• Create your own city with the A-Frame City Builder
• Learn how to build your own Minecraft in A-Frame
• Read through this list of authoring tools
• Awesome A-Frame has links to all kinds of A-Frame libraries, examples, projects that will inspire and amaze.

Objects and Models #

A-Frame supports loading glTF, OBJ and COLLADA models, and there are loads of ways to create your models in those formats, as well as find models you can use. Read more on the 3D Models page on the A-Frame site.

Tools and Debugging #

The most important tool for working with A-Frame is the Inspector, shown in the screenshot above. You can read all about A-Frame Inspector and more tools here.

Participating and Getting Help #

• Stack Overflow is the best place to ask a technical question about A-Frame.
• The A-Frame Slack is fantastic for realtime feedback, community and conversation.
• Follow on Twitter at @aframevr.
• Get inspired by A Week of A-Frame, weekly blog posts by core team member Kevin Ngo, who writes up all the cool projects, demos and components.

Read more on the A-Frame Community page.

---

• Next: Augmented City - VR
• Previous: FOSSAsia 2017