この記事は先日投稿したこちらの記事の続きとなります。
はじめに
今回はコードの理解を深めるために、前回表示した三角形ポリゴンに色をつけたいと思います。
最終形としては三角形の各頂点に別の色を設定します。
色の設定
まずは各頂点に赤、青、緑を設定します。
前回のソースで言うと2にあたる部分になります。
script.js
// 空のカラーバッファを生成
var verticesColorBuffer = gl.createBuffer();
// 生成したバッファをバインドする
gl.bindBuffer(gl.ARRAY_BUFFER, verticesColorBuffer);
// 各色を定義
var colors = [
1.0, 0.0, 0.0, 1.0, // 赤
0.0, 1.0, 0.0, 1.0, // 緑
0.0, 0.0, 1.0, 1.0 // 青
];
// バインドされたバッファに色をセットする
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
頂点シェーダの変更
カラーバッファから値を取得できるように頂点シェーダ側も変更をします。
index.html
attribute vec3 position;
attribute vec4 color;
varying lowp vec4 vColor;
void main ()
{
gl_Position = vec4(position, 1.0);
vColor = color;
}
フラグメントシェーダの変更
頂点シェーダと同じように、フラグメントシェーダ側も変更をします。
index.html
precision mediump float;
varying lowp vec4 vColor;
void main ()
{
gl_FragColor = vColor;
}
描画時に色を反映させる
色情報を用いて描画を行います。
前回のソースで言うと4にあたります。
script.js
// 色のバッファをバインド
gl.bindBuffer(gl.ARRAY_BUFFER, verticesColorBuffer);
// シェーダのアドレスを保持
var vertexColorAddress = gl.getAttribLocation(program, "color");
// 頂点属性の有効化
gl.enableVertexAttribArray(vertexColorAddress);
// 頂点属性に頂点データを設定
gl.vertexAttribPointer(vertexColorAddress, 4, gl.FLOAT, false, 0, 0);
描画
上記変更を加えた上で実行すると以下のようなものが描画が行われるはずです。
※目立たせるために背景色を黒にしました。
script.js
// 背景描画
gl.clearColor(0.0, 0.0, 0.0, 1.0);
おわりに
殆ど前回記事で使用したコードの応用で変更を行うことができました。(とはいえ全体の理解が浅いのでぱぱっとはできていませんが…)
次は回転とか3D化とかできたらいいなと思ってます。