More than 1 year has passed since last update.

この記事はWebGL Advent Calender 2016の4日目の記事です。

はじめに

皆さんは、glTF というファイルフォーマットをご存じでしょうか?

glTF は GL Transmission Format の略で、3D アセットの標準仕様を狙った、比較的新しいフォーマットです。

音楽なら「MP3」、画像なら「JPEG」という感じで、3Dなら「glTF」を目指しているようです。

image
(出典: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 公式ページには、以下の8つのライブラリが紹介されています。特徴は自分の主観です。

ライブラリ名 作者 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 対応に取り組み始めたようですので、一覧に追加しました。

Model Screenshot Three.js r82dev Babylon.js 2.5-beta Cesium.js 1.26 xeogl 2016.11.11 GLBoost 2016.11.30 Grimoire.js 2016.12.04
Box :white_check_mark: Sample :white_check_mark: Sample :white_check_mark: Sample :white_check_mark: Sample :white_check_mark: Sample :white_check_mark: Sample
BoxWithoutIndices :white_check_mark: Sample :x: Sample glTF-Embedded not work :white_check_mark: Sample :x: Sample glTF-Embedded not work :white_check_mark: Sample :white_check_mark: Sample
Box Textured :white_check_mark: Sample :white_check_mark: Sample :white_check_mark: Sample :white_check_mark: Sample :white_check_mark: Sample :x: Sample glTF-Embedded not textured
Box Semantics :white_check_mark: Sample :white_check_mark: Sample :white_check_mark: Sample :white_check_mark: Sample :white_check_mark: Sample :x: Sample glTF-Embedded not textured
Duck :white_check_mark: Sample :white_check_mark: Sample :white_check_mark: Sample :white_check_mark: Sample :white_check_mark: Sample :white_check_mark: Sample
2 Cylinder Engine :white_check_mark: Sample :white_check_mark: Sample :white_check_mark: Sample :white_check_mark: Sample :white_check_mark: Sample :white_check_mark: Sample
Reciprocating Saw :white_check_mark: Sample :white_check_mark: Sample :white_check_mark: Sample :white_check_mark: Sample :white_check_mark: Sample :white_check_mark: Sample
Gearbox Assy :white_check_mark: Sample :white_check_mark: Sample :white_check_mark: Sample :white_check_mark: Sample :white_check_mark: Sample :white_check_mark: Sample
Buggy :white_check_mark: Sample :white_check_mark: Sample :white_check_mark: Sample :white_check_mark: Sample :white_check_mark: Sample :white_check_mark: Sample
Box Animated :white_check_mark: Sample :white_check_mark: Sample :white_check_mark: Sample :x: Sample animation not support :white_check_mark: Sample :x: Sample animation not support
Cesium Milk Truck :white_check_mark: Sample :white_check_mark: Sample :white_check_mark: Sample :x: Sample animation not support :white_check_mark: Sample :x: Sample animation not support
Rigged Simple :white_check_mark: Sample :white_check_mark: Sample animation not smooth :white_check_mark: Sample :x: Sample animation not support :white_check_mark: Sample :x: Sample animation not support
Rigged Figure :white_check_mark: Sample :x: Sample animation not work :white_check_mark: Sample :x: Sample animation not support :white_check_mark: Sample :x: Sample animation not support
Cesium Man :white_check_mark: Sample :white_check_mark: Sample :white_check_mark: Sample :x: Sample animation not support :white_check_mark: Sample :x: Sample animation not support
Monster :white_check_mark: Sample :x: Sample has nightmare dragon problem :white_check_mark: Sample :x: Sample animation not support :white_check_mark: Sample :x: Sample animation not support
BrainStem :white_check_mark: Sample :white_check_mark: Sample :white_check_mark: Sample :x: Sample only partial :white_check_mark: Sample :x: Sample animation not support
Virtual City :white_check_mark: Sample :white_check_mark: Sample :white_check_mark: Sample :x: Sample animation not support :white_check_mark: Sample :x: Sample glTF-Embedded not textured
WalkingLady :x: Sample not work :x: Sample not work :x: Sample has nightmare dragon problem :x: Sample animation not support :white_check_mark: Sample :x: Sample animation not support

いかがでしょうか。静的な3Dデータは、概ねどのライブラリも表示できるようですが、スキニングアニメーションが、なかなかハードルが高いようです。

なお、最新のステータス比較およびglTFライブラリのサンプルは、以下で更新予定です。もしよろしければチェックしてみてください。

最後に

glTF 対応は、まだまだ実装半ばなライブラリが多い印象です。

もし使ってみて、挙動がおかしい事象を見つけたら、是非、サンプルと合わせて、各サポート掲示板に連絡してみてください。

きっと親切な方々が相談に載ってくれるでしょう。海外のライブラリが多いですが、機械翻訳でも、割と通じると思われます(たぶん)

それでは、皆様、よい WebGL ライフを♪

追記(2016.2.06)

サンプルに WalkingLady を追加しました。

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.