JSFoo 2017

Have you noticed that the development of Virtual Reality experiences has started a major makeover of the computer industry? I believe that Virtual Reality is going to become a primary platform soon, which will completely change the way we work, play and communicate digitally.

The Web, being the most open platform, is now a key participant for providing cool Virtual Reality experiences quickly. I want to propose a workshop about Building Virtual Reality websites using A-Frame in this version of JSFoo. A-Frame is an open-source web framework by Mozilla for easily creating VR experiences using WebVR which work on all platforms. It’s really easy and fun to work with A-Frame to build a VR website, all you need to get started is a basic knowledge of HTML & JS.

In this workshop, audience will learn to use various concepts & APIs of A-Frame and will be able to create interactive and immersive Virtual Reality experiences on the web. This workshop will also cover how different is A-Frame from any other similar frameworks like ReactVR. I will also introduce how one can get involved with the A-Frame community to contribute in its development.

Outline

1. Introduction [10-15 mins]:

• Introduction of Presentor & participants (with some quick fun ice breaker activity - if time permits)
• What is Virtual Reality (Introduction to VR & similar terms, and why is this winning our hearts)
• How one can build VR experiences today (Different options available to build VR experiences + Demos)
• How is WebVR making a difference (Introduction to WebVR and its initia specs + Demo)
• Introduction to A-Frame (How A-Frame out throughs all other options to build WebVR scenes today. + Demos)
• Introduction to A-Frame docs and few tools which can be used while coding.

2. A-Frame hands-on session [40-50 mins]:
We will divide participants into teams to work on set of tasks, whenever required.

• Task 1 [5 min]: Understanding example VR scenes - Teams/invidividuals to try out above shown demos by themself using available source codes provided to them.
• Task 2 [15 min]: Build basic VR scene - Each team is given link of 2-3 VR scenes along with the A-Frame concepts required to build those scenes. I will first shown them a demo by building one such scene and them teams will have to try on their own (organizers/volunteers will help teams build the scenes).
• Talk [5 min]: After above task, once everyone has basic idea of creating basic VR scene. I will present few best practices & tricks - 5 things I learnt about building immersive VR experiences using A-Frame.
• Task 3 [15 min]: Time to bring your creativity on screen - Each team to think of interesting VR scenes and create it by applying all your learnings.

3. Q/A & Followup tasks [10-15 mins]:

• Next steps you can take for building VR experiences.
• Sharing your experience with A-Frame.
• Q/A session.
• Introduction to A-Frame & WebVR community in India.
• How can you participate to A-Frame library or other Mozilla products.

Requirements

1. A laptop/computer (with net connectivity) for coding.
2. A mobile phone and a VR device for testing the VR experiences built.

We need VR Devices (Cardboards / Daydream View / HTC Vives) to test the VR experiences build by audience. We can make few devices available for all participants, additionally we can ask participants to get their own devices with themself.

Speaker bio

Ram Dayal Vaishnav, Senior Web Developer from Arcesium, is very passionate about Open Source and has been to Mozilla’s projects for more than 5 years now. He is also a Mozilla Tech Speaker & Mozilla Representative. Ram was involved with Mozilla’s WebVR framework A-Frame since its birth in late 2015. Apart from code contribution, he has also gave talks on A-Frame at various national and international events including MozFest London and FOSSASIA Singapore.
Ram also co-founded WebVR India group, a developer community in India working on VR development & evangelism. DevDiner.com, a website for emerging technologies developers, recently named Ram as one of their AR/VR inspirations of 2016 for his inspirational work in the fields of VR & IoT. Ram is also W3C contributor in W3C WebVR community group.

Links

• My Blog - https://gurumukhi.wordpress.com/
• Slides from previous talk - https://gurumukhi.github.io/aframe-presentation-explorer/
• Recently concluded event with Mozilla VR team - https://blog.mozvr.com/webvr-india-community-conducts-webvr-hack-night/

Slides

https://gurumukhi.github.io/jsfoo-vr-talk/