こんにちは！
WebデザイナーのNK細胞です！
「WebGL（three.js）を活用して作成されたWebサイト魅力的すぎる。どうせなら自分で作りたい……！」
と思うことはありませんか？
ということでthree.jsを使ってWebGLにチャレンジしてみました！記録もかねて、3ステップで書いていこうと思います。
第一回の今回はWebGLに適したglTF形式ファイルをblenderで書き出す方法についてお話します。
WebGLについては以下の記事で、概要とWebGLを活用した魅力的なWebサイトを紹介しているので、良ければ見てみてください。
そもそもglTF形式ファイルってなんだ？
glTFとは
今回blenderで書き出すのは、glTF（GL Transmission Format）というJSONによって3Dモデルやシーンを表現するフォーマットです。
glTFはKhronos Groupによって開発され、3Dモデルの効率的な伝送と読み込みを目的としています。また、このフォーマットは、「3DにおけるJPEG」と表現されることもあり、WebGLなどのウェブベースの3Dレンダリング技術と組み合わせて使用する際に、その軽量性で高速な読み込み可能なものとなります。
glTF形式ファイルと各3Dデータフォーマット
| ファイル形式 | 拡張子 | 用途 | テクスチャ | アニメーション | ファイルサイズ |
| FBX | .fbx | 3Dモデリング アニメーション |
外部テクスチャファイルを参照する | 複雑なアニメーション | 大 |
| STL | .stl | 3Dプリンター | テクスチャ非対応 | 静止画像 | 小 |
| OBJ | .obj | 3Dモデリング 3Dプリンター |
外部テクスチャファイルを参照する | 静止画像 | 中 |
| GLTF | .gltf/.glb | Web上の3Dコンテンツ表示 | 1ファイル内にテクスチャを含む | 簡単なアニメーション | 小 |
表参照：https://mawasu-blog.com/gltf/(2024/07/10 16:15 アクセス)
以上の表のようにglTF以外にも複数の3Dデータのフォーマットがあり、それぞれのファイル形式がどのような用途に向いているかなどの特徴があります。
中でもglTF形式ファイルは、ファイルサイズも小さく、テクスチャも１ファイル内に含まれるため、Web上での3Dコンテンツ表示に最適です。
.gltfと.glbの違い
| 拡張子 | 特徴 | MIMEタイプ |
| .gltf | 三種類のファイルに出力されます。 gltf：モデル、材質等などシーンに関する情報が格納されるファイル bin：モデルの頂点座標、法線、UVなどの数値リストが格納されるファイル 画像：png、jpegなど画像ファイル |
model/gltf+json |
| .glb | gltfの三種類のファイルを１つに全てまとめてglbファイルとして出力。 | model/gltf-binary |
.gltfファイルと.glbファイルは、どちらもGLTF（GL Transmission Format）形式でエクスポートされた3Dモデルを表すファイル形式です。
gltfファイルは、複数のファイルに分割されたテキスト形式で表現される3Dモデルであり、glbファイルは、1つのバイナリファイルにすべてのデータが格納された3Dモデルです。管理のしやすさから、glbを使用する場合が多いですが、glbは単一ファイルであるため中身がわかりません。一方で、glTFは複数ファイルですが、構成要素がわかります。それぞれの特徴を理解したうえで、Web上での表示や転送に関する仕様に応じて決定する必要があります。
blenderでのエクスポート方法
では本題です。
モデルの作成、書き出しにはblenderを使用します。
1.書き出したいモデルを選択
オブジェクトモードで書き出したいモデルを選択しましょう。全て選択する場合は”A”で全選択が可能です。
2.ファイル / エクスポート / glTF2.0(glb/glTF) の順で選択
3.チェック項目を入力
内容項目について
「対象」で書き出したい対象を選択します。今回はあらかじめモデルを選択したため初期値の選択したオブジェクトをチェックします。
「データ」カメラの設定を書き出したい時や、ライトの設定を書き出したい時に設定します。three.jsでライトの設定を読み込みたいので、今回はparticleライトを選択します。
エクスポートの初期設定では”選択したオブジェクト”が選択されています。可視オブジェクトやレンダリングオブジェクトを選択するか、オブジェクトを選択したうえで書き出さないとモデルを書き出せないので注意してください。
その他の項目について
メッシュやマテリアルなど様々な項目がカスタム可能です。
| ＋Yが上 | glTFの規定に沿って、+Yが上でエクスポート |
| モデファイアーの適用 | アーマチュアを除くモディファイアをメッシュオブジェクトに適用 |
| UV | UV（テクスチャ座標）をメッシュでエクスポート |
| ノーマル | 頂点の法線をメッシュでエクスポート |
| 頂点カラー | 頂点カラーをメッシュでエクスポート |
今回はアニメーションを書き出すわけではないため、以上5つを選択します。
残りの項目は初期値で問題ありません！
それぞれの項目を詳しく知りたい方は下記のサイトを参考にしてみてください。
4.エクスポート
フォーマットで”glTFバイナリ(.glb)“を選択して、“glTF2.0をエクスポート”を選択。
エクスポート作業は以上です！
まとめ
今回はglTFの概要とblenderで作成したモデルのglTF形式ファイルの書き出し方法について書きました。次回は書き出したgltfをthree.jsを用いて、実際にウェブサイト上に読み込んでいきます！
参考サイト
