[WebGL] WebGLを使ってみる

今回から実際にWebGLを使って何らかのオブジェクトを描画してみたいと思います。

まずは、サンプルを記します。

上記を正しく動作させるためには、webgl-utils.jsというJavascriptファイルを同階層に配置する必要があります。
これは下記サイトからダウンロードできます。

http://code.google.com/p/webglsamples/source/browse/book/webgl-utils.js?r=41401f8a69b1f8d32c6863ac8c1953c8e1e8eba0

リンク先のソースコードをwebgl-utils.jsというファイルにコピー&ペーストして配置します。
上記Javascriptは以下のようにインクルードします。

これでWebGLの使用準備は完了です。

次に、WebGLの初期化を行います。
HTML5ではキャンバス要素をIDで取得し、キャンバスから描画用のコンテキストを取得してそこに文字や図形などを描画していました。
WebGLではキャンバスからWebGL専用の描画コンテキストを取得してこれに描画します。

キャンバスにさまざまなオブジェクトを動的に描画していくためには、キャンバス内を随時クリアしていかなくてはなりません。
今回はこのクリアのみ行う処理を書いています。

gl.clearColor()でクリア色を指定し、gl.clear()でクリアを実行しています。
次回からは図形を実際に描画してみたいと思います。