How to use Immersal and STYLY to create AR contents that match your real-world location

When creating AR contents, a good mix of real space and virtual objects can make the experience more attractive.
However, in order to combine real space and virtual objects, you need to measure the size and location of the real space and recreate it accurately in Unity.

It is a very time-consuming task to measure the location of each object and reflect it in Unity.
In this article, I’ll show you how to use a service called Immersal to create a model of a room and easily create AR contents using space.

Sample

Here is a sample for this article.
The goal is to use STYLY mobile to display an object at a targeted location in a room. (Click to play the gif)

Flow of this article

I explain the flow of this project.

• First, register with Immersal as a developer, take a picture of the room from the app, and create a 3D model of the room.
• Next, download the completed 3D model, convert the file format using blender, and import it into Unity.
• Then, upload the room model to STYLY and create a scene in STYLY Studio.
• Finally, upload the completed scene to STYLY Mobile.
  This is the procedure we will follow.

Register with Immersal

First, register as an Immersal developer so that you can use the app.
Register as a developer from Immersal’s developer portal here.

Take a picture and upload it to Immersal

After completing the developer registration, take a picture and create a 3D model using the Immersal smartphone app.
(IOS, Android compatible)

Open the app and take a picture from the shooting screen.

When taking pictures, take a full circle around the room.

You can create an accurate 3D model if you are conscious of leaving part of the scenery from the previous picture when you take the picture.

The options menu in the lower right corner allows you to switch between the following

• Record GPS information
• Record the image in color
• Guide the continuity of the image

The last item is recommended to be turned on as it will help you create a beautiful 3D model.

There is an official guide here, which you can refer to if you have any trouble with the shooting process.

https://immersal.gitbook.io/sdk/tutorials/how-to-map

Once you have finished taking pictures, upload the map data from “Submit for Map Construction” to create the 3D model.

Download the 3D model from Immersal

After a while, the 3D data will appear in the Developer Portal.

Among several files, download the glb format file.
This is the 3D model data of the room.

Converting from glb to fbx in Blender

Unity does not support the glb format.
Therefore, we will use blender to convert from glb format to fbx format.

Open blender and open the glb file that you downloaded from File > import > gltf2.0.

Export the glb file as a fbx file using File > export > FBX.
Make sure to remove Camera and Light from your blender scene when exporting.

Import the exported fbx file into Unity.
Now you can import your model in Unity.

After importing into Unity, upload to STYLY

Prefabricate the 3D model and upload it to STYLY.

At this point, the room model has been scaled to the same size as in reality, so there is no need to change its size.
Also, this model will eventually be hidden and uploaded in Studio, so we will not place any contents in Unity.

Let’s upload the 3D model to STYLY.

Create a STYLY account
Sign up for free

How to create a STYLY account

How to upload to STYLY

How to upload from Unity to STYLY

Creating a scene in STYLY STUDIO

Open STYLY Studio and place your content.
Create a STYLY scene by clicking “Create” in the upper right corner of the screen.
Since this is an AR piece, let’s use the “AR Scene Template”.

First, place the 3D model of the room you uploaded, and then place the other 3D models based on it.

Be careful where you place the origin of the content (the rectangle with 0,0,0 written on it) in the 3D model room.
If you don’t remember this, the origin will be shifted and the 3D model will not be displayed correctly when you display it in AR.

Publish the scene

When you have finished placing the content, delete the room model at last.
You will not be able to see the real objects anymore.

Then publish the scene.

Actually launching the scene

Finally, let’s check it out for ourselves.

If you place the launch plane at the same location as the origin in Studio and play the content, the content should appear at the same location as simulated in Studio. (Click to play the gif)

Summary

In this article, I introduced how to display a 3D model by synchronizing its coordinates with reality.
There is a limitation in that it can only be launched in a limited number of locations, but it’s a free and easy way to create a 3D model, so give it a try!