WebGLを学ぶためのサンプルプログラムを教えてください。

ここでは、WebGLを学ぶためのサンプルプログラムの一例を紹介します。以下のプログラムは、WebGLを使用して正方形を描画するものです。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>WebGL Sample Program</title>
    <style>
      canvas {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas"></canvas>
    <script>
      // WebGLコンテキストの取得
      var canvas = document.getElementById('myCanvas');
      var gl = canvas.getContext('webgl');

      // 頂点データの定義
      var vertices = [
        -0.5,  0.5, 0.0,
        -0.5, -0.5, 0.0,
         0.5, -0.5, 0.0,
         0.5,  0.5, 0.0
      ];

      // 頂点インデックスの定義
      var indices = [
        0, 1, 2,
        0, 2, 3
      ];

      // 頂点シェーダーのコード
      var vsSource = `
        attribute vec3 aVertexPosition;

        void main() {
          gl_Position = vec4(aVertexPosition, 1.0);
        }
      `;

      // フラグメントシェーダーのコード
      var fsSource = `
        void main() {
          gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
        }
      `;

      // 頂点バッファオブジェクトの生成とデータの設定
      var vertexBuffer = gl.createBuffer();
      gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
      gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

      // 頂点インデックスバッファオブジェクトの生成とデータの設定
      var indexBuffer = gl.createBuffer();
      gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
      gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);

      // 頂点シェーダーの生成
      var vs = gl.createShader(gl.VERTEX_SHADER);
      gl.shaderSource(vs, vsSource);
      gl.compileShader(vs);

      // フラグメントシェーダーの生成
      var fs = gl.createShader(gl.FRAGMENT_SHADER);
      gl.shaderSource(fs, fsSource);
      gl.compileShader(fs);

      // プログラムオブジェクトの生成とリンク
      var program = gl.createProgram();
      gl.attachShader(program, vs);
      gl.attachShader(program, fs);
      gl.linkProgram(program);
      gl.useProgram(program);

      // 頂点座標属性の設定
      var vertexPositionAttribute = gl.getAttribLocation(program, 'aVertexPosition');
      gl.enableVertexAttribArray(vertexPositionAttribute);
      gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
      gl.vertexAttribPointer(vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0);

  // 描画
  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
  gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT, 0);
</script>
</body>
</html>

このプログラムでは、canvas要素を使用してWebGLコンテキストを取得し、頂点データと頂点インデックスを定義しています。また、頂点シェーダーとフラグメントシェーダーのコードを文字列として定義し、それらをコンパイルしてプログラムオブジェクトを生成し、描画処理を行っています。

このサンプルプログラムは、正方形を描画するだけではありますが、WebGLの基本的な使い方を学ぶのに役立つものです。また、WebGLでより複雑な描画を行うためには、シェーダーや頂点データ、テクスチャなどの概念を深く理解する必要があります。

本プログラムを実行してみた例。

chat-gpt’s diary

ChatGPTでAIと会話した結果を残してます。

WebGLを学ぶためのサンプルプログラムを教えてください。