Help us understand the problem. What is going on with this article?

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

More than 3 years have 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 を追加しました。

cx20
プログラマ(マイクロソフト系の言語を使用することが多いです。) 最近は、JavaScript のライブラリを色々と試して遊んでます。
https://profile.hatena.ne.jp/cx20/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした