Shieldとかを描くJavaScript唐突にWebGLを勉強してみようと思って、練習として作ってみた。http://sugyan-static.herokuapp.com/webgl/portalkey.htmlhttp://sugyan-static.herokuapp.com/webgl/portalshield.html(※WebGL対応ブラウザでご覧ください)WebGLについて全然知識が無かったので、このへんを読んで勉強した。基礎から始まり詳しく解説しつつ徐々に色んな要素を盛り込んでいて、分かりやすいし楽しい。写経しつつ読み進めることで、なんとなく3Dの描画のことが分かってきた(ような気になった)。素晴らしいテキスト、本当にありがたいです。Ingress.app/scannerってディレクトリにそれっぽいファイル名のものたちを発見。*.objっていうファイル名だけどWevefrontのASCII形式の...ではなかった。Javaでシリアライズされたものらしい。書いて中身を取り出してみた。最初にfloatの配列が出てきて、その後にshortの配列が2つ出てくる。最初のfloatのが頂点座標のデータに違いない、と思ったのだけど要素数が3の倍数じゃなくて5の倍数になっていたりする。頂点3のテクスチャy座標,...という感じに並んでいるようだった。...番目のものをテクスチャ座標として取り出して、2番目に出てくるshort配列を頂点インデックスとして使ってみたところ上手くいった。3番目に出てくるshort配列は何に使うのか分からない...。Keyは取り出したデータを元にそれっぽいファイル名のテクスチャ画像を使ってはめてみたら意外に簡単にできた。シェーダプログラムはこんなかんじ。使って適当に回転させてみてる。内側の正二十面体のものはなんか表面の模様がウヨウヨと動いている。これはどうやっているんだろう...と思って再び解凍したipaの中身を探ってみるとIngress.app/shadersというディレクトリにシェーダプログラムが色々あって、そこに書いてあった。timeをuniform変数で渡して、それをもとにテクスチャ座標をずらしたものを生成して、それらを使って合成してなんかイイカンジにそれっぽい模様の動きを表現している、らしい(よく分かってない)。テクスチャ画像はobjectXMTexture.tgaっていう謎の模様を表しているファイルがあったのでpngに変換して使ってみてる。Objectをbindさせて、とかやってしまっている...。Shield的なものも描画できるようになった、ということで他のModやXMPやResonatorとかも同じような感じで描いて遊んでみようっと。