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:
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
This is a command-line tool for converting 3D model assets on Autodesk's venerable FBX format to glTF 2.0, a modern…
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.
Library - Avidia Labs
Human Anatomy is the complex structure for the surgery and other problems Avidia Labs bring innovative solution where-in…
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:
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:
Introducing Reality Converter - News - Apple Developer
The new Reality Converter app makes it easy to convert, view, and customize USDZ 3D objects on Mac. Simply…
Save your USDZ file and provide the file in the hyperlink like this
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 :)
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:
Avidia Labs ed-tech company provides affordable immersive & breathe taking learning experience using virtual reality…
Happy Coding, Be Safe, Stay at Home and Enjoy Learning. :)