LoginSignup
11
7

More than 1 year has passed since last update.

Immersalのサンプルプロジェクト

Last updated at Posted at 2021-06-29

はじめに

Immersalとは一つのARサービスを現実とバーチャルの世界を組み込んで、AR経験を向上させる。Immersalを使って、大きな空間をマップして、そのマップでバーチャル的な物を付けて、みんなに楽しませる。

Immersal
https://immersal.com/

Immersalサンプルプロジェクト
https://github.com/immersal/arcloud-sdk-samples

準備

この記事ではARCoreサポートされたAndroid携帯、Xiaomi Redmi Note 7を利用します。

プロジェクト設定

GithubプロジェクトのClone
https://github.com/immersal/arcloud-sdk-samples

Immersal SDKを入れる
ImmersalのポータルサイトからImmersal SDKをダウンロードして、プロジェクトに入れる。
image.png
image.png

GithubからCloneすれば、ARFoundation, ARCore, ARKitはすでにプロジェクトにいます。
image.png

Build設定はデバイスに対応して、変更します。

サンプルの纏め

Immersal SDKのサンプルはAssets→Immersal SDK→Sample→Scenesであります。
image.png

Mapping App

MappingAppとは複数の画像から3Dモデルを作成します。MappingAppのシーンをビルドしてください。
アプリを使って、空間をスキャンをします。スキャンする時は、色々の観点から写った方がおすすめです。
明るいところでスキャンしてもおすすめです。

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

スキャンが終わりましたら、Submit For Map Constructionボタンを押してください。
ポータルで、マッピングの状況が見られます。

image.png

アプリからでも処理状況は見れます。まずはモードを変換して、「Download Maps」を押したら、作ったマップの処理状況を表示されます。

tempsnip.png

マッピング結果はポータルから見えます。
image.png

.bytesとはマップファイルです。このファイルはUnityプロジェクトで利用します。
sparse.plyとはPoint Cloudのスパース/展開を見える。
dense.plyとはベルテクス色のメッシュモデルを見える
.glbテクスチャーモデルを見える

参考
https://immersal.gitbook.io/sdk/cloud-service/developer-portal

右の目のボタンを押せば、ウェッブでその結果を見える。下のサンプルでは23枚の画像からロッカーをマップします。少ない画像と多い過ぎて画像の場合はモデルの結果はあまりよくないです。

同じ場所で画像の数を比べました。9枚、23枚、と57枚の画像で試した。GLBの結果はこちらになります。

tempsnip.png

マッピングを完成した後、Point Cloudを空間で表示します。

Content Placement / モデル配置

次は「ContentPlacement」シーンを発行します。その前に、まずは前回作成したマップを「Developer Portal」から、.bytesファイルをダウンロードします。

image.png

この.bytesファイルをUnityプロジェクトに入れます。「ContentPlacementSample」シーンを開きます。「AR Space」のオブジェクトの下に全てを無効にします。一個のオブジェクトをコピーします。ARMapのスクリプトで「Map File」に、自分の作成した.bytesファイルを入れます。

image.png

次、「ContentPlacement」オブジェクトの下に「ContentStorageManager」で、ARSpaceオブジェクトを登録します。

image.png

その後アプリを発行します。こちらはサンプルのデモ動画です。

ContentPlacementサンプルで、マップの対応にして、モデルを直接に配置をしてもできます。こんな風にモデル配置はマップに直接入れました。

そのためにOcclusionオブジェクトは必要です。

新しいMaterialを作成して、MaterialのShaderをVR→SpatialMapping→Occlusionに変更します。
image.png

Point Cloudの位置は想像難しいので、「Developer Portal」からglbをダウンロードして、fbxに変換して、Unity Projectに入れます。シーンに入れた後Point Cloudとモデル合わせます。

image.png

その後Occlusion Objectを作って、Mesh RendererにOcclusion Materialを入れて、完成です。

image.png

で使用したいモデルを入れて発行します。この手順で、竜のモデルをロッカーの裏に隠したいと「HELLO」メッセージをロッカーをぐるぐる周りにしたいです。

image.png

Multimap / 複数のマップ

Multimapとは複数のマップを同時に表示します。このサンプルでオフィスの一部から二つに割れます。左側の赤いボックス「Map A」、右側の黄色のボックスは「Map B」。この二つのボックスから、プリンターのところで(真ん中の緑ボックス)重なっています。

1.png

Map Aの場合、22枚画像を取りました。Map Bの場合、19枚画像を取りました。

image20.png

前回、ContentPlacementでマップ入れる方法とモデル入れる方法を学びました。が、今回は少し違います。複数のマップを入れたら、Point Cloudの位置はめちゃくちゃ二つのPoint Cloudは全く合わってないです。

image.png

その場合、Immersalからの複数なヒントを上げます。

  1. もしこの二つのマップから合わってるところがあれば、ポータルから自動合わせ「Align Maps」とステッチ「Stitch Maps」。
  2. もしこの二つのマップから合わってるところがなかった場合は参考なポイントが知ってるなら、手動で位置あわせができます。
  3. 参考的なポイント知らないし、合わせポイントもなかった場合は、この動画を参考してください。

最初の方法はポータルを開けて、合わせしたいマップを選択して、位置だけを合わせか、モデルもステッチしたいか選択します。
image.png

ステッチの結果はかなりできました。下の画像はそのステッチの結果です。
image.png

2番目の方法は自明です。3番目はマッピングサンプルから複数のマップをダウンロードして、位置合わせます。

位置を合わせたら、MultimapSampleシーンを開けて、DeveloperTokenを入れます。DeveloperTokenはポータルから貰う。
image.png

終わったら、Immersal SDKからAR Map Downloaderを開けます。

image.png

AR Space GameObjectをAR Map DownloaderのAR Spaceに入れます。「,」で別れて、Map Idを入れます。下の画像には例として、適当なMap IDを入れました。Map IDはポータルから貰います。

image.png

「Download and Setup Maps」を押したら、マップを自動でAR Space GameObjectのしたに入れました。赤いボックスのマークされたところは画像の合わせのところでしょう、それで確認できました。

image.png

そのプリンターの位置でOcclusionボックスを作って、モデルを配置にします。その結果は下の映像に上げます。

Map Download Sample / マップダウンロードサンプル

名前通り、マップダウンロードサンプル今まで作ったマップを選択して、ダウンロードして、表示します。MapDownloadSampleシーンを開く、Immersal SDKオブジェクトにポータルから「Developer Token」をいれます。

tempsnip.png

アプリを実行して、起動します。ドロップダウンで今まで作ったマップを選択します。

Navigation Mesh Sample / ナビゲーション

Blenderで間取りを作ってみましょう。このオフィスでは部屋の間取りは単純な矩形な形ですので、作りかたはかなり早いです。ポータルからPoint Cloudマップ ~sparse.ply ファイルをダウンロードしてください。次はBlenderに入れます。

image.png

Point Cloudのオリエンテーションを修正するためにX Axisで90度回転します。
image.png

そのあとPoint Cloudを参考にして、Planeを使って、オフィス間取りを作ります。必ずPoint Cloudのフロアーレベルと合わせてください。
image.png

間取りオブジェクトだけを選択して、fbxとしてエクスポートしてください。

image.png

このFBXファイルをUnityに入れます。Navigation Sample Meshシーンを開きます。Immersal SDKで「Developer Token」を入れます。AR Spaceの下に「Navigation Target~」以外削除してください。「AR Map Downloader」を使って、マップをダウンロードします。今回は「Load Alignment」のチェックを削除してください。

image.png

間取りのモデルを「AR Space」の下に入れます。間取りはもうマップと合わせましたので、調整は必要はないです。間取りのモデルをNavigation Layerに移動します。
image.png

「Generate NavMeshSurface Here」を開きます。その機能は「Include Layer」で選択したLayerから歩行可能な領域を「Bake」ボタンで生成します。歩行可能な領域は青い色のサーフェイスでマークされた。

image.png

けれど、自分のオフィスではテーブル、いす、車いす、と様々な動かないものがたくさんありますので、そのためにはOcclusionが必要です。そこはUnityのゲームオブジェクトとOcclusionシェーダーを使って、解決します。作ったCubeをNavigation Layerに入れます。

image.png

もう一回「Bake」をして、歩行可能な領域はまた生成します。

image.png

アプリを発行して、試します。

Navigation Graph Sample / ナビゲーション

実行中でナビゲーションを作成することも可能です。NavigationSampleGraphシーンで設定します。まずはいつも通り、ImmersalSDKで「Developer Token」を入れます。AR Map Downloaderでマップをダウンロードします。アプリを発行して、実行します。

まずはターゲットを決めてください。ターゲットを決めたらウェイポイント作成します。ウェイポイントを1秒間押し続けると、移動できます。複数のウェイポイントの位置を決めたら、各ウェイポイントを繋がってください。

ナビゲーションを表示したら、ターゲットまで道を表示されます。

複数のナビゲーションターゲットもできます。

ウェイポイントの繋ぐ方向は編集できないらしいので、ご注意ください。

あと、一部のところだけがマップとして登録されたのせいで、ずれてる可能性もあることもご注意ください。

Multiplayer Sample / マルチプレイヤー

編集中

編集中

11
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11
7