WebGLについて⑫
ポリゴンに色を塗る(頂点色の指定)
前回までにただのポリゴンの描画までしてきましたが、今回はその描画したポリゴンに色を付けていきます。
ポリゴンに色を付けるには、頂点情報に「色情報」を追加してあげればOKです！
まずはhtml側のソース
追加した箇所
attribute vec4 color; // 頂点バッファから色情報を受け取るための変数 varying vec4 vColor; // フラグメントシェーダに色情報を渡すための変数 // 頂点シェーダ void main(void) { vColor = color; // 頂点バッファ(VBO)から受け取った色情報をフラグメントシェーダに渡すための変数に代入する } // フラグメントシェーダ precision mediump float; varying vec4 vColor; void main(void) { gl_FragColor = vColor; // 頂点シェーダから渡された色情報を使う }
精度を指定するprecision
precisionは数値の精度を指定するためのキーワードで、続けて精度修飾子を記述することで利用できる
【精度修飾子】
lowp : 精度低
mediump : 精度中
highp : 精度高
続いてjavascript側のソース
追加した箇所
// 位置情報に加えて色情報を取得するために配列として取得する var attLocation = new Array(2); attLocation[0] = gl.getAttribLocation(prg, 'position'); attLocation[1] = gl.getAttribLocation(prg, 'color'); // attributeの要素数を配列に格納 var attStride = new Array(2); attStride[0] = 3; attStride[1] = 4; // 色情報はvec4 // 頂点の色情報 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 ]; // 色情報のvboを生成 gl.bindBuffer(gl.ARRAY_BUFFER, color_vbo); gl.enableVertexAttribArray(attLocation[1]) gl.vertexAttribPointer(attLocation[1], attStride[1], gl.FLOAT, false, 0, 0);
今回は位置情報に加えて色情報も頂点シェーダに渡す必要があるので、attLocationを配列として用意してあげる
同じようにattStrideも配列として用意して位置情報と色情報の要素数をそれぞれ指定する
頂点の色情報をvertex_colorと配列で定義して、要素数は頂点数 × 4で構成されている
続いてVBO(頂点バッファ)の生成部分だが、位置情報と同じようなやり方でcreate_vboメソッドを用いて色情報専用のVBO(color_vbo)を生成する
あとはバインドして登録すればhtml側で定義されたattribute変数に渡すことができ、各頂点に色情報が付与される
【実行結果】
