VR Camp – An event for building community around WebVR in India

My journey to Virtual Reality started when I first jumped into WebVR for the Explorer program of my company Arcesium. As part of this program explored WebVR for building VR content on the web and developed a sample VR experience and a VR tour of my office  using A-Frame (read here my experience to get started with A-Frame). I joined the A-Frame community and started contributing to the project. I was also mentioned on A-Frame’s blog various time like on this A Week of A-Frame blogpost. I also got a chance to introduce WebVR to Mozilla India community in a community event.

With this I also jumped into building VR community in India, and our next goal was to conduct various event in India to broaden the community. As part of this goal, we conducted first event, VR Camp Hyderabad, under MozActivate campaign of Mozilla.

 

Here is the summary of the event :

  • 50 [curated] participants attended the event along with 10 volunteers.
  • This was an 14 hour long overnight, fun-filled event 😀
  • Most of the sessions from the event were live streamed.
  • 3 talks by guest speakers over video conferencing (videos & slides links) –
    • ‘6 Things I Learned in One Year of A-Frame’ – By Yoni Binstock (UI developer & VR content creator)
    • ‘VR development techniques and best practices’ – By Patrick Catanzariti (DevDiner.com founder)
    • ‘Key features & upcoming attractions in A-Frame’ – By Kevin Ngo (VR Developer at Mozilla)
  • Participants teams created VR scenes using the event’s learning, find their links on the event discourse.
  • Amazing social reach on twitter with #WebVRCamp & #WebVRIndia. 160+ tweets, reach to 20K+ and 70K+ impressions and still counting.
  • Photos on flickr & Mozillagram.
  • Few tweet mentions –

Have you joined the community yet? Here are the links to our Telegram and Slack channels. See you there and #HappyContributing 🙂 Thanks for reading!

A-Frame experience in a nutshell

Lately, I have been developing with A-Frame, a web framework for VR development on web. You can checkout my blogpost on VR, WebVR & A-Frame to read basics. I played with different components and capabilities of A-Frame in my VR-Ram repository which is deployed at gh-pages. It was really easy to get started with A-Frame. This repository is demonstrating different capabilities of A-Frame – The home page of the repository shows curved images and gazing on each of them takes to different section of the app to demonstrate that part. One of the apps in the repository called Lyrics VR, plays a song in background & lyrics of the song are displayed floating around. I also created an app for virtual tour of an office, which is hosted on this github page. This was very interesting to make these apps more interactive by providing many input/feedback options to user (including gazing and clicking method).

screen-shot-2016-09-30-at-3-59-03-am

Listing here few of the Concepts / APIs used for the demo:

  • <a-scene>: The scene is the global root object, and all entities are contained within the scene.
  • <a-sky>: The sky primitive adds a background to a scene or display a 360-degree photo. It is an entity that prescribes a large sphere with the material mapped to the inside. Checkout the source code to see how panorama is added as background image of the panorama demo page & simple colored is added as sky for the vr-ram demo page.
  • camera component – to define perspective the user views the scene
  • looks-control component – to make the scene rotate when mouse is moved (when you have it mounted on cardboard) or when user clicks & drags the screen
  • wasd-controls component – to enable W-A-S-D keys to move in-out-left-right of/on the scene
  • <a-animation>: Defined as child to and entity to animate. The API is roughly based after the Web Animationsspecification. Following piece of code is used to rotate the Rubiks cube from ‘0 0 0’ xyz position to ‘360 180 360’ position as shown on the demo page.
    <a-animation easing=”linear” attribute=”rotation” fill=”forwards” to=”360 180 360″ dur=”3000″ repeat=”indefinite”></a-animation>
  • AFRAME.registerComponent(): To register custom component which can be used with an entity. E.g. I have added auto-enter-vr custom component to vr-ram demo’s apps. It is added to a-scene so that whenever we load this page it automatically enters in the VR mode (user doesn’t have to click on VR mode icon in bottom right corner of the scene on mobile phone for VR mode). Checkout the source code to see the definition & use of auto-enter-vr custom component.

Here and here you can access source code of my demo repositories, refer to Arame Docs to learn more about the API & Concepts used here. Let me know if you have any other questions.

post-splash

My observations:

My interaction with the community over Slack & StackOverflow was very supportive. From my experience & exploration, following are my observations about A-Frame:

What is making A-Frame very popular?

  • It is very simple to get started with A-Frame. — All boilerplate involved with setting up WebGL, three.js, and WebVR is reduced to one line of HTML: `<a-scene>`.
  • It is very easy to use with existing languages and web frameworks: – HTML, JavaScript, DOM APIs, and it integrate easily with existing frameworks and libraries.
  • It can be used alongside 3D tools – Create models and scenes in tools like MagicaVoxel, Blender, Maya etc and export them to A-Frame.
  • With its declarative entity-component-system framework, it is also very powerful.

What is the community like?

  • There is a very active GitHub community: 60+ contributors, 3000+ stargazers
  • There are active discussions on Slack: 1300 members
  • There is a lot of active development: hundreds of projects featured on awesome-aframe (a GitHub repository) and A Week of A-Frame (a weekly roundup on the A-Frame blog)
  • The community is also active on StackOverflow

Few cool sites built using AFrame:

Contributing to A-Frame:

Being an open source project, A-Frame welcomes volunteers to join. If you are interested, check out the Contributing Guide to jump in!

A-Frame for VR development on Web

14445226_1126693510700233_3449558365570537616_o-copy

Virtual Reality:

Virtual reality is the technology that can simulate a user’s physical presence in a realistic virtual environment. Virtual reality has been creating a lot of buzz for quite some time now. Oculus Rift & Google Cardboard were the early platforms whose launches made developers & consumers realize VR’s practical potential. VR is being considered as next platform after we moved from PC to Smartphone, and this will change how we work, play and community digitally.

Native VR experiences available today have a several downsides such as needing to go through gatekeepers at app stores for distribution, users having to do large downloads and installs, and consisting of proprietary and closed cultures. There are also a lot of cross-compatibility issues because of the fragmented VR ecosystem today.

VR is leading towards a drastic makeover of the computer industry, and the Web has already proven itself as the most open platform, it will be exciting to see how VR will change the web also. During this era of reformation, the Web is not going to remain an exclusively 2D environment. In fact, VR has already arrived to the browser. It is incredibly fun to play and work with! Mozilla & Google have launched https://mozvr.com/ and https://vr.chromeexperiments.com/ websites with some experimental VR experience environments/apps.

Screen Shot 2016-09-30 at 3.59.03 AM.png

WebVR & A-Frame:

WebVR is an open virtual reality platform with all of the advantages of the Web: – open, connected, and instant. More technically, WebVR is set of standard browser APIs that enable direct WebGL rendering to headsets and access to various VR sensors for pose (i.e., position and rotation) and input.

Though WebVR has made it possible to create VR content on the web, but it’s too difficult to create WebVR experiences. With three.js, the most popular 3D library, it takes over 100 lines of boilerplate per project; which is an obstacle if we want to do a small prototype or experiments. The boilerplate also needs to be updated with new versions of WebVR, three.js & needs to handle cross-browser & cross-platform compatibility related issues. What if we could encapsulate all that boilerplate to just one line of HTML and quickly go from idea to prototype without hassle!  Let me introduce you A-Frame, a vehicle to kick start WebVR development.

A-Frame is open-source framework, launched in December 2015 by Mozilla, for easily creating 3D and VR experiences on the Web. A-Frame puts VR content creation into our hands by allowing us to create scenes with declarative HTML that work across desktop, smartphones, Oculus Rift, and the HTC Vive. It takes just one line of code ‘<a-scene></a-scene>’, instead of heavy boilerplate code, to get started; which is very motivating to experiment and prototype. It also saves a lot of boilerplate for creating objects, and similarly does many other magics. We can manipulate scenes with vanilla JavaScript just as we would with ordinary HTML elements (e.g. by inspecting elements on browse), and we can continue using our favorite JavaScript libraries and frameworks (e.g. d3, React). Here is sample code for Hello World program –

Hello World code:

Output:

screenshot_2015-12-20-14-11-23

You can checkout blogpost on my experience about getting started with A-Frame to see why I loved working with A-Frame. Few more related links –

 

Contributing to A-Frame:

Being an open source project, A-Frame has an awesome community of volunteers. If you are interested, check out the Contributing Guide, join WebVR-India Telegram group or A-Frame Slack channel. Looking forward to see you there, #HappyContributing 🙂

aframe

Kalavantin Durg Trek

Monsoon is what trekkers always wait for & last weekend we chose Kalavantin Durg trek to explore. The Durg is located near Mumbai on western ghats at elevation of 2700 ft. This trek is also known as one of most dangerous treks because the for summitting the peak mostly we have to follow steps which are treacherous. This was quite dangerous to choose peak monsoon time for this trek because its very slippery over there at this time & its raining most of the time. But we found these points which made us more interested in this trek at this time, and this was really super adventurous. Here are few aerial view pictures of the durg taken from internet.

We started our journey by train from Hyderabad to Karjat, then took bus for Shedung & then took auto to reach Kalavantin base. Then 2-3 hours hiking to the base village. We did lunch near beautiful water stream, round of introduction& lot of fun on the way to village.

Reached base village by evening and had dinner there. We again had a lot of fun (including an interesting ghost story telling session) before sleeping. Then we woke up at 5 & started trek to Kalavantin Pinnacle at 6. It took us around 1 hour to reach the top. It was very pleasant there (unfortunately because of lots of clouds we were not able to see other forts from this peak)

Descending the hill was very tricky and challenging. We reached base village by 9, had breakfast & reached to base (main road) by 11 and caught our train back to Hyderabad at 3. This was a lot of fun & we got many new friends from the trek (thanks HTC for organizing this trek).

IMG_1321.jpg

Filing ITR

Instructions for filing ITR through official website

  1. Register and login to website https://incometaxindiaefiling.gov.in/
  2. Click on Quick e-file ITR (or use Prepare and Submit online ITR option under e-File menu).
  3. TAX DETAIL page : Check if tax details are already populated as per your form 16
  4. INCOME DETAIL page :
    • Income from salary (B1) column should have amount mentioned in “Income chargeable under the head ‘Salaries’ (3-5)” column of your form 16.
    • Deductions mentioned in your form 16 (Deductions under Chapter VIA) should also be filled in deductions on this page.
    • If both of above is done then value mentioned in column Taxable total income (C2) should match with Form16, and ideally columns D12 & D13 (Amount payable & Refund) should be zero because you would have already paid exact tax amount.
    • Income from other sources : Mention interest earned on saving accounts.
    • You can request deduction on above income under 80 TTA upto 10,000 Rs (basically if your savings account earning is less than 10,000 Rs then you need not to pay any tax on this)
    • If you have made any donations, mention relevant information in 80G tab. It will auto-populate the amount in deductions section on Income detail tab.
  5.  PERSONAL DETAIL page : Provide all personal details as required.
  6.  TAX PAID AND VERIFICATION page : Enter all bank accounts details & check final refund amount or additional amount to be paid and finally submit the form.
  7.  VERIFICATION : After submitting the form last step is verification (simply follow the steps given on the site).
  • Salaried individuals should select ITR-1 Form.
  • Assessment year will be year next to financial year
  • You can also check 26AS if you want to confirm your income tax credit statement
  • SBI credits interest on savings account on 25th June & 25th Dec of every year.
  • Citibank does the same at the end of every quarter.
  • Please note this post is useful & sufficient only if you have simple form 16 & your complete tax is already paid.