V.S. F.S.
V.S.
ラスタ
ライザ F.S.
F.S.
F.S.
F.S.
F.S.
V.S. F.S.
V.S.
ラスタ
ライザ F.S.
F.S.
F.S.
F.S.
F.S.
図2.30: 輝度の線形補間の動作例
図2.31: 画像例（その3、RGBカラーの線形補間）
なされる。補間された値はフラグメントシェーダープログラムに入力される。それの値を
1
元にRGBカラーを作れば、図2.26のような画像が生成される。
2
✓ ✏ struct RGB {
float r;
float g;
float b;
✒}; ✑
図2.32: RGBカラー値を保持する構造体
なお、ここでいう線形補間とは、線分の両端点p1、p2のRGBカラー値をC⃗1、C⃗2 とい う3次元ベクトル値とするとき、画素点 pのRGBカラー値 C⃗ を
C⃗ = |p2−p|
|p2−p1|C⃗1+ |p−p1|
|p2−p1|C⃗2 (2.2) とベクトル計算で求めることをいう。繰り返しになるが、GPUでは線形補間をハードウェ
1
アで実行するため、きわめて高速な処理が可能である。
2
2.6.1 ホストプログラムの変更
3
まず、RGBカラー値を保持する構造体を新たに図2.32のように定義しておく。
4
図2.33は、変更するinitData()である。関数本体の後半に配列 rgbを用意し、そこ
5
に 白、赤、緑、青のRGBカラーをこの順番に格納してみた。そして、その配列について
6
ArrayBufferオブジェクトを作り、それをシェーダーと結合している。“in color”は、こ
7
の配列に対応するバーテックスシェーダープログラムのattribute変数の名前である。
8
2.6.2 バーテックスシェーダープログラムの変更
9
図2.34が変更後のバーテックスシェーダープログラムである。
10
プログラムには輝度値を格納するattribute変数in colorを宣言する。さらに バーテッ
11
クスシェーダープログラムで計算したRGBカラー値をラスタライザを介してフラグメン
12
トシェーダープログラムへ受け渡すvarying変数 out color を宣言する。この辺の仕組
13
みは前節と同じであるが、ただしデータ型はvec3、すなわちfloat型が3個並ぶデータ
14
型である。このvec3型とホストプログラムのRGB型は完全に一致するデータ型であるこ
15
と、一致しなければいけないことを注意する。
16
2.6.3 フラグメントシェーダープログラムの変更
17
図2.35が変更後のフラグメントシェーダープログラムである。
18
✓ ✏ void initData()
{
Position2D pos[NUM_POINTS];
pos[0].x = -0.5; pos[0].y = -0.5;
pos[1].x = +0.5; pos[1].y = +0.5;
pos[2].x = +0.5; pos[2].y = -0.5;
pos[3].x = -0.5; pos[3].y = +0.5;
ArrayBuffer ab((float*)pos,2,NUM_POINTS);
sp->bindArrayBuffer("position",&ab);
RGB rgb[NUM_POINTS];
rgb[0].r = 1.0; rgb[0].g = 1.0; rgb[0].b = 1.0; //白 rgb[1].r = 1.0; rgb[1].g = 0.0; rgb[1].b = 0.0; //赤 rgb[2].r = 0.0; rgb[2].g = 1.0; rgb[2].b = 0.0; //緑 rgb[3].r = 0.0; rgb[3].g = 0.0; rgb[3].b = 1.0; //青 ArrayBuffer ab2((float*)rgb,3,NUM_POINTS);
sp->bindArrayBuffer("in_color",&ab2);
glLineWidth(10.0);
✒} ✑
図 2.33: RGBカラー値の取り扱いを行うinitData()
プログラムにはバーテックスシェーダープログラムと同じvarying変数の宣言を加える。
1
main関数では、ラスタライザで線形補間されたout colorを画素の色として出力してい
2
る。なお、out colorはvec3型であり、gl FragColorはvec4型であるから、データを
3
整合させるために、不足分の透明度 0.0を追加する。
4
2.6.4 実行結果
5
図2.36に示すように、バーテックスシェーダープログラムに入力される時点で頂点に
6
RGBカラー値が追加されている。この例では、RGBカラー値をそのままラスタライザに
7
渡す。ラスタライザは渡されたRGBカラー値を線分の両端点の属性値と見なされ、その
8
値が線分の各画素について線形補間される。補間された値はフラグメントシェーダープロ
9
グラムに入力される。
10
✓ ✏
#version 120
attribute vec2 position;
attribute vec3 in_color;
varying vec3 out_color;
void main(void) {
gl_Position = vec4(position,0.0,1.0);
out_color = in_color;
✒} ✑
図2.34: RGBカラー値の取り扱いを行うバーテックスシェーダプログラム
✓ ✏
#version 120
varying vec3 out_color;
void main(void) {
gl_FragColor = vec4(out_color, 0.0);
✒} ✑
図2.35: RGBカラー値の取り扱いを行うフラグメントシェーダプログラム
V.S. F.S.
V.S.
ラスタ
ライザ F.S.
F.S.
F.S.
F.S.
F.S.
V.S. F.S.
V.S.
ラスタ
ライザ F.S.
F.S.
F.S.
F.S.
F.S.
図2.36: 輝度の線形補間の動作例
図2.37: 画像例（その4、ポイントスプライト）