日本語

WebGLチュートリアル

WebGL アプリケーション

WebGLの例

WebGL - 描画モード

こんにちは、未来のWebGL魔術師たち！? 今日は、WebGLの描画モードの楽しい世界に飛び込んでみましょう。あなたの近所の親切なコンピュータ教師として、この旅を案内します。コードを一行も書いたことがない方でも大丈夫です。虚拟の絵の具を手に取り、デジタルの名作を創り上げましょう！

WebGL - Modes of Drawing

mode パラメータ

描画を始める前に、私たちの主演者について話しましょう：mode パラメータです。これは、WebGLにどのように点（または頂点）を結び付けるかを伝える魔法の杖のようなものです。

WebGLでは、gl.drawArrays() または gl.drawElements() 関数を呼び出す際に、mode パラメータを指定する必要があります。このパラメータは、点を結び付けるパズルの指示に似ています。WebGLにどのように頂点を結び付けるかを伝えます。

以下は、WebGLで利用可能な異なる描画モードの一覧です：

モード 説明
gl.POINTS 各頂点ごとに単一点を描画
gl.LINES 各頂点のペア間に線を描画
gl.LINE_STRIP 頂点を結び付ける連続した線を描画
gl.LINE_LOOP LINE_STRIP と似ているが、形状を閉じます
gl.TRIANGLES 3つの頂点ごとに三角形を描画
gl.TRIANGLE_STRIP 関連する三角形のグループを描画
gl.TRIANGLE_FAN 最初の頂点を共通の点として三角形を描画

今は混乱することなく、これらがどのようなものか理解していただければと思います。具体的な例を交えて順次説明します！

例 - 3本の平行線を描画

まずは簡単な例で始めましょう：3本の平行線を描画します。これにより、mode パラメータが実際にどのように機能するかを理解できます。

// まず、WebGLコンテキストを設定します
const canvas = document.getElementById('myCanvas');
const gl = canvas.getContext('webgl');

// 次に、頂点シェーダーを定義します
const vertexShaderSource = `
attribute vec2 a_position;
void main() {
gl_Position = vec4(a_position, 0.0, 1.0);
}
`;

// そして、フラグメントシェーダー
const fragmentShaderSource = `
precision mediump float;
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // 赤色
}
`;

// シェーダーを作成し、コンパイルします（詳細は後日説明します）
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);

const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);

// プログラムを作成し、シェーダーをリンクします
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);

// 線の位置を定義します
const positions = new Float32Array([
-0.8, -0.8,  // 線1の開始点
-0.8,  0.8,  // 線1の終了点
-0.3, -0.8,  // 線2の開始点
-0.3,  0.8,  // 線2の終了点
0.2, -0.8,  // 線3の開始点
0.2,  0.8   // 線3の終了点
]);

// バッファーを作成し、位置を設定します
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);

// WebGLにバッファーを読み取り、a_position に割り当てるように指示します
const positionAttributeLocation = gl.getAttribLocation(program, 'a_position');
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);

// キャンバスをクリアします
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);

// 線を描画します
gl.drawArrays(gl.LINES, 0, 6);

以下に、これを分解します：

  1. 我们設定WebGLコンテキストおよび定義シェーダー。今は詳しく説明しませんが、後のレッスンで詳しく触れます。

  2. プログラムを作成し、シェーダーをリンクします。これにより、デジタルの絵の具を準備します。

  3. 線の位置を定義します。各線は2つの点（開始点と終了点）で定義され、各点は2つの座標（xとy）で構成されます。したがって、3本の線には6つの点が必要です。

  4. バッファーを作成し、位置を設定します。これにより、絵の具をブラシに載せます。

  5. WebGLにバッファーを読み取り、a_position に割り当てるように指示します。

  6. 最後に、gl.drawArrays(gl.LINES, 0, 6) を呼び出します。ここで魔法が起こります！

  • gl.LINES はモードです。WebGLに頂点のペア間に線を描画するように指示します。
  • 0 は位置配列の開始インデックスです。
  • 6 は考慮する頂点の数です（3本の線のために6つの点）。

このコードを実行すると、黒い背景に赤い平行線が3本描画されます。おめでとうございます！あなたは初めてのWebGL描画を作成しました！?

描画モード

gl.LINES を使用して描画したことを確認したので、他の描画モードを探ってみましょう。前と同じ設定を使用しますが、位置と描画モードを変更します。

gl.POINTS

まずは最もシンプルなモード、gl.POINTS から始めます。このモードは各頂点ごとに単一点を描画します。

// ... (前の設定コード)

const positions = new Float32Array([
-0.5, 0.5,
0.0, 0.0,
0.5, -0.5
]);

// ... (バッファ設定コード)

gl.drawArrays(gl.POINTS, 0, 3);

これで、キャンバス上に3つの赤い点が描画されます。シンプルですね？

gl.LINE_STRIP

次に gl.LINE_STRIP を試みます。このモードは各頂点を結び付ける連続した線を描画します。

// ... (前の設定コード)

const positions = new Float32Array([
-0.5, 0.5,
0.0, -0.5,
0.5, 0.5
]);

// ... (バッファ設定コード)

gl.drawArrays(gl.LINE_STRIP, 0, 3);

これで、V字型の線が3つの点を結びます。

gl.LINE_LOOP

gl.LINE_LOOP は gl.LINE_STRIP に似ていますが、最後の頂点を最初の頂点に結び付けて形状を閉じます。

// ... (前の設定コード)

const positions = new Float32Array([
-0.5, 0.5,
0.0, -0.5,
0.5, 0.5
]);

// ... (バッファ設定コード)

gl.drawArrays(gl.LINE_LOOP, 0, 3);

これで、三角形の輪郭が描画されます。

gl.TRIANGLES

次に gl.TRIANGLES を試みます。このモードは3つの頂点ごとに三角形を描画します。

// ... (前の設定コード)

const positions = new Float32Array([
-0.5, -0.5,
0.5, -0.5,
0.0, 0.5
]);

// ... (バッファ設定コード)

gl.drawArrays(gl.TRIANGLES, 0, 3);

これで、赤い三角形が描画されます。

gl.TRIANGLE_STRIP

gl.TRIANGLE_STRIP は少し複雑です。このモードは各三角形が前の三角形と2つの頂点を共有する連続した三角形グループを描画します。

// ... (前の設定コード)

const positions = new Float32Array([
-0.5, -0.5,
0.5, -0.5,
-0.5, 0.5,
0.5, 0.5
]);

// ... (バッファ設定コード)

gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);

これで、2つの連続した三角形が矩形を形成します。

gl.TRIANGLE_FAN

最後に gl.TRIANGLE_FAN を見てみましょう。このモードは最初の頂点を共通の点として三角形を描画します。

// ... (前の設定コード)

const positions = new Float32Array([
0.0, 0.0,    // 中央点
0.5, 0.0,    // 点1
0.35, 0.35,  // 点2
0.0, 0.5,    // 点3
-0.35, 0.35  // 点4
]);

// ... (バッファ設定コード)

gl.drawArrays(gl.TRIANGLE_FAN, 0, 5);

これで、四分の一周の円のような形状が描画されます。

そしてここまでで、WebGLのすべての描画モードを探求しました。これらをマスターする鍵は練習です。異なるモードを組み合わせ、色を変更し、頂点の位置を遊びます。間もなく、複雑なWebGLシーンを簡単に作成できるようになるでしょう！

次のレッスンでは、シェーダーに詳しくなり、色やテクスチャを追加して描画に少しの魅力を加えます。それまで、未来のWebGLアーティストとして楽しみましょう！??‍??‍?

Credits: Image by storyset

前のチュートリアル:
WebGL - 三角形を描く
次のチュートリアル:
WebGL - 四角形を描く