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

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

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

カテゴリー: JavaScript >; WebGL

2018年6月7日発行

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

glTF入門シリーズの記事一覧

はじめに

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...]を選択して設定を開きます。

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

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

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

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

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

barger.zip

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のべき乗（2ⁿ）サイズでない場合、浮動小数点（float型）として処理がしづらく、パフォーマンスが落ちたり画像の縮小がうまくできなくなってしまいます。