これだけといえばこれだけ。シェーダの作成もまとめてみると。(createShader)シェーダとソースをひもづける。(shaderSource)ソースをコンパイルする。(compileShader)要点はこれだけ。同様にプログラムの作成もまとめてみると。プログラムを作成する。(createProgram)プログラムとシェーダ(頂点シェーダとフラグメントシェーダ)をひもづける。(attachShader)リンクさせる。(linkProgram)とほぼシェーダと同じ。長く複雑に感じるかもしれないが要点だけみてみると意外とシンプルである。WebGLで遊んでみる(描画領域のクリア)最近OpenGLにハマってる。自分でアニメーションやエフェクト、3Dポリゴンなどをゴリゴリできるのは楽しい。ブラウザでも実はWebGLというものがある。対応しているブラウザが多いわけではないがどんどん増えてきている。shadersというものが規格されており、これもWebGL・・・もっといえばOpenGLがベースとなっているのだ。(2013/02/17現在)もっとも簡単なWebGL、それは描画領域のクリアである。描画結果(画像)描画領域をクリアすると上の画像のように一色で塗りつぶされる。ソースコードを見ていこう。</body></html>まず、ポイントはcanvas要素を作ること。WebGLはこのcanvas要素に描画されることになる。このcanvasにidとサイズを設定してあげる。次にJavaScript側。}};では、詳しく見ていこう。2行目~3行目にデバッグ用のフラグを用意している。DEBUG_FLAG=true;WebGLに限らずプログラムを書くときにおいてこれは用意しておいたほうがいい。本番ではエラーチェック処理を入れないということもしばしばある。他にもデバッグの時だけしたい処理や逆にプロダクションだけでしたい処理なども出てきたりする。用意して損はないだろう。次に5行目~6行目にglという変数を用意している。gl=null;これはWebGLのコンテキストを代入するのに使う。WebGLのコンテキストはWebGLの処理をするのに必ず必要な物なので、グローバル変数として用意している。実際に自分で書くときはクラスのメンバ(JavaScript的にはプロパティ)などとして持たせるといいだろう。今回はソース簡略化のためにグローバル変数にしている。8行目、次にちょっと飛んで44行目。*/};//ページロード時にmain関数実行window.onload=main;main関数を定義し、ページがロードされた時に呼び出されるようにwindow.onloadに代入する。することによってDOMや画像が用意され終わった段階で、このmain関数を実行してくれるようになる。次にmain関数の中を見ていこう。canvas=document.getElementById('canvas');HTMLで用意しておいたcanvas要素を取ってくる。結果的にcanvas要素が取れる。WebGLの第一歩、12行目~29行目。}}先ほど取得したcanvasのgetContextメソッドを呼びWebGLのコンテキストを取得するのだが、これらはブラウザや実装状況によって引数の指定が異なる。故に予め配列で引数の文字列を用意して、ループで回しWebGLのコンテキストが取得できたら、ループを抜けるようにしている。return;}WebGL未対応ブラウザだったりなにかしらのエラーやミスで、WebGLのコンテキストが取得できなかった場合は素直にコンソールにメッセージを出し、returnしてmain関数を終了している。36行目~37行目にようやくWebGLのメソッドが登場!//RGBAの順番にカラーバッファをクリアする色を指定するgl.clearColor(0.5,0.5,0.5,1.0);clearColorメソッドを呼び出し、RGBAの順番にカラーバッファをクリア・・・つまり塗りつぶす色を指定する。カラーバッファは描画領域のRGBA用バッファとして使われる。カラーバッファをクリアすることによって描画領域もクリアできるのだ。色を指定するときはカラーコードでお馴染みの0~255ではなく、0.0~1.0である。実際にカラーバッファをクリアする。40行目~41行目に何か関数がある。都度関数を呼んでエラーチェックを行う。そのためそれらの処理を自前で関数として用意しまとめている。それが46行目~59行目だ。}};引数は直前に呼び出したメソッド名。関数の中で早速行なっているのはデバッグ用のフラグがtrueかどうかのチェックだ。その理由は少し下のコードにある。getErrorメソッドを呼び出し、NO_ERRORかどうかを見ている。NO_ERRORでなかったらエラーの回数だけループするわけだが、その処理をエラーチェックが必要な関数の都度することになる。多少なら無視出来るレベルだが、ゲームやアニメーションを行う際には、この多少が積み重なり処理速度を低下させるうる。故にデバッグの時だけエラーチェックをしておき本番では行わないようにする。今回はNO_ERRORではないとき、つまりエラーのときはコンソールに、この関数の引数として渡した直前のメソッド名を、メッセージに含めて出している。これによって何のメソッドでエラーが起きたかわかる。描画結果の画像のようにcavas内全体が灰色に塗りつぶされて表示される。カラーバッファを灰色でクリアすることにより結果、描画領域も灰色でクリアされたからだ。OpenGLひいてはWebGLではエラーの時真っ黒に表示される。黒以外でクリアしておくとエラーが起きてるのかパラメータミスなのかの問題の切り分けがしやすい。デバッグのときは黒以外の色でクリアしておくといいかもしれない。