WebGL 入門


WebGL をサポートするブラウザーでは、プラグインを使用することなく HTML canvas 内で 3D グラフィックスをレンダリングするための、OpenGL ES 2.0 に基づく API をウェブコンテンツで使用できます。WebGL のプログラムは JavaScript で記述する制御コードと、コンピュータの Graphics Processing Unit (GPU) で実行する特殊効果コード (シェーダーコード) で構成されます。WebGL 要素は他の HTML 要素と混ぜられ、他のページ部品やページの背景と合成されます。

この記事では、WebGL の基礎を紹介します。ここでは、3D グラフィックスに関する数学的な知識を理解していることを前提とします。よって、OpenGL そのものの説明は行いません。

このチュートリアルで使用するコード例は、GitHub の webgl-examples リポジトリーで確認できます。

この一連の記事が WebGL 自体を紹介していることに注意してください。ただし THREE.js など、WebGL の機能をカプセル化する多くのフレームワークが利用でき、3D アプリケーションとゲームを簡単に構築することが可能です。

3D 描画の準備

レンダリングに WebGL を使用するために最初に必要なのは canvas です。以下の HTML フラグメントは、サンプルが描画される canvas を宣言します。

<body>
  <canvas id="glCanvas" width="640" height="480"></canvas>
</body>

WebGL コンテキストの準備

JavaScript コードの main() 関数は、スクリプトがロードされるときに呼び出されます。その目的は、WebGL コンテキストをセットアップし、コンテンツのレンダリングを開始することです。

//
// ここからスタート
//
function main() {
  const canvas = document.querySelector("#glCanvas");
  // GL コンテキストを初期化する
  const gl = canvas.getContext("webgl");

  // WebGL が使用可能で動作している場合にのみ続行します
  if (gl === null) {
    alert("WebGL を初期化できません。ブラウザーまたはマシンがサポートしていない可能性があります。");
    return;
  }

  // クリアカラーを黒に設定し、完全に不透明にします
  gl.clearColor(0.0, 0.0, 0.0, 1.0);
  // 指定されたクリアカラーでカラーバッファをクリアします
  gl.clear(gl.COLOR_BUFFER_BIT);
}

window.onload = main;

ここで最初に行うことはキャンバスへの参照を取得し、それを canvas という名前の変数に割り当てることです。

キャンバスを取得したら、getContext を呼び出して文字列 "webgl" を渡すことにより、キャンバスの WebGLRenderingContext を取得しようとします。ブラウザーが webgl をサポートしていない場合、getContextnull を返します。その場合はユーザーにメッセージを表示して終了します。

コンテキストが正常に初期化された場合、変数 gl はそれへの参照です。この場合、クリアカラーを黒に設定し、そのカラーのコンテキストをクリア (背景色でキャンバスを再描画) します。

この時点で、WebGL コンテキストが正常に初期化されるのに十分なコードがあり、コンテンツを受信する準備ができて待機している大きな黒い空のボックスになります。

コードを確認する | 新しいページでデモを開く

関連情報

  • An introduction to WebGL: Luz Caballero が著し、dev.opera.com で公開しています。この記事では WebGL とは何かやどのように WebGL が動作するか (レンダリングパイプラインの概念を含む) を説明して、WebGL ライブラリーをいくつか紹介しています。
  • WebGL Fundamentals
  • An intro to modern OpenGL: Joe Groff が OpenGL に関するすばらしい記事シリーズを著しており、OpenGL の歴史から重要なグラフィックスパイプラインの概念までの説明、およびどのように OpenGL が動作するかを示すデモを紹介しています。OpenGL の知識を持っていない場合は、ここから始めるとよいでしょう。