Explore Google & Apple Web AR on ARCore & ARKit enable devices
Bring Animal Encylopedia to life by Avidia Labs
It all started a week back when the #google3D with the virtual animals was very popular among the parents. We have an augmented reality learner kit, AR Magicpedia so most parents also approached us with this feature as WhatsUp/call or status message :).
Now here all the curiosity started on how to get our product also live so that in this COVID-19 scenario parents can engage their kids with this unique learning.
Spoiler: This article is all about the implementation of the WebAR for all those who are looking forward to implementing such knowledge and want to do some fun learning with it.
To start with something building like this the best article to follow is https://developers.google.com/ar/develop/java/scene-viewer for the google & for iOS and related devices https://developer.apple.com/augmented-reality/quick-look/
Reading this link was a lot to consume and learning as this gives me also update about the model-viewer https://modelviewer.dev/ but when we see the google example there is nothing related to the model viewer then how the direct link opens the webonarcore &webonarkit library interfaces.
Because if this was because of the HTML tag <model-viewer> then it should open in 3D first like in the example.
After reading the google documentation it gives me the idea this is not the <model-viewer> tag but this something different. If someone goes through the link then they could match it and find that google has created special intent which is automatically parsed and understand on the Android platform it looks like:
<a href="intent://arvr.google.com/scene-viewer/1.0?file=https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/Avocado/glTF/Avocado.gltf#Intent;scheme=https;package=com.google.android.googlequicksearchbox;action=android.intent.action.VIEW;S.browser_fallback_url=https://developers.google.com/ar;end;">Avocado</a>Things now seem much sorted when you can call the intent with the correct glb or gltf(another compression file format). For gltf format conversion, I have used this open-source library
Because the original source of the file is FBX.
The is was not pretty clear for the android based devices but for the iOS I have found no solution how to load the file and read it all I got to know about is <model-viewer>support “ios-src” tag but don’t want to call same because I don’t want to load multiple 3D models on my page.
Instead, I want the user to click on the model and learn about the same. [Right now only Iguana is active :) ]
Now iOS after some document reading and visiting the Apple Developer forum got to know about that they directly read the usdz file format which is the proprietary solution of the Apple (if not wrong).
To convert your GLTF file to the USDZ file format it is also simple either you can get it done from many of the online provider's example:
- View AR : https://www.viewar.com/
- Scapic: https://scapic.com/
- Vectary:https://www.vectary.com/
Sorry for not all links these I found most of the internet. You can easily convert your GLTF format to the USDZ but if you have the proprietary models solution like us then you won’t be comfortable on sharing you model files in that case Apple has really done the things in sorted way all you need to download the “Reality Converted” on your Mac Machine which you can from this link:
Save your USDZ file and provide the file in the hyperlink like this
<a href="3dmodels/iguana.usdz">Iguana</a>Try adding the same to your HTML tag voila!!! when you run this solution on your iOS device you get the output something like this.
This is exciting right :D
Now you can also try doing the same @home :) For free credited 3D models you can check sources like Sketchfab or TurboSquid or CGtrader or Cadnav where you can check with any of the downloadable free 3D models with CC license :)
If you are excited to see this you would love to download our application which is available on the PlayStore & AppStore with the Avidia Labs
The kit consist of 120 animals with there Habitat, Life & Sizes along with this learner can take selfie and groupie with there favorite animals.
Check out our website: www.avidialabs.com for more information.
We are in continuous series of adding the learning topic so please do visit the www.avidialabs.com/library meanwhile you can also visit the youtube section where we have uploaded our learning video:
Happy Coding, Be Safe, Stay at Home and Enjoy Learning. :)
