Building AR Portal : A door to fascinating AR experience

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.