この記事はWebGL Advent Calender 2016の４日目の記事です。
はじめに
皆さんは、glTF というファイルフォーマットをご存じでしょうか？
glTF は GL Transmission Format の略で、3D アセットの標準仕様を狙った、比較的新しいフォーマットです。
音楽なら「MP3」、画像なら「JPEG」という感じで、3Dなら「glTF」を目指しているようです。
（出典：https://www.khronos.org/gltf）
最近マイクロソフトも Khronos の 3D Format Working group に加わったようですし、今後の普及が期待されるフォーマットとなっています。
glTF ファイルの特徴
- ファイルは JSON ベース
- データ構造は OpenGL ベース
- GLSL シェーダを採用
と、なっており、JavaScript と WebGL と親和性の高いファイルになっています。
フォーマットの詳細は、後日、純国産 WebGL ライブラリ「GLBoost」の作者、emadurandal さんから解説があると思われますので、興味があるかたはそちらを参照ください。
glTF 対応ライブラリについて
glTF 対応ライブラリも様々あるわけですが、ここでは WebGL 版の glTF 対応ライブラリを紹介したいと思います。WebGL Advent Calender ですしね。
現在、Khronos の glTF 公式ページには、以下の８つのライブラリが紹介されています。特徴は自分の主観です。
| ライブラリ名 | 作者 | WebGL ライブラリの特徴 |
|---|---|---|
| Three.js | mrdoob | 一番人気の WebGL ライブラリ |
| BabylonJS | deltakosh | MS の中の人が中心になって開発中 |
| Cesium | AnalyticalGraphicsInc | 3D 地球儀のライブラリ |
| PEX | vorg | node.js と親和性の高い WebGL ライブラリ |
| xeogl | xeolabs | データ駆動型の WebGL ライブラリ |
| A-Frame | ngokevin | VR を構築する為の Web フレームワーク |
| GLBoost | emadurandal | 純国産の WebGL ライブラリ |
| xml3d.js | csvurt | XML ベースの 3D ライブラリ |
glTF 対応ライブラリ別ステータス比較
本当は上記8つのライブラリすべて試したかったのですが、準備不足の為、PEX / A-Frame / xml3d.js は、未実施です。
また、公式ページには未記載ですが、国産 WebGL ライブラリの「Grimoire.js」が、glTF 対応に取り組み始めたようですので、一覧に追加しました。
いかがでしょうか。静的な3Dデータは、概ねどのライブラリも表示できるようですが、スキニングアニメーションが、なかなかハードルが高いようです。
なお、最新のステータス比較およびglTFライブラリのサンプルは、以下で更新予定です。もしよろしければチェックしてみてください。
- glTF 対応ライブラリ別ステータス比較 https://github.com/cx20/gltf-test
- glTF 対応ライブラリ別サンプル一覧（glTFファイル17モデル×3形式×7ライブラリ） https://cx20.github.io/gltf-test/
最後に
glTF 対応は、まだまだ実装半ばなライブラリが多い印象です。
もし使ってみて、挙動がおかしい事象を見つけたら、是非、サンプルと合わせて、各サポート掲示板に連絡してみてください。
きっと親切な方々が相談に載ってくれるでしょう。海外のライブラリが多いですが、機械翻訳でも、割と通じると思われます（たぶん）
それでは、皆様、よい WebGL ライフを♪
追記(2016.2.06)
サンプルに WalkingLady を追加しました。