Luma AIで生成したglbデータをblenderでリダクション→Mixamoでアニメ設定→PlayCanvasで公開する方法
この記事では、Luma AIで生成したglbデータをBlenderでリダクション（リトポロジー）し、アニメーション可能な形状に整える工程について解説します。また、Web上で表示できるように、WebGLベースの開発エンジンPlayCanvas上での設定方法についても解説します。
目次
- Luma AIについて
- glbエクスポート
- blenderでのリダクション手順
- mixamoでアニメーションエクスポート
- PlayCanvasでのアニメーション設定
Luma AIについて
Luma AIは、写真や動画から3Dモデルを生成できるソフトウェアです。特徴は以下のとおりです。
-
高精度な3Dモデルを生成できる
Luma AIは、NeRF（Neural Radiance Fields）と呼ばれるアルゴリズムを使用して、3Dモデルを生成します。NeRFは、写真や動画からシーンの光の反射特性を学習することで、高精度な3Dモデルを生成することができます。 -
写真や動画から直接3Dモデルを生成できる
Luma AIは、3Dスキャナーや複雑な操作が不要で、写真や動画から直接3Dモデルを生成することができます。これにより、誰でも簡単に3Dモデルを作成することができます。 -
クラウドベースのサービスを提供している
Luma AIは、クラウドベースのサービスを提供しているため、手軽に利用することができます。 -
さまざまな形式で出力可能
Luma AIは、さまざまな形式で3Dモデルを出力することができます。これにより、さまざまな用途に3Dモデルを活用することができます。
デッサン人形を中心に撮影したデータをアップロードして生成されたポイントクラウドデータです。Luma AI のダッシュボードから確認できます。
glbエクスポート
Luma AIのダッシュボードのダウンロードボタンを押すと各種データ形式で選択できます。
今回は GLTF の hight Poly を選択します。
blenderでのリダクション手順
ダウンロードしたデータを Blender へインポートします。Luma AIのダッシュボードからポイントクラウドの3Dデータを見ると空間全体が3D化されていますが、GLTF へ変換される際にシーンの中心部分にあるオブジェクトのみがポリゴン化されるようです。
この時点での頂点数は398.962程あります。
また、マテリアル数は30とそれに対応するテクスチャが30枚あります。
この状態から頂点数を半分以下、マテリアル、テクスチャを1枚の状態にしていきます。
編集用のモデルを複製します。
編集用のモデルを選択状態で、モディファイアリストからリメッシュを選択します。
タイプをスムーズにし、オクツリー深度を7へ上げます。
頂点数は半分以下の15,213へ削減できました。
台座部分の余計なポリゴンを削除していきます。
穴の開いた部分をFで穴埋めし、三角ポリゴンへ分割します。
UV展開用のシームを切っていきます。エッジを選択し、右クリックからシームをマークで赤いラインが引かれます。
UV編集画面へ移動し、展開をクリックでシームに沿った形状でUV展開されます。
上部タブのシェーディングを選択し、新規画像テクスチャを作成し、ベイクされるテクスチャシェーダを用意します。
続いて、元データのマテリアル情報を削減したリメッシュモデルに焼き付け(ベイク)します。
レンダープロパティをクリックし、レンダーエンジンをCyclesへ変更します。
ベイクタブをクリックし、ベイクタイプをディフューズにします。
必要な情報はカラー情報のみなので、影響タブの寄与にある直接照明、間接照明のチェックを外します。
選択物→アクティブのチェックを入れます。余白のサイズは2px程度にしておきます。
設定が完了したら元データ→リメッシュデータの順に両方選択し、ベイクボタンをクリックすると元データのマテリアル情報を新規画像テクスチャへ焼き付けます。
こちらが、ベイクされた1枚のテクスチャ画像です。
元データと比較してもクオリティの差はほとんどありません。
FBXへエクスポートし、Blenderでの作業は完了です。
Mixamoでアニメーションエクスポート
続いて、アニメーションを設定していきます。
adobe Mixamoを使用して、リギング/ウェイト設定、アニメーションエクスポートを行います。
BlenderからエクスポートしたFBXをアップロードします。
ジョイントポイントを設定します。
問題無ければオートリグ設定が完了し、アニメーション可能状態になります。
任意のアニメーションを選択し、ダウンロードします。
PlayCanvasでのアニメーション設定
新規プロジェクトを作成します。
MixamoからダウンロードしたFBXをインポートします。
テンプレートをルート直下、又はビューポート上にdrag＆dropします。
テンプレートエンティティを選択した状態でADD COMPONANTからAnimを選択します。
ASSTETSの右にある＋ ボタン右クリックしAnim State Graphを作成します。
テンプレートエンティティに追加したAnimにAnim State Graphとアニメーションデータをdrag＆dropします。
Manage ScenesからPUBLISHして公開用のURLを生成します。
こちらがリダクションしたデッサン人形がアニメーションしているシーンです。
従来は、元データの上に1ポリゴンずつ作成してリダクションしていました。しかし、現在ではBlenderの標準アドオンリメッシュ を使用すると、数秒で完了します。また、Adobe Mixamoの登場により、リギング設定やウェイト設定をせずに、多様なアニメーションに直接アクセスできるようになりました。
さらに、Webブラウザ上での高品質な3D表示に特化したPlayCanvasを使用することで、数分でWeb上に公開できます。ぜひ、PlayCanvasで3Dコンテンツの開発を始めてみてください。
Discussion