glTF

canvasに対応していません。


説明

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とは全く概念が違う。
  中途半端な理解だといちいちはまるので、ちゃんと理解しておいた方がいい。

トップページへ戻る


Tweet Follow @yunta_robo