ポリゴンに色を塗る(頂点色の指定)
ポリゴンを形成する頂点に色という新たな属性を付加して、ポリゴンに色をつけてみます。
頂点には様々な情報を持たせることができます
前回のサンプルでは、頂点は位置情報という頂点属性一つだけ
今回は、ここにさらに色という頂点属性をプラスします。
頂点属性が一つ存在すると、それと対になる形でVBOが必要 頂点の座標とは別に、色情報を渡すため、VBOをさらに生成
頂点シェーダ
attribute vec4 colorの追加
code:glsl
attribute vec3 position;
attribute vec4 color;
uniform mat4 mvpMatrix;
varying vec4 vColor;
void main(void){
vColor = color;
gl_Position = mvpMatrix * vec4(position, 1.0);
}
attribute 変数を二つ宣言
varyingで色情報をフラグメントシェーダに渡す
attribute として入ってきた頂点の色情報を、そのまま varying 変数の vColor に渡している
フラグメントシェーダ
code:glsl
precision mediump float;
varying vec4 vColor;
void main(void){
gl_FragColor = vColor;
}
前回は、
gl_FragColor = vec4(1.0,1.0,1.0,1.0);直接代入していた
そのため、描画されるポリゴンは単色の三角形として表示されましたね。
今回の場合には、頂点シェーダから送られた varying 型変数の vColor を使う
頂点の色属性がポリゴンの色に影響します。
※ちなみに頂点シェーダとフラグメントシェーダで同名の varying 変数を宣言していますが、
双方は内部的には全く別物の変数です。
精度を指定する precision
今回のフラグメントシェーダの一行目には、 precision という見慣れないワードが出てきています。
この precision は数値の精度を指定するためのキーワードで、
precision に続けて精度修飾子を記述することで利用できます。
修飾子には、三つの種類があり、わかりやすく言ってしまえば上・中・下を指定します。
実際には変数に使用されるビット数などが変化する(つまり扱える数値の桁数が増えるなどの変化がある)のですが、この辺は実行される環境によって結果がまちまちになってしまうのが現実のようです。
lowp :精度低
mediump:精度中
highp :精度高
precision mediump float
float型をすべてmediumpにする
頂点バッファ周りの処理
頂点のVBOと同様に色情報のVBOを作成
頂点データ配列を作成するところまでを抜粋
code:js
// attributeLocationを配列に取得
var attLocation = new Array(2);
attLocation0 = gl.getAttribLocation(prg, 'position'); attLocation1 = gl.getAttribLocation(prg, 'color'); // attributeの要素数を配列に格納
var attStride = new Array(2);
// 頂点の位置情報を格納する配列
var vertex_position = [
0.0, 1.0, 0.0,
1.0, 0.0, 0.0,
-1.0, 0.0, 0.0
];
// 頂点の色情報を格納する配列
var vertex_color = [
1.0, 0.0, 0.0, 1.0,
0.0, 1.0, 0.0, 1.0,
0.0, 0.0, 1.0, 1.0
];
色情報は RGBA の四つの要素によって表現されます。ですから、色情報に関する配列は 頂点数 x 4 になります。
頂点データ配列から VBO を生成するまでを抜粋
code:js
// VBOの生成
var position_vbo = create_vbo(vertex_position);
var color_vbo = create_vbo(vertex_color);
// VBOをバインドし登録する(位置情報)
gl.bindBuffer(gl.ARRAY_BUFFER, position_vbo);
gl.enableVertexAttribArray(attLocation0); gl.vertexAttribPointer(attLocation0, attStride0, gl.FLOAT, false, 0, 0); // VBOをバインドし登録する(色情報)
gl.bindBuffer(gl.ARRAY_BUFFER, color_vbo);
gl.enableVertexAttribArray(attLocation1); gl.vertexAttribPointer(attLocation1, attStride1, gl.FLOAT, false, 0, 0);