Display 3d models using SceneForm Scenview in yourApp Using Firebase

Century Desk displayed in SceneView

OVERVIEW:

ArCore is a software development kit developed by Google, it empowers developers to create immersive augmented reality experience in android apps. However, support for mobile devices is limited to some devices.

ArFragment vs SceneView:

3d model in ArFragment

ArFragment empowers an immersive Ar experience in the android app. It enables the user to place a 3d model in one’s place and interact with it.

3d model in SceneView

However, Sceneview works differently; we add a 3d model in scene view just like Ar but inside your app.

What to expect?

In this post, I will load a 3d model from firebase storage on to scene view. We will make the 3d model transformable so the user can interact with it, like the video below.

Lets Start Coding:

Step 1: Setting up the Project

First, you need to add these Dependencies to the app-level build.gradle

// Provides ArFragment, and other UX resources.
implementation 'com.google.ar.sceneform.ux:sceneform-ux:1.17.1'
implementation 'com.google.ar.sceneform:assets:1.17.1'
// Alternatively, use ArSceneView without the UX dependency.
implementation 'com.google.ar.sceneform:core:1.17.1'

Set Compile options to Java 1.8

compileOptions {
    sourceCompatibility JavaVersion.VERSION_1_8
    targetCompatibility JavaVersion.VERSION_1_8
    
}

To use scene form, you must set the mini SDK API level ≥ 24

last, add the permissions and requirements to your app’s manifest file

<uses-permission android:name="android.permission.CAMERA" />
<uses-feature android:glEsVersion="0x00030000" android:required="true"/>
<uses-feature android:name="android.hardware.camera.ar" />
<uses-permission android:name="android.permission.INTERNET"/>android:required="true"/>
<application...>
  <meta-data android:name="com.google.ar.core" android:value="required" />

Step 2: Setting up the Arcore Session and installing Google Ar Services

Add this code to your main activity. It checks if the device has Google Ar Services installed, if not then prompts the user to install ArCore.

Step 3: Downloading model from Poly and converting it to GLB

First, go to https://poly.google.com/ and download a model in updated GLTF format

model from poly

After downloading it extract it to a folder you will get something like this

Now, go to https://glb-packer.glitch.me/ drag and drop both files on to the website. It will convert the model to GLB format

Step 4: Add the model to firebase storage

Go to Firebase Storage and upload the model. After the upload is completed copy the link of the model

Firebase Storage

Step 5: Setting up our onCreate function

In this function paste the firebase storage link in a variable. Make a transformation system that enables us to rotate, scale, and move the 3d model.

Step 6: Building the 3d Model from the link

Now we will build the model using the link and then save it into a model renderable. We will also check whether the internet is working.

Step 7: Last step is to load the renderable on the scene view

In the last step, we will create the node, we will use the transformation system to set it up. To attach it scene view we have to set the parent of the node to scene view. Then we will set its local position to (0f “x-axis”, 0f “y-axis”, -2.3f on “z-axis”) and set the renderable of the node to the model that we just built.

Result:

You can get the code at

Kashif-E/SceneViewExxample

So, What Next?

Arcore is very powerful, you can use ArCore to build many interesting apps l Snapchat, furniture apps like IKEA, and many more. We have not used the camera functionalities in this app but the real power of ArCore is in augmented reality apps. What apps would you like to build using Arcore?