今回はWebGl描画時のデバッグ方法をメモしていきます。

デバッグ方法としてはChrome拡張ツール使用やログ出力があります。
今回はログ出力のみ記します。

具体的に言うと
WebGLDeveloperTools を利用します。

webgl-debug.js
https://github.com/KhronosGroup/WebGLDeveloperTools
コンテキストを取得しDebugログ出力とErrorログ出力を行う。

実装 見出しへのリンク

  • HTML
    webgl-debug.jsを呼び出しておく

  • JavaScript

var canvas = document.createElement('canvas'),
gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions);

// エラーログ出力
function logOnGLError(err, functionName, args) {
  console.log(WebGLDebugUtils.glEnumToString(err) + " was caused by call to: " + functionName);
}

// デバッグログ出力
function logGLCall(functionName, args) {
   console.log("gl." + functionName + "(" +
      WebGLDebugUtils.glFunctionArgsToString(functionName, args) + ")");
}

if (window.WebGLDebugUtils) {
  gl = WebGLDebugUtils.makeDebugContext(gl, logOnGLError, logGLCall);
}

GoogleChromeの検証ツールを開きconsoleを見てみると以下のように出力されるはず。

gl.getContextAttributes()

以下は出力時のスクリーンショット。 webgl-debug-log

以上