Load 3D Model From Firebase Storage | Sceneform | ARCore

in this video I'll show you how a 3d model can be fetched from a firebase storage to do this first we will download the 3d model from the firebase storage then we will save it into the devices local storage and then from the local storage we will retrieve it back as a model renderable and then we will display the model renderable into our augmented reality scene the source code of this project can be found in a github repository I'll put a link to the github repository in the description box and if you find it useful then don't forget to start it because it's free and it makes me happy so enough of the BS now let's get right into it let's start by creating a firebase project I will put a link to this website in the description box enter a name for your project [Music] default account for firebase and then create the project once the project is ready click on continue and from the left panel go to storage then click on get started leave the rules to default and leave the location to default now click on done now we will upload a 3d model in the storage so open a new tab and go to the website poly google.com we will download a model of the Android robot so search Android now click on download and download the updated gltf file we have downloaded a gltf file but in our project we will be using a GLB file because the gltf file is dependent on other files such as the bin and the texture images and if the name of those files changed then the model will not get loaded because of which it becomes really difficult to work with gltf files so i will never suggest you to work directly with GL the files instead use GLB what happens in GLB is all the files that are required for a gltf model are converted into a single file and that is called as GL b you can convert the gltf file into a GL b through an online converter so first extract this archive dot zip open up the extracted folder and we will need to upload these three files to convert it into a GL B now go back to Chrome and search for GL tf2 GLB converter online open this link I'll put a link to this website in the description box you can use any online converter that works and now what we need to do is we need to drag those three files in here and then the gltf will get converted to GL B select all these three files and drag it inside this window and out comes the GLB now we will upload this GL B in our firebase storage so click on upload file and select the out dot GL be filed click on open now go back to the home page of the project and here click on this Android symbol this requires the package name of our Android app so go to Android studio and go to build out Gradle module call an app and from here copy this application ID and paste it in here and then click on register app we will need to include this Google services dot JSON in our project so download this file once downloaded copy it and here change this Android to project and paste the Google services dot JSON in this app folder change back this project to Android and now open the bill dot Gradle file here we will add firebase storage and scene form dependency we will also need to add the scene forms asset dependency now add Java it support now click sync now open the manifests file and here add the permissions internet and camera also declare the feature camera inside the application tag add a our core metadata now open the bill dot Gradle project-level and here we will have to add the class path of Google services comm dot goggle dot GMs Google services version 4.3.3 and we will also have to add the Google services plugin in the bill dot Gradle module level below the dependencies type apply plugin : comm dot Google dot g ms dot Google services and finally click on sync now after setting up the project open activity main dot XML and click on this plate icon so that we can see our XML code replace the root element with relativelayout remove this textview and add a fragment set width and height to match parent gives us an ID AR fragment and name will be com dot google dot our scene form dot u X dot AR fragment after this add a button set width and height to wrap Content ID will be download button set Center horizontal to true and align parent bottom to true and also set margin bottom to 24 DP give this a text download when this button is clicked then we will download our GLB file from the fire base storage now go to mean activity da Java and create an object of a our fragment refer this to the air fragment that we have in our layout and we will have to cast it to a our fragment now find the download button by its ID set this button onclicklistener before we can download the files we will have to initialize firebase in our project so called firebase app dot initialize app this and then we will need an object of firebase storage and we will need a storage reference to our outer dot G lb file here we will have to pass the path of the model the model is located in the root folder so we can just type in the name of the file after having a reference to the model inside the download button called model refs dot get filed here we have to pass a file object where our model will be now loaded so create an object of file and using the static function create Tempah file we will create a file the name of the file will be out and suffix will be glv we will need to surround this with tri cash because this throws an IU exception and then move this thing inside the try-catch model ref dot get file file dot add onsuccess listener new onsuccess listener once we have the file downloaded we will build our 3d model and for that we will create a function named build model and in this function we'll pass the file that we downloaded as a parameter press alt enter and create this function and here create an object of renderable source equals renderable source dot builder dot set source this comma u RI dot parse file dot get path and source type is GL B and the recenter mode will be root if you do not know how to fetch a 3d model at the runtime then I have a video on that I will put it in the description box finally build this renderable source and now we will build our model model renderable dot builder set source this comma renderable source dot set resistor eid file dot get path dot build and then accept the model renderable when the model is built then we will show a toast message which will say model built and then we will store this model renderable object in a global object so create an object of model and a table name this renderable refer this renderable to the model enter a word and now when the airplane is tapped then we will display our model so inside the on create said the ER fragment on tap listener could eat an object of anchor node and pass the hit result anchor as a parameter and then set the renderable of the anchor node to the model renderable that we just created and finally add this anchor node to the scene get scene add child anchor node if we run this now then it won't work because our firebase storage has private rules and without authentication our Android app cannot fetch data from the firebase storage so we will have to go back to our firebase console select your app and then go to the storage section go to the rules and here just remove this condition and add a semicolon at the end now click on publish once this is done you can run and test this application allow the permission and click on the download button the model is built now let's find a plane tap on the plane and you can see the Android robot is placed in the scene

Channel: heyletscode

Views: 21,963

Keywords: load 3d model from firebase storage arcore, load 3d model from firebase storage sceneform, load model from firebase storage arcore, load model from firebase storage sceneform, how to load 3d model from firebase storage arcore android, how to load 3d model from firebase storage sceneform android

Id: 2YtlIiUKNdA

Length: 11min 29sec (689 seconds)

Published: Wed Apr 01 2020