How to make STYLY Mobile AR scene/experience manual

With the June 2020 update, all STYLY users can now create AR scenes.
In this article, I will explain how to create an AR scene using STYLY and how to experience an AR scene.

About STYLY Mobile

Until now, STYLY has been developed as a platform for delivering VR space, but it has evolved into an XR platform that can also deliver AR scenes with the reopening of Shibuya PARCO in November 2019.
As a result, STYLY can now produce / distribute both VR and AR scenes.

What is STYLY Mobile?

STYLY Mobile is a smartphone application for experiencing AR scenes (including VR scenes) delivered to STYLY.
You can experience the AR scene by loading a marker called “STYLY marker” on STYLY Mobile.
You can also experience the AR scene delivered by STYLY by selecting it on STYLY Mobile.

AR_sample from DIscont on Vimeo.

* STYLY: STYLY is an XR creative platform that provides artists with a place for spatial expression.

STYLY Mobile official page
https://styly.cc/ja/mobile/

STYLY Mobile app download link

iOS
https://apps.apple.com/jp/app/styly/id1477168256

Android
https://play.google.com/store/apps/details?id=com.psychicvrlab.stylymr&hl=ja

STYLY Mobile

Features of STYLY Mobile

Creating an AR scene with STYLY can be done in almost the same procedure as creating a VR scene.
After creating a scene by arranging images such as 3D objects and illustrations in STYLY Studio, you can instantly deliver it with one click by pressing the publish button.

You can also upload scenes and prefabs created in Unity to STYLY and use them.
Scenes created with STYLY can be displayed in both VR and AR, so artists can create scenes that transcend the boundaries of VR and AR.

Sample scene made with STYLY Mobile

By loading the following STYLY markers, you can experience the AR scene created for STYLY Mobile.
(For smartphones, you can experience the scene by holding the image below with the camera and tapping it.)

AR Petit Museum

Create an AR scene with STYLY

① Prepare the necessary materials

In STYLY, you can create a scene using the assets (materials) prepared by default, but if you use the materials (3D model, image, etc.) you created yourself, you can create a more original scene. I can.

First, let’s prepare materials for creating an AR scene.
(Refer to the following article for the types of assets that can be uploaded)

How to upload a scene prefab made in Unity to STYLY

If you want to create an interactive AR scene, use Unity.
Create inductive scenes or prefabs in Unity and upload them to STYLY.

② Create / edit with STYLY Studio

Creating an AR scene

After accessing STYLY Studio, create a new scene.
Use the “AR Scene Template” when creating a scene.

AR Scene Templateを選択

Select AR Scene Template

Edit AR scene

STYLY Studio allows you to upload and place assets such as 3D models and images.
Create an AR scene by combining the assets that exist by default, the materials of Google Poly, and the assets that you uploaded yourself.
Please refer to the following article for details on how to use STYLY Studio.

<Tips> AR template description
①AR Template Grid is a grid that makes it easy to create AR scenes.
When loading a scene with STYLY Mobile, the AR Template Grid will be hidden automatically.
②The rectangle in front of Your Position indicates the position of the AR scene.
③Publish button

AR シーンのテンプレート

AR scene template

<Tips> The origin of the AR scene
The floor surface tapped when the horizontal plane is detected by STYLY Mobile matches the origin (0,0,0) in STYLY Studio.

<Tips> About Skybox
Placing a “Skybox” in the scene hides the real landscape.
When creating an AR scene, do not place “Skybox”.
(When uploading a scene from Unity, please remove Skybox and upload)

Publish the AR scene

When the scene is complete, press the Publish button to publish the scene.
When it is open to the public, the scene will be displayed in the STYLY Gallery so that anyone can experience it.

STYLY markers cannot be exported to scenes without the “#AR” tag.
Make sure you have the “#AR” tag when you publish your scene.

③ Create a STYLY marker

Open the STYLY scene you just published in STYLY Gallery.
(The URL will be displayed at the time of publishing, so you can click on it or search for the scene you published from My Page of STYLY Gallery)

When you open a scene with the “#AR” tag, a marker will pop up as shown in the image below.
You can experience the AR scene by loading the displayed STYLY marker with STYLY Mobile.

(If you don’t see the marker, make sure your scene is tagged with “#AR”)

You can download the STYLY marker by pressing the download button at the top right of the popup.
You can also issue a URL that can directly launch STYLY Mobile by pressing the share button on the upper right.

STYLY Mobile App Marker

④ Experience the AR scene with STYLY Mobile

Start STYLY Mobile.
When you load the STYLY marker and press the start button, it will be displayed on the plane detection screen.
Tap the screen anywhere to place the scene.
(* Once you have created a STYLY marker, you can always load the latest scene with the same STYLY marker even if you update the scene on STYLY Studio.)

Operating procedure

① It is a frame for horizontal detection. The AR scene is displayed around the point where this frame is placed.
② The center point in the frame will be the origin (0,0,0) on STYLY Studio.

Frequently Asked Questions

Below are some frequently asked questions about STYLY Mobile.

Questions Answers
Is STYLY Mobile compatible with Android or iOS? STYLY Mobile is compatible with both Android and iOS.
AR scenes created with STYLY can be viewed on either OS.
What programming languages can I use with STYLY Mobile? For security reasons, STYLY cannot create scenes using programming languages.
Instead, you can use a visual scripting tool called PlayMaker to create interactive scenes.
Is it possible to create interactive scenes with STYLY Mobile? You can create interactive scenes using a visual scripting tool called PlayMaker.  
Is it possible to use features such as people occlusion and face tracking on STYLY Mobile? Currently, STYLY does not support those functions.
It may be possible to use the latest features of ARKit and ARCore in future updates.
Is it okay to use STYLY Mobile for commercial use? We are currently preparing, so please wait for a while.

Precautions when creating an AR scene

◆ If you place “Skybox” in the scene, you will not be able to see the actual scenery.
When creating an AR scene, do not place “Skybox”.

◆ When opening a scene with STYLY Mobile, the collider is not automatically generated.
If you need a collider, you need to set it up in Unity.

◆ Using the Video Player component provided by Unity, even if you specify a video file on the local file system on the Inspector, it will not be played on Android. This is a Unity bug, so if you want to use the video, upload the video to some server and specify the URL.

at the end

STYLY Mobile will continue to be updated in the future, expanding the range of new features and things that can be done.
Please look forward to STYLY Mobile updates in the future.