[WebGL] Hello Worldを表示させてみる

by
3895 PV

今回から早速WebGLを使ったプログラミングについて解説していきたいと思います。

WebGLでは文字をはじめ、2D図形や3Dポリゴンなど様々なグラフィックをブラウザ上で描画できるわけですが、これらはすべてキャンバスと呼ばれる領域に描画されます。
このキャンバスは絵を描くための画用紙のようなものだと考えれば想像しやすいかと思います。

キャンバスはHTML文書で記述し、bodyタグの中にcanvasタグとして定義します。

<canvas id="sample" width="640" height="480">キャンバスがサポートされていないよ！</canvas>

これで何もないキャンバスがブラウザ上に描画されるようになります。
キャンバスを描画するためにはブラウザがHTML5をサポートする必要があり、サポートされていないとcanvasタグ内の文字列「キャンバスがサポートされていないよ！」が表示されます。
文字や図形を描画するためには、このキャンバス内に描画命令を記述していく必要があります。

描画命令はJavascriptで記述します。
今回は「Hello World」の文字列を描画する命令を記述していきたいと思います。

まず、bodyタグにonload属性を指定します。

<body onload="main()">

onload属性に指定された“main()”という文字列はJavascriptのプログラムに移行したときに最初に呼ばれる関数です。
エントリポイントとも呼ばれます。
この関数は以下のように定義します。

<script>
function main() {
  // canvas要素取得
  var canvas = document.getElementByid("sample");

  // 描画コンテキスト取得
  var ctx = canvas.getContext("2d");

  // 文字列を描画
  ctx.fillText("Hello World");
}
</script>

4行目で予め定義したキャンバスを取得します。
今回はキャンバスを定義するときにid属性に”sample”を指定したため、document.getElementByid()メソッドの引数に”sample”を指定してキャンバスを取得しています。

7行目で描画を行うのに必要となる描画コンテキストを取得しています。
そして、10行目で「Hello World」を表示します。

これで、キャンバス内に「Hello World」が表示されるようになります。

上記まとめると、以下のようなソースになります。

HelloWorld.html

<!DOCTYPE html>
<head>
    <title>Hello World</title>
</head>
<body onload="main()">
    <canvas id="sample" width="640" height="480">キャンバスがサポートされていないよ！</canvas>

    <script>
        function main() {
            // canvas要素取得
            var canvas = document.getElementById("sample");

            // 描画コンテキスト取得
            var ctx = canvas.getContext("2d");

            // 文字列を描画
            ctx.fillText("Hello World", 20, 20);
        }
    </script>
</body>
</html>

いかがでしたでしょうか。
今回はまだ実はWebGLは使用していません。
あくまでもHTML5の話で、WebGLを扱うのに必要な準備となります。

次回はWebGLを用いたプログラミングについて解説していけたらと思います。

ftvoid
Follow :