PLATEAU [プラトー]×Blender×PlayCanvasで街並みを再現する

3DCG
目次

はじめに

こんにちは。GMOグローバルサイン・ホールディングスの宗形@shujimunaです。
ビジュアルシステムの研究開発、3Dモデル全般のデザイン/作成を担当しています。

この記事では、 PLATEAU(プラトー) の3Dデータを使用し、都市のビル群をユーザーがPlayCanvas上で操作可能な状態にするためのワークフローを説明致します。

PLATEAU(プラトー)とは

国土交通省が様々なプレイヤーと連携して推進する、日本全国の都市デジタルツイン実現プロジェクトです。
2020年にスタートした「Project PLATEAU（プラトー）」は、スマートシティをはじめとしたまちづくりのデジタルトランスフォーメーションを進めるため、 そのデジタル・インフラとなる３D都市モデルの整備・活用・オープンデータ化を推進する国土交通省のプロジェクトです。

PLATEAU(プラトー)の3Dモデルは正確な位置情報とビル群１つ１つの正確な形状をポリゴンデータで再現しています。ただし、隠れているポリゴンや、重なっているポリゴンが存在しています。また、マテリアル、テクスチャーが建物１つづつに複数設定されています。メッシュ単位でみると結合されていない独立したメッシュも多数存在しています。これらのデータを整理/統一し、容量を削減し、様々なコンテンツで利用可能な状態にしていきます。

目次

  • UnityからPLATEAU(プラトー)の都市データを取得する
  • 都市データをBlenderで最適化(リダクション)する
  • PlayCanvasへインポートし、セッティングする

UnityからPLATEAU(プラトー)の都市データを取得する

3D都市モデルを、Unityに簡便にインポートして扱えるようにするための SDKである「PLATEAU SDK for Unity」が 2023年3月1日より日本の国土交通省から Unity Asset Storeで公開されています。
チュートリアルは下記URLをご参照ください。
https://assetstore.unity.com/PLATEAU-SDK?locale=ja-JP

PLATEAU SDK for Unityのインストール

今回はUnity Package Managerをインポートします。
インストール手順は下記のサイトを参考に行ってください。
https://synesthesias.github.io/PLATEAU-SDK-for-Unity/manual/Installation.html
ファイルを追加後、上のタブに「PLATEAU」が追加されます。
「PLATEAU」タブ内の「PLATEAU SDK」を押すと専用ウィンドウが開きます。

地域範囲指定に関して

今回は、Unityからサーバーを接続してデータを取得します。都道府県を選択し、データセットとして、さらに細かな区や地域名を選択し、右下部の範囲選択をクリックします。
image.png

image.png

中央ビューポートに指定したマップとデータセットの選択範囲が表示されます。左クリックで升目を選択すると選択箇所がオレンジに変化します。モデル化したい領域を選択し、左上部の決定ボタンをクリックしてください。
image.png

取得できるデータ群[地物別設定]に関して

決定ボタンをクリック後、右側PLATEAU SDK欄に地物別設定の項目が表示されます。
地物別設定の項目は以下になります。
一括設定: テクスチャの統合や解像度の指定ができます。
建築物: 建物のLODレベルを指定できます。
道路: 車道や歩道などのLODレベルを指定できます。
都市計画決定情報: 「都市計画区域」「市街化区域」「用途地域（例：風致地区）」などの都市計画に関する情報
土地利用: 「住宅用地」「商業用地」「工業用地」「田」「畑」などの土地利用に関する情報
地下街: 地下空間を構成する地下通路や建物地下階、駅構内等の情報
都市設備: 街路灯や道路標識、信号機、ベンチ、バス停など、移動しない小規模な設備に関する情報
植生: 樹木や生け垣に関する情報
橋梁: 桁橋、アーチ橋、吊り橋などの情報
災害リスク: 「洪水浸水想定区域」や「土砂災害警戒区域」などの災害リスクに関する情報
土地起伏: 地形の起伏に関する情報
image.png

LODレベルに関して

LODとは、モデルの精密度をレベル単位で設定できる機能のことです。

LOD0: 最も低精度なモデルで、ファイルサイズが小さく、描画負荷が軽い。プリミティブな形状。
LOD1: 中程度の精度を持つモデルで、LOD0よりも詳細な形状を表現できる。プリミティブな形状に屋上の形状が追加されています。
LOD2: 高精度なモデルで、建物の窓やドアなどの細かいディテールを表現しています。
LOD3: 非常に高精度なモデルで、LOD2よりもさらに詳細な形状を表現しています。

今回は、LOD2のデータを取得できる範囲を選択し、建築物、道路、橋梁をチェックした状態でインポートします。インポートは右下部のインポートボタンをクリックすることで開始されます。開始されると.gml形式のデータが各項目毎にダウンロードされていきます。時間が掛かりますので、気長に待ちましょう。
image.png
インポートが完了すると中央ビューポート上に指定範囲＆地物別設定でチェックを入れたデータが表示されます。
image.png

LOD2でインポートしてもLOD1の状態になってしまっている箇所は、まだLOD2相当の情報が存在して無いためです。
image.png

エクスポート設定

続いて、エクスポート設定を行います。左側のHierarchyから、生成されたデータタブを右側のエクスポート対象へドラック＆ドロップします。
出力形式は、OBJ、GLTF、FBXから選択できます。
座標系も幾つか選択することが可能です。今回はEUN(Unityでの座標系)を選択しています。
出力先のフォルダを任意で選択したら、エクスポートボタンをクリックして完了です。
image.png

以上で、Unityでのデータ作成は完了です。続いて、Blenderでデータを最適化していきます。

都市データをBlenderで最適化(リダクション)する

FBXのインポート

ダウンロードされたデータは以下の様に幾つかのブロックに分かれてテクスチャフォルダとモデルファイルにダウンロードされます。
image.png

今回はBlenderに[53393585_bldg_6697_op.fbx]をインポートします。
image.png

読み込んだ際にスケールが大きいので、ビューから範囲の開始を1ｍｍ、終了を50000ｍｍ程度にして可視範囲を広げます。
image.png

右側のアウトライナー上に表示されているマテリアル数を見てみると3K(3000)個のマテリアルが設定されています。
この状態ではPlayCanvasにデータを持っていくには重すぎる上に、シーンを実行した際に大量のドローコールが発生し、描画が極端に重くなってしまいます。そこで、オブジェクトをさらに幾つかのブロックに分けた上でテクスチャーを統合し、マテリアルを1個に集約します。
image.png

メッシュをブロックに分ける

オブジェクトを選択した状態で編集モードへ入り、任意の範囲のメッシュを選択、右クリックで分離→選択で分離します。
image.png

今回は、4つのブロックに分離しました。右側アウトライナーで見るとgroupが4つになっています。
image.png

不要なメッシュを削除

下部メッシュは不要なので削除します。削除したい面のメッシュを1つ選択し、上部選択タブから類似選択→法線を選択すると同じ向きのメッシュが全て選択されます。4つのブロック全てに行います。
image.png

UVチャンネル、UVマップの作成

新規にUVチャンネルを作成し、新規UVチャンネル用のUVマップを展開します。
カメラマークは既存のUVチャンネルにしておいてください。

使用していないマテリアルを削除する

オブジェクトを分離してもマテリアルは分離されないので、使用していなマテリアルが大量に発生します。
Blenderにはデフォルトで使用していないマテリアルを削除する機能が無いので、簡単なPythonスクリプトで使用していなマテリアルを削除するコードを作成します。

import bpy

# 選択したオブジェクトを取得
selected_objects = bpy.context.selected_objects

for obj in selected_objects:
    # オブジェクトがメッシュの場合のみ処理を行う
    if obj.type == 'MESH':
        # メッシュのポリゴンを取得
        polygons = obj.data.polygons
        # 使用されているマテリアルのインデックスを集める
        used_material_indices = {polygon.material_index for polygon in polygons}
        # オブジェクトに設定されている全てのマテリアルに対して
        for i in reversed(range(len(obj.data.materials))):
            # マテリアルが使用されていない場合
            if i not in used_material_indices:
                # マテリアルを削除
                obj.data.materials.pop(index=i)

スクリプトを実行した結果3K(3,000)から619へ削減されました。
image.png

ベイク用のUVチャンネルとUV展開を作成する

UVマップを新規で作成したいオブジェクトを選択状態にし、右側のタブが縦に並んでいる部分からデータタブを選択します。UVマップタブをクリック、右側+ボタンをクリックし、新規UVマップを作成します。
カメラマークがアクティブになっているUVマップが現在適用されているマップになります。
青選択状態になっているのが新規に作成したマップです。下記画像のような状態にしてください。
image.png

続いて、ベイク用UVチャンネル様に選択したブロック全体をメッシュ全選択状態にし、上部UVタブからスマートUV投影をクリックします。
image.png

この際に、位置、回転、スケールが 0 /0 /1.0になっているのを確認してください。それ以外の数値になっている場合はオブジェクトモードにし、上部タブのオブジェクトから適用→全トランスフォームで位置、回転、スケールをリセットします。
image.png

UV展開すると1枚にUVに選択したブロックが全て収まるような状態で展開されます。
image.png

アドオン[TexTool]を使用してベイク処理

UV編集画面で、マテリアルを集約したいブロックのオブジェクトを選択し、TexToolのベイキングからBase Colorを選択し、ベイクします。ベイクした画像を保存してください。
image.png

ベイクした画像を適用するマテリアルを新規で作成します。
image.png

ベースカラーに先ほど保存した画像を適用します。
image.png

その後、不要なUVマップの削除、マテリアルの削除(materials_delat01.pyを実行)を行い完了です。

FBXエクスポート設定

マテリアルにテクスチャを含めた状態にしてエクスポートします。パスモードをコピーに変更し、右側のマークをアクティブにします。また、選択したオブジェクトのみにチェックを入れておきます。
image.png

その他のブロックも同じように処理します。

PlayCanvasへインポートし、セッティングする

続いてPlayCanvasでの作業となります。こちらはおまけみたいなものですので、気楽に読んでください。

プロジェクトの作成

自身のPlayCanvasアカウントのダッシュボードから新規でプロジェクトを作成します。
NEWボタンをクリックし、ModelViewerを選択してください。PlayCanvasではVRやAR体験が可能なデフォルトプロジェクトも用意されています。ご興味がある方は是非利用してみてください。
image.png
CREATEボタンをクリックして新規プロジェクトのエディター画面へ移動します。

FBXのインポート

ASSETSの右側にある+ボタンからUploadを選択し、先ほど保存したfbxデータをインポートします。
image.png

ASSETS欄にインポートされたデータの中のTEMPLATE(ひし形マーク)をHIERARCHYのRootへdrag＆dropすると、中央ビューへ反映されます。
image.png

マテリアルを見てみると先ほど作成したテクスチャがセットされているのが確認できます。全体に暗いので、EMISSIVEにテクスチャをdrag＆dropし、Intensityの値を0.5程度で設定しておきます。
image.png

Launchして確認

右上のLaunchボタンをクリックすると別ウィンドウで実行されます。
image.png

マウス操作で回転、拡大縮小して見ることができます。
image.png

公開する

続いて編集したシーンを公開します。
左端にあるpublishボタンをクリックし、PUBLISH TO PLAYCANVASボタンをクリックします。
image.png

BUILD画面に移行しますので、バージョン情報やDescriptionを任意で記入し、下部にあるPUBLISH NOWボタンをクリックします。
image.png

自動でビルドが行われ、公開用のURLが生成されます。
image.png

以上で終了です。

まとめ

PLATEAUのデータは精密な3Dモデルとテクスチャを有していますが、データ量、特にマテリアル/テクスチャの量とサイズが非常に大きいためリアルタイムなwebコンテンツではそのまま利用することが困難です。Blenderを併用し、データの最適化を行うことで様々なコンテンツで利用できるようになります。また、PLATEAU自体常にアップデートが行われ、新しい建築物の情報が追加されていくので、今後も利用していくシーンが増えると思います。そんな時にご一読いただければ幸いです。