| 更新日時 | 更新内容 |
|---|---|
| 2024/4/5 | AR City Miniature チュートリアル公開 |
| 2024/01/30 | AR City Miniature 初回リリース |
- 1. サンプルプロジェクトの概要
- 2. 利用手順
- 3. サンプルプロジェクトのカスタマイズ方法
- 4. サンプルプロジェクトで使用しているミニチュア3D都市モデルの構成手順
- 5. サンプルプロジェクトの作成チュートリアル
- ライセンス
- 注意事項/利用規約
- このサンプルプロジェクトでは端末のカメラを利用したARアプリケーションを体験することができます。
- アプリケーションで読み取ったARマーカーの上にPLATEAU 3D都市モデルのミニチュアオブジェクトを表示します。
- AR空間に表示したPLATEAU 3D都市モデルを用いて都市計画を行うユースケースなどを想定したアプリケーションです。
※このサンプルプロジェクトの主要機能の実装例をチュートリアルで紹介しています。実装方法については、こちらのチュートリアルをご参照ください。
- Unity 2021.3.30f1
- URP (Universal Rendering Pipeline)
- 窓用の頂点カラー調整
- ARマーカーを用いた3D都市モデルの位置合わせ機能
- メッシュレンダラーの選択機能
- メッシュ頂点の平面化機能
- 選択地物の整列機能
- シーンのライトマップをプレハブに設定する機能
以下は本プロジェクトに使用した開発環境です。
- Windows11
- macOS Ventura 13.2
- Android 13
- iOS 16.7.1
- メニューより "File" > "Build Settings" を選択し Build Settings ウィンドウを表示します。
-
プラットフォームがAndroidかiOS以外になっている場合は、アプリケーションを動作させる端末に合わせてプラットフォームを選択し、画面下部にある「Switch Platform」ボタンからプラットフォームを切り替えます。
-
Build Settings ウィンドウの画面下部にある「Build」ボタンを押下し、ビルドの出力先を選択してビルドを開始します。iOSの場合は Xcode プロジェクト、Androidの場合は .apk ファイルもしくはAndroid Gradleプロジェクトを生成します。
ビルドが完了したら、各プラットフォームに合わせて端末へアプリケーションをインストールしてください。
- ビルドしたアプリケーションを端末で開くと、オープニング画面が表示されます。
「始めましょう」のボタンをタップすると、ARマーカー読み取り画面に遷移します。
- ARマーカー読み取り画面で対象のARマーカーをカメラで読み取る（ARマーカーをカメラで写す）と、ARマーカー上にPLATEAU 3D都市モデルのミニチュアオブジェクトが表示されます。
ARマーカー画像は以下のものがデフォルトで使用されています。印刷してお使いください。
- ミニチュアオブジェクトを表示すると、画面上にミニチュアオブジェクトを操作できるUIが表示されます。画面右側に表示されるスケールバーを調整することで3D都市モデルの大きさを変更することができ、画面下側に表示される回転バーを調整すると、3D都市モデルを回転させることができます。
本サンプルプロジェクトを元に、表示させる3D都市モデルの変更などを行いたい場合は以下を参考にサンプルプロジェクトを改変して利用してください。
-
PLATEAU SDKを使って、任意のシーン内に3D都市モデルをインポートします。
- 以降の手順では一時的に3D都市モデルをシーンにインポートしてFBXに変換します。
- モバイル端末上で3D都市モデルを表示する場合は、大きさなどによって最適化が必要になる場合があります。モバイルアプリ向けの3D都市モデルの最適化の手順については次章の 4. サンプルミニチュア都市モデルのメイキング を参照してください。
-
インポートの完了後、PLATEAU SDK を使用し、インポートした3D都市モデルを FBX ファイルとしてプロジェクトに保存します。
-
シーン上に新規のゲームオブジェクトを作成し、その中に保存した FBX ファイルをドラッグアンドドロップで子オブジェクトとして追加します。
- このオブジェクトがARマーカー上に表示される3D都市モデルオブジェクトの本体になります。
- 分かりやすさのため、ゲームオブジェクトはインポートした場所の名前などを設定してください。
-
保存した3D都市モデルをヒエラルキーの MiniatureCityPivot の中に配置します。
- 用意したARマーカーの画像ファイルをプロジェクトに追加します。
- UnityではOSのファイルシステム（Windows エクスプローラー / macOS Finder）からUnityエディタのプロジェクト内の任意のフォルダに画像ファイルをドラッグアンドドロップすることでアセットをインポートできます。
- サンプルでは "/Assets/Images" の中に "ARMarkerImage.png" が格納されています。
- インポートした画像をARマーカーとして登録します。
- "/Assets" の中にある "ReferencedImageLibrary" を選択してインスペクターを表示し、 "Add Image" を押下してARマーカー画像データを追加します。
- プロジェクトにインポートした画像アセットをARマーカーのテクスチャに設定します。
- ARマーカー名はファイル名から自動で設定されますが、任意の名前を設定することが可能です。
- ARマーカー画像は現実空間に配置する大きさをメートル単位で指定する必要があります。印刷するARマーカー画像の大きさなどに合わせて大きさを設定してください。
- "Assets/Prefabs/MiniatureCityModels" のインスペクタから、追加したARマーカーに紐付ける
City ModelsのARMarkerNameに設定したARマーカー名を指定してください。
- Unity プロジェクトをビルドし、用意したARマーカーを読み取ると、紐づけられた3D都市モデルオブジェクトが表示されます。
ここでは、サンプルプロジェクトで用意している3D都市モデルの構成手順について紹介します。任意の3D都市モデルを導入して同じような演出を行いたい場合は以下の手順を参考にアセットを作成してください。
主にサンプルプロジェクトでは以下のような調整を3D都市モデルに実装しています。
- モバイル端末でも快適に動作するように3D都市モデルを最適化しています。
- モバイル端末でのパフォーマンスを考慮した上で、頂点カラーやライトマップを設定することでモデルの審美性を高めています。
- 臨場感のある3D都市モデルを演出するために、ナビゲーション (ナビメッシュ) を導入して都市を移動するアバターを追加しています。
3D都市モデルをプレハブ化するためには、以下のような機能を利用することで3D都市モデルのプレハブを作成することができます。
- PLATEAU SDK: シーンにインポートした3D都市モデルのからFBXやGLTFへのエクスポート
- Unity公式FBXエクスポーター: シーン上で選択したメッシュのエクスポート
サンプルプロジェクトでは、ARマーカーを読み取ると対応するオブジェクトが表示されます。サンプルプロジェクトの構成では、これらのオブジェクトをプレハブとして準備する必要があります。インポートされたPLATEAU 3D都市モデルはシーン上にメッシュなどのデータを保持しているため、プレハブ化するためには以下の手順に従う必要があります。
PLATEAU 3D都市モデルをプレハブ化する最初のステップは、モデルを汎用的な3Dデータ形式へと変換することです。この変換には複数の方法があり、以下にいくつかの主要なエクスポート方法を挙げます。
PLATEAU SDKのエクスポート機能を使用することで、シーンにインポートした3D都市モデルオブジェクトからFBXやGLTFなどのフォーマットでプレハブをエクスポートすることが可能です。この際、シーンに埋め込まれているテクスチャも外部ファイルとして出力できます。ただし、インポートされた3D都市モデルの持つCityGMLを元に変換を行うため、Unityのヒエラルキー上で選択した範囲での出力やシーン上ででメッシュに対して行われた変更は出力できません。
Unity公式のFBXエクスポーターを使用すると、Unityで選択したオブジェクトや、Unityで行った変更を含めたモデルの出力が可能になります。この方法では、頂点カラーのペイントやメッシュのマージなど、Unityで加工されたデータをそのまま出力できます。ただし、シーンに埋め込まれたテクスチャはこの方法では出力されないため、建物のテクスチャを出力する場合はPLATEAU SDKのエクスポート機能を使用する必要があります。
今回のサンプル作成では、シンプルかつスタイリッシュな都市模型風のアートスタイルを採用しました。
頂点カラーを応用したグラフィック表現はモバイル端末上でのパフォーマンスを維持しつつ、リッチなビジュアル表現を加えるための確立された手法です。各頂点にカラーデータを割り当て、シェーダーを介して多様な表現を行うことが可能です。
ポリゴン数の管理はモバイルアプリケーションのパフォーマンスに直接関係します。
幅広いモバイル端末での動作を考慮し、約15万トライアングルに収まるように表示する3D都市モデルを選定します。
エリアに含まれる建物の密度や形状にもよりますが、3km²の範囲に収まるLOD2の3D都市モデルを選択すると、最適化後およそ15万トライアングル以下になります。
今回のサンプルでは、RenderingToolkitの窓の頂点カラーマスク調整機能を使用し、ビルに頂点カラーを一括で割り当てました。
3Dモデルにおいて、各頂点が色情報を持つことができ、これを「頂点カラー」と呼びます。モデルの各頂点に色を割り当てることで、テクスチャマッピングとは異なる手法で3Dモデルの着色を可能にします。テクスチャ画像は多くのメモリを必要としますが、頂点カラーは画像と比較して軽量です。メモリの容量が限られている環境、例えばモバイルデバイスで潤沢にテクスチャを使用できない場合等で、とても有効です。また、マテリアルの数を減らすことも繋がり、それによって描画処理の負荷を減らすこともでき、パフォーマンスでのメリットも多いです。シェーダーとの組み合わせで応用範囲も広く、多様な視覚表現も実現できます。頂点カラーは、昔から現代のゲーム開発において広く使われている技術です。
テクスチャを使用しないことによるメモリ負荷軽減
テクスチャを使わずにモデルに模様等を着色することができます。メッシュの頂点が色の頂点をもつので、頂点カラーで着色できる模様の解像度は頂点の細かさに依存します。
マテリアル数の削減による描画負荷の軽減
極端な例ですが、例えば地物ごとに、マテリアルのカラーを使用して、地物ごとに違う色を割り当てた場合、基本的には色の数だけ違うマテリアルが必要になります。100色あれば、100個マテリアルが必要です。
一方で、地物一つ一つに個別の頂点カラーを割り当てる場合、頂点カラーを表示するマテリアル1つのみで同じ表現が可能になります。一般的にはマテリアルが増える程、描画負荷が高くなる為、頂点カラーを上手く活用することで描画負荷の改善をおこなうことができます。
また、ゲーム等で良く使われる使用例として頂点カラーでマスクを作成して、シェーダーと組み合わせることで、複数のテクスチャをブレンディングしたりすることができます。（例: 苔の生えた岩等)
Unity上では頂点カラーをペイントするために、Polybushパッケージが用意されています。
PolyBrushの使い方等はこちら
今回のサンプルでは、Rendering Toolkitの窓の頂点カラーマスク調整機能を使用し、ビルに頂点カラーを一括で自動割り当てします。
PLATEAU > PLATEAU Toolkit > Utilities から PLATEAU Utilities を開き、「メッシュレンダラーの選択」を使用して、３D都市モデルのトップノードを選択し、現在表示されているビルを一括選択します。
シェーダーは、3Dグラフィックスの中で物体の見た目を決定するプログラムです。光の反射の仕方、物体の色や質感、影の落とし方などをコントロールし、リアルタイムで視覚的な効果を作り出します。
シェーダーグラフはUnityのツールで、ノーコードでシェーダーを作成できるように設計されています。ノードと呼ばれるビジュアル要素をつなげることで、シェーダーを直感的に設計できます。複雑なコードを書かずに、3Dオブジェクトの見た目をカスタマイズすることが可能です。
新規でマテリアルを作成します。
プロジェクトウインドウ > 右クリックメニュー > Create > Material を押下します。
新しく作成したマテリアルシーンの地物に割り当てします。PLATEAU Utilities ツールで地物を全部選択します。先程と同じく、PLATEAU > PLATEAU Toolkit > Utilities ツールの「メッシュレンダラーの選択」を使用して、３D都市モデルのトップノードを選択し、現在表示されているビルを一括選択します。
Materials の項目をインスペクターから開いて新しく作成したマテリアルを割り当てます。
プロジェクトウインドウ > 右クリックメニュー > Create > Shader Graph > URP > Lit Shader Graph を押下します。
マテリアルを選択してインスペクターから「New Shader Graph」を選択します。
右クリック > Create Node を押下して、Create Node パネルから検索ボックスに「Split」と入力し、表示された「Split」ノードを押下して作成します。
頂点カラーGチャンネルを確認します。 「Vertex Color」ノードの「Out」を「Split」ノードの「In」に接続します。 「Split」ノードの「G」チャンネルを「Fragment」パネルの「BaseColor」に接続します。
頂点カラーAチャンネルを確認します。
「Split」ノードの「A」チャンネルを「Fragment」パネルの「BaseColor」に接続します。
シェーダーグラフをここから少し編集して、頂点カラーのアルファチャンネルを使用し、カラフルな3D都市モデルを作成していきます。
Gradientのプロパティを作成します。
シェーダーグラフ編集ウインドウの左側のパネルの「＋」マークを押下するとパネルが表示されるので「Gradient」を押下します。
Gradientプロパティを押下すると右側のシェーダーグラフのインスペクターの表示が変わるので「Default」のカラーを押下します。
今回は虹色に調整しました。
右クリック > Create Node を押下して、Create Node パネルから検索ボックスに「sample」と入力し、表示された「Sample Gradient」ノードを押下して作成します。
「Gradient」プロパティのノードを「Sample Gradient」ノードのGradientと接続します。
最後に「Sample Gradient」ノードの「Out」を Fragment パネル「Base Color」に接続します。
- シェーダーグラフ：Assets/Shaders/VertexAlphaSample.shadergraph
- マテリアル： Assets/Models/CommonMaterials/VertexAlphaSample.mat
- シェーダーグラフ: Assets/Shaders/ColorBuilding.shadergraph
- マテリアル: Assets/Models/CommonMaterials/Buidlings_MAT.mat
合わせて、完成したシーンのサンプルも用意しています。実際のシーンを直接見ていただくことで、本サンプルのさらなる理解に役立ちます。完成シーンのサンプルはプロジェクトの以下のシーンファイルをご確認ください。
- シーン: Assets/Scenes/MiniaturePrefabSetup.unity
まず、PLATEAU > PLATEAU Toolkit > Utilities から PLATEAU Utilities ウィンドウを開き、「選択地物を整列」機能を用いて地物の高さを揃えます。
その後、3D都市モデルのサイズが大きい場合はメッシュ結合を行ってください。
メッシュ結合についてはこちらのドキュメントをご参照ください。
これにより、モデルは一貫性のある外観と最適化されたメッシュ構造を持つことができます。
加工が完了したモデルはUnity FBXエクスポーターを使用してFBXフォーマットで出力します。ヒエラルキーからエクスポートするゲームオブジェクトを右クリックし、"Export To FBX" を選択します。
ライトマップはゲームやアプリケーションのシーンにおける光の影響を事前に計算し、その結果をテクスチャ（画像）として保存する技術です。これにより、実際の光源からの影や光の拡散をリアルタイムに計算する代わりに、予め計算されたライティング効果をシーンに適用することができます。特にモバイル端末のように処理能力が限られている環境では、ライトマップの使用により、リアルタイムレンダリング時の負荷を大幅に軽減できます。
モバイル端末では、リアルタイムのキャストシャドウ（影の投射）は大きな処理負荷を伴います。リアルタイムで影を計算することはレンダリングの処理負荷が高く、特に処理能力が限られているモバイル端末には不向きです。このため、ライトマップを利用することが重要となります。
シーン内に必要な光源を配置し、任意のライティング設定を行います。ライトマップをベイクするためには、FBXファイルの「ライトマップUV」の項目をチェックし、対象のオブジェクトのStaticフラグを有効にします。この設定はオブジェクトにライトマップのデータが適切にマッピングされる為のUVを作成します。
ベイクする準備が完了したらライティング設定からライトマップをベイクします。以下の画像はサンプルプロジェクトで用意しているライトマップの設定です。
Unityのライトマップはシーン上のオブジェクトを対象としているため標準機能ではプレハブにライトマップを適用する機能はありませんが、拡張スクリプトを作成してプレハブにライトマップの情報を保存することが可能です。この手順により、異なるシーンでベイクされたライティング情報をのオブジェクトを一つのシーンで使うことができます。
PrefabLightmapData コンポーネントをプレハブのルートに追加し、PLATEAU Utilities ウィンドウ「シーンのライトマップをプレハブに設定」を押下してプレハブのライトマップ生成を実行します。
ナビメッシュの基本機能ではナビメッシュのデータはシーン内に保存されるため、プレハブ上でナビメッシュを実行するためには追加のパッケージが必要です。サンプルプロジェクトではすでに追加パッケージがインストールされているため、このプロジェクトを元に改変を行う場合はインストールは必要ありません。別のプロジェクトで追加パッケージのインストールが必要な場合はパッケージマネージャーからインストールを行います。
NavMeshSurface コンポーネントを空のゲームオブジェクトにアタッチしてベイクします。ナビメッシュは小さすぎるオブジェクトに対応していないので、一時的にミニチュア都市モデルのスケールを拡大してベイクし、その後障害物や侵入させたくないエリアの設定を追加で行います。
ARでは3D都市モデル全体のスケーリングや回転等の機能が実装されていますが、通常のナビメッシュはこれらに対応していません。専用のカスタムコンポーネントを追加することで、固定位置のナビメッシュからアプリケーション上の3D都市モデルミニチュアオブジェクト上でスポーンするすべてのアバターにトランスフォームの再マッピングを行います。
ナビメッシュ上に人のモデルを配置し、AR環境内でのリアルタイムインタラクションを提供します。これにより、都市モデルがより現実的で臨場感のあるものになります。
※このサンプルプロジェクトの主要機能の実装例をチュートリアルで紹介しています。実装方法については、こちらのチュートリアルをご参照ください。
- 本リポジトリはMITライセンスで提供されています。
- 本システムの開発はユニティ・テクノロジーズ・ジャパン株式会社が行っています。
- ソースコードおよび関連ドキュメントの著作権は国土交通省に帰属します。
- 本ツールをアンインストールした場合、本ツールの機能で作成されたアセットの動作に不備が発生する可能性があります。
- 本ツールをアップデートした際は、一度 Unity エディターを再起動することを推奨しています。
- パフォーマンスの観点から、3km²の範囲に収まる3D都市モデルをダウンロード・インポートすることを推奨しています。
- インポートする範囲の広さや地物の種類（建物、道路、災害リスクなど）が量に比例して処理負荷が高くなる可能性があります。
- 本リポジトリの内容は予告なく変更・削除される可能性があります。
- 本リポジトリの利用により生じた損失及び損害等について、国土交通省はいかなる責任も負わないものとします。