コンテキストの初期化
大事な大事な初期化処理
今回から、実際に WebGL を用いた処理に着手します。とは言っても、まずは WebGL を初期化し、すぐにレンダリングを開始できる状態にするところまでをやってみます。
以前のテキストで HTML の雛形を掲載したことがありました。憶えているでしょうか。それが以下のような HTML ソースでしたね。
<html>
<head>
<title>WebGL TEST</title>
<script src="script.js" type="text/javascript"></script>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
</html>今回からはこの HTML をベースにして解説していきます。この HTML ソースでは、純粋にページ上にたった一つの canvas が置かれているだけですね。この canvas からコンテキストを取得して WebGL を初期化します。
コンテキストの取得まで
先ほどの HTML ソースの head タグでは、script.js という外部 javascript ファイルを参照しています。その中身を書いていきます。まず最初にするべきことは、 getElementById などを使って canvas 要素への参照を得ることです。
var c = document.getElementById('canvas');これで、 c は canvas 要素そのものを表すようになりますね。続けて、canvas のサイズを定義しておきます。
c.width = 500;
c.height = 300;はい、これで幅が 500 ピクセル、高さが 300 ピクセルの canvas が準備できました。このときの canvas のサイズは、当然なにをやりたいのかによって自由に変更して構いません。今回のテキストでは、まぁ、無難にこのくらいのサイズにしてみただけです。深い意味はありません。
続いて、WebGL のコンテキストを取得します。これには getContext メソッドを利用します。この getContext メソッドは、canvas 要素からコンテキストオブジェクトを取得するためのメソッドで、引数には文字列で取得したいコンテキストの名称を渡します。
当テキスト執筆時(2012年2月)現在、WebGL コンテキストは正式名称である webgl でのコンテキスト取得が出来ない状況です。代わりに、暫定的な名称である experimental-webgl を使ってコンテキストを取得します。
ただし、将来的には正式名称でのコンテキスト取得がブラウザに実装される可能性もありますので、コンテキスト取得の際には OR 演算( || 演算子を利用)によって各種名称が順次処理されるように実装します。
var gl = c.getContext('webgl') || c.getContext('experimental-webgl');ブラウザが対応していれば、この時点で gl には WebGL コンテキストが取得されています。ここからは、基本的に gl (つまり WebGL コンテキスト)を経由する形で WebGL を操作します。
2016 年 4 月追記
2016 年現在では、Google Chrome や Firefox などの多くの端末で、experimental の記述は不要となっています。
ただし、一部のモバイルブラウザや、かろうじて WebGL の実行が可能な IE11 等の場合、依然として上記のような対応が必要となるようです。WebGL 2.0 が登場するころには、さすがに普通に使えるようになっているかなとは思いますが、もうしばらくは、念の為にここで書かれているようなコンテキストの取得処理を行ったほうがいいかもしれません。
画面を初期化する
WebGL コンテキストは、以前のテキスト(WebGL を始める前に canvas を知る)でも書いたように、描画などに関する様々な処理を一括して引き受けるオブジェクトです。多くのメソッドや定数、プロパティなどを持っています。
そんな多くのメソッドのなかの一つに、画面をクリア(初期化)するためのメソッドがあります。そのメソッドの名前はズバリ clear です。まんまやん……
このメソッドは画面をクリアし、まっさらな状態に戻します。引数には、なにをクリアする対象とするのか、WebGL の定数を使って指定します。今回は画面上の色をクリアするだけなので、組み込み定数 COLOR_BUFFER_BIT のみを指定します。この定数は canvas 内を指定された色でクリアするための定数です。
gl.clear(gl.COLOR_BUFFER_BIT);クリアする色の指定は、別のメソッドを使って別途定義しなければなりません。そのメソッドが clearColor メソッドです。 clearColor メソッドは引数を四つ取ります。これらの引数は単純に RGBA を表しているので、直感的に指定できるのではないでしょうか。以下のように記述します。
gl.clearColor(0.0, 0.0, 0.0, 1.0);上記のようにすると、 clear メソッドが実行された際、画面が完全な黒で初期化されます。ちなみに、数値は全て 0 ～ 1 の範囲で指定します。いわゆる普通の HTML などで用いられる 16 進数での指定はできませんので注意しましょう。
ここまでの処理をまとめてみると次のような script.js が出来上がります。ウェブページのロードと同時に処理が実行されるようにするために onload にそのまま全ての処理を関数として渡します。
onload = function(){
// canvasエレメントを取得
var c = document.getElementById('canvas');
c.width = 500;
c.height = 300;
// webglコンテキストを取得
var gl = c.getContext('webgl') || c.getContext('experimental-webgl');
// canvasを黒でクリア(初期化)する
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
};以下のリンクをクリックすると、実際に動作するデモを見ることができます。
このサンプルでは、純粋に WebGL コンテキストを取得し、canvas 内部を黒でクリアしているだけですので、表示されるのは真っ黒な canvas 領域だけです。ですが、ここまでが実行できれば WebGL を使い始める準備は完全に整っています。
まとめ
今回やったことは canvas の参照を引っ張ってきて、そこから WebGL コンテキストを取得し、画面を黒でクリアしただけです。文字で書くとそれだけかよ、と言いたくなる様なレベルですが、これで WebGL を使い始めたということは間違いなく事実です。
これからはもっともっと具体的な WebGL に関する処理を記述していくことになりますが、何事においても基本は大切です。今回の内容をしっかりと理解しておきましょう。
次回はシェーダを記述するための基礎知識を解説します。
