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でその初期化を行っているということだけ理解すれば十分だと思います。

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

サンプルを確認する場合はこちらをクリックしてください。
シェーダを作成しただけで、まだ何もしていませんので、実行結果は前回と変らず黒い画面になります。
createShaderシェーダーオブジェクトを作成
shaderSourceシェーダーオブジェクトのソースコードを指定
compileShaderシェーダーオブジェクトをコンパイル
getShaderInfoLogシェーダーオブジェクトの情報を取得
attachShaderプログラムオブジェクトにシェーダーオブイェクトを関連付ける
linkProgramプログラムオブジェクトをリンク
useProgramプログラムオブジェクトをインストール
getAttribLocationアトリビュート変数のアドレスを取得
enableVertexAttribArray頂点属性配列を有効にする
関数の説明

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

コメントを残す

メールアドレスが公開されることはありません。