glTFファイルとは | 株式会社野本

glTFファイルは3Dデータのjpegと呼ばれるもので、「Webで取り扱いやすいデータ形式」です。
データ形式としては他に3Dプリンターで扱われるstl (1987年～)、3Dモデリングソフトで使われるobj(1995年～)などあります。それぞれに比較すると、このgltfの最新バージョンである glTF 2.0 は2017年に策定されたものなので非常に新しくモダンなフォーマットと言えます。
以下、Web前提で記事を作成します。

glTFは”GL Transmission Format”の頭文字を取ったものです。
以下のような特徴があります。

JSONで構成されている
バイナリデータ(.glb)にすることもできる
PBR（物理ベースレンダリング）マテリアルに対応している
アニメーションも設定できる
Blenderなどの3Dモデリングソフトに対応している
Googleの技術である Draco圧縮に対応している
KTX2.0と呼ばれる、GPUが読み取り可能なテクスチャ形式に対応している
ツールが充実している
Babylon.jsや Three.jsを使うことでWebサイトに表示することができる

クロノス・グループが策定

クロノス・グループとはグラフィック技術やコンテンツなどに関わるオープンな規格を策定することを目的としている技術コンソーシアムであり、非営利団体です。WebGLやファイル形式であるCOLLADA、Androidなどで使われるVulkanなど様々な技術を定義、メンテナンスしています。
glTFに関してはGAFAに限らず、様々な企業がサポートしています。CADのAutodesk社もいれば、IKEAなども入っています。

毎月アップデートとまではいきませんが、シーズン毎に新しいニュースが出るくらいは推進されています。

glTFファイルの利用

ツール

最低でも以下の2ツールがあると良いかなと思います。

gltfpack ：圧縮したり変換したりする
glTF-Transform：ファイルを編集したり、確認することが出来る。

meshoptimizer

📦 gltfpack Mesh optimization library that makes meshes smaller and faster to render

これらと3Dモデリングソフトなどを組み合わせることで、プロセスを自動化することが出来ます。

ファイルのエクスポート

すでに3Dモデルがあるものとします。
Blenderであれば、エクスポートから「glTF 2.0」を選択することで出力することができます。

フォーマット：.glb
内容：対象を絞りたいのであればオブジェクトモードで選択してから適切な項目を選ぶ
トランスフォーム +Yが上：チェック
ジオメトリ（画像）： jpegを設定することでファイルサイズが削減できることもある
ジオメトリ（圧縮）：ファイルサイズが大きければ使用して削減することを検討する
アニメーション：必要に応じてチェック

ファイルサイズが大きいときの対応

そもそも間違えて大きなテクスチャを貼り付けていないか、3Dモデルのデータを確認する。
効果が大きいです。細かい小さなオブジェクトが5割ぐらいの容量を使っている場合もあるので、用途に合わせてデシメートなどを利用するのも良いです。
Webでの利用であれば、細部にまで高精細である必要がない場合もあります。

エクスポート時にジオメトリの画像をjpegにする。
3Dデータの見え方として破綻する可能性もあるので、エクスポート後に問題がないか確認しましょう。

KTX2.0を利用する
gltfpackツールを使ってテクスチャをKTX2.0形式にします。GPUが直接扱える形式に変換するので、メモリー消費が少なく済みます。

エクスポート時に圧縮する
こちらも破綻する可能性があるので、エクスポート後に問題がないか確認しましょう。

gltfpackツールを使って圧縮する
エクスポート時に圧縮しても良いのですが、gltfpackを使えば様々な設定で圧縮することが出来ます。

漸進的ロードを使う
Babylon.jsにはProgressively Loadという技があり、徐々にデータを高精細にさせていくことが出来ます。
https://doc.babylonjs.com/features/featuresDeepDive/importers/glTF/progressiveglTFLoad

これ以外にもメモリから読み込めるようにしたりすることも出来ます。
またJavaScriptを書けるようであれば、いくつかのデータに分割しておき、Web上では1つのデータに表示されるようにする…という多少強引な方法もあります。

さらに強引な方法もありますが、ひとまずここまで。

Babylon.jsでの読み込み

Babylon.jsではglTF Loaderを使えば読み込むことが出来ます。