Lesson04 – 図形を描く

ここまで、前準備が長かったと思います。ようやくですが<canvas>に図形を描いていきたいと思います。

var gl;
var posVAttrib;

function start()
{
  var canvas = document.getElementById('canvas');

  initGL(canvas);
  if(gl){
    initShader();

    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);

    drawScene();
  }
}

function initGL(canvas){
  gl = null;

  try{
    gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
  }
  catch(e){
  }

  if(!gl){
    alert('Unable to Initialize WebGL.');
  }
}

function initShader()
{
  // Vertex shader
  var vshader = gl.createShader(gl.VERTEX_SHADER);
  gl.shaderSource(vshader, 'attribute vec3 pos; void main(void){ gl_Position = vec4(pos, 1.0); }');
  gl.compileShader(vshader);
  if(!gl.getShaderParameter(vshader, gl.COMPILE_STATUS)){
    alert(gl.getShaderInfoLog(vshader));
    return;
  }

  // Fragment shader
  var fshader = gl.createShader(gl.FRAGMENT_SHADER);
  gl.shaderSource(fshader, 'void main(void){ gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0); }');
  gl.compileShader(fshader);
  if(!gl.getShaderParameter(fshader, gl.COMPILE_STATUS)){
    alert(gl.getShaderInfoLog(fshader));
    return;
  }

  // Create shader program
  var program = gl.createProgram();
  gl.attachShader(program, fshader);
  gl.attachShader(program, vshader);
  gl.linkProgram(program);
  if(!gl.getProgramParameter(program, gl.LINK_STATUS)){
    alert(gl.getProgramInfoLog(program));
    return;
  }
  gl.useProgram(program);

  // attribute
  posVAttrib = gl.getAttribLocation(program, 'pos');
  gl.enableVertexAttribArray(posVAttrib);
}

function drawScene(){
  var buffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);

  var vertices = new Float32Array([0.0, 0.8, 0.0, -0.8, -0.8, 0.0, 0.8, -0.8, 0.0]);
  gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
  gl.vertexAttribPointer(posVAttrib, 3, gl.FLOAT, false, 0, 0);

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

今回追加した部分はdrawSceneです。ここで三角形を描いています。

[0.0, 0.8, 0.0, -0.8, -0.8, 0.0, 0.8, -0.8, 0.0]が三角形の頂点座標です。今はxyz-空間で実装していますので、各点は(x, y, z)の3つの値から成ります。つまり、三角形の頂点の座標は(0,0, 0.8, 0.0)、(-0.8, -0.8, 0.0)、(0.8, -0.8, 0.0)の3つになります。頭の中で3点を結んでみると、確かに三角形になっていることが確認できると思います。

そして、最後にdrawArraysで図形を描いています。

※当面はz座標を0に固定しますので、<canvas>に描かれる図形は平面図形になります。

ところで、三角形が白色になる理由は分かりますか？
白色に指定している部分はピクセルシェーダーです。詳細についてはLesson10で解説します。

bindBuffer	バッファオブジェクトをバインドする
bufferData	バッファオブジェクトのデータストアの作成と初期化
vertexAttribPointer	頂点属性データ配列の定義
drawArrays	配列データから図形を描く
flush	GLコマンドの強制実行

前回の記事
次回の記事
目次ページ