glTF 2.0 対応 WebGL ライブラリを比較してみる

この記事は[WebGL Advent Calender 2017](http://qiita.com/advent-calendar/2017/webgl)の10日目の記事です。

## はじめに

みなさんは、[glTF](https://www.khronos.org/gltf/) というファイルフォーマットをご存じでしょうか？
glTF は GL Transmission Format の略で、ランタイム用途の 3D アセットの標準仕様を狙った、比較的新しいフォーマットです。
音楽なら「MP3」、画像なら「JPEG」という感じで、3Dなら「glTF」を目指しているようです。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/26094/9110a69d-a418-3609-fd77-61c6b58d8e62.png)
（出典：https://www.khronos.org/gltf ）

最近は Google やマイクロソフトも glTF に力を注いでいるようなので、知らず知らずのうちに使っているケースもあるのでは、と思います。ちなみに、身近な所だと「[ペイント 3D](https://blogs.windows.com/japan/2017/07/20/announcing-more-updates-to-paint-3d-magic-select-enhancements-drawing-tools/)」や「[Office 2016](https://support.office.com/ja-jp/article/ec5feb79-b0af-47f6-a885-151fcc88ac0a)」などでサポートが追加されていたりします。知ってました？

## glTF 2.0 で加えられた主な変更点

今年の6月に Khronos グループより [glTF 2.0 の発表](https://jp.khronos.org/news/press/gltf-2.0)がありました。glTF 2.0 は glTF 1.0 の大幅な仕様改定版です。
主な強化ポイントとしては

- スキニング
- モーフィング
- PBR

あたりでしょうか。

これらの強化ポイントをすべて用いたサンプルとして「Project Polly」というモデルが公開されていますので、どんなことが出来るかはこちらをご覧ください。
[![image.png](https://qiita-image-store.s3.amazonaws.com/0/26094/48303c61-a421-47dc-6e1e-f1f48faffa43.png)](https://www.youtube.com/watch?v=l7TB1O51X_M)
（出典：https://www.khronos.org/gltf ）


ちなみに、GLSL シェーダ機能は glTF 2.0 からは非推奨（拡張扱い）となりました。特定の 3D API（OpenGL / WebGL）への依存度を下げる取り組みのようです。


## glTF 2.0 対応ライブラリについて

現在、Khronos の [glTF 公式ページ](https://github.com/KhronosGroup/glTF#webgl-engines) に主要な glTF 対応ライブラリが紹介されています。ここでは glTF 2.0 対応ライブラリを紹介したいと思います。WebGL Advent Calender ですしね。特徴は自分の主観です。

|ライブラリ名                                                            |作者                   |WebGL ライブラリの特徴                      |
|:-----------------------------------------------------------------------|:----------------------|:-------------------------------------------|
|[Three.js](https://threejs.org/)                                        |mrdoob                 |一番人気の WebGL ライブラリ                 |
|[BabylonJS](http://babylonjs.com/)                                      |deltakosh              |MS の中の人が中心になって開発中             |
|[Cesium](http://cesiumjs.org/)                                          |AnalyticalGraphicsInc  |3D 地球儀のライブラリ                       |
|[Grimoire.js](https://grimoire.gl/)                                     |GrimoireGL             |日本発のタグベース WebGL ライブラリ         |
|[xeogl](http://xeogl.org/)                                              |xeolabs                |データ駆動型の WebGL ライブラリ             |
|[Khronos glTF Loader](https://github.com/KhronosGroup/glTF-WebGL-PBR)   |Khronos                |Khronos による PBR リファレンス実装         |
|[minimal-gltf-loader](https://github.com/shrekshao/minimal-gltf-loader) |shrekshao              |最小限の glTF ローダー + WebGL 2.0 レンダラ |
|[QTEK Model Viewer](https://github.com/pissang/qtek-model-viewer)       |pissang                |Baidu によるモデルビューア                  |
|[Hilo3d](https://github.com/hiloteam/Hilo3d)                            |hiloteam               |Alibaba グループによる WebGL ライブラリ     |


## glTF 2.0 対応ライブラリ別ステータス比較

下記にて最新 WebGL ライブラリでの glTF 2.0 の対応状況を定点観測しています。
https://github.com/cx20/gltf-test

概ね、どのライブラリもPBR対応は行われていますが、アニメーションやモーフィングといった対応がまちまちのようです。どのライブラリもオールグリーン目指して頑張ってほしいところです。

###[Simple models for testing individual features](https://github.com/cx20/gltf-test#gltf-20-sample-models)
[![image.png](https://qiita-image-store.s3.amazonaws.com/0/26094/4a97c44f-90bf-5db3-2ba8-5da7a3241203.png)](https://github.com/cx20/gltf-test#gltf-20-sample-models)

###[PBR Models](https://github.com/cx20/gltf-test#pbr-models)
[![image.png](https://qiita-image-store.s3.amazonaws.com/0/26094/64708da4-1c89-f41a-2809-d19fcb230713.png)](https://github.com/cx20/gltf-test#pbr-models)

###[Further PBR Models](https://github.com/cx20/gltf-test#further-pbr-models)
[![image.png](https://qiita-image-store.s3.amazonaws.com/0/26094/8e97ddfd-ad93-27d4-1ecc-9448a746b574.png)](https://github.com/cx20/gltf-test#further-pbr-models)

###[AGI PBR Models](https://github.com/cx20/gltf-test#agi-pbr-models)
[![image.png](https://qiita-image-store.s3.amazonaws.com/0/26094/4397ec60-b6d3-e4ca-7967-fc7153ba497a.png)](https://github.com/cx20/gltf-test#agi-pbr-models)

## おわりに
鉄板は Three.js 、次点は Babylon.js 。ダークホース的なライブラリとしては、QTEK、Hilo3d でしょうか。個人的には、国産 WebGL ライブラリである Grimoire.js や GLBoost を応援したいですね。