WebXR SF Workshop Series: Creating WebXR app for Transportation with AFrame

With the availability of Augmented Reality (AR) capabilities on millions of mobile devices, 3D is becoming a common part of UI for applications from Google Maps to Ikea. Cheaper Virtual Reality (VR) devices like Google Cardboard and MergeVR allow museums and teachers to create interactive experiences that anyone can try out in their living room. WebXR Device APIs are enabling Augmented and Virtual Reality experiences that will be an important part of web development.

Join us in this session of our workshop series, created by Kieran Farr: WebXR for Transportation: Create safer streets with open-source, web-based tools.

• This beginner friendly course will guide you through the process to create your own custom 3D street using A-Frame and Glitch for sharing with your friends and community!
• This is OK for absolute beginners with basic HTML experience!
• No special VR device required! The course will target desktop and mobile user experiences, and we’ll also discuss Oculus Quest (for VR) and Android (with ARCore enabled devices for AR) and you can use these devices with your custom creation.

Leaving this course, you should be able to create:

• your own 3d street scene to share with friends!
• interaction method targeting device of your choice (mobile, desktop, vr, ar)
• customize sky and lighting
• add highlights and animation?
• presentation capabilities?

Brief agenda:

• intro / overview of course / format / etc.
• intro to a-frame, what is an a-frame scene, html (declarative) basics
• opening up a sample scene and begin to modify attributes
• position, rotation, primitive width / height / depth
• animation ?
• components in general

examples of open-source transpo tools

• streetmix
• streetmix3d
• abstreet
• shared-row

example projects to share:

• brt simple https://github.com/kfarr/brt-webvr/issues/1
• maps tiles simple (glitch or github?)
• signals complicated (glitch)
• streetmix3d (choose a few street URLs)
• glitch ui example?

If you are interested in learning basic concepts about 3D on the web and WebXR, checkout WebXR Lessons: http://bit.ly/WebXRCurriculum or previous stream video: https://www.twitch.tv/videos/820212477.

This is a joint event with WebXR SF meetup: https://www.meetup.com/Web-VR