WebGLのHelloWorld

前回のWebGLプログラムはCanvasの色を初期化するわずか数行のものでした。

今回は、真っ黒な背景の上に赤い三角形ポリゴンを一つ表示してみましょう。いわばWebGLのHelloWorldと言えそうです。

次のような絵が出ます。

JavaScriptコード全文

最初にJavaScriptソースコードの全体を示しましょう。WebGLのHelloWorldは、大体これくらいの行数が必要になります。読みやすさを犠牲にすれば３０行ほどに縮まりそうですが、普通の書き方ならこのようなものでしょう。

// WebGLレンダリングコンテキストの取得関数
const initWebGL = (canvasId)=> {
  const canvas = document.getElementById(canvasId);
  const gl = canvas.getContext("webgl2");
  return gl;
};

// シェーダーの準備関数
const initShaders = (gl, vertexShaderCode, fragmentShaderCode) => {
  const program = gl.createProgram();
  const vertexShader = gl.createShader(gl.VERTEX_SHADER);
  const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
  gl.shaderSource(vvertexShaders, vertexShaderCode);
  gl.shaderSource(fragmentShader, fragmentShaderCode);
  gl.compileShader(vertexShader);
  gl.compileShader(fragmentShader);
  gl.attachShader(program, vertexShader);
  gl.attachShader(program, fragmentShader);
  gl.linkProgram(program);
  gl.useProgram(program);
  gl.bindAttribLocation(program, 0, "position");
  gl.enableVertexAttribArray(0);
};

// 位置情報の配列を受け取ってWebGLにセットする関数
const initGeometry = (gl, positions) => {
  gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
  gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0);
};

// WebGLの描画命令を出す関数
const draw = (gl) => {
  // 画面のクリアを命令する
  gl.clear(gl.COLOR_BUFFER_BIT);
 
  // 描画を命令する
  gl.drawArrays(gl.TRIANGLES, 0, 3);
    
  // ディスプレイの垂直同期に合わせた周期（60FPS以上が多い）で繰り返しdraw()を呼ぶ
  requestAnimationFrame(draw);
};

// 処理の起点（C言語におけるmain関数のようなもの）
(()=>{
// GLSLシェーダーコードを定義
  
  // 頂点シェーダー（頂点単位の処理）
  const vertexShader = 
`#version 300 es

in vec3 position;

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

  // フラグメントシェーダー（ピクセル単位の処理）
  const fragmentShader = 
`#version 300 es
layout(location = 0) out vec4 outColor;

void main() {
  outColor = vec4(1.0, 0.0, 0.0, 1.0);
}
  `;

  // ポリゴン情報を定義
  var positions = [ 0.0, 0.5, 0.0, -0.5, -0.5, 0.0, 0.5, -0.5, 0.0 ];

  const gl = initWebGL('world');
  initShaders(gl, vertexShader, fragmentShader);
  initGeometry(gl, positions);
  
  // Canvas初期化色を設定
  gl.clearColor(1, 0, 0, 1);

  // 描画の開始
  draw();
})();

JavaScriptコーディングサイトJsFiddle版のサンプルはこちらです。

以降で、コードの各部分についてくわしく見ていきます。

次のページへ