WebGL初めの一歩「描画領域のクリア」

Jan 14 2015

最近WebGLの勉強をしているけど、なかなか難しい。簡単な図形を描画するだけでもコードはとても冗長になる。少しずつ慣れていくために、Hello Worldからおさらいする。

描画領域のクリア

WebGLにとってのHello Worldが描画領域のクリアでいいのかは分からないけど、取り敢えずそういうことにしておく。というかこれは初期化作業なので、毎回必要になる処理なんだと思う。

HTMLの作成

まずは、HTMLを作成する。 canvas要素で描画領域を定義し、そこに描画していく。bodyにはonloadが指定され、読み込み完了時にmain()関数が実行されるようになっている。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebGL Demo</title>
</head>
<body onload="main()">
    <h1>描画領域をクリアする</h1>
    <canvas id="webgl"></canvas>
    <script src="HelloCanvas.js"></script>
</body>
</html>

JSの作成

次にjavascriptプログラムを作成する。流れとしては以下。

canvasを取得する
canvasの領域を指定する
WebGLコンテキストの取得
クリアする色の指定
canvasをクリア

HelloCanvas.js

function main(){
    // canvasの取得と領域してい
    var c = document.getElementById("webgl");
    c.width = 500;
    c.height = 500;

    // WebGLコンテキストの取得
    var gl = c.getContext("webgl");

    // クリアする色の指定
    gl.clearColor(0.0, 0.0, 0.0, 1.0);

    // canvasのクリア
    gl.clear(gl.COLOR_BUFFER_BIT);
}

これを実行すると500×500の真っ黒い四角形が描画されている。

※表示されない場合は「RERUN」ボタンを押してみてください

See the Pen NPpRer by konweb (@konweb) on CodePen.

クリアする色の指定

gl.clearColor(red, green, blue, alpha);

引数	意味
red	赤の強度（0.0 ~ 1.0）
green	緑の強度（0.0 ~ 1.0）
blue	青の強度（0.0 ~ 1.0）
alpha	透明度（アルファ値0.0 ~ 1.0）

canvasをクリア

gl.clear()で指定されたバッファをクリア（塗りつぶす）。クリアする色はgl.clearColorで指定する。指定できる値はいくつかある。

引数	意味
gl.COLOR_BUFFER_BIT	カラーバッファ
gl.DEPTH_BUFFER_BIT	デプスバッファ
gl.STENCIL_BUFFER_BIT	ステンシルバッファ

まとめ

WebGLのHello Worldは他の言語に比べて長い。ただ領域を真っ黒にするだけでも1,2行ではできない。単純な図形を描画するだけでもとても冗長なコードになってしまう。

GLSL(OpenGL Shading Language)というシェーディング言語も覚えなくてはならないし、学習コストは高いかもしれないが覚えたら楽しそうだ。

viewpoint