glTF
説明
glTF(1.0)ローダーの簡易実装サンプルです。生WebGL派でキューブやスフィアをtPotやウサギレベルまで昇格させたい人向けです。
yrGlTF.js
本サンプルでは、頂点情報(座標、法線、インデクス)のみを抜き出してきています。
階層構造、テクスチャ、スキン、アニメーション、マテリアル、シェーダー、カメラ、ライト、etc..
これらはサポートしていません。
本来、glTFを真面目に対応させようとするとかなり本格的なシーングラフを構築する必要がでてきます。
そうなると、結局は統合的な3Dライブラリを構築する必要がでてきますので、そこまでの体力とモチベーションはありませんでした……。
言い訳がましくなってきましたが、本サンプルでは最低限の実装しかしておりませんので、逆にglTFの取っ付きには丁度いいかもしれません。
■やっていること(前述の通り、頂点情報をかき集めるだけの簡易実装です、階層構造などを考慮するともう少し複雑になります)
1.*.gltfファイルを読み込む
2.必要な外部データ(頂点情報の入ったバイナリデータ)を読み込んでおく
3.ルートノードからズバーッとパースして頂点情報への参照情報をかき集めてくる
4.参照情報を元に外部データ内の頂点情報を抜き出して、オレオレWebGLラッパーに渡す
■公式情報源
・公式サイト
→ Overviewのチートシートに必要な情報が網羅されています。基本的には、これとにらめっこしながら作っていく感じになります。
→ Loaders and Viewersに本格的なローダー実装サンプルへのリンクが並んでいます。先人の英知に学びましょう。
→ Sample Modelsにサンプルデータが上がっています。まずはトライアングルかキューブから始めていくことになります。
■JavaScript初心者のつまづきポイント
この辺りが一番苦戦しました。JavaScriptの基礎が分かっていないと、そもそもサンプルソースが読めません。
Cで生きてきた人が、JavaScriptの方が簡単なんでしょ?とか思ってると痛い目をみるので、
下記、怪しければちゃんと調べておいた方がいいです。
・Promise
非同期読み込みのチェーンを繋ぐ際に、コールバック地獄に陥らない綺麗なコードがかける。
・プロパティの追加と参照
JavaScriptがパーサー処理書くのに適した言語かも?と思えるようになってくる。
・JavaScriptにおけるthis
他の言語のthisとは全く概念が違う。
中途半端な理解だといちいちはまるので、ちゃんと理解しておいた方がいい。