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なども入っています。

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

The Khronos Group
Gltf tagged News Gltf tagged news about Khronos standards

glTFファイルの利用

ツール

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

  • gltfpack :圧縮したり変換したりする
  • glTF-Transform: ファイルを編集したり、確認することが出来る。
meshoptimizer
📦 gltfpack Mesh optimization library that makes meshes smaller and faster to render

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

META CONNECT 2022より

ファイルのエクスポート

すでに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を使えば読み込むことが出来ます。

あわせて読みたい

実際に読み込むプログラムについては以下の記事を確認ください。

あわせて読みたい
gltf (.glb)ファイルをbabylon.jsを使ってWebサイト上に表示する方法 "3Dデータにおけるjpeg"と呼ばれる gltf を、Babylon.jsを使ってWeb上で表示する方法について紹介します。 【サンプル】 Babylon.jsではcanvas要素を利用して3Dレンダリ...

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次