STYLY Mobile ARシーン作り方 / 体験マニュアル

2020年06月08日 2021年11月04日

2020年6月のアップデートで、すべてのSTYLYユーザーがARシーンを作れるようになりました。
この記事ではSTYLYを使ったARシーンの作り方とARシーンの体験方法を解説します。

1 STYLY Mobileについて
2 STYLYでARシーンを制作する
3 よくある質問
4 ARシーンを制作する際の注意点
5 さいごに

STYLY Mobileについて

これまでSTYLYはVR空間を配信するプラットフォームとして開発が行われてきましたが、2019年11月の渋谷PARCOリニューアルオープンに合わせてARシーンも配信できるXRプラットフォームに進化しました。
これによって、STYLYではVRシーンとARシーンのどちらも制作/配信できるようになりました。

STYLY Mobileとは？

STYLY Mobileは、STYLYに配信されたARシーン（VRシーンも含む）を体験するためのスマートフォン用アプリケーションです。
STYLY Mobileで「STYLYマーカー」と呼ばれるマーカーを読み込むことでARシーンを体験できます。
また、STYLYで配信されたARシーンも、STYLY Mobile上で選択することで体験できます。

AR_sample from DIscont on Vimeo.

※STYLY：STYLYは、アーティストに空間表現の場を提供するXRクリエイティブプラットフォームです。

STYLY Mobile公式ページ
https://styly.cc/ja/mobile/

STYLY Mobileアプリダウンロードリンク

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

STYLY Mobileの特徴

STYLYでのARシーン制作は、VRシーンを作るのとほとんど同様の手順で行えます。
STYLY Studioで3Dオブジェクトやイラストなどの画像を配置してシーンを作成した後、パブリッシュボタンを押すとワンクリックで即座に配信できます。

また、Unityで作成したシーンとプレハブをSTYLYにアップロードして、使うこともできます。
STYLYで制作したシーンはVRでもARでも表示できるので、アーティストはVRやARといった垣根を超えたシーン制作が可能です。

STYLY Mobileで作ったサンプルシーン

以下のSTYLYマーカーを読み込むと、STYLY Mobile用に制作されたARシーンを体験できます。
（スマートフォンの場合、下記画像をカメラでかざしてタップするとシーンを体験できます）

AR Petit Museum

STYLYでARシーンを制作する

①必要な素材をそろえる

STYLYではデフォルトで用意されているアセット（素材類）を使ってシーンを作ることもできますが、自分で作成した素材類（3Dモデルや画像など）を使うと、よりオリジナリティのあるシーンを作ることができます。

まずはARシーンを作るための素材類を用意しましょう。
（アップロード可能なアセットの種類については以下記事をご参照ください）

取り込めるアセットを理解しよう

Unityで作ったシーン・プレハブをSTYLYにアップロードする方法

インタラクティブなARシーンを作る場合は、Unityを使います。
Unityでインラクティブなシーンまたはプレハブを作って、STYLYにアップロードしてください。

UnityからSTYLYにプレハブとシーンをアップロードする方法

Unityシーンアップロード機能の使い方

②STYLY Studioで作成/編集する

ARシーンの作成

STYLY Studioにアクセス後、新しいシーンを作成します。
シーンを作成する際は「AR Scene Template」を使用しましょう。

AR Scene Templateを選択

ARシーンを編集する

STYLY Studioでは3Dモデルや画像などのアセットをアップロードしたり、アセットを配置したりできます。
デフォルトで存在するアセットやGoogle Polyの素材、自分でアップロードしたアセットなどを組み合わせてARシーンを作りましょう。
STYLY Studioの詳しい使い方は以下記事をご参照ください

STYLY StudioオンボーディングをクリアしてSTYLYの基本操作を身につけよう

<Tips>ARテンプレートの説明
①AR Template GridはARシーンを作りやすくするためのグリッドです。
　STYLY Mobileでシーンを読み込む際、AR Template Gridは自動で非表示になります。
②Your Positionの前にある四角形はARシーンの配置位置を示しています。
③Publishボタン

AR シーンのテンプレート

※Your Positionについて
ARモードの場合、Your Positionの位置は特に意味を持たずシーンに影響しません。
ARモードとは、”AR”タグのついたシーンをiOS,AndroidのSTYLYアプリで閲覧した場合になります。
なお、VR版STYLYアプリの場合は、体験時やSTYLY Gallery内の再生時では、Your Positionの位置および向きが、体験時の開始位置となります。

<Tips>ARシーンの原点
STYLY Mobileで水平面検出した際にタップした床面が、STYLY Studioでの原点（0,0,0）に一致します。

<Tips>Skyboxについて
シーンに「Skybox」を配置すると、現実の風景が見えなくなります。
ARシーンを作る場合は「Skybox」を配置しないようにしましょう。
（Unityからシーンをアップロードする場合は、Skyboxを外してアップロードしてください）

ARシーンをパブリッシュする

シーンが完成したらPublishボタンを押してシーンを公開状態にします。
公開状態にするとシーンはSTYLY Galleryに表示されるようになり、誰でも体験できる状態になります。

「#AR」タグが付与されていないシーンはSTYLYマーカーの書き出しができません。
シーンをパブリッシュする際は「#AR」タグが付与されているか確認しましょう。

③STYLYマーカーを作成する

先ほど公開したSTYLYシーンをSTYLY Galleryで開きます。
（パブリッシュ時にURLが表示されるのでそれをクリックするか、STYLY Galleryのマイページから自分がパブリッシュしたシーンを探すこともできます）

「#AR」タグを付与したシーンを開くと、以下の画像のようにマーカーがポップアップします。
表示されたSTYLYマーカーをSTYLY Mobileで読み込むと、ARシーンを体験できます。
（マーカーが表示されない場合は、シーンに「#AR」タグが付与されているか確認してください）

ポップアップの右上のダウンロードボタンを押すことで、STYLYマーカーをダウンロードできます。
また、右上のシェアボタンを押すと、STYLY Mobileを直接起動できるURLを発行できます。

STYLY Mobile App Marker

④STYLY MobileでARシーンを体験する

STYLY Mobileを起動します。
STYLYマーカーを読み込みスタートボタンを押すと、平面検知の画面に映ります。
任意の場所で画面をタップするとシーンが配置されます。
（※一度STYLYマーカーを作成してしまえば、STYLY Studio上でシーンの更新を行っても同じSTYLYマーカーで常に最新のシーンを読み込むことが可能です）

操作手順

①水平検知の枠です。この枠を配置した点を中心にARシーンが表示されます。
②枠内の中心点がSTYLY Studio上の原点（0,0,0）になります

よくある質問

STYLY Mobileについてよくある質問を以下にまとめました。

Questions	Answers
STYLY MobileはAndroidとiOSのどちらに対応していますか？	STYLY MobileはAndroidとiOSのどちらにも対応しています。 STYLYで作られたARシーンはどちらのOSでも鑑賞できます。
STYLY Mobileではどのようなプログラミング言語を使用することができますか？	STYLYはセキュリティの都合上、プログラミング言語を使ってシーンを制作することはできません。その代わりに、PlayMakerというビジュアルスクリプティングツールを使ってインタラクティブなシーンを作ることができます。
STYLY Mobileでインタラクティブなシーンを作ることはできますか？	PlayMakerというビジュアルスクリプティングツールを使って、インタラクティブなシーンを作ることができます。
STYLY Mobileでピープルオクルージョンやフェイストラッキングなどの機能を使うことはできますか？	現状、STYLYはそれらの機能に対応していません。今後のアップデートでARKitやARCoreの最新の機能を使えるようになる可能性はあります。
STYLY Mobileを商用利用しても大丈夫でしょうか？	現在準備中なので少々お待ちください。