Canvas, WebGL開発で困るのがデバッグ。 HTML, CSSみたいに開発ツールで状態を確認することもできず、Canvas内がブラックボックスになること。 何がなんでどうなってるのか検討もつかない。 Chrome 拡張機能 WebGL Inspector を追加すると明るい未来が開けます。 WebGL Inspector by benvanik Chrome ウェブストア: WebGL Inspector 拡張機能を追加し有効にするとWebGL を使用していると画面右上に[Capture][UI]と表示されます。 [UI]を押すと画面下側にパネルが開きます。 これで様々状態を知ることができます。 アニメーションを遅くしたり、一時停止したりが可能です。 [Capture]を押すとその時点のスナップショットがとれます。 Githubでソースコードが公開されています。 今も頻繁に更新され

JavaScript 1.6から追加されたArrayのindexOf。 配列の中に要素が存在するかを調べる関数です。 見つからない時は -1 を返します。 見つかるとその要素の添え字を返します。 配列の中を走査するのに大変便利です。 しかし実装していないブラウザも存在するため、下位実装を担保して使わないとエラーになってしまいます。 MDNに解決策がありました。 Array indexOf method 判定の所を変えただけで中のコードはそのまま使用しています。 if (typeof Array.prototype.indexOf !== "function") { // from MDN Array.prototype.indexOf = function (searchElement /*, fromIndex */ ) { "use strict"; if (this == null)