2020年6月のアップデートで、すべてのSTYLYユーザーがARシーンを作れるようになりました。
この記事ではSTYLYを使ったARシーンの作り方とARシーンの体験方法を解説します。
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にアップロードしてください。
②STYLY Studioで作成/編集する
ARシーンの作成
STYLY Studioにアクセス後、新しいシーンを作成します。
シーンを作成する際は「AR Scene Template」を使用しましょう。
AR Scene Templateを選択
ARシーンを編集する
STYLY Studioでは3Dモデルや画像などのアセットをアップロードしたり、アセットを配置したりできます。
デフォルトで存在するアセットやGoogle Polyの素材、自分でアップロードしたアセットなどを組み合わせてARシーンを作りましょう。
STYLY Studioの詳しい使い方は以下記事をご参照ください
<Tips>ARテンプレートの説明
①AR Template GridはARシーンを作りやすくするためのグリッドです。
STYLY Mobileでシーンを読み込む際、AR Template Gridは自動で非表示になります。
②Your Positionの前にある四角形はARシーンの配置位置を示しています。
③Publishボタン
AR シーンのテンプレート
<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を商用利用しても大丈夫でしょうか？ | 現在準備中なので少々お待ちください。 |
ARシーンを制作する際の注意点
◆シーンに「Skybox」を配置すると、現実の風景が見えなくなります。
ARシーンを作る場合は「Skybox」を配置しないようにしましょう。
◆STYLY Mobileでシーンを開く際、コライダーの自動生成は行われません。
コライダーが必要な場合は、Unityでコライダーを設定する必要があります。
◆Unityが用意しているVideo Playerコンポーネントを使用し、ローカルファイルシステム上の動画ファイルをインスペクター上で指定してもAndoridでは再生されません。Unityのバグなので、動画を使いたい場合は動画をどこかのサーバーにアップロードし、URLを指定してください。
さいごに
STYLY Mobileは今後も継続的にアップデートを行い、新しい機能やできることの幅が増えていく予定です。
ぜひ今後もSTYLY Mobileのアップデートにご期待ください。