コンテキストの初期化
初期化処理
まずは WebGL を初期化し、すぐにレンダリングを開始できる状態にするところまで
htmlのベース
code:html
<html>
<head>
<title>WebGL TEST</title>
<script src="script.js" type="text/javascript"></script>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
</html>
コンテキストの取得まで
var c = document.getElementById('canvas');
canvasのサイズを決める
code:js
c.width = 500;
c.height = 300;
適当に決める
画面を初期化する
WebGL コンテキストは、描画などに関する様々な処理を一括して引き受けるオブジェクトです。
多くのメソッドや定数、プロパティなどを持っています。
画面の初期化はclear
このメソッドは画面をクリアし、まっさらな状態に戻します。
引数には、
なにをクリアする対象とするのか、 WebGL の定数を使って指定します。
今回は画面上の色をクリアするだけなので、組み込み定数 COLOR_BUFFER_BIT のみを指定します。
この定数は canvas 内を指定された色でクリアするための定数です。
gl.clear(gl.COLOR_BUFFER_BIT);
クリアする色の指定は、別のメソッドを使って別途定義しなければなりません。
そのメソッドが clearColor メソッドです。
gl.clearColor(0.0, 0.0, 0.0, 1.0);RGBA
数値は全て 0 ~ 1 の範囲で指定します。
上記のようにすると、 clear メソッドが実行された際、画面が完全な黒で初期化されます。
code:js
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 内部を黒でクリアしているだけ