Skip to main content

VR For Everyone: When you get to play and teach WebVR

This blog is pretty late to the party. But recently I have been having quite some fun with tinkering with WebVR. What started for me initially with mozVR and then standardized into WebVR changed completely when aframe came into the picture!

So let me back off a little bit. WebVR started as an entry pint of browsers coming into play where we could get VR content from directly browser. Just imagine writing a game or environment in javascript,html as a webpage and use your phone/occulus rift and you get transported in virtual reality! How cool is that? No need to use other software, no platform restrictions. As long as you have a browser and an internet connection, you are good to go! However that didn't pan out so well due to how you create them. The only way to properly utilize it was to use WebGL and libraries like three.js. All of this changed when Mozilla released aframe on 16th December 2015. From the aframe team 

A-Frame makes it easy for web developers to create virtual reality experiences that work across desktop, iPhone, Android, and the Oculus Rift.

So it abstracts away all the technical difficulties from you! And makes it much easier to learn. how easy you ask? Well that's what this blog is all about.
I had the awesome opportunity to go and teach (and learn myself) to a group of kids in "The Renaissance Charter High School for Innovation" as part of NYC City TechImmersion program and their Enrichment Week Program. We started our Day 1 with kids who had a little experience in JavaScript to kids who had never programmed! And what they came up in 3 days was not only surprising but awesome!

So straight into some action

This was first day. Everyone just trying to get their hands into some concepts.

Matthew Boyle trying to let students understand how orientation works in real life 



And


Slowly by second day we started watching kids making things like


And


Which slowly started ramping up to this




Oh and also don't forget



My task after letting them live code with me, was to have them built something like this. Which I live coded and projected (it still is hard to follow unless you know the concepts)



And Voila!
This is what one of the students came out with!




And all these are in just two days!
The beginning of the third day was more awesome. Matthew and Sean, the other two instructors who were also learning showed something they made!




Which was supercool. And then we had them work on another task. Which produced something like this!




Finally the class


All these from students, some of them coding for the first time! And they were able to pick up aframe! The basic concepts of programming, how VR works and were able to build demos' environments which they could (and saw) right then in their own mobile phone with help fo Google Cardboard! (provided to them courtesy Mozilla!).

This was an awesome experience for me. And an eye opener how we can get people interested in being inclusive the way we use and treat technology. I really loved my experience and it was a refreshing outlook from my normal conference talks or demos. Here you always have to retrofit your approach to how the kids will find it interesting!

I had some materials made beforehand (and made some more impromptu). So if anyone wants to have a look at them here they are!

The Whole Syllabus + Handbook Slide: Here
Making Your First VR App! (Used as an opener for 2nd day): Here

All the code demos as well as materials are in the slides in jsfiddle and codepen. Some of the demos were acting weirdly in codepen so had to do a duplicate in jsfiddle. The slide has links to all of them.

A small collection can be found here too : http://codepen.io/rabimba/

The way we did it was, I made them fork it and made the required changes I asked in tehir own pen and show it to me. The demos are based on different concepts which goes on building functionality which you can use/build for building your ultimate application :D

Happy Virtual Coding people! And do drop a note if you have any comments or think this can be useful!

Update: It seems Mozilla VR team covered this! Read more about it in their blog and also in the weekly update.

Blog: https://blog.mozvr.com/fun-webvr-times-at-innovation-high/ 

Popular posts from this blog

HackRice 7.5: How "uFilter" was born

I have a thing for Hackathon. I am a procrastinator. A lazy and procrastinator graduate student, not a nice combination to have. But still when I see hundreds of sharp minds in a room scrabbling over idea, hungry to build and prototype their idea. Bring it to life, it finally pushes me to activity, makes me productive.  That is why I love Hackathon, that is why I love HackRice, our resident Hackathon of Rice University.

TL;DR: if you just want to try the extension, chrome version is here and Firefox version is here.
I have been participating at HackRice since 2014, when I think for the first time it was open for non-rice students, and have been participating ever since. What a roller coaster ride it has been, but that is a story for another day. HackRice 7.5 being the last one I will be able to attend at Rice, it was somewhat special and emotional for me.
HackRice 7.5 was a tad different form the other iterations. For starters it was the first time it was being held in Spring semester…

Story of a Drupal theme mis-configuration, Hacking and Ministry of Defense India

If you have been following news or were online for past couple of hours you might have noticed this news making a tweet-storm and appearing all over your timeline regarding how India's Ministry of Defense website got hacked (allegedly by 'Chinese' origin).
Almost all the big media outlets covered it. Including
* Youtube : TimesNow * Times Now * Hindustan Times * NDTV
* Business Standard * Times of India An example of the coverage

Fueled by our own famous ministers chiming in with their own ideas

Action is initiated after the hacking of MoD website ( https://t.co/7aEc779N2b ). The website shall be restored shortly. Needless to say, every possible step required to prevent any such eventuality in the future will be taken. @DefenceMinIndia@PIB_India@PIBHindi — Nirmala Sitharaman (@nsitharaman) April 6, 2018
It all seemed for the fact that the homepage of the websites showed this image with a Chinese character
And though most of india's government portals and websites aren'…

FirefoxOS, A keyboard and prediction: Story of my first contribution

Returning to my cubical holding a hot cup of coffee and with a head loaded with frustration and panic over a system codebase that I managed to break with no sufficient time to fix it before the next morning. 

This was at IBM, New York where I was interning and working on the TJ Watson project. I returned back to my desk, turned on my dual monitors, started reading some blogs and engaging on Mozilla IRC (a new found and pretty short lived hobby). Just a few days before that, FirefoxOS was launched in India in the form of an Intex phone with a $35 price tag. It was making waves all around, because of its hefty price and poor performance . The OS struggle was showing up in the super low cost hardware. I was personally furious about some of the shortcomings, primarily the keyboard which at that time didn’t support prediction in any language other than English and also did not learn new words. Coincidentally, I came upon Dietrich Ayala in the FirefoxOS IRC channel, who at that time was a P…