入門
第1回 glTFの仕様とその出力方法

glTFは、WebGLやOpenGLをはじめとする、3Dランタイム向けのファイル形式です。まずはその仕様を学び、用意されたサンプルをglTFに出力する手順を見てみましょう。

2018年06月07日発行

目次

はじめに

glTF(ジーエルティーエフ:GL Transmission Formatの略)は、WebGLやOpenGLをはじめとする、3Dランタイム向けのファイル形式です。glTF 2.0が2017年に仕様として定められています。

glTFは、インターネットでの配信が前提とされた仕様です。まだ新しいですが、WebGLに興味があるフロントエンドエンジニアであればぜひ知っておきたいファイル形式です。本稿では、Webページ、WebアプリケーションでのglTFの利用方法を解説します。

なお、WebGLやthree.jsについての詳細は、CodeGridの次のシリーズ*を参考にしてください。

*注:情報鮮度

「WebGLの基礎」シリーズは、基本的な考え方は変わりませんが、一部コードの書式が変更されています。また古いライブラリは現在の最新ブラウザでは再生できない機能が含まれています。

glTFとは

画像の一般的な形式にはPNGやJPEGがあります。音声にはMP3がありますし、動画にはMP4があります。それでは、3Dモデルではどんな形式がもっとも一般的でしょうか?

3Dモデル形式には、.obj.fbx.dae(COLLADA)といった汎用形式や、.3ds.blendなどの3Dモデリングツール専用ファイル形式がすでに存在します。しかし、これらのファイル形式は、モデリングツールに強い依存があったり、また、たとえ汎用形式であっても、オフラインでの利用が前提のため、インターネットでの利用を考えると非効率でした。

glTFはこうした問題を解決し、完全にオープンで誰でも利用でき、プラットフォームにも依存しないファイル形式です。3DモデルにおけるPNGやMP4のような立ち位置を目指して登場しました。glTFは、インターネットでの配信を前提に作られたWebGLやOpenGLをはじめとする3Dランタイム向けのファイル形式なのです。

glTFの仕様策定は、クロノス・グループという、HTMLでいうW3Cのような団体がGitHub上で進めており、現在もglTFの拡張仕様や問題点などのディスカッションが活発に行われています。

glTFのMIME typeはmodel/gltf+jsonとして正式に登録されており、一つの仕様として公に認められていると言えます。

さて、MIME typeを見て気づいた方がいるかもしれませんが、glTFはJSON形式です。ですので、テキストエディタで開くこともできます。ただ、実際のところ、JSONではありますが人が手で書くファイルではありません。glTFファイルは3Dモデリングツールにより直接出力されることになります。一方で、JSON形式であるため、解析がしやすいという利点がありJavaScriptで読み込んでWebGLで利用することができます。

glTFは2015年に初めて1.0がリリースされました。2017年には、より抽象的で汎用性のあるglTF 2.0がリリースされました。glTF 2.0では、glTF 1.0に存在したshaderの直接参照が削除される一方、PBR(物理ベースレンダリング)*向けパラメーターの対応などが追加されています。

*用語:物理ベースレンダリング

物理ベースレンダリング(Physically Based Shading)は、光の反射や散乱など現実の物理現象を再現するレンダリング手法です。

glTFの一般的なファイル構造の例を、glTF 1.0とglTF 2.0で見てみましょう。glTF 1.0のファイルの内容例は、次のようなコードになります(安心してください、人間が手で書く前提のファイルではありません)。シェーダーのソースコードuriというフィールドで参照しているのがわかります。

    "programs": {
        "program0": {
            "attributes": [
                "a_position"
            ],
            "fragmentShader": "fragmentShader0",
            "vertexShader": "vertexShader0"
        }
    },
    "shaders": {
        "vertexShader0": {
            "type": 35633,
            "uri": "./my-vertex-shader-source.txt"
        },
        "fragmentShader0": {
            "type": 35632,
            "uri": "./my-fragment-shader-source.txt"
        }
    },

glTF 2.0でのPBRであれば、ベースカラー(アルベド)、ラフネス(ざらつき)、メタリック(金属質)の最低限の値があれば表現できます。

glTF 2.0のファイルの内容例は次のようなコードになります(安心してください、こちらも人間が手で書く前提のファイルではありません)。

    {
        "materials": [
            {
                "name": "gold",
                "pbrMetallicRoughness": {
                    "baseColorFactor": [ 1.000, 0.766, 0.336, 1.0 ],
                    "metallicFactor": 1.0,
                    "roughnessFactor": 0.0
                }
            }
        ]
    },

こうした抽象性により、OpenGLやDirectXなどラインタイムやShader言語に依存することなく、glTFは幅広く利用できます。

glTFはメッシュやマテリアルはもちろん、ボーンアニメーション、モーフアニメーションを定義できるフィールドも用意されており、たとえばゲームのキャラクターなどにも利用できます。また、拡張領域も用意されており、拡張の一つとしてDraco圧縮サポートがあります*。ただし、実際に拡張が利用できるかはglTFのエンコーダーとデコーダーの機能に依存します。

*用語:Draco

Draco(ドラコ)はGoogleが開発した、オープンライセンスの3Dモデル専用の超強力な圧縮方式です。3Dモデルのデータ容量を1/10程度にまで圧縮することが可能です。

すでにglTFは多くの3Dモデリングツール、ゲームエンジンやWebGLライブラリでサポートされています。

身近なところでは、FacebookでglTFファイルをアップロードすることもできます。ARKitやARCore対応のスマートフォンのカメラで3Dスキャンした情景をFacebookに載せる、なんていう時代もすぐ近くかもしれませんね。

glTFの仕様は複雑ですが、利用する上ではこれくらい理解しておけばいいでしょう。私たちは普段、Webでの開発でPNG画像を多用しますが、PNG自体の仕様を深く知っている人は非常に稀ですよね。それと同じように、glTFについても、「ファイル形式そのものの知識」よりも「利用できる知識」のほうが重要だと筆者は考えています。

glTFファイルを出力する

ここからは、3DモデルをglTFファイルとして出力する方法を解説します。glTFファイルを出力するには、大きく分けて次の2通りの方法があります。

  • 既存の3Dモデルファイル(.obj.daeなど)を、glTF形式に変換する
  • 3Dモデリングツールを使い、glTF形式で出力する

前者は、OBJやCOLLADAといった従来のファイル形式の3DモデルデータをglTFに変換するだけの処理です。Webサービスやコマンドラインから変換機能を利用できます。変換の過程で3Dモデル自体の編集はできませんが、すでにある資産を使ってglTFファイルを入手することが目的でしたら事足りるでしょう。

変換ツールの例としては、モデルファイルをドラッグ&ドロップするだけで利用できるWebサービスの「glTF Model Converter」などがあります。

一方で、3Dモデリングツールから3Dモデルを直接glTFとして出力して、glTFファイルを取得する方法もあります。現在はモデリングツールのサードパーティー製エクステンションとして提供されていることが多いですが、glTFが普及すればモデリングツールのビルトイン機能として提供されるかもしれません。

エクスポーターの例としては、Blender用にクロノス・グループが提供する「Khronos Group Blender Exporter」などがあります。

ここでは、「Khronos Group Blender Exporter」を利用したglTFの出力方法を見てみましょう。3Dモデリングツールは高価なソフトウェアが多いですが、その中でもBlenderはオープンソースで無償で利用でき、他の3Dモデリングツールにも引けを取らない機能を有します。

Blenderで3DモデルをglTFで出力する

それでは、Blenderを使ってglTFに出力する方法を具体的に見ていきましょう。まず、Blenderをインストールしていなければ、Blenderを手に入れましょう。Windows、macOS、LinuxのそれぞれのOS向けのアプリケーションを無償でダウンロードすることができます。

Blenderのホームページから、「Download Blender」を選び、自分が使っているOSに合ったアプリケーションをダウンロードしインストールします。

加えて、Blender用のアドオンとして提供されている「Khronos Group Blender Exporter」もダウンロードしておきましょう。「Khronos Group Blender Exporter」はGitHubで管理されています。プロジェクトのリポジトリの「Clone or donwload」から、「Donwload ZIP」を選びアドオンを入手します。

Blender本体と「Khronos Group Blender Exporter」の両方が手元に揃ったら、「Khronos Group Blender Exporter」をBlenderにインストールします。まずは、「io_scene_gltf2」フォルダを指定のディレクトリに配置します。配置場所はOSごとに異なります。「io_scene_gltf2」フォルダはダウンロードしたZIPファイル内の「scripts / addons」の中に格納されています。

取り出した「io_scene_gltf2」フォルダを配置します。OSによって配置する位置が異なるので注意してください。

Windowsの場合

C:\Program Files\Blender Foundation\Blender\2.7X\scripts\addons\

macOSの場合

/Applications/blender.app/Contents/Resources/2.7X/scripts/addons/

blender.appはフォルダではないため、通常は開けませんが、「Blender.app」を右クリック(2本指クリック)し、「パッケージの内容を表示(Show Package Contents)」を選択すると、アプリケーションパッケージの中のファイルを見ることができます。

ここから先はWindowsもmacOSも共通の操作となります。

「Khronos Group Blender Exporter」の配置が終わったら、Blenderでアドオンを有効化します。Blenderを開き(Blenderを開いている場合には一度終了する)、メニューバーの[File]から[User Preferences...]を選択して設定を開きます。

設定画面が開くので、次の手順でアドオンを有効化します。

  1. [Add-ons]タブを選択し、「gltf」で検索する
  2. 先ほど配置したアドオンが「Import-Export: glTF 2.0 format」という名前で見つかるのでこれをチェックする
  3. 下部の[Save User Setting]ボタンを押して適用する

これでセットアップは完了です。BlenderからglTFを出力してみましょう。操作の練習用のBlender用のモデルファイルが以下からダウンロードできます。実際に手を動かしながら試してみるといいでしょう。

操作の練習用のBlenderモデルファイル

(次のリンクをクリックするとダウンロードが始まります)

Blenderでモデルファイル(練習用のモデルファイルを使う場合はbarger.blend)を開きます。開いたら、メニューバーから[File]>[Export]>[glTF2.0 (glTF)]を選択します。もし、Exportの一覧に「glTF2.0」がない場合はアドオンのインストール手順を見直してください。

Exportが完了すると、複数のファイルを得ることができます。本体となる、「.gltf」、メッシュなどの頂点がバイナリー形式で格納された「.bin」そして、テクスチャー画像です。ここで出力された複数のファイルはすべてが必要なファイルです。

余談ですが、本体のglTFファイルをテキストエディタで開いてみると次のように「.gltf」ファイルからそれぞれのファイルを参照しています。

    "buffers" : [
            {
                    "byteLength" : 325416,
                    "uri" : "barger.bin"
            }
    ],
    "images" : [
            {
                    "uri" : "meat.png"
            },
            {
                    "uri" : "buns.png"
            },
            {
                    "uri" : "cheese.png"
            },
            {
                    "uri" : "pickles.png"
            },
            {
                    "uri" : "tomato.png"
            }
    ],

これでWebGL用の3Dモデルファイルを得ることができました!

テクスチャー画像の形式と大きさに注意

Webで利用する場合、テクスチャー画像の形式はPNGやJPEGなどのWebブラウザで表示できる形式になっている必要があります。

一方で、3Dモデルでは、テクスチャー形式にTGAやTIFF、DDSなどWebブラウザが対応していない形式が利用されていることがあります。その場合、glTFからリンクされている画像ファイルがWebブラウザ未対応の形式のまま出力されてしまうことがあります。

テクスチャー画像がWebフレンドリーでない場合、3Dモデラー上でテクスチャー画像の形式をあらかじめ変えておく、または、glTF出力後に画像ファイルをJPEGなどに変換することで、glTFをブラウザで読み込めるようになります。画像形式には注意するようにしましょう。

また、テクスチャー画像がPNGやJPEGで用意されていたとしても、画像が巨大な場合があります。Webで使う場合、大きなテクスチャー画像であっても2048pxあればいいでしょう。大きすぎるテクスチャー画像は、ダウンロードに時間がかかります。必要に応じて縮小しておきましょう。ただし、テクスチャー画像は2のべき乗サイズを保つように注意しましょう。2のべき乗(2n)サイズでない場合、浮動小数点(float型)として処理がしづらく、パフォーマンスが落ちたり画像の縮小がうまくできなくなってしまいます。

関連ファイルをまとめられるglb形式

基本的にglTFによる3Dモデルは、JSON形式のglTFファイルと、そこから参照されるメッシュデータや画像ファイル群の複数の関連ファイルで構成されています*。しかし、複数ファイルに分かれてしまっているとファイルの管理は煩雑になってしまいます。

*注:dataURIの利用

glTFファイルからの関連リソースは、基本的に相対URLで参照されています。実は、URLによる参照にはdataURIを利用することもできます。その場合glTFのJSONファイル内にすべてのリソースを埋め込んでしまうこともできます。ただし、dataURI化されたリソースは本来のファイルよりも30%ほど容量が増えてしまいます。

そのため、これらを一つのファイルにまとめることができる仕組みがあります。この単一ファイルはglb(ジーエルビー:glTF-Binary)と呼ばれています。

glTFのファイル群とglbとは、内容はまったく同じで、glTF群からglbに、またはglbからglTF群にと相互に変換することができます。

glTF Model Converter」を使うと、glTFとglbの相互変換を行うこともできます。画面下部の「Select Target glTF Version」で、「glTF 2.0」と「Output glb」にチェックが付いた状態でglTFファイル一式を画面内にドラッグ&ドロップすると単一のglbファイルに変換することができます。

さて、一見、一つのファイルにまとまったglbのほうが管理しやすく、glTFより優れているようにも見えます。しかし、glbは単一ファイルであるがゆえに中身がわかりません。

  • glb: 単一ファイルだが、中身はわからない
  • glTF: 複数ファイルだが、構成要素がわかる

glTF、glb両方の特徴を理解し、私は次のフローを採ることをおすすめします。

  1. 開発時はglTFで出力し、ファイル構成を確認する
  2. もしテクスチャー画像ファイルが大きすぎたり、画像形式がWebで扱えない場合には編集したあと、glbに変換してプロダクション用ファイルとする、というようにする

なお、先述したFacebookへの3Dモデル投稿は、glbの単一ファイルになっている必要があります。

今回はglTFファイルへの書き出し方法を解説しました。次回はglTFおよびglbファイルをWebの技術で表示する方法を解説します。

小山田 晃浩
小山田 晃浩
フロントエンド・エンジニア

2006年よりWeb制作会社にてUI実装や運用業務を経験した後、2010年よりフロントエンド・エンジニアとして株式会社ピクセルグリッドに入社。これまでの経験の大半は大規模Webサイトの壊れにくいHTML/CSS設計、及び実装。また、SVG, Canvas, WebGLの扱いも得意としている。 外部に向けたアウトプットも積極的に行っており、カンファレンスでの講演などを多数こなしている。Tokyo WebGL Meetupの主催者。2011年から2015年まで5連続でMicrosoft MVP for IEを受賞。 著書に『Webデザイナー/コーダーのための HTML5コーディング入門』(共著:エクスナレッジ、2011年3月12日)や『CSS3デザイン プロフェッショナルガイド』(共著:毎日コミュニケーションズ、2011年5月28日)』などがある。