Lesson02 – WebGLの初期化

今回からは、さっそく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>
sample02-1
サンプルを確認する場合はこちらをクリックしてください。

上のサンプルで<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.clearColorgl.clearで黒色に初期化しています。

サンプルを確認する場合はこちらをクリックしてください。
WebGLが正常に動作する環境であれば、黒い画面が表示されていると思います。
clearColorバッファをクリアする際のカラー情報を指定
clearバッファをクリア
キーワードの解説

getContextwebglexperimental-webglの2つの識別子で試しています。現時点の草稿段階ではexperimental-webglを用いてオブジェクトを取得できますが、最終的にはwebglで取得することになる予定です。このサンプルでは、webglで取得できればそれを使い、取得できない場合はexperimental-webglを試すという風に実装しています。

前回の記事
次回の記事
目次ページ

コメントを残す

メールアドレスが公開されることはありません。