WebGL - HTML5 Canvas Overview

こんにちは、未来のウェブグラフィックスの魔法使いたち！今日は、WebGLとHTML5 Canvasの世界に興味深い旅に出発します。近所の親切なコンピュータ教師として、この冒険を案内するのを楽しみにしています。プログラミングが初めての方も心配しないでください。基礎から始めて少しずつ進めていきます。では、バーチャルな絵筆を手に取り、始めましょう！

WebGL - Html5 Canvas Overview

HTML5 Canvas

HTML5 Canvasとは？

魔法のようなデジタルキャンバスを思い浮かべてください。その上にコードを使って何でも描くことができます。それがまさにHTML5 Canvasです！HTML5で導入された強力な要素で、ブラウザ内でグラフィックスを描いたり、アニメーションを作成したり、甚至ゲームを構築することもできます。

最初のCanvasを作成する

まずはシンプルなHTML5 Canvasを作成してみましょう：

<!DOCTYPE html>
<html>
<head>
<title>私の最初のCanvas</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="200"></canvas>
</body>
</html>

この例では、IDが"myCanvas"で、幅400ピクセル、高さ200ピクセルのキャンバス要素を作成しています。キャンバスを setUpしたエaselのようなものです。これで絵を描く準備ができました！

Canvasに描画する

キャンバスができたので、何かを描いてみましょう。JavaScriptを使ってこれを行います：

<!DOCTYPE html>
<html>
<head>
<title>Canvasに描画する</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 100, 50);
</script>
</body>
</html>

これを分解すると：

getElementByIdを使ってキャンバス要素を参照します。
getContext('2d')を使ってキャンバスの2Dレンダリングコンテキストを取得します。
fillStyleを使って塗り色を青に設定します。
最後に、fillRect(x, y, width, height)を使って青い長方形を描きます。

これをブラウザで開くと、キャンバスに青い長方形が現れます。おめでとうございます！あなたは初めてのデジタル絵画を作成しました！

レンダリングコンテキスト

レンダリングコンテキストとは？

レンダリングコンテキストはあなたの絵の具セットのようなものです。キャンバスに描画するためのメソッドとプロパティを提供します。前の例では2Dレンダリングコンテキストを使いましたが、他のタイプもあります。

2Dレンダリングコンテキスト

2Dレンダリングコンテキストは最も一般的に使用され、幅広い2D描画関数を提供します。以下にいくつかの便利な2Dコンテキストメソッドの表を示します：

メソッド	説明
fillRect(x, y, width, height)	塗りつぶし長方形を描きます
strokeRect(x, y, width, height)	長方形の輪郭を描きます
fillText(text, x, y)	キャンバスに文字を描きます
strokeText(text, x, y)	文字の輪郭を描きます
beginPath()	新しいパスを開始します
moveTo(x, y)	パスを指定した点に移動します
lineTo(x, y)	指定した点に線を描きます
arc(x, y, radius, startAngle, endAngle)	円弧や円を描きます

これらのメソッドを使ってより複雑な描画を作成してみましょう：

<!DOCTYPE html>
<html>
<head>
<title>複雑な描画</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

// 家を描く
ctx.fillStyle = 'brown';
ctx.fillRect(100, 100, 150, 100);

// 屋根を描く
ctx.fillStyle = 'red';
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(175, 50);
ctx.lineTo(250, 100);
ctx.fill();

// ドアを描く
ctx.fillStyle = 'yellow';
ctx.fillRect(160, 150, 30, 50);

// 文字を描く
ctx.fillStyle = 'black';
ctx.font = '20px Arial';
ctx.fillText('私の家', 140, 190);
</script>
</body>
</html>

この例では、さまざまな2Dコンテキストメソッドを使ってシンプルな家を描いています。家の体とドアにはfillRect、屋根にはbeginPath、moveTo、そしてlineToを使い、ラベルにはfillTextを使っています。座標や色を遊んで自分だけのユニークな家を作成してみてください！

WebGLコンテキスト

WebGLの導入

さて、3Dグラフィックスのエキサイティングな世界、WebGLに踏み込んでみましょう。WebGL（Web Graphics Library）は、プラグインなしで任意の互換性のあるウェブブラウザ内でインタラクティブな3Dおよび2DグラフィックスをレンダリングするためのJavaScript APIです。

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

WebGLを使うためには、2DコンテキストではなくWebGLレンダリングコンテキストを取得する必要があります。以下のようにします：

<!DOCTYPE html>
<html>
<head>
<title>WebGLコンテキスト</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var gl = canvas.getContext('webgl');

if (!gl) {
console.log('WebGLがサポートされていません。experimental-webglにフォールバックします');
gl = canvas.getContext('experimental-webgl');
}

if (!gl) {
alert('あなたのブラウザはWebGLをサポートしていません');
}
</script>
</body>
</html>

この例では、WebGLコンテキストを取得しようとします。サポートされていない場合は、experimental-webglコンテキストにフォールバックします。それでもサポートされていない場合、ユーザーにブラウザがWebGLをサポートしていないことを通知します。

シンプルなWebGL例

以下に、キャンバスを色で消去するシンプルなWebGL例を作成します：

<!DOCTYPE html>
<html>
<head>
<title>シンプルなWebGL</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var gl = canvas.getContext('webgl');

if (!gl) {
console.log('WebGLがサポートされていません。experimental-webglにフォールバックします');
gl = canvas.getContext('experimental-webgl');
}

if (!gl) {
alert('あなたのブラウザはWebGLをサポートしていません');
} else {
// クリアカラーを赤に設定（完全な不透明）
gl.clearColor(1.0, 0.0, 0.0, 1.0);
// 指定されたクリアカラーで色バッファを消去
gl.clear(gl.COLOR_BUFFER_BIT);
}
</script>
</body>
</html>

この例では、クリアカラーを赤に設定し、それで色バッファを消去します。実行すると、赤いキャンバスが表示されます。

WebGLは2Dキャンバス描画よりもはるかに複雑で、シェーダー、バッファ、行列などの概念が含まれますが、心配しないでください。これらについても今後のレッスンで詳しく説明します。

結論

おめでとうございます！HTML5 CanvasとWebGLの世界に初めてのステップを踏み出しました。2Dキャンバスの基本的な作成、2D描画、そしてWebGLの3D世界に少しだけ触れてみました。

グラフィックスプログラミングを学ぶことは絵を描くのと同じで、練習と忍耐が必要です。コードの例を遊んで、値を変更してみて、何が起きるかを確認してください。どんどん遊んでみることで、すべてがどのように動作するかをより理解できるようになります。

次のレッスンでは、より高度な2Dキャンバステクニックに深く掘り下げ、WebGLシェーダーの興味深い世界を探求します。それまでは、コードを書き続けて、楽しい描画を続けてください！

Credits: Image by storyset