PLATEAU (2022) の3Dモデルを、オープンデータを活用してブラウザで表示できるように出力してみよう

ここ最近PLATEAUについて調べています。

2年前にBabylon.jsでPLATEAUモデルを表示させる方法を書きました。

www.crossroad-tech.com

当時は、fbx形式で固定エリアのPLATEAUモデルをダウンロードして表示する方法がありました。しかし、最近はPLATEAU SDK for Unityがあり、任意の場所を指定して出力できるようになっています。

都市モデルのインポート | PLATEAU SDK for Unity

今回はPLATEAU SDK for Unityで取得したPLATEAUデータをglbファイルに変換して、オープンデータのマッピングができるサイズで出力する方法を説明します。
ただ3Dモデルとして出力するだけならば、今回の作業をしなくてもよいのですが、オープンデータに記載の緯度経度を使ってPLATEAUモデルにオープンデータ (例：公衆無線LANスポット、公共施設などの位置を表示) をマッピングする場合、今回のようにサイズを考慮する必要があります。

環境

Unity 2021.3.28f1
PLATEAU SDK for Unity v 2.0.0. alpha
Babylon.js v6.2.1
Blender 3.3.6

2022年の東京都内のPLATEAUモデルを使用しました

【生成AIの検証】BlenderGPTを試してみました

前回に引き続き、今度はBlenderでの3Dモデル自動生成機能である、BlenderGPTを試してみました。

使用した環境

Blender 3.3.6
ChatGPT 3.5

Blender 3.1.2でUV展開を使って3Dモデルにテクスチャを貼る方法

Blenderでモデリングをしたとき、任意の場所にテクスチャを貼りたいことがあります。

これが思ったよりも手間取ったので、簡単な例をもとに手順を記載しようと思います。

使用した環境
Blender 3.1.2

BlenderとArchimeshを使う時のちょっとしたTips

最近またBlenderのArchimeshを試しています。ArchimeshとはBlenderで部屋の間取りを作ることができるアドオンです。概要や基本的な使い方は以下をご参照ください。

www.crossroad-tech.com

今回は以前の記事で書けなかったArchimeshのTipsを追加します。

Blender 3.1.2
Archimesh 1.2.2

Babylon.js Editor v4.2.0でキャラクタが炎の魔法剣を振るモーションを作る方法

以前からBabylon.jsでキャラクタを動かす方法を色々と調べています。特に理由はないのですがキャラクタを動かす方法を調べていく中で、ダイの大冒険６巻で登場した「火炎大地斬」を再現してみようと思って、炎の魔法剣を作って剣を振るモーションを作ってみました。

今回は剣を振るモーションを作る方法について解説します。

Ready Player Meのキャラクタモデルに複数のアニメーションを割り当てて、Babylon.js で再生する方法

先日Babylon.js のGUI Editorを試した頃から、何かのゲームっぽいものを一通り作成しようと思い、キャラクタを動かすタイプのゲーム開発を進めています。

今回は、キャラクタに複数のアニメーションを割り当ててBabylon.js で表示する方法を解説します。

使用した環境

・Blender 2.9.3

Blenderでライトマップベイクを試してBabylon.jsで確認する方法 後編

前回の続きです。

www.crossroad-tech.com

今回はBlenderでライトマップベイクをするところから説明します。
試した環境

• Blender 2.93

• Babylon.js 5.5.5

Blenderでライトマップベイクを試してBabylon.jsで確認する方法 前編

以前も何度か書いたことがありますが、フォトリアルな表現が好きでもっとスキルをつけたいと思っています。

www.crossroad-tech.com

www.crossroad-tech.com

www.crossroad-tech.com

www.crossroad-tech.com

今回は最終的にBabylon.jsできれいな表現を試すため、Blenderを中心に調べたことをまとめました。

試した環境

• Blender 2.93

• Babylon.js 5.5.5 (後編の記事で使います)

Blenderでモーション付きアバターをglb形式で出力する方法

前回、plaskというサービスを使って生成したモーションデータをBlender上でアバターに割り当てる手順を説明しました。

www.crossroad-tech.com

このデータを出力すれば、別のツールでアバターを動かすことができます。今回、glb形式で出力したかったのですが、簡単にはできませんでした。

そこで、この記事ではglb形式でモーション付きアバターを出力する方法を解説します。

使用した環境

・Blender2.93

・glTF Viewer

Plaskで取得したbvh形式モーションをglb形式のアバターに適用させる方法

数ヶ月前より、Plaskというサービスが出ています。

Plask

これは、スマートフォンなどのカメラで撮影した人の動き (モーション) をアップロードすると、Humanoidアバターにモーションを割り当ててくれるWebサービスです。

割り当てたモーション付きのアバターをダウンロードすることもできます。ただ、私の確認漏れかもしれませんが、plask上に任意のアバターをアップロードしてモーションを割り当てようとしたのですが、うまくいきませんでした。

そこで、今回はplaskで生成されたモーションデータをBlenderを使ってglb形式のアバターに割り当てる方法をまとめました。

なお、今回のまとめは、WebGL系などUnityではない開発環境を使っている方向けです。Unityを使っている場合はこのような手順を実行しなくても簡単にモーションデータを割り当てることができます。これについても後ほど紹介します。

今回使用した環境

・Unity 2019.4.12f1

・Blender2.93

・アバター作成はReady Player Meを使用

Blender3.0のVirtual RealityモードをQuest2で試してみました

以前書いた通り、Blenderは2.83よりVRモードが追加されています。

www.crossroad-tech.com

これを使うと、WindowsPCのBlenderで作ったCGをVRヘッドセットを装着して直接確認することができます。以前試したときはOculus Quset CV1で試しましたが、今回はQuest2で試してみました。その時の手順などを解説します。

なお、BlenderのVRモードの基本的な使い方は上記の記事を参照ください。

試した環境 Quest2 (v35.0)
PC (NVIDIA GTX 980)
- Windows 10 Pro (20H2)
- Blender 3.0
- Oculus アプリ (v35.0)

【2021/7/25 位置補正方法の記事リンクを追記】Blender2.9を使って、読み込み、表示がうまくいかないPLATEAUの3DCGモデルを自動補正する方法について

最近、Babylon.js Editorのテンプレートプロジェクトを作っています。とくに、WebXRコンテンツがEditorで作れるようにとおもって、PLATEAUの3DCGモデルを使ってWebXR (immersive-vr) でウォークスルーができる仕組みを作ろうと思いました。
しかし、Babylon.js EditorでPLATEAUの3DCGモデルを表示させると、未加工だといくつかの問題があって簡単に使用できませんでした。また、途中でスクリーンショットを紹介しますが、Three.js EditorやGodot Engineでも同じ状態です。

そこで、Blenderを使ってそれらの問題を自動的に補正できるスクリプトを作っています。まだやりたいことが全てできていませんが、Three.js EditorやGodot Engineなどの他のツールでも有効と思われますので、現時点のものをいったん共有します。使用しているBlenderのバージョンは2.93です。