3DCGseason161821Bのseasonです。最近WebGLを触り始めました。WebGLで球を表示しようとしてバグって非常に嵌ったのでメモ。バグの内容やり方としては、JavaScriptの方で球の表面の頂点座標、色、インデックスバッファを生成して頂点シェーダーに渡す。b)というのは自分が定義した関数で詳細は省く。bは球の二方向の分割数。0);すると以下のように表示された。(ちなみに球面上で地形生成をやろうとしてるので、パーリンノイズで作った地形ができてる。0);にしたとき初めて表示が球からずれることが分かった(391416は3の倍数)。index[391415]番目の頂点がなす三角形がおかしいということになる。65536だった(伏線1)。2])をconsole.logで表示してみると特に変な値にはなっていない。ちなみに謎現象があって、genVertexに入れる分割数を小さくすると正しく表示される(伏線2)。分からんのでシェーダに渡されている座標を見ることにする。色デバッグなるものを試してみた。GLSL】GLSLはconsole.log()なんてできないから、「色デバッグ」をするらしいgl.readPixels()でcanvasの色を見てみたんだけど何故か指定した色と違ってた。エイリアシングとかの影響なのかもしれない。結局if文で分岐させるのが楽だった。-1)だったのでそこだけ色を変えるようにしたら当たってた。-1)に変わってるらしい。おかしいのは三つ目の頂点だと当たりが付いてた。-1)は丁度0番目の頂点ということになる。65536されて0になってました。gl.STATIC_DRAW);ついでにgl.drawElements()でもgl.UNSIGNED_SHORTを渡してました。0);解決まずInt32Arrayに変更します。gl.STATIC_DRAW);それからgl.drawElements()です。extension)とあります。BYTEの方がSHORTより小さいので拡張機能を導入してINTを使います。