「Blender」で3Dモデルをデザインして「UltraMotion3D」ライブラリで表示してみよう

はじめに

今回はプログラミング以外に少し3Dデザインにも挑戦しましょう。「Blender」で簡単に3Dギターを作ってデータを変換し、「UltraMotion3D」で読み込みます。

なお、3Dギターは前回までにコーディングしてきた「lib/Matrix3D.js」「lib/Model3D.js」「lib/UltraMotion3D.js」「lib/Vector3D.js」「lib/WGSL.js」「index.html」に追記して図1のように表示します。まだマテリアル色は白色のみです。

図1：今回の解説でWebブラウザに表示する3Dギター

ギターを3Dデザインしてデータを作る

ギターの3Dデザインには、本連載の第1回で紹介したBlenderを使います。

まずBlenderから汎用性の高い3Dデータ形式「FBX」ファイルに書き出し、次にFBXファイルを「Vixar Vision」で読み込んでUltraMotion3Dで使える.jsファイルに書き出します。

Blenderで3Dデザインする

1. Blenderを起動すると立方体が表示されているので「Viewport Shading」を「Material Preview」にします。続けて、立方体を選択した状態で「Edit Mode」にします。
2. Edit Modeに入ったら立方体を拡大・縮小して図2のようにボディーを作り、マテリアルを作成して黄土色にします。
   

   図2：ボディーを作る

3. 「Add」タブ→「Cube」メニューで立方体を作成してネックの形に拡大・縮小して平行移動し、マテリアルを作成して茶色にしAssignします(図3)。
   

   図3：ネックを作る

4. 続けて「Add」タブ→「Cube」メニューで立方体を作成してヘッドの形に拡大縮小して平行移動し、マテリアルを作成して茶色にしAssignします(図4)。図5のように完成形まで作りこまなくても、テストでギターっぽいものが作れただけで構いません。
   

   図4：ヘッドを作る



図5：完成形のギター

BlenderからFBXファイルを書き出す

Blenderの「File」→「Export」→「FBX(.fbx)」メニューで図6のように「Guitar.fbx」に書き出します。FBXファイル形式はもともとFilmbox向けに開発された3Dデータ交換フォーマットで、現在はAutodeskが提供しています。

図6：BlenderからFBXファイルに書き出すダイアログ

Vixar VisionでFBXファイルをUltraMotion3D向けに書き出す

FBXファイルをUltraMotion3D形式のJavaScriptファイルに変換するには、筆者が開発した「Vixar Vision」を使います。こちらのURLからダウンロード／インストールしてください。Vixar Visionを起動したら「ファイル」→「開く」メニューで「Guitar.fbx」ファイルを開きます。

Vixar Visionから、図7のように「ファイル」→「名前を付けて保存」メニューから「index.html」ファイルがあるディレクトリに「models」フォルダを作成し、そのフォルダ内に「ファイルの種類」を「WebGPUファイル(*.js)」にした「Guitar.js」という名前のファイルを作成して保存します。Blenderでうまくサイズを合わさないとUltraMotion3Dでピッタリ表示できないかもしれません。

図7：Vixar Visionからjsファイルに書き出すダイアログ

Guitar.jsのテンプレートは次のようなModel3Dから派生したGuitarクラスになります。テンプレートでは三角形1個だけのモデルです。

class Guitar extends Model3D {
  constructor() {
    super();

    this.setMaterial(0,0,0,1,1,0.250,0.25,0.35,5.0);

    this.setV(0,100,0,0.0,0.0,1.0,0,0.0,0.0);
    this.setV(-100,-100,0,0.0,0.0,1.0,0,0.0,0.0);
    this.setV(100,-100,0,0.0,0.0,1.0,0,0.0,0.0);

    this.setI(0,1,2);

    this.initBuffers();
  }
}