helpdelete

WebGLはCanvasから始まる

HTMLのCanvas要素はWebGLの描画のターゲット

WebGLを利用するためには、WebGLコンテキストが必要になります。WebGLコンテキストは正式にはWebGLRenderingContextといい、このコンテキストが持つWebGL関数をJavaScriptコードで呼び出してGPUを駆動していきます。

HTMLのCanvas要素について

HTML仕様にはCanvas という要素があります。これはWebページ内の矩形範囲（Canvas）に対して任意の画像をプログラム制御で描画することができる描画領域です。

image.png

Canvasを作成するには、まず横幅と縦幅を指定します（デフォルトの値はあるので、引数を付けなければそのデフォルトのサイズが使われます）。

Canvasの用意としては、HTMLコードの中でタグとして宣言する方法と、JavaScriptで動的に生成する方法の２通りがあります。

HTMLのタグとしてCanvasを用意する

<!DOCTYPE html>
<html>
  <head>
    <title>canvas tutorial</title>
  </head>
  <body>
    <canvas id="target" width="640" height="480"></canvas>
    <script src="main.js"></script>
  </body>
</html>
// main.js
const canvas = document.getElementById("target"); // HTMLコードで宣言されたcanvasをid属性で指定して取得する

JavaScriptで動的にCanvasを生成する

const canvas = document.createElement("canvas"); // JavaScriptでCanvas要素を動的に生成する
canvas.width = 640;
canvas.height = 480;

この横幅と縦幅はそれぞれ横と縦のピクセルの数を意味しています。つまりCanvasの画像はいわゆるラスター画像（ピクセルの集まりによる画像）であり、SVG画像などのようなベクター画像（数式による幾何学表現としての画像）ではありません。

Canvasで2D描画を行う

CanvasはもともとAppleのMacOSに備わっていた2D描画用APIであるQuartzという技術仕様が元になっています。すなわちCanvasは元々2Dラスター画像をJavaScript制御で描くためのものでした。今でもその機能はHTMLの標準仕様に含まれており、JavaScriptから利用することができます。

Canvas自体はラスター画像データのコンテナ（入れ物）のようなものです。そのCanvasに対して実際の描画を行うためには、Canvasから専用の描画コンテキストを取得する必要があります。

2D描画を行いたい場合は、Canvasから2Dコンテキストを取得します。

// Canvasの取得または生成はすでに済んでいるものとする
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'green'; // 緑色で
ctx.fillRect(10, 10, 100, 100); // (10, 10)を起点として幅と高さが100の矩形を描画する

CanvasからWebGLコンテキストを取得する

WebGLによる3DCG処理は、同様にCanvasからWebGL用の描画コンテキストを取得することから始まります。この講座ではWebGL2を使用しますので、CanvasのgetContext関数に引数'webgl2'を指定します。WebGL1を使う場合は'webgl'を指定します。

// Canvasの取得または生成はすでに済んでいるものとする
const gl = canvas.getContext('webgl2');
gl.clear(); // canvasを初期色で初期化する。

WebGlコンテキストを受ける変数の名前は、慣習上"gl"という変数名が用いられることがよくあります。これは、WebGLの祖先であるOpenGLやOpenGL ESの各関数の関数名が"gl"から始まっていたことが理由です（glClear()など）。

そのため、"gl"という変数名にすることでWebGLのAPI関数をgl.clear()のようにOpenGLと似た名前のスタイルで記述することができます（こうしなければならないわけではありませんが）。

WebGLプログラミングはこのようにCanvasから取得したWebGLコンテキストに対して、WebGLの関数を適切に呼び出すことでGPUに仕事をさせ、GPUが出力したラスター画像をブラウザがCanvasに表示させる、という流れになります。

サンプルプログラム：WebGLコンテキスト取得後、Canvasを赤く塗りつぶす

<!DOCTYPE html>
<html>
  <head>
    <title>canvas tutorial</title>
  </head>
  <body>
    <canvas id="target" width="640" height="480"></canvas>
    <script src="main.js"></script>
  </body>
</html>
// main.js
const canvas = document.getElementById("target"); // HTMLコードで宣言されたcanvasをid属性で指定して取得する
const gl = canvas.getContext('webgl');
gl.clearColor(1, 0, 0, 1); // 初期化色を設定（ここでは赤）
gl.clear(gl.COLOR_BUFFER_BIT); // canvasを初期色で初期化する。

まとめ

今回は次のことを学習しました。

  • WebGLはCanvasから始まること
  • CanvasからWebGLコンテキストを取得する
  • 初期色でCanvasを塗りつぶす最小のWebGLサンプルコード