Lady Gaga & Bradley Cooper
Intro to Augumented Reality on the Web
Augumented Reality or as it is called in Swedish "enhanced reality" is something that is on strong advances and many large dragons among other things Apple are investing in this. Often, it is that via an application uses a unit's camera and then extends the image from the camera with information. A known example of this is obviously the game of Pokémon Go who became a popular one more years ago when they enriched our reality with various Pokémon figures. In this blog post, I thought to describe some of the techniques available to apply AR on the web
Virtual Reality is the base of Augumented Reality
Augumented Reality is basically not particularly different virtual reality in the sense that both are about to be able to experience objects in a 3D world. In fact, we will utilize VR to create an AR experience by first creating our VR world and all associated items there, removing walls, ceilings and floors and instead use the environment that our camera adds. Therefore, we should first look at how to create VR on the web
A-Frame is a library created by Mozilla to create VR experiences on the web. The library is extremely easy to get started with then for very simple VR environments, no JavaScript skills are needed at all, but it is pure markup with HTML. Here's how their start examples look:
The only thing that really happens here is that we insert A-Frame in the script tag. Creates a scene in HTML with a gray COH this contains a cube, a sphere, a cylinder and a "plate". All of these items are then colored, positioned and the size determined. The markup above causes this:
The example above is ready to experience both with the browser and with a phone can be that both used with and without VR glasses. The Gyrosensors help to give a feeling that you look into an alternative reality
I will not give any deeper insight into A-Frame more than that they have a very good documentation and it is possible to do so much more than in the above example. With a fairly complete API, it can be interacted with the 3D objects, give them textures, etc
Information Transformation Services is endowing the clients with a stunning and impressive visual experience crafted by 3D Modeling Services . We are completely forted to offers our customers with a range of appealing 3D designs that are carefully crafted to meet with all type of requirements.
From VR to AR
Going from the VR to AR is not so advanced really. The only thing needed is that the gray background above is replaced by the unit's camera. Then comes above that instead of in an alternative reality occur in the reality that the camera shows, then the real reality :) One thing just ... How should the 3D objects know where to be placed in reality?
Ar.js is a library created to get the Augumented Reality on the web and just do what we want. It is based on A-Frame and enables the use of the unit's camera as a scene. To be placed in the right place in our reinforced reality, so-called "markers" are used. A chip can be easily described as a QR code-like thing that acts as a zero point for our objects. See below for an example
I tested to build an AR game using A-Frame and Ar.Js who got the job name "Foxhunt". The game goes out to save her chickens by shooting the foxes that show up
As you see in the video, it does not work completely painlessly. The reason is that the camera "loses" the marker and thus does not know where all the objects should be placed. But I have to say that it is quite cool to go around the playing field and go closer and further from just using the phone
Is without chips
As far as I know, there is now no way to drive AR on the web without chips. The reason is that the browsers have limited access to the sensors needed for, for example, placing objects in a place and then fixed at it even if they end up outside image. It is therefore that the browsers lack support for Arkit (iOS) or Arcore (Android). However, there are some experimental solutions that can be worth looking in waiting for the support in the browsers to be greater
Webaronarcore (for Android users) and Webaronarkit (iOS user) are based on downloading experimental browsers to their phone where they canceled archit or arcore and thus access to what is needed to run real ar without markers. I have not tried this yourself, and you should know that this is not something that one should use in production as it is a great shortcoming that users must use special browsers to use it. But it gives us an insight about how it can look like with AR on the web in the future