WebGLでPortal Shieldとかを描く (続き)

WebGLでPortal Shieldとかを描く - すぎゃーんメモの続き。
色々追加したものを以下で公開してみた。

http://sugyan-static.herokuapp.com/webgl/ingress/index.html

INVENTORYで見られる全アイテムを追加
- ナビゲーションバーからの選択で切り替え
- 選択前はランダムで表示
レベル別の色などがある場合は領域クリックで変化
マウス操作で視点を操作、ホイール操作で拡大/縮小
iOSでもタッチムーブやピンチイン/ピンチアウトで同様の操作

自分の環境でしか確認できていないので後半2つは動かない環境あるかも。
PowerCubeを下から覗くと空っぽなの！ Capsuleはちゃんと底あるのに！

頂点データ

基本的に前回の記事の通りで、ipaファイルの中にデータが入っているので抜き出せる。少なくともINVENTORY用アイテムはすべて同じような形式で描けるので、テクスチャのみで描けるか真ん中の光る物体も一緒に描くかだけ気をつければ問題ない。

色

レベルやレア度に応じて色が変わるアイテム、普通にテクスチャだけ貼っていると黒く描画されてしまう。指定した色を混ぜて描画するようのshaderプログラムがあったのでそれを拝借。

precision mediump float;
uniform sampler2D u_texture;
uniform vec3      u_color;
varying vec2      v_texCoord;

void main() {
    vec4 color = vec4(u_color, 1.0);
    vec4 sampled = texture2D(u_texture, v_texCoord);
    vec4 mixed = mix(color, vec4(sampled.xyz, color.a), 2.0 * clamp(sampled.w, 0.0, 0.5));
    gl_FragColor = mixed;
}

このようにするとテクスチャでサンプリングされた各座標のα値に応じて指定した色をmixしたものが出力されるようになるっぽい。

L1〜L8 の黄色→赤→紫的な色の変化はHSV色空間でHue値60から280まで20ずつ減らしていくとスムーズに表現できた。Common・Rare・VeryRareのレア度の変化(緑→紫→ピンク？)はよく分からなかったので適当…。