Category Archives: Mozilla

Throwback: React India Conference, Goa

React India Conference | Sept 26-28 | Goa ❤

The welcome 🙂

One of best talks at ReactIndia 2019 by @Compulves.

Open source love ❤

The surprise JSConfIndia announcement \0/

Will miss this beautiful setting 🙂

Sideloading Oculus Go with Firefox Reality

Update: As you can see from tweet above, the Firefox Reality app is directly available on Oculus AppStore now and you do not need the sideloading anymore, however if you still want to play around with latest version of Reality, here are basic steps. Few of the steps mentioned below are described in detail at Firefox Reality’s Sideload github wiki.

Prerequisites:

  1. ADB setup on laptop
  2. Oculus app on mobile
  3. Account setup on https://dashboard.oculus.com
  4. Firefox Reality APK – it can be downloaded using instructions given below –
    • Go to https://github.com/MozillaReality/FirefoxReality, click on  ‘Build results’ at the bottom of README.md
    • Click on ‘Firefox Reality for Android – Build – Master update’
    • Click on ‘Run Artifacts’ tabs
    • Click on ‘public/FirefoxReality-oculusvr-release-signed-aligned.apk’ to download APK

Steps for sideloading:

  1. Start Oculus Go
  2. Connect Oculus App on mobile with Oculus Go
  3. Turn on Developer Mode from Oculus App
  4. Connect Oculus Go with laptop via USB cable & make sure its appearing in list of devices shows for ‘adb devices’
  5. ‘adb install /path/to/your.apk’
  6. Look into ‘Oculus Go’, go to Libary -> Unkown Sources -> Click on firefox-reality & boom! You are done!:-D

Troubleshooting:

  1. Your Oculus Go is connected to someone else’s account? – If you want to connect it with your account now, then you will have to factory reset this device by following these steps –
    1. Turn off the Oculus go by pressing the power key (look in the display where it shows you the confirmation for shutting it down)
    2. Turn on by pressing Power button & Volume – button together & follow steps to factory reset.
  2. The Oculus Go is not able to recognise the controller? – You can go to Settings tab of Oculus app on mobile & find currently linked controller with your connected Oculus Go’s information. Just Unpair it and use ‘+ Pair New Controller’ option.

Highlights from Netherlands HackerCamp – SHA2017!

SHA, aka Still Hacking Anyways, is part of international non profit outdoor hacker camp series organized once in 4 years in The Netherlands. This year it was organized in Zeewolde on August 4th to 8th and I was honored to be one of speakers at SHA for my WebVR talk. Read my blogpost ‘SHA Hacker Camp: Learning a byte about Virtual Reality on the Web’ on Mozilla VR’s official blog.

Here are more highlights, cool hacks/hacks, from the camp –

  • My WebVR session ‘Building Virtual Reality Website using A-Frame’:

  • SHA2017 field view:

  • Couch Hack:

  • The Stay – Cardboard Tents:

https://twitter.com/ram_gurumukhi/status/894861740470566912

  • Tesla coil show:

  • Kartent Ride Hack:

  • TESLA Car Hack:

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!