WebGLのInspector

前にWebGL本を買って挫折したけど、再び興味湧いてきました～！
今回は良いツールを見つけたのでそのメモです

ちなみにWebGLの方はConsole.log的なものはなさげ。

WebGLの動作確認ページは、以下のものを使用

　WebGL Cubes. Rendering 100 cubes
　

Chromeの場合

　WebGL Inspector

　アドオン入れて、WebGL使用ページにアクセスするとアイコンが出るのでクリック

　
　UIボタン押下するとWebGL Inspectorが起動する
　
　Captureボタンを押下するとTraceタブでどのように描画されてるか見れる
　

Firefoxの場合

　WebGL Inspector

　Firefoxにも同様のアドオンありました。

　ただWebGL使ってるページにアクセスしてもアイコンが出ない...。

　メニューから[ツール]-[Web開発]-[WebGL Inspector]を選択しましょう。

　使い方はChromeと一緒です

　それとFirefoxの方が優秀で、標準の開発ツールにシェーダエディタがありました。

　メニューから[ツール]-[Web開発]-[開発ツールを表示]を選択します。

　歯車アイコンからシェーダエディタとCanvasにチェック！
　
　シェーダエディタタブを開くと編集エディタが出てくる！
　
　しかもタイプミスなどのエラーも即座に検知してくれる
　（コード補完まではしないけども）
　

　Canvasタブは、WebGL Inspectorと同じような機能でした

　

　関係ないけど3Dビュー機能使うとWebページがこんなかんじにw
　

　ちなみにシェーダーエディタについては、以下のページの動画見るとよく分かる。
　Unreal Engine4で出力したWebGLもいい感じですね

　MDNシェーダーエディタ

　

　11月ぐらいから本格的に以下のページで勉強しようと思います

　Mozilla Developer Network - WebGL

　wgld.org - WebGL


2014/12/24追記
　SublimeText3だとWebGLのコード補完プラグインもあるみたいです。
　Packagesフォルダを開いてPakagesフォルダ配下にいれればよいっぽい
　
　あとはこれがオススメです

　Sublime Text2でGLSLを書こう

2015/01/02/06追記

　safariの場合、safari Extensionsにないので自分でインストールします。

　まず WebGL-Inspectorのgithub からDLします。

　safariブラウザから機能拡張ビルダーを表示を選択

　

　左下の＋ボタン押下し、機能拡張の追加を選択。

　DLしたzipを解凍し、以下のフォルダを選択します

　「core/extensions/safari/webglinspector.safariextension」

　がっ！証明書がなくてインストールできねえぜ！

　

　という訳で以下のサイトに従って証明書を作りましょう！（無料）

　iOS Developer登録してる人なら瞬殺で登録が終わります。

　してない人がメンドクセーってなるかも。

　safari Extension 三分クッキング！

　これで証明書をインストールすると使えるようになった！
　

　

　WebGLページへいったら、GLボタンが押せなくて結局レンダリングデバッグできなかった...。
　
2015/04/07追記
Chromeの方もGLSL Shader EditorがgithubとChrome Storeに出ていました。
編集できてコード補完はしないけど、エラーチェックはしてくれます。