Road To WebVR using MozVR A-Frame

img5

Hello everyone who are going through this blog post. I have divided the contents of this post into two sections :

  • My experience on getting started with A Frame
  • Simple & basic tutorial for beginners to get started with A Frame

1. My experience on getting started with A Frame

I came to know about “Web Virtual Reality” in a meet up organized by Mozilla India. Earlier, I had a very basic idea of VR. I mean as such, no idea but I knew that virtual reality is something which can give us a illusion of reality or some real scenario without its physical existence or what we called it ‘Virtual’. Even after the meet up, I didn’t have much knowledge and concept of virtual reality. Later on, I joined the focus group of MozVR and attended few hangout calls and then I got to know about how to contribute to this project and how to start from the scratch. Then, I created few scenes by using A Frame. In the beginning, I felt somewhat bored and uninterested but when I continued making scenes for more few days, I started feeling creative and took deep interest in designing various types of scenes. It’s really interesting. The main thing is that it is not necessary for you to have knowledge of hardcore coding or programming concepts to learn A Frame, what you just need is a very basic knowledge of HTML. For me, I found it very easy to learn and develop scenes or webpages using A Frame.  And I am pretty sure that you will also find A Frame a very easy tool and framework to get you start with Virtual Reality and really you are going to enjoy it. 😀

2. Simple & basic tutorial for beginners to get started with A Frame

Before moving to tutorial, let me to tell you following things :

> What is Virtual Reality ?

Virtual reality is an artificial environment that is created with software and presented to the user in such a way that the user suspends belief and accepts it as a real environment.
OR
Virtual reality is the term used to describe a three-dimensional, computer generated environment which can be explored and interacted with by a person. That person becomes part of this virtual world or is immersed within this environment and whilst there, is able to manipulate objects or perform a series of actions. [Source – Internet]

> What is A Frame ?

A-Frame is an open-source WebVR framework for creating virtual reality (VR) experiences with HTML. We can build VR web pages that we can walk inside with just HTML. Under the hood, it is a three.js framework that brings the entity-component-system pattern to the DOM. A-Frame is built to make virtual reality more accessible to the web community and to kick-start the WebVR content ecosystem. It is easy to learn and fast to develop, allowing us to quickly prototype patterns and experiences. A-Frame is a vehicle in which to make WebVR successful. [Source – aframe.io]

Wohoo !!! Now we can start our tutorial 😀 😀

1. Firstly, I would suggest you to visit A Frame website. A Frame is developed by Mozilla so it is also named as “MozVR”. You can see this in the bottom right corner of this website. Here is the screenshot of this website’s home page :

aframevibhanshu

Please go through the modules and contents of this website seriously because it is going to help you more than my blog post as I would not be possible for me to explain and cover each and every API, Components, Primitives and concepts here. On the left hand side of this website, there are few examples which you can go through and understand  what actually you are going to do by using A Frame.

2. Click on the very first module on the top named as “Docs”. Here you will find introduction, concepts and API, primitives, components and much more. Just go through all this quickly. As you are a beginner, don’t get trapped in high level concepts in the very beginning. We should always start from easy concepts and then gradually move to high level concepts. So for now, I am going to focus on Primitives mostly.

3. Open your text editor (whatever youuse, I use Sublime Text) and put basic HTML tags you know (i.e., <html>, <head>, <body> etc.). To use and integrate the functionalities of A Frame in our code, we have to include JS build by using the tag as follows :

7

Currently, 0.3.0 is the latest version.

4. Now, I am going to use two or more primitives (like <a-cone>, <a-sphere> etc.) to develop a very simple WebVR scene. Remember, whichever primitive or attribute you will use, it must be put in <a-scene> tag and then <a-scene> tag again inside the <body> tag. Don’t forget to close all the opened tags you have used in your code. Everything in a scene is an entity which we compose and attach components (like position, color, radius, height, width etc.) to add any appearance, behavior, and functionality.

5. Firstly, I am using <a-cone> primitive to have a cone in my scene. According to your choice, you can set desired position, radius, color etc of your shape.

1

Output :
3

6. Now, I am going to add more shapes to the existing scene so that it look meaningful. 😀

4

Output :

2

7. As it’s so easy to design such scenes, I have not taken care all the the steps one by one to add extra shapes in the above output. But friends, A Frame is not just limited to adding these shapes only. A Frame is very vast and you should try other primitives, components and concepts also. You can try videos, curved images, animations, sounds, mixins and much much more. 😀

Are you ready to create your own scene ?
Excited ?
Yes You Are. 😛
Go Ahead !

MozVR

Advertisements

Mozilla India Meetup 2016

This blog post is all about a festival which was celebrated at Pune starting from 26th August and 28th August, 2016. During this festival, the citizens of Open Web celebrated the openness, new opportunities and diversity among themselves. I usually call these citizens “The Mozillians – Protector of Open Web”. If I would mention a particular name for it, it is Mozilla India Meetup. Yes, you read it right.

Mozilla India Meetup – A grand gathering and event hosted by the most diversified and techy community “MozillaIN Community” wherein Mozillians from all around India and outside India irrespective of gender, age, culture, religion, profession, interests etc. participated with their full potential and enthusiasm with a single motive and aim to promote Mozilla’s mission. Isn’t it sound good ? A large number of diversified people strives for and supports a single cause – To promote Openness, Innovation and Opportunity on the web. That’s why I always like to give this group of Mozillians a tag line “Unity in Diversity”.

mozilla_indiameetupvibhanshuchaudhary

Well, this meetup had a main objective to restructure and refine Mozilla India Community with a goal and vision to enable the community to uphold the Mozilla mission at any scale,  while remaining relevant to individual contributors.

But here, I am not going to elaborate the whole restructure proposal and process but wish to share my personal experience and view over it. The first awesome thing that happened to me was meeting with George Roter, Dietrich Ayala and Bradley while I was waiting at the airport. This was really a great co incidence. We had a long talk on the future of MozillaIN Community and restructuring process. I really appreciate the energetic nature of these three awesome guys. This meetup consisted a plan for two days that was scheduled separately with different sessions on each day. The first day started with a great zeal and enthusiasm and excitement could be easily seen among the Mozillians. There were about 100+  Mozillians that were present over there. I was also a part of documentation team so I had a great experience while working closely with other Mozillians and learning the documenting skills. We had a large number of breakout sessions on both days like Rust Programming, Connected Devices, MozillaVR,  Mozilla Policy & Advocacy, Mozilla Campus Clubs and many more including the “Restructure Proposal” session which was common to all Mozillians. There were a lot of fun activities that were organized to keep the Mozillians energetic and in active Mode 😀 .

mozillaindiameetu_vibhanshuchaudharymozillaindiameetupvibhanshuchaudharymozillaindiavibhanshuchaudhary

The session on ‘Branding’ facilitated by Bradley and session on ‘Diversity’ by Konstantina were amazing and resourceful. There were serious branding issues associated with the existing FSA program. According to me, one of the issue in FSA program was “We all were centrally leaned towards the word Firefox and the whole FSA program used to revolve around it. However, we need to rethink that Firefox is just a product or software developed by Mozilla, Mozilla is not only about Firefox. However, Mozilla stands and exists with a much broader mission and vision.” I don’t know that what I explained is up to point or not but I tried and expressed my view ‘Openly’ that is also an integral part of Mozilla’s mission.

img_20160828_103542

In a nutshell, the restructuring idea that was proposed during the meetup is going to be very effective and able to fulfill the vision of our community. However, the success lies in its successful implementation and working in real time scenario. This event gave me a great platform and opportunity to meet new Mozillians and sharing my views with them. I enjoyed these three days to my fullest and bags the title for being “Happy Moments” in my life.

mozillaindia_meetupvibhanshuchaudhary

Moz TechKnack’16

NIET firefox club poster1

This time I got late blogging my event TechKnack’16 organized by NIET Firefox Club in association with Mozilla Reps and Noida Institute of Engineering & Technology, Greater Noida. The event was organized on 26th February 2016. It was a full day event in which many workshops and contests were held.So, I should describe this huge event line by line. 🙂

All the participants, event organizers, coordinators and college officials (Director, HODs, Dean, Advisors & Faculty members) gathered in Auditorium of CSE Department. Crowd of participants and attendees motivated us to rock the event. The event got started with the lamp lighting ceremony by the college officials.It was a great moment of us. Two of our club FSAs started introduction of FSA program, club, Mozilla and awesome opportunities in the FSA program ahead. After 5 mins , I joined them and spoke up on Open Source and Mozilla and inspired the presentees to join the FSA program.I was feeling proud saying that Mozilla Firefox is the most secured browser on the web with availability in Indian languages also.One thing which made the event a huge success and influenced the students was the video message from our very known Faye Tandog (Mozilla Phillipines). She did talk about FSA program and endless opportunities after joining the global FSA program. She also talked about Mozilla’s mission and vision. I really appreciate her for her awesome video message and supporting our event with precious words.  I gave a vote of thanks to HOD sir for giving immense support in organizing this event and making the resources available.In the end, I presented him a Mozilla bag in the form of appreciation for his valued support and contribution.

Now the Director , HODs and Dean were invited on the stage one by one to say few words about our event. I personally liked the speech of our HOD(CSE) Dr. C S Yadav because they related our club with Mozilla and Open Source in the best possible way and also he gave a tagline for us “To the Students, From the Students”. Now, one club coordinator communicated the agenda for the event that how will be go through the whole event.

Event consisted of three workshops on J2EE & Web Hosting and Ethical Hacking and one coding contest in the second half which was mandatory for all participants.Workshop trainers introduced Light Beam in all computer labs and told the benefits of using it. Participants also downloaded Firefox on their Android phones also. On the next day, winners of coding contest were declared. I distributed Mozilla swag and trophies to all the winners and runner ups. Participants were spotted very enthusiastic and excited that day.

The agenda for the event can be found on the following link :

https://reps.mozilla.org/e/techknack16-niet-firefox-club/

I would like to thank Mozilla Representative Bala Subramaniyan without whose valued support and help this event might not be possible. Or I may say that Bala is the person behind the successful completion of our event.He is really a good friend and mentor. I would thank Faye Tandog for his special video message. Last but not least, thanks to all event coordinators and participants.

Event pics is available on the following link : https://goo.gl/p4D5dM

My Experience as a Firefox Student Ambassador

My name is Vibhanshu Chaudhary , student of Computer Science & Engineering and Club Lead (CL) at NIET Firefox Club.

I can never forget the date on which I applied to become a member of FSA program. Yes , It was 25th April, 2014. Before it , I did not know about this program. When I read about the FSA program , Mozilla Manifesto and story , I got excited to join this program and contribute to it. So , My journey towards Mozilla started with this day.

Now , You can also call me an Mozillan and Firefox Student Ambassador too. Unfortunately , I had some tough and unfavorable time in my life during those days , due to which I couldn’t contributed to FSA program. But everyone knows tough time does not last long. So , I again thought to do something for Mozilla. In this time , I came to know about Club Lead examination. I applied to become CL and gave the CLT exam. After a long duration of more than one month , I got mail from the FSA Eboard that I have been selected as a CL and I may carry my role as a CL officially. That day was an awesome for me. But there was no Firefox Club in my college , so I made my club registered on Mozilla wiki and named it as “NIET Firefox Club“. In parallel to this , I recruited about 70+ FSAs in my club and organized various events in college regarding FSA program. Meanwhile , I started contributing to MLS and MDN.

Being a FSA , It helped me to develop social relationships and leadership skills , got an insight about open web and open source , came in touch with other awesome Mozillians like me and got a social identity.

Capturemm

In whole , my experience as a FSA  is just awesome and I love Mozilla. I also wish that other open web enthusiasts like me should also join the FSA program and get a golden opportunity to uplift themselves in every context of life.

There are many such moments in this journey which I cherished and enjoyed the  most which I will express in my next post.

Vibhanshu Chaudhary
Firefox Student Ambassador
Proud Mozillian
Club Lead (CL)
India

Presence of NIET Firefox Club on Net Neutrality

NIET Firefox Club organized a seminar on the issue of Net Neutrality.The main objective or aim of this seminar was to spread awareness about Net Neutrality among the students.We had a very meaningful and healthy discussion about Net Equality.About 40-50 students including club members attended the seminar.

There are some following points which were discussed in the seminar :-

  • What is Net Neutrality ?
  • How it is going to affect us ?
  • Should we fight for it ?
  • Web without Net Neutrality
  • What an individual can do to support it ?
  • Regulatory Framework for Over-the-top (OTT) services
  • Web discrimination
Member (NIET Firefox Club)

Member (NIET Firefox Club)

The seminar host finally concluded the discussions and reached at the point that TRAI must accept and practice Net Neutrality to keep the web alive and open.

The authority asks 20 critical questions. You can send in your responses to advqos@trai.gov.in.

Do make your opinion count. Otherwise, next time, this page may not load properly on some Internet service.

Web Education Lead (NIET Firefox Club)

Blogger

IMG-20150422-WA0018

Web Education Lead (NIET Firefox Club)

Entrepreneur

Entrepreneur