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

LibrePlanet 2017: Liberating your open source experience

LibrePlanet is a yearly gathering of free software activists, users, and contributors—and, it's my favorite conference of the year. Here's why.
LibrePlanet is run by the Free Software Foundation, and has steadily evolved from a yearly members' meeting with presentations from staff and board members to a full blown two-day conference with speakers and attendees from all over the world. The event brings people who care about free software together to talk about the future of the movement, address current challenges, and celebrate successes.
Prelude I was invited to give a talk at LibrePlanet 2017 on 25th March at MIT, in Cambridge, Massachusetts representing Mozilla as a Tech Speaker. I reached Boston on 25th early morning. Around 1 AM. The journey itself was awesome till I realized that you don't get Uber or Lyft at Boston Airport.

Not that the apps don't function there. They work! Just no driver will be ready to pick you up from Airport at that time. After trying t…

Maximum Call Stack size exceeded: My mishap with nodejs and MongoDB

Working with nodejs is always an adventure and mix MongoDB with it, and it becomes very interesting for a nodejs enthusiast like me.

While working on a pet project involving Native MongoDb driver and nodejs I encountered a weird problem.

RangeError:MaximumcallstacksizeexceededAs usual my first thought was to Google out what I was facing and googling it out led me to the following to links.RangeError: Maximum call stack size exceededCalling Model.collection.save() RangeError: Maximum call stack size exceeded Also In some posts in MongoDB’s forum I saw that peoples said saving in `process.nextTick` or wrapping the call function in `parseInt` will also fix the problem, but it most certainly didn't work for me.So I started digging in on my own and soon enough found the reason.

If you’re trying to save a document and saving process somehow exited with an RangeError: Maximum call stack size exceeded exception, it’s related to what you want to save in the database. I had this problem a…

All Hands 2016: MozLondon, A recount

I recently had the opportunity to take part in Mozilla All Hands 2016 (a.k.a #MozLondon). Mozilla All hands. All Hands are bi-yearly events of Mozilla where all the paid staff from different teams around the globe meet with each other along with a handful of invited volunteers to disscuss about future projects and get some work done! This year it was in London and just immediately before Brexit (I actually didn't even know about it before I went there). It was a work week, so essentially the event spanned from Monday to Friday. I arrived at LHR on Monday morning, and then there was the awesome Heathrow Express which took me to Paddington, just a 7 mins walk away from Hilton Metropole where I was staying with a bunch of other people. The event started with all of us having an evening orientation familiarizing us with rules and regulations along with Code of Conduct(that turned out to be really important later on...).  Tuesday started with a Planery. Which you can see if you are lo…