2014年5月26日月曜日

Hello WebGL

とりあえず簡単なWebGLのプログラムを書いてみたいと思います。

WebGLのプログラムでは、HTML5とJavaScript、そしてGLSL(シェーダ言語)の記述が必要になりますが、今日はGLSLは使わないで、HTML5とJavaScriptだけを使います。

WebGLはGLSLの記述無しではほとんど何も出力できませんが、画面を塗りつぶすことぐらいはできます。

HTML5

まず、html5の記述です。 


<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>WebGL Test</title>
  <script src="main.js"></script>
</head>
<body onload="main()">
  <canvas id="canvas" width="400" height="400"></canvas>
</body>
</html>

特になんの変哲もない簡素なhtmlですが、bodyにcanvasタグを書いています。

canvasはHTML5で導入されたタグで、2Dグラフィックスの描画で利用されますが、WebGLの描画先としてもこのcanvasタグが利用されます。

WebGLのコンテンツ自体はJavaScriptを使って操作します。

ここでは、bodyタグのonloadイベントで、main.jsに記述されたmain()関数を呼び出しています。main.jsは、headタグの中のscriptタグで読み込んでいます。

JavaScript

main.jsの内容は次のようになります。



function main() {
    var canvas = document.getElementById("canvas");
    var gl = canvas.getContext("experimental-webgl");
    gl.clearColor(0.0, 0.0, 1.0, 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);
}

main関数がひとつあるだけです。

htmlに記述したcanvasタグをDOMのAPIを使って取得し、WebGLのコンテキストを取得しています。

後はこの取得したコンテキストに対してWebGL用の命令を発行していきます。

2D描画用のコンテキストであれば、



    var ctx = canvas.getContext("2d");

といった書き方でコンテキストを取得しますが、WebGLの場合はgetContext()に渡す引数が違います。

ここでは、"experimental-webgl"という文字列を渡していますが、WebGLが未だ実験的な実装の段階ということでこのような文字列になっています。本来は"webgl"という文字列を使います。実際、ChromeやFirefoxでは、"webgl"でも大丈夫なんですが、Safariだと動きませんでした。

他にも、"webkit-3d"とか、"moz-webgl"といった指定もあるようです。なるべく多くのブラウザとバージョンに対応するには、これら可能性のある全ての文字列を試すようにし、全て失敗した場合はエラーメッセージを表示するなどしないといけませんが、ここではWebGLの機能の説明にフォーカスするため、エラー処理などは省いてあります。本サイトでは基本的に、Mac版のChromeブラウザ(現バージョンのv35)でのみ動作検証をし、それ以外のブラウザ対応のための処理等は省いて説明していきますので予めご了承ください。

コンテキストを取得したら、WebGL用の命令を発行できます。clearColor(...)は、キャンバスをクリアする色を指定する命令で、最初の3つの引数はRGB(赤、緑、,青)、最後の引数はアルファ値(不透明度)をそれぞれ、0.0〜1.0の範囲で渡しています。この辺の値の意味は、グラフィックやプログラミングに慣れた方ならご存知だと思います。ここでは、青の色と不透明度に1.0を指定しているので、塗りつぶし色として完全に不透明な青を指定しています。

次のclear(...)で、実際にキャンバスをクリアしています。ここで指定しているgl.COLOR_BUFFER_BITというのは、WebGLコンテキストに予め定義された定数で、クリアの対象となるバッファの種類を表しています。WebGLにはクリア操作の対象となるバッファが3種類あり、gl.COLOR_BUFFER_BITというのは色に関するバッファを表す定数です。残りの２つは、gl.DEPTH_BUFFER_BITとgl.STENCIL_BUFFER_BITで、それぞれ深度バッファとステンシルバッファを表します。これらのバッファについては今後使う機会が出てきた時に改めて説明します。

実行

index.htmlをブラウザで表示させると、次のように表示されます。

Canvas

canvasタグは複数使うこともできます。あまりそんな使い方はしないと思いますが...

index.html



  :
<body onload="main()">
  <canvas id="canvas" width="400" height="400"></canvas>
  <canvas id="canvas2" width="300" height="300"></canvas>
</body>
  :

main.js



function main() {
    var canvas = document.getElementById("canvas");
    var gl = canvas.getContext("experimental-webgl");
    gl.clearColor(0.0, 0.0, 1.0, 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);

    var canvas2 = document.getElementById("canvas2");
    var gl2 = canvas2.getContext("experimental-webgl");
    gl2.clearColor(1.0, 0.0, 0.0, 1.0);
    gl2.clear(gl.COLOR_BUFFER_BIT);
}

結果

Canvas2

そしてこんな使い方もあまりしないと思いますが、WebGLとCanvas2Dとの混在も可能です。



function main() {
    var canvas = document.getElementById("canvas");
    var gl = canvas.getContext("experimental-webgl");
    gl.clearColor(0.0, 0.0, 1.0, 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);

    var canvas2 = document.getElementById("canvas2");
    var ctx = canvas2.getContext("2d");
    ctx.save();
    ctx.fillStyle = 'rgba(0, 255, 0, 1.0)';
    ctx.beginPath();
    ctx.arc(70, 70, 60, 0, Math.PI*2, false);
    ctx.fill();
    ctx.restore();
}

Canvas3

次回は、シェーダ(GLSL)を使ってみたいと思います。

投稿者 時刻:

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)