Let's build an augmented reality web app!

In this workshop you will learn how to place virtual text and 3D objects in the real world, so that they can be seen using a smartphone as a 'magic window'. You will learn how to animate things, how to add interactivity, and how to visualize data in AR.

Register

Augmented reality (AR) apps add a virtual layer on top of the real world. This allows you to catch Pokémon in your backyard, but it also has serious potential for education and research: You can use AR to make teaching material more engaging, add 3D models and charts to your research posters, or explore new ways to interact with digital information. Once you know how to augment the real world, the options are endless—and it is a lot easier than you think!

In this workshop you will learn how to place virtual text and 3D objects in the real world, so that they can be seen using a smartphone as a 'magic window'. You will learn how to animate things, how to add interactivity, and how to visualize data in AR. If time permits, you can get creative with your new skills and we will get you started with realizing your very own AR web app idea.

Everything will be built using open source web technology. All you will need to build the app is a computer with a browser. The app will be hosted online and run in any modern browser. The user needs nothing but a smartphone—no installation required.

Learning outcomes

Participants will learn how to use the A-Frame JavaScript library to make 3D scenes for web-based VR and AR, how to add and style text, simple 3D shapes, and pre-created 3D models to the scene, and how to add simple animation and interactivity. They will also get a basic understanding of how to use D3.js to bind data to A-Frame objects in order to create data visualizations in AR.

They will learn how to turn A-frame scenes into AR apps, how to use AR markers to anchor virtual objects in the real world, and how to use QR codes to make accessing the app seamless.

By the end of the workshop, participants will have built a functioning AR web app (an AR greeting card) that is hosted online and accessible with any modern smartphone.

Prerequisites

The course is relatively beginner-friendly. You do not need experience with JavaScript, but previous programming experience is required, and good working knowledge of *some* programming language is recommended. Most of the code we write will be relatively simple HTML. A few parts will be more advanced, but it will be possible (and no shame) to bluff your way through them.

Please bring a laptop with access to the internet and an up-to-date web browser (Chrome, Firefox). Recommended to test your app: a relatively modern smartphone (max. 2-3 years old) and a charging cable.

Target audience

The course is for researchers and educators who want to explore new ways of visualizing knowledge and communicating data, people who want an excuse to make a 3D pie charts, and anyone curious about creating augmented reality experiences.

Go back to the full Research bazaar programme

Published Dec. 13, 2019 1:55 PM - Last modified Dec. 13, 2019 1:55 PM