Lesson03 – シェーダーの初期化

今回はシェーダーの初期化部分を作成していきます。少し分かり難い部分ですが、今回が終わればお約束的な部分は終わりです。後少しだけ我慢して付き合ってください。

※とりあえず、細かい部分は気にしなくてもいいと思います。こんな感じで書いておけばいいのかと考えてください。

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);
  }
}

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);
}

追加された部分はinitShaderです。ここでシェーダーの初期化をしています。

シェーダーというのは、光源からの距離や角度に応じて色を変化させ、リアルな描写をするために用いられるレンダリング処理です。WebGLでは、頂点シェーダー（バーテックスシェーダー）とピクセルシェーダー（フラグメントシェーダー）という2つのシェーダーを組み合わせて使うことになります。

サンプルコードを眺めてもらうとなんとなく分かると思いますが、シェーダーは以下のように、コンパイル&リンクして使います。また、shaderSourceで渡されているソースコードは、JavaScriptとは違うC言語に似た言語で作られています。

1. createShader シェーダーオクジェクトの作成
2. shaderSource ソースの指定
3. compileShader コンパイル
4. linkProgram リンク
5. useProgram インストール

シェーダーの使い方は後ほど解説しますので、とりあえずシェーダーというものが必要で、initShaderでその初期化を行っているということだけ理解すれば十分だと思います。

最後のところにgetAttribLocationとenableVertexAttribArrayというものがあります。これはJavaScriptとシェーダー間で値のやり取りをするために使います。これも後ほど解説したいと思います。

createShader	シェーダーオブジェクトを作成
shaderSource	シェーダーオブジェクトのソースコードを指定
compileShader	シェーダーオブジェクトをコンパイル
getShaderInfoLog	シェーダーオブジェクトの情報を取得
attachShader	プログラムオブジェクトにシェーダーオブイェクトを関連付ける
linkProgram	プログラムオブジェクトをリンク
useProgram	プログラムオブジェクトをインストール
getAttribLocation	アトリビュート変数のアドレスを取得
enableVertexAttribArray	頂点属性配列を有効にする

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