今回からは、さっそくWebGLの中身に入っていきたいと思います。
Lesson01でも紹介しましたが、WebGLは<canvas>で動作します。ですから、HTML自体はシンプルです。
<!DOCTYPE html>
<html>
<head>
<title>WebGL sample02-1</title>
<script type="text/javascript">
// ここに必要な実装を追加していきます。
</script>
</head>
<body onload="start();">
<canvas id="canvas" width="512" height="512"></canvas>
</body>
</html>
上のサンプルで<body>にonload="start();"と書いておきながら、その実装がありませんでしたが、これからその部分を実装していきたいと思います。少しややこしい部分もあるかもしれませんが、WebGLの決まり文句的な部分ですので、深く考えずに一気に進んでみたいと思います。
※これ以後のサンプルではHTMLの部分の記述は省略し、<script></script>の内部のみ書いていきます。ご注意ください。
var gl;
function start()
{
var canvas = document.getElementById('canvas');
initGL(canvas);
if(gl){
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
}
}
function initGL(canvas){
gl = null;
try{
gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
}
catch(e){
}
if(!gl){
alert('Unable to Initialize WebGL.');
}
}細かい部分はJavaScriptの解説本に任せるとして、HTMLに唯一ある要素<canvas>からWebGLオブジェクトglを取得していると考えていいと思います。以後、WebGLに関する操作はこのglを通して行われることになります。上のサンプルではgl.clearColorとgl.clearで黒色に初期化しています。
WebGLが正常に動作する環境であれば、黒い画面が表示されていると思います。
| clearColor | バッファをクリアする際のカラー情報を指定 |
| clear | バッファをクリア |
※getContextでwebglとexperimental-webglの2つの識別子で試しています。現時点の草稿段階ではexperimental-webglを用いてオブジェクトを取得できますが、最終的にはwebglで取得することになる予定です。このサンプルでは、webglで取得できればそれを使い、取得できない場合はexperimental-webglを試すという風に実装しています。
