やりたいこと
下の記事で紹介した通り、BlenderでglTF(.glb)ファイルを保存することができますが、形状が複雑になればファイルサイズは大きくなりWEＢで読み込む際などにロード時間が遅くなります。
ここでは保存されるglTF(.glb)ファイルのサイズを小さくする方法を紹介します。
環境
Blender：3.4.1
メッシュのエクスポート設定の変更
左上の”ファイル” → ”エクスポート” → glTF 2.0(.glb/.gltf) からエクスポートダイアログを表示します。
保存ダイアログの”メッシュ”グループ内の”ノーマル”のチェックを外して保存します。
以上の設定変更で保存サイズを小さくすることができます。
圧縮のエクスポート設定
左上の”ファイル” → ”エクスポート” → glTF 2.0(.glb/.gltf) からエクスポートダイアログを表示します。
保存ダイアログの”圧縮”のチェックをいれて保存します。
以上の設定変更で保存サイズを小さくすることができます。
ただしこの方法で保存した場合、下で紹介した実装ではThreejsで読み込めないためご注意ください。
圧縮したglTFを読み込むには以下の対応も必要です。
圧縮されたglTF(.glb)ファイルをLoadして表示(Threejs)
やりたいこと圧縮されたglTF(.glb)ファイルをThreejsを読み込む。圧縮方法は↓環境Threejs： r150Chrome： 111.0.5563.65準備圧縮なしのソースおよび環境の準備は↓の記事を参考にしてください。DRACOLoaderを用いた読み込みフォルダ構成フォルダ構成は以下の通りです。dice‐c.glbが読み込み対象の圧縮されたglTFファイルです。DRACOLoader.jsファイル、dracoフォルダを追加しています。ともにThreejsに含まれるファイルです。ROOT| dice-c.glb| index.html|\---js +---libs | | 3d....
blog.marunokan.com
2023.04.06
結果
メッシュのエクスポート設定の変更、および圧縮のエクスポート設定の変更することで出力されるglTF ファイルのサイズを小さくすることができました。
以下に各設定での保存サイズをまとめます。
| ノーマルの保存 | 圧縮 | サイズ(kbyte) | 備考 |
| 〇 | × | 786 | デフォルト設定 |
| × | × | 220 | |
| 〇 | 〇 | 106 | |
| × | 〇 | 30 |
使用したモデルは以下のサイコロです。
参考にさせていただいたサイト
【Three.js】3Dモデルのサイズを小さくする方法 | テクサLog
Three.jsではblenderで作成したglTFファイルを扱うことができますが、オブジェクトの数が多かったりするとファイルサイズがかなり大きくなってしまいます。その結果サーバ...
texalog.com
コメント