glTF 2.0 対応 WebGL ライブラリを比較してみる（2019年版）

この記事は[WebGL Advent Calender 2019](http://qiita.com/advent-calendar/2019/webgl)の22日目の記事です。[glTF 2.0 対応 WebGL ライブラリを比較してみる（2017年版）](https://qiita.com/cx20/items/95127986f4b9fa91fe9b)の2019年版の記事になります。

## はじめに

みなさんは Khronos の [glTF](https://www.khronos.org/gltf/) というフォーマットについてご存じでしょうか？
glTF は <b>GL</b> <b>T</b>ransmission <b>F</b>ormat の略でランタイム用途の 3D アセットの標準仕様を狙った比較的新しいフォーマットです。
glTF の名前を知らなくても[Wordの暴れる恐竜](https://nlab.itmedia.co.jp/nl/articles/1812/09/news021.html)や3Dアバターの[VRM](https://vrm.dev/)といった形で目にしたことがあるかもしれません。

## glTF 2.0 について

glTF 2.0 は 2017年に発表された仕様で glTF 1.0 の大幅な仕様改定版です。主な変更点としては、

- スキニングアニメーションの強化
- モーフィング機能の採用
- PBR マテリアルの採用
- GLSL シェーダの廃止（特定の3D APIに依存する機能の廃止）

あたりでしょうか。

現在は次のステージに向けてユニバーサルテクスチャや次世代glTF PBRマテリアルといった[機能強化が検討](https://www.khronos.org/assets/uploads/developers/library/2019-siggraph/glTF-01-Khronos-SIGGRAPH-Jul19.pdf)されているようです。
その他にも興味深い拡張が[色々と提案](https://github.com/KhronosGroup/glTF/tree/master/extensions)されているようですので興味がある方はチェックしてみて下さい。

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

ここでは手前味噌ですが [gltf-test](https://github.com/cx20/gltf-test) でテストしているライブラリについて紹介したいと思います。
[gltf-test](https://github.com/cx20/gltf-test) は WebGL 対応の glTF ビューアやライブラリを定点観測として調査しているリポジトリになります。
前回 2017年の調査時に比べて対象ライブラリもかなり増えて来ており充実してきた感があります。

|区分|ライブラリ名                                                             |作者                   |☆の数|WebGL ライブラリの特徴                            |
|:--:|:------------------------------------------------------------------------|:----------------------|-----:|:-------------------------------------------------|
|    |[Three.js](https://threejs.org/)                                         |mrdoob                 |57,386|一番人気の WebGL ライブラリ                       |
|    |[BabylonJS](http://babylonjs.com/)                                       |deltakosh              |10,612|MS が開発中の WebGL ライブラリ                    |
|    |[Cesium](http://cesiumjs.org/)                                           |AnalyticalGraphicsInc  | 5,267|3D 地球儀のライブラリ                             |
|New |[ArcGIS](https://developers.arcgis.com/javascript/)                      |Esri                   |   224|2D/3D に対応した GIS プラットフォーム             |
|    |[Grimoire.js](https://grimoire.gl/)                                      |GrimoireGL             |   322|日本発のタグベース WebGL ライブラリ               |
|    |[xeogl](http://xeogl.org/)                                               |xeolabs                |   678|データ駆動型の WebGL ライブラリ                   |
|    |[Khronos glTF Loader](https://github.com/KhronosGroup/glTF-Sample-Viewer)|KhronosGroup           |   476|Khronos による PBR リファレンス実装               |
|    |[minimal-gltf-loader](https://github.com/shrekshao/minimal-gltf-loader)  |shrekshao              |   122|最小限の glTF ローダー + WebGL 2.0 レンダラ       |
|    |[ClayGL](https://github.com/pissang/claygl)                              |pissang                | 1,801|Baidu によるモデルビューア。QTEKより名称変更      |
|    |[Hilo3d](https://github.com/hiloteam/Hilo3d)                             |hiloteam               |    38|Alibaba グループによる WebGL ライブラリ           |
|New |[PlayCanvas](https://github.com/playcanvas/engine)                       |willeastcott           | 5,028|高速で軽量なWebGLゲームエンジン                   |
|New |[X3DOM](https://github.com/x3dom/x3dom)                                  |X3DOM                  |   604|タグベースの WebGL ライブラリ                     |
|New |[CZPG.js](https://github.com/PrincessGod/CraZyPG)                        |PrincessGod            |    21|WebGL 2.0 専用軽量ライブラリ                      |
|New |[GLBoost](https://github.com/emadurandal/GLBoost)                        |emadurandal            |    99|国産の玄人向けの WebGL ライブラリ                 |
|New |[RedCube.js](https://github.com/Reon90/redcube)                          |Reon90                 |    29|glTF 2.0 の表示に対応した WebGL 2.0 専用ライブラリ|
|New |[RedGL](https://github.com/redcamel/RedGL2)                              |redcamel               |    80|全ブラウザで動作することを目標としたライブラリ    |
|New |[Ashes](https://github.com/but0n/Ashes)                                  |but0n                  |    54|ECS を採用した WebGL 2.0 専用ライブラリ           |
|New |[UnityGLTF](https://github.com/KhronosGroup/UnityGLTF)                   |KhronosGroup           |   596|Unity向けに作られた glTF ローダー                 |
|New |[pex-renderer](http://vorg.github.io/pex/)                               |vorg                   |   115|ブラウザ用のJavaScriptライブラリセット            |
|New |[Filament](https://github.com/google/filament)                           |google                 | 8,276|googleによるマルチプラットフォーム3Dレンダラ      |

※ 区分「New」となっているのは、2017年の調査時から増えたライブラリになります。

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

以下は 2019年12月時点 の対応状況になります。最新の対応状況は「[gltf-test](https://github.com/cx20/gltf-test)」を参照ください。

###[Format Tests](https://github.com/cx20/gltf-test#format-tests)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26094/638bce84-3274-470b-80f8-33c4a1d87026.png)

###[Simple models for testing individual features](https://github.com/cx20/gltf-test#simple-models-for-testing-individual-features)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26094/d462710c-8b65-079f-bcce-20505f301dab.png)

###[More complex models](https://github.com/cx20/gltf-test#more-complex-models)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26094/e529c506-e227-7fcc-cd78-dfd4b1b221b9.png)

###[PBR Models](https://github.com/cx20/gltf-test#pbr-models)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26094/a9adffd0-cc51-7463-4337-8c2cb1864150.png)

###[Further PBR Models](https://github.com/cx20/gltf-test#further-pbr-models)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26094/5488b6dd-2eae-aeb6-ba78-3c2dd36133a7.png)

###[Feature Test Models](https://github.com/cx20/gltf-test#feature-test-models)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26094/100ca2b5-6a5a-e4fe-7223-0901cad06854.png)

###[Extension Test Models](https://github.com/cx20/gltf-test#extension-test-models)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26094/01468b83-9412-ba75-e5f0-e894a0217092.png)

## おわりに

情報量が多いのは Three.js、Babylon.js かと思いますが glTF をサポートするライブラリも増えています。自分にあったライブラリを探してみるのも良いのではないでしょうか。
[gltf-test](https://github.com/cx20/gltf-test) のリポジトリですが最近では海外から PR を受けてライブラリを追加することもあり助かってます。
本当は Khronos の glTF ページで紹介されている他の [WebGL Engine](https://github.com/KhronosGroup/glTF#webgl-engines) も追加したいところですけどね。。

そういえば、時々間違われる方がいらっしゃるようですが「g<b>l</b>TF」の「<b>l</b>」は英字の大文字「<b>アイ</b>」ではなく小文字「<b>エル</b>」ですのでご注意を。。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26094/506b13d1-b9a4-52c2-d578-ed316a43dce6.png)

### 追記（2021.07.07）

この程 gITF（じーあい）→glTF（じーえる）への対応をして頂きました。お忙しい中ご対応ありがとうございました！
https://jp.khronos.org/news/press/gltf-2.0