今回はシェーダーの初期化部分を作成していきます。少し分かり難い部分ですが、今回が終わればお約束的な部分は終わりです。後少しだけ我慢して付き合ってください。
※とりあえず、細かい部分は気にしなくてもいいと思います。こんな感じで書いておけばいいのかと考えてください。
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言語に似た言語で作られています。
createShader
シェーダーオクジェクトの作成shaderSource
ソースの指定compileShader
コンパイルlinkProgram
リンクuseProgram
インストール
シェーダーの使い方は後ほど解説しますので、とりあえずシェーダーというものが必要で、initShader
でその初期化を行っているということだけ理解すれば十分だと思います。
最後のところにgetAttribLocation
とenableVertexAttribArray
というものがあります。これはJavaScriptとシェーダー間で値のやり取りをするために使います。これも後ほど解説したいと思います。
createShader | シェーダーオブジェクトを作成 |
shaderSource | シェーダーオブジェクトのソースコードを指定 |
compileShader | シェーダーオブジェクトをコンパイル |
getShaderInfoLog | シェーダーオブジェクトの情報を取得 |
attachShader | プログラムオブジェクトにシェーダーオブイェクトを関連付ける |
linkProgram | プログラムオブジェクトをリンク |
useProgram | プログラムオブジェクトをインストール |
getAttribLocation | アトリビュート変数のアドレスを取得 |
enableVertexAttribArray | 頂点属性配列を有効にする |