Three.js(付録 B)
Microsoft 3D ライブラリの活用
付録 1で拡張子gltfのモデルデータを利用した。
ここでは手早く3D モデルを得る方法として Windows 10 で利用できる「3D ビューアー」を通じてダウンロード可能な 3D モデルを Three.js 適したデータに変換する方法を紹介する。
3D ビューアーから利用できるモデルのファイルはgltfのバイナリ形式である、glbである。
得られるモデルは高品質なものの、ファイルサイズが数十メガバイトと大容量である。
このままブラウザアプリで利用すると、ユーザに大きな負担を与えてしまう。
Visual Studio Code を利用すれば数ステップの手順でファイルサイズを抑えられる。
3D ビューアーからモデルをダウンロードする
Windows 10 の「 3D ビューア」を起動する。
「ようこそ」画面を閉じる。
メニューの「 3D ライブラリ」を選択する。
今回は例として「 SF とファンタジー」から「スペースシャトル」を選択する。
名前を付けて保存を選択する。作業場所として空のフォルダを作成すると作業しやすい。
無用なトラブルを避けるため、ファイル名は半角英数字とする。ここでは「Shuttle.glb」とした。
ファイルサイズ削減の流れ
ファイルサイズ削減の概要は次の通りである。上記で例としてダウンロードしたShuttle.glbはファイルサイズ約 22MB である。
このデータサイズの原因のほとんどは高解像度のテクスチャにある。
しかしながら、本演習で想定するような比較的簡単なブラウザアプリではそこまで高品質なテクスチャは必要ない。
そこで、以下の手順でテクスチャの解像度を落とす。
glbファイルから頂点データとテクスチャデータを分離する。- テクスチャ画像を縮小する。
- 分離したデータを再度
glbに統合する。
以上の手順は Visual Studio Code と任意の画像編集ソフトを使って実施する。
Visual Studio Code で glb ファイルからテクスチャと頂点データを抽出する
まずは、gltf拡張機能をインストールする。
準備の項で「 Live Server 」をインストールしたときと同じ要領で実施する。
拡張機能の検索は「 GLTF 」と入力すればよい。
Visual Studio Code でglbファイルを保存したフォルダを開く。
フォルダに存在するオリジナルのglbファイル（例ではShuttle.glb）をクリックする。
Visual Studio Code 上ではエラーが表示されるが、問題はない。
ファイル名が表示されているタブ（例ではShuttle.glb）を右クリックして、「 gltf: Import from GLB 」を選択する。
ファイル保存ダイアログが開くので、glbファイルと同じ場所に拡張子をgltfに変えて（例ではShuttle.gltf）保存する。
gltfファイルと数枚のテクスチャ、拡張子「bin」の頂点データが出力される。
テクスチャのサイズは下図の通りである。一枚 4MB 以上もある。
テクスチャのリサイズ
テクスチャ画像（上記の場合は拡張子pngの4つのファイル）のサイズを縮小する。
以下の点に十分注意すること。
- 縮小画像は、元画像のアスペクト比（縦横比）と全く同じにすること。通常はアスペクト比 1 である。
- 縮小画像の縦横画素数は 2 のべき乗とすること。
- 縮小画像の形式およびファイル名は元画像と全く同じとすること。特に
pngには透明度が設定されている場合がある。ペイントブラシなどで縮小すると透明度が消える可能性が高い。 - 元画像を縮小画像で上書きすること。
以上を守れば、どのような方法で画像を縮小しても構わない。 ツールの例としてはRalpha Image Resizerがある。
テクスチャを 256 画素四方に縮小するとファイルサイズは次のようになる。
分離したデータの glb への統合
最後に、分離したテクスチャと頂点データを再度まとめなおす。
Visual Studio Code でgltfファイル（例ではShuttle.gltf）をクリックし、ファイル名が表示されているタブを右クリックして「 Export to GLB 」を選択する。
ファイル保存ダイアログが開くので、名前をオリジナルのglbと違うものに変えて（例ではShuttle_min.glbとしている）保存する。
ファイルサイズが激減していることが分かる。
サイズ削減後の glb ファイルの見栄えを確認する
ブラウザでglTF Viewerを開き、完成したglbファイルをドラッグ＆ドロップする。
オリジナルモデルとサイズ削減後モデルの比較は次の通りである。
- オリジナル
- サイズ削減後
オリジナルに比べると当然テクスチャ解像度低下による劣化があるが、本演習の用途ではこれで十分である。
また 1 ファイルで数十メガバイトものモデルデータをユーザにダウンロードさせるのはかなりのストレスになるので避けるのが妥当である。
Three.js で glb を読込む
THREE.GLTFLoaderでロードし、シーンに追加すれば表示できる。
Shuttle_min.glbをThreeJS-master/assets/downloads/Shuttle_min.glbとなるように配置して、ThreeJS-master/lecB/appendixB0.htmlをこれまで同様に実行すれば、以下のようになる。
Android 端末で最初に実行した際は、表示されるまでにややタイムラグがあるかもしれない。