Overview
Ever wanted to visit an imaginary, fairy world? 😀
It’s now possible. Thanks to Augmented Reality Development. You just need to pick up your mobile, point it at an open space, plot an AR portal and dive into the magical world of your choice.
And what if I say, all this is possible with just 10 lines of code? Wouldn’t it be just a cherry on top?
Coding in AR is a little tricky, if we do not have any support of abstract SDKs. Here, we will use ViroCore, a scene kit for Android ARCore. It provides extreme level of abstraction. Coding with ViroCore is more fun and easier than ever, thanks to those wonderful people at ViroMedia. And, most amazing part of ViroCore is: It’s free !!
Isn’t it jaw-dropping news? 😀
Practical
Let’s dive into some practical scenarios. But before it, you’ll need an API key which can be grabbed by registering yourselves at https://viromedia.com/signup and it is to be added in manifest file as shown below:
We have to add two libraries: ARCore and ViroCore SDK. As it is based on ARCore, it will only run on AR supported devices.
We’ll use the assets provided by ViroCore – sample code. In this, we will have a window of a ship and through that window, we can pass into a beach world, for that we’ll need a 360 degree image of a beach world and a model of ship window and its textures. Place them in assets folder.
Here, .VRX format for model is ViroCore’s own extension. Here, it is basically a .FBX model.
Final output will be something similar to the below image:
In Activity’s onCreate( ) method, we need to set ViroView as content view. ViroView is basically a FrameLayout which initializes the camera for AR.
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mViroView = new ViroViewARCore(this, new ViroViewARCore.StartupListener() {
@Override
public void onSuccess() {
displayScene();
}
@Override
public void onFailure(ViroViewARCore.StartupError error, String errorMessage) {
Log.e(TAG, "Error initializing AR [" + errorMessage + "]");
}
});
setContentView(mViroView);
}As seen, we have a function-call in onSuccess( ) of ViroView’s initialization.
private void displayScene() {
mScene = new ARScene();
mScene.setListener(new ARSceneListener(this, mViroView));
//add light
OmniLight light = new OmniLight();
light.setColor(Color.WHITE);
light.setPosition(new Vector(0, 1, -4));
mScene.getRootNode().addLight(light);
//load ship window model
Object3D shipDoorModel = new Object3D();
shipDoorModel.loadModel(Uri.parse("file:///android_asset/portal_ship.vrx"), Object3D.Type.FBX, null);
//create a portal
Portal portal = new Portal();
portal.addChildNode(shipDoorModel);
portal.setScale(new Vector(0.5, 0.5, 0.5));
//add a beach world
PortalScene portalScene = new PortalScene();
portalScene.setPosition(new Vector(0, 0, -5));
portalScene.setPassable(true);
portalScene.setPortalEntrance(portal);
Bitmap beachBackground = getBitmapFromAssets("beach.jpg"); //load from assets
Texture beachTexture = new Texture(beachBackground, Texture.Format.RGBA8, true, false);
portalScene.setBackgroundTexture(beachTexture);
mScene.getRootNode().addChildNode(portalScene);
//set scene in ViroView
mViroView.setScene(mScene);
View.inflate(this, R.layout.viro_initializing_ar, ((ViewGroup) mViroView));
}
private Bitmap getBitmapFromAssets(String filePath) {
AssetManager assetManager = getAssets();
InputStream istr;
Bitmap bitmap = null;
try {
istr = assetManager.open(filePath);
bitmap = BitmapFactory.decodeStream(istr);
} catch (IOException e) {
// handle exception
}
return bitmap;
}This will add an ARScene in VieroView.
Initially, we have set light position and color.
OmniLight light = new OmniLight(); light.setColor(Color.WHITE); light.setPosition(new Vector(0, 1, -4)); mScene.getRootNode().addLight(light);
Then, we have created and loaded ship window model.
Object3D shipDoorModel = new Object3D();
shipDoorModel.loadModel(Uri.parse("file:///android_asset/portal_ship.vrx"), Object3D.Type.FBX, null);Now, comes the main part. We have created a portal and have added a background to it.
Portal portal = new Portal();
portal.addChildNode(shipDoorModel);
portal.setScale(new Vector(0.5, 0.5, 0.5));
PortalScene portalScene = new PortalScene();
portalScene.setPosition(new Vector(0, 0, -5));
portalScene.setPassable(true);
portalScene.setPortalEntrance(portal);
Bitmap beachBackground = getBitmapFromAssets("beach.jpg"); //load from assets
Texture beachTexture = new Texture(beachBackground, Texture.Format.RGBA8, true, false);
portalScene.setBackgroundTexture(beachTexture);setPassable(true) will allow us to create a portal in which we can enter. We have to set ship model as the entrance of PortalScene.
That’s it. Now, it’s beach time !! 😀
Video
Future
We, here at Yudiz, are targeting to achieve nested portal scenarios (Portal inside another Portal).
Conclusion:
We are just a ‘portal’ away from AR-dominating world. Adapting to such amazing technologies as soon as possible will serve us and our businesses with a great benefits.
You may also like
Top 5 True Business & Opportunities in Metaverse
Cruising through 2024 so far we have seen tremendous growth in terms of technology and it's only mar...
Top 8 Metaverse Development Companies That Will Drive Your Tech Progress
As Apple launched its VisionPro, Metaverse has become a brew...
5 Industries that Leverage AR VR to Revamp their Profit Scale
With the consistent ongoing advancements of raging technologies in the tech space, businesses are ho...
