Written by: Jose Sentís - Frontend Developer
In the early stages of 2019 we launched a new corporate identity created by Folch. This new identity translates the purpose, values and principles of Runroom into a new brand which is currently applied to several online and offline media environments.
Some time after, we began to wonder how this new brand could be applied in new territories, which Runroom hadn’t explored yet, and which we believed had great present and future potential for ourselves and our clients.
We are big fans of learning by doing
Everyone who knows the company well will know that we like to experiment and learn, explore areas and incorporate them to the variety of solutions we offer to our clients. In this way we see AR (Augmented Reality) and VR (Virtual Reality) as two areas of interest with great momentum to be applied into a variety of projects in sectors such as education, health, real estate, and also to have fun!
So far, in order to have access to AR and VR technologies, it was necessary to download an application on our mobile device and some of the most popular examples are already well known. Since the release of Pokemon Go, the development of new applications and new features in already existing applications has not ceased.
How many people did use an Instagram filter just today?
With the progress of technology, we now have many of these tools available on the traditional web environment with all the benefits that this implies. Any brand and any company can today get augmented and be accessible to all its users who own mobile devices or computers with a webcam.
Without going any further, we can search the name of any animal in Google to see an augmented representation of this animal in the camera of our phones.
Today, we are really only accessing the tip of the iceberg of the possibilities that Augmented Reality has to offer. Imagine what this could become in a short period of 5 years. Can you imagine yourself using some device instead of our personal computers or mobile phones?
It is what all science fiction lovers have dreamed of for a long time!
Right now with the use of phones and smartwatches we can, for example, remember where we have parked the car or know the calories we have burned in those long 10km of running at 5.5 km per minute. Still, we are not aware of the contextual information that we could access at any time only by wearing some glasses with AR on it. Imagine now, calculating the consumption of that race in real time, the allergen information by just looking at the plate that we have just been served or translating a poster that we are looking at in a foreign country while we are traveling. This is what we can imagine, but there are things that we do not even know they can and will happen just because we have not imagined them yet.
The progress of technology, and specifically WebXR technology (which is a group of standards that allow the rendering of 3D scenes) allows us, through the WebXR Device API, to do all those things previously only available in downloadable applications. This technology brings these features to devices compatible with it using the WebGL technology (which could be considered the current substitute for the old and forgotten Flash) that has great support with all the major browsers, including Internet Explorer 11, as you can see here.
Thanks to this, we have access to devices such as 3D headsets with motion detection and orientation, glasses with graphic possibilities and the already mentioned computers and cell phones with cameras.
All of these technologies have become much easier and more attractive to use with the appearance of the AR.js javascript library based on other 3D and VR libraries (such as Three.js and Aframe) and which are being already used and tested by many people. These people are creating their own web applications on Augmented Reality. As the creators of AR.js describe it:
"You can experience efficient augmented reality for the web directly on your phone without installing any applications."
In order to start my first AR rendering I found this article which details how easy is to begin your own first project with AR.js: Augmented Reality in 10 lines of HTML.
More documentation of this library, written by it’s authors, can be found here: https://aframe.io/blog/arjs/
During the process of research and exploration of the technology I have found many resources in 101 format, start your AR application in 10 lines, etc. Although most of those tutorials or articles did not go further from there.
The truth is that it was not easy to overcome that initial phase, since on top of not being acquainted with the library, I had no previous knowledge of the 3D and Virtual worlds.
As with all new libraries and technologies, in the first versions there are many changes and little documentation and many of those examples that I came across were incompatible with each other.
By doing a lot of mix & match of those examples on which I relied and reading documentation from the libraries on which AR.js is based, I managed to understand how it worked and assemble a few examples in order to give it the structure of a project.
¿How could all that be shaped into a project?
At the point where we were, the reasoning led us to decide to create a basic component library where someone who was walking the same path we had just walked could find practical examples that they had not been able to find in those 101 sample articles.
In this library we also added the results of this exploration and creation process, which led to a new way of presenting the Runroom brand in a format that could not be imagined until now.
From now on, and understanding the potential of this technology, one of our objectives is to continue exploring this terrain and turn this learning into a project for the enjoyment of all the Runroomers. We set ourselves the goal of organising all that information stored in places that no one remembers or knows how to find, so that it is available in a very fast and very visual way, why not, through bookmarks distributed around the office. In addition to having quick access to those resources, you can enjoy the technology.
For this we have created this GitHub repository where the examples that we mention are available:
https://github.com/Runroom/agumented-reality
You can also explore two examples that we have posted on Glitch, the new trendy platform to express yourself creatively on the web.
https://ar-runroom-model.glitch.me/
https://ar-rocket-animation.glitch.me/
TLDR: VR and AR technologies are here to stay and this is proven by this video that went viral just few days ago.
https://twitter.com/cyrildiagne/status/1256916982764646402
Written by: Jose Sentís - Frontend Developer
Top comments (0)