イメージシンセシス - GLSLの演習

GLSLの演習：テクスチャの利用

■ テクスチャマッピング

床井研究室　第２回「テクスチャの割り当て」
- 図：ポリゴンへのテクスチャマッピング

床井研究室　第３回「テクスチャの参照」

上の「図：ポリゴンへのテクスチャマッピング」に示されているように，テクスチャはテクスチャ空間上で定義される．この空間はテクスチャ座標 [ s, t ] で定義され，その範囲は 0 ≤ s ≤ 1，0 ≤ t ≤ 1 である．ポリゴンにテクスチャをマッピングする場合，ポリゴンの各頂点にテクスチャ座標値を割り当てる．

■ 準備

サンプルプログラム glsl1 に次のサンプルプログラムを加える．

サンプルプログラム（テクスチャの基本的な利用）　（Visual Studio 2010 で作成）

上の zip ファイルを解凍したフォルダに含まれる全てのファイルをフォルダ glsl1 中に加える．
サンプルプログラム glsl1 を起動した状態で，main 関数を含むソースファイル main.cpp をプロジェクトから除外し（削除はしない），新たな main 関数を含むソースファイル main_tex.cpp をプロジェクトに追加する．
バーテックスシェーダのソースファイル tex.vert とフラグメントシェーダのソースファイル tex.frag をプロジェクトに追加する．

■ 演習

以下，順次，プログラム中の赤字の箇所を変更して実行する．青字は，その時点で，すでに変更済みの箇所である．

（１）テクスチャの基本的な利用

（１－１） OpenGLアプリケーションのみを利用したテクスチャマッピング

サンプルプログラムをそのまま実行する． OpenGLアプリケーションのみを利用したテクスチャマッピングが実行される．

main_tex.cpp

/*
** メイン関数
*/
int main( int argc, char *argv[] )
{
  ...　省略　...

  /* GLSLの初期設定 */
  // init_glsl();

  ...　省略　...

  /* GLSLの終了設定 */
  // fin_glsl();

  ...　省略　...

}

/*
** ウィンドウの描画
*/
static void display( void )
{
  /* 画面のクリア */
  glClear( GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT );

  /* モデルビュー変換行列の初期化（単位行列にする） */
  glLoadIdentity();

  /* 視野変換（ビューイング変換）の設定 */
  gluLookAt( 0.0, 0.0, 1.0,    /* 視点位置 */
             0.0, 0.0, 0.0,    /* 注目位置 */
             0.0, 1.0, 0.0 );  /* 上向きベクトル */

  /* ４角形ポリゴンの描画 */
  /* ４個の頂点にテクスチャ座標を割り当てる */
  glBegin( GL_QUADS );
  glTexCoord2d( 0.0, 0.0 );
  glVertex3d( 0.0, 0.0, 0.0 );
  glTexCoord2d( 1.0, 0.0 );
  glVertex3d( (GLdouble)imgx, 0.0, 0.0 );
  glTexCoord2d( 1.0, 1.0 );
  glVertex3d( (GLdouble)imgx, (GLdouble)imgy, 0.0 );
  glTexCoord2d( 0.0, 1.0 );
  glVertex3d( 0.0, (GLdouble)imgy, 0.0 );
  glEnd();

  /* ダブルバッファリング */
  glutSwapBuffers();
}

このプログラムでは，OpenGLアプリケーション（main_tex.cpp）内の関数 main において，GLSL の初期設定と終了設定を行う関数 init_glsl，fin_glsl がコメントアウトされているため，GLSL によるシェーダ（tex.vert，tex.frag）は利用されず，OpenGLアプリケーション（*.cpp）のみが利用される．

このプログラムでは，画像をテクスチャにして４角形ポリゴンにマッピングし，４角形ポリゴンがぴったりとウィンドウ内に収まるように平行投影で表示している．画像をテクスチャとする処理は，テクスチャの初期設定と終了設定を行う関数 init_tex と fin_tex で行っている．４角形ポリゴンの定義，ならびに，テクスチャのマッピングについては，main_tex.cpp 内の関数 display 中で以下の処理を行っている．

関数 gluLookAt により，視点位置 [ 0.0, 0.0, 1.0 ] から注目位置 [ 0.0, 0.0, 0.0 ] を見ることとし，上方向を上向きベクトル [ 0.0, 1.0, 0.0 ] で与えている．これにより，右手系の x-y-z 座標系のもとで，z 軸上の z = 1.0 の点を視点，z 軸の負方向を視線方向，x 軸の正方向をスクリーンの右方向，y 軸の正方向をスクリーンの上方向とした平行投影となる．
関数 glVertex3d により，４角形ポリゴンの４個の頂点の座標値 [ x, y, z ] を [ 0.0, 0.0, 0.0 ]，[ imgx, 0.0, 0.0 ]，[ imgx, imgy, 0.0 ]，[ 0.0, imgy, 0.0 ] としている．つまり，この４角形ポリゴンは x-y 平面上に含まれる大きさ imgx × imgy の長方形となる．なお，imgx，imgy は画像の x，y 方向のピクセル数である．また，頂点の順序は，視点位置から視線方向を見た場合に，x-y 平面上で左回りになるように並べている．

それぞれの頂点の座標値 [ x, y, z ] を与える直前において，関数 glTexCoord2d により，その頂点に割り当てるテクスチャ座標値 [ s, t ] を与えている．以下の対応となるように，４角形ポリゴンの４個の頂点にテクスチャ（画像）の四隅のテクスチャ座標値を割り当てている．

頂点の座標値 [ x, y, z ]		テクスチャ座標値 [ s, t ]
[ 0.0, imgy, 0.0 ]	[ imgx, imgy, 0.0 ]	[ 0.0, 1.0 ]	[ 1.0, 1.0 ]
[ 0.0, 0.0, 0.0 ]	[ imgx, 0.0, 0.0 ]	[ 0.0, 0.0 ]	[ 1.0, 0.0 ]

このプログラムの実行により，ウィンドウ内に次の画像が表示される．

（１―２）シェーダを利用したテクスチャマッピング

サンプルプログラムを以下のように変更して実行する． GLSL によるシェーダを利用したテクスチャマッピングが実行される．

main_tex.cpp

/*
** メイン関数
*/
int main( int argc, char *argv[] )
{
  ...　省略　...

  /* GLSLの初期設定 */
  init_glsl();  /* コメント記号 // を外して有効にする */

  ...　省略　...

  /* GLSLの終了設定 */
  fin_glsl();  /* コメント記号 // を外して有効にする */

  ...　省略　...

}

/*
** GLSLの初期設定
*/
static void init_glsl( void )
{
  ...　省略　...

  /* フラグメントシェーダに値を渡す */
  GLint smptexLoc = glGetUniformLocation( gl2Program, "smptex" );   // テクスチャサンプラ
  glUniform1i( smptexLoc, 0 );                                      // テクスチャユニット GL_TEXTURE0 を利用
  GLint imgxLoc = glGetUniformLocation( gl2Program, "imgx" );       // 画像の x 方向のピクセル数
  glUniform1i( imgxLoc, imgx );
  GLint imgyLoc = glGetUniformLocation( gl2Program, "imgy" );       // 画像の y 方向のピクセル数
  glUniform1i( imgyLoc, imgy );
}

/*
** ウィンドウの描画
*/
static void display( void )
{
  ...　省略　...

  /* ４角形ポリゴンの描画 */
  /* ４個の頂点にテクスチャ座標を割り当てる */
  glBegin( GL_QUADS );
  // glTexCoord2d( 0.0, 0.0 );  /* コメントアウトして無効にする */
  glVertex3d( 0.0, 0.0, 0.0 );
  // glTexCoord2d( 1.0, 0.0 );  /* コメントアウトして無効にする */
  glVertex3d( (GLdouble)imgx, 0.0, 0.0 );
  // glTexCoord2d( 1.0, 1.0 );  /* コメントアウトして無効にする */
  glVertex3d( (GLdouble)imgx, (GLdouble)imgy, 0.0 );
  // glTexCoord2d( 0.0, 1.0 );  /* コメントアウトして無効にする */
  glVertex3d( 0.0, (GLdouble)imgy, 0.0 );
  glEnd();

  ...　省略　...

}

tex.vert

void main( void )
{
  // 頂点のクリッピング座標
  // gl_Position = gl_ModelViewProjectionMatrix * gl_Vertex;
  // 上と下は同じ働きをする
  gl_Position = ftransform();
}

tex.frag

// OpenGLアプリケーションの値を受け取る uniform 変数
uniform sampler2D smptex;   // テクスチャサンプラ
uniform int imgx;           // 画像の x 方向のピクセル数
uniform int imgy;           // 画像の y 方向のピクセル数

void main ( void )
{
  vec2 tex_st;
  vec4 col;

  // テクスチャ座標値の計算
  tex_st.s = gl_FragCoord.x / float( imgx );    // 0.0 <= tex_st.s <= 1.0
  tex_st.t = gl_FragCoord.y / float( imgy );    // 0.0 <= tex_st.t <= 1.0

  // テクスチャの色のサンプリング
  col = texture2D( smptex, tex_st );

  // フラグメントの色
  gl_FragColor.rgb = col.rgb;
}

OpenGLアプリケーション（main_tex.cpp）内の関数 main において，GLSL の初期設定と終了設定を行う関数 init_glsl，fin_glsl を有効にしたため，GLSL によるシェーダ（tex.vert，tex.frag）が利用される．

このプログラムでは，main_tex.cpp 内の関数 display 中での関数 glTexCoord2d によるテクスチャ座標値の割り当てを無効にし，その割り当てをフラグメントシェーダ（tex.frag）内で以下のように行っている．

OpenGLアプリケーション（main_tex.cpp）から値を受け取る uniform 変数を定義している．
　uniform sampler2D smptex; // テクスチャサンプラ
　uniform int imgx; // 画像の x 方向のピクセル数
　uniform int imgy; // 画像の y 方向のピクセル数
これらの変数には main_tex.cpp 内の関数 init_glsl 中で値を与えている．
各フラグメント（ピクセル）にテクスチャの色を与えるためのテクスチャ座標値 tex_st の計算は次のように行っている．
　tex_st.s = gl_FragCoord.x / float( imgx );
　tex_st.t = gl_FragCoord.y / float( imgy );
「基本的な処理」の（４）で説明したように，ウィンドウ内におけるフラグメント（ピクセル）の位置はフラグメント（ピクセル）座標値 gl_FragCoord であらわされ，ウィンドウ内のピクセル数が imgx × imgy の場合，その範囲は
　0 ≤ gl_FragCoord.x ≤ imgx，0 ≤ gl_FragCoord.y ≤ imgy
となる．よって，上記の除算により，テクスチャ座標値 tex_st の範囲は
　0.0 ≤ tex_st.s ≤ 1.0，0.0 ≤ tex_st.t ≤ 1.0
となり，ウィンドウ内にぴったりと収まる４角形ポリゴンの全面にテクスチャ（画像）がマッピングされることになる．
テクスチャの色は，関数 texture2D にテクスチャ座標値 tex_st を与えてサンプリングすることで求めている．

このプログラムの実行により，（１－１）の場合と同様，ウィンドウ内に次の画像が表示される．

（１－３）４角形ポリゴンにテクスチャマッピングしていることの確認

上の（１－１）と（１－２）のそれぞれの場合について，プログラムに次の処理（４角形ポリゴンに対するモデリング変換）を追加して実行し，４角形ポリゴンにテクスチャマッピングが行われていることを確認する．その際，（１－１）と（１－２）の場合で表示される結果が異なる理由を考えてみる．

main_tex.cpp

/*
** ウィンドウの描画
*/
static void display( void )
{
  ...　省略　...

  /* 視野変換（ビューイング変換）の設定 */
  gluLookAt( 0.0, 0.0, 1.0,    /* 視点位置 */
             0.0, 0.0, 0.0,    /* 注目位置 */
             0.0, 1.0, 0.0 );  /* 上向きベクトル */

  /* モデリング変換 */
  glTranslated( (GLdouble)imgx/3.0, (GLdouble)imgy/6.0, 0.0 );
  glRotated( 30.0, 0.0, 0.0, 1.0 );
  glScaled( 0.5, 0.5, 1.0 );

  /* ４角形ポリゴンの描画 */
  /* ４個の頂点にテクスチャ座標を割り当てる */
  glBegin( GL_QUADS );

  ...　省略　...

}

このプログラムの実行により，（１－１）と（１－２）のそれぞれの場合について，ウィンドウ内に次の画像が表示される．

元の画像の表示モデリング変換なし	（１－１）の場合 OpenGLアプリケーションのみを利用	（１－２）の場合シェーダを利用

このモデリング変換は，元の４角形ポリゴンに対して，関数 glScaled により x，y 方向のそれぞれで半分の大きさに縮小し，関数 glRotated により z 軸回り，つまり，x-y 平面内で左回りに 30 度だけ回転し，さらに，x 方向に imgx/3，y 方向に imgy/6 だけ平行移動している．その結果，元々はウィンドウ内にぴったりと収まっていた４角形ポリゴンが，上のように縮小されて斜めになって表示される．そして，（１－１）と（１－２）のそれぞれの場合で，４角形ポリゴンにテクスチャとしてマッピングされている画像の表示が異なっている．

（１－１）の場合，main_tex.cpp 内の関数 display 中で，関数 glTexCoord2d によって４角形ポリゴンの４個の頂点にテクスチャ（画像）の四隅のテクスチャ座標値を割り当てている．そのため，４角形ポリゴンの全面にテクスチャ（画像）全体がマッピングされる．

（１－２）の場合，tex.frag 内において，４角形ポリゴン内の各フラグメント（ピクセル）に対して，ウィンドウ内のフラグメント位置をあらわすフラグメント座標値 gl_FragCoord によってテクスチャ座標値が与えられる．実際に表示されるのは４角形ポリゴンなので，結果として，ウィンドウ内にぴったりと収めたテクスチャ（画像）から４角形ポリゴンの領域だけが抜き出されて表示されることになる．

（１－４）フラグメント（ピクセル）座標値とモデリング座標値の違い

上の（１－３）で行った（１－２）の場合，すなわち，GLSL によるシェーダを利用した場合には，フラグメントシェーダ（tex.frag）においてフラグメント（ピクセル）座標値 gl_FragCoord を用いてテクスチャ座標値 tex_st を計算していた．そこで，その計算方法について，以下のようにモデリング座標値 gl_Vertex を用いるように変更し，プログラムを実行してみる．なお，OpenGLアプリケーション（main_tex.cpp）は（１－３）で行った（１－２）の場合と同じ状態にすること．

tex.vert

// フラグメントシェーダに渡す値を格納するvarying変数
varying vec2 vert_xy;       // ４角形ポリゴンのモデリング座標の x, y 値

void main( void )
{
  // 頂点のクリッピング座標
  // gl_Position = gl_ModelViewProjectionMatrix * gl_Vertex;
  // 上と下は同じ働きをする
  gl_Position = ftransform();

  // 頂点のモデリング座標の x, y 値
  vert_xy.xy = gl_Vertex.xy;
}

tex.frag

// OpenGLアプリケーションの値を受け取るuniform変数
uniform sampler2D smptex;   // テクスチャサンプラ
uniform int imgx;           // 画像のx方向のピクセル数
uniform int imgy;           // 画像のy方向のピクセル数
// バーテックスシェーダから渡される値を格納するvarying変数
varying vec2 vert_xy;       // ４角形ポリゴンのモデリング座標の x, y 値

void main ( void )
{
  vec2 tex_st;
  vec4 col;

  // テクスチャ座標値の計算
  // tex_st.s = gl_FragCoord.x / float( imgx );    // 0.0 <= tex_st.s <= 1.0
  // tex_st.t = gl_FragCoord.y / float( imgy );    // 0.0 <= tex_st.t <= 1.0
  tex_st.s = vert_xy.x / float( imgx );    // 0.0 <= tex_st.s <= 1.0
  tex_st.t = vert_xy.y / float( imgy );    // 0.0 <= tex_st.t <= 1.0

  // テクスチャの色のサンプリング
  col = texture2D( smptex, tex_st );

  // フラグメントの色
  gl_FragColor.rgb = col.rgb;
}

このプログラムの実行によってウィンドウ内に表示される画像を（１－３）の場合と比較したものを次に示す．

元の画像の表示モデリング変換なし	（１－３）の（１－１）の場合 OpenGLアプリケーションのみを利用	（１－３）の（１－２）の場合フラグメント座標値 gl_FragCoord を利用	（１－４）の場合モデリング座標値 gl_Vertex を利用

このプログラムでは，シェーダ（tex.vert，tex.frag）において，以下の処理を行っている．

バーテックスシェーダ（tex.vert）とフラグメントシェーダ（tex.frag）で共通の varying 変数 vert_xy を定義する．
バーテックスシェーダ（tex.vert）において，４角形ポリゴンの頂点のモデリング座標 gl_Vertex の x, y 値を varying 変数 vert_xy に格納してフラグメントシェーダ（tex.frag）に渡す．
フラグメントシェーダ（tex.frag）において，（ラスタライザで補間された）４角形ポリゴンのモデリング座標の x, y 値を varying 変数 vert_xy で受け取り，それを用いてテクスチャ座標値 tex_st を計算する．

４角形ポリゴンの４個の頂点のモデリング座標値 gl_Vertex からテクスチャ座標値を求めているため，結果として，（１－３）の（１－１）の場合と同じ画像がウィンドウ内に表示される．

（２）シェーダの利用による処理の高速化

グラフィックス表示は負荷が大きな処理であり，CPU (Central Processing Unit) の負荷を軽減するため，通常，グラフィックス表示に特化した GPU (Graphics Processing Unit) という装置によって高速に実行される．シェーダによるプログラムは，ユーザが意図したグラフィックス表示の処理を GPU 上で高速に実行することを可能とする． GPU は，頂点ごと，あるいは，フラグメント（ピクセル）ごとの処理を並列に実行する仕組みによって高速な処理を可能としている．なお，理論的には，すべての頂点ごと，フラグメント（ピクセル）ごとの処理が並列に実行されるが，実際の並列の度合いは GPU のハードウェアの仕様に依存する．

GPU は元々はグラフィックス表示に特化した装置であるが，負荷が大きな処理を高速に実行できるという利点から，グラフィックス表示以外の一般的な処理，すなわち，通常は CPU 上で実行される処理を意図的に GPU 上で実行させることで，GPU の高速な処理能力を汎用的に利用することができる．このような GPU の利用は GPGPU (General-Purpose computing on Graphics Processing Units) と呼ばれる．

ここでは，GPGPU の観点から，GPU による高速な処理を確認するため，意図的にピクセルごとに大きな計算時間を要する処理（繰り返し処理）を行うプログラムを実行してみる．計算量の多い処理を CPU 上で実行する場合と GPU 上で実行する場合について，処理速度の違いを確認する．

なお，以下の実験のため，まず，プログラムを（１－１）の状態に戻す．

（２－１） OpenGLアプリケーションのみを利用した場合

以下のプログラムでは，計算量の多い処理を CPU 上で実行する．サンプルプログラムを以下のように変更して実行する．

main_tex.cpp

/*
** メイン関数
*/
int main( int argc, char *argv[] )
{
  /* 画像の読み込み */
  if( getPPM( imgname, &imgx, &imgy, img ) != 0 ) {
    fprintf( stderr, "error: main() -> getPPM() -> %s\n", imgname );
    return( 1 );
  }

  /* 【実験】シェーダの利用による処理の高速化 （２ー１） */
  int num = 10000;  // 繰り返し回数
  float avg, sum;
  for( int y = 0; y < imgy; y++ ) {
    for( int x = 0; x < imgx; x++ ) {
      avg = ( ((float)img[imgx*y+x][0]/255.0)
            + ((float)img[imgx*y+x][1]/255.0)
            + ((float)img[imgx*y+x][2]/255.0) ) / 3.0;
      sum = 0.0;
      for( int n = 0; n < num; n++ ) {
        sum += avg;
      }
      img[imgx*y+x][0] = img[imgx*y+x][1] = img[imgx*y+x][2]
        = (unsigned char)( (sum/(float)num)*255.0 );
    }
  }

  /* OpenGLの初期化 */
  glutInitWindowSize( imgx, imgy );

  ...　省略　...

  /* GLSLの初期設定 */
  // init_glsl();

  ...　省略　...

  /* GLSLの終了設定 */
  // fin_glsl();

  ...　省略　...

}

このプログラムは，OpenGLアプリケーション（main_tex.cpp）のみを利用して，元のカラー画像を簡易的な方法でグレースケール画像に変換する．関数 main に追加した処理は，N_x × N_y = 640 × 480 個のピクセルを持つカラー画像について，すべてのピクセル座標値 x = 0 ～ N_x-1，y = 0 ～ N_y-1 に対する２重ループであり，ループ内ではピクセル [ x, y ] について以下の処理を行っている．

元のカラー画像を読み込んだ配列 img 中でピクセル [ x, y ] が持つ R，G，B 値を平均化したグレースケール値を変数 avg に代入する．配列 img は GLubyte 型，すなわち，unsigned char 型であり，R，G，B のそれぞれの色が 0 ～ 255 の範囲の値を持つ．一方，（２－２）で比較するプログラムのフラグメントシェーダ（tex.frag）内では，色の値は float 型であり，0.0 ～ 1.0 の範囲となる．そこで，条件を同じにするため，配列 img の値を 255 で除算している．なお，この追加した処理では，次の num 回の加算の処理が全体の処理時間にとって支配的であるため，この除算の影響は処理時間の点では無視できる．
変数 sum にグレースケール値 avg を num = 10000 回だけ加算する．この加算の処理は，カラー画像をグレースケール画像に変換する目的にとっては無意味であるが，（２－２）との比較により，シェーダの利用によって処理の高速化が実現できることを確認するために行う．
変数 sum の値を加算回数 num で除算して元のグレースケール値に戻し，さらに 255 を乗算したものをピクセル [ x, y ] が持つ R，G，B 値として配列 img に代入する．

（２－２）シェーダを利用した場合

以下のプログラムでは，（２－１）と同じ計算量の多い処理を GPU 上で実行する．サンプルプログラムを以下のように変更して実行する．

main_tex.cpp

/*
** メイン関数
*/
int main( int argc, char *argv[] )
{
  /* 画像の読み込み */
  if( getPPM( imgname, &imgx, &imgy, img ) != 0 ) {
    fprintf( stderr, "error: main() -> getPPM() -> %s\n", imgname );
    return( 1 );
  }

  /* 【実験】シェーダの利用による処理の高速化 （２ー１） */
  /* int num = 10000;  // 繰り返し回数
  float avg, sum;
  for( int y = 0; y < imgy; y++ ) {
    for( int x = 0; x < imgx; x++ ) {
      avg = ( ((float)img[imgx*y+x][0]/255.0)
            + ((float)img[imgx*y+x][1]/255.0)
            + ((float)img[imgx*y+x][2]/255.0) ) / 3.0;
      sum = 0.0;
      for( int n = 0; n < num; n++ ) {
        sum += avg;
      }
      img[imgx*y+x][0] = img[imgx*y+x][1] = img[imgx*y+x][2]
        = (unsigned char)( (sum/(float)num)*255.0 );
    }
  } */

  /* OpenGLの初期化 */
  glutInitWindowSize( imgx, imgy );

  ...　省略　...

  /* GLSLの初期設定 */
  init_glsl();  /* コメント記号 // を外して有効にする */

  ...　省略　...

  /* GLSLの終了設定 */
  fin_glsl();  /* コメント記号 // を外して有効にする */

  ...　省略　...

}

/*
** ウィンドウの描画
*/
static void display( void )
{
  ...　省略　...

  /* ４角形ポリゴンの描画 */
  /* ４個の頂点にテクスチャ座標を割り当てる */
  glBegin( GL_QUADS );
  // glTexCoord2d( 0.0, 0.0 );  /* コメントアウトして無効にする */
  glVertex3d( 0.0, 0.0, 0.0 );
  // glTexCoord2d( 1.0, 0.0 );  /* コメントアウトして無効にする */
  glVertex3d( (GLdouble)imgx, 0.0, 0.0 );
  // glTexCoord2d( 1.0, 1.0 );  /* コメントアウトして無効にする */
  glVertex3d( (GLdouble)imgx, (GLdouble)imgy, 0.0 );
  // glTexCoord2d( 0.0, 1.0 );  /* コメントアウトして無効にする */
  glVertex3d( 0.0, (GLdouble)imgy, 0.0 );
  glEnd();

  ...　省略　...

}

tex.frag

void main ( void )
{

  ...　省略　...

  // テクスチャの色のサンプリング
  col = texture2D( smptex, tex_st );
  
  /* 【実験】シェーダの利用による処理の高速化 （２ー２） */
  int num = 10000;  // 繰り返し回数
  float avg, sum;
  avg = ( col.r + col.g + col.b ) / 3.0;
  sum = 0.0;
  for( int n = 0; n < num; n++ ) {
    sum += avg;
  }
  col.r = col.g = col.b = (sum/float(num));

  // フラグメントの色
  gl_FragColor.rgb = col.rgb;
}

このプログラムは，（２－１）のプログラムと実質的に同じ処理を行っている．ただし，（２－１）ではOpenGLアプリケーション（main_tex.cpp）内の２重ループでピクセル [ x, y ] ごとの処理を行っていたが，（２－２）では同じ処理をフラグメントシェーダ（tex.frag）内で行う．フラグメントシェーダ内の処理は，ラスタライザによる補間で生成されたすべてのフラグメント（ピクセル）に対して実行されるため，フラグメントシェーダ内で２重ループにする必要はない．このプログラムでは，tex.frag 内で，R，G，B 値からグレースケール値への変換，ならびに，グレースケール値の num = 10000 回の加算が行われる．

（２－１）と（２－２）のプログラムの実行により，ウィンドウ内に次のように同じ画像が表示される．

元のカラー画像	（２－１） OpenGLアプリケーションのみを利用	（２－２）シェーダを利用

しかし，それぞれのプログラムの実行により，すべてのピクセル [ x, y ] のグレースケール値を num = 10000 回だけ加算するという計算量の多い処理を CPU 上で実行する（２－１）と GPU 上で実行する（２－２）では，処理時間に大きな差があることが確認できる．（２－１）では，OpenGLアプリケーション（main_tex.cpp）内の N_x × N_y = 640 × 480 回の２重ループの処理が CPU 上で実行される．一方，（２－２）では，フラグメントシェーダ（tex.frag）による GPU の利用によって，この処理がフラグメント（ピクセル）ごとに並列に実行され，高速化がなされる．

この実験では，一つの例として単純な（本質的には意味のない）加算の繰り返しを行ったが，一般に，通常は CPU 上で実行される処理をバーテックスシェーダによる頂点ごとの処理，あるいは，フラグメントシェーダによるフラグメント（ピクセル）ごとの処理にうまく置き換えることができれば，GPU の処理能力を利用して高速に実行することができる．

（３）シェーダを利用した画像処理

上で用いたサンプルプログラムを利用して，以下の画像処理を行うプログラムを作成する．

はじめにサンプルプログラムを（１－２）の状態にしてから作業を行うとよい．
テーマごとに別のファイルに作成するとよい．
次の書籍を参考にした．
- OpenGL+GLSLによる3D-CGアニメーション（酒井幸市著，工学社）
- OpenGL+GLSLによる画像処理プログラミング（酒井幸市著，工学社）

（３－１）グレースケール変換

フラグメントプログラム tex.frag を変更して，NTSC 加重平均法により元のカラー画像をグレースケール画像に変換するプログラムを作成する．

NTSC 加重平均法はカラー画像をグレースケール画像に変換する方法であり，次式によりカラー値 R, G, B をグレースケール値 Y に変換する．

$Y = 0.298912 * R + 0.586611 * G + 0.114478 * B$

これは，人間の目に自然に見えるようなグレースケール画像を生成する方法であり，日本やアメリカのテレビ放送の規格で使われている．
計算したグレースケール値を変数 gl_FragColor の r, g, b の全てに代入する．

（３－２）カラー値の反転

フラグメントプログラム tex.frag を変更して，元のカラー画像の各ピクセルの R, G, B 値を反転するプログラムを作成する．

（３－３）平滑化フィルタ

フラグメントプログラム tex.frag を変更して，元のカラー画像を平滑化するプログラムを作成する．具体的には，各ピクセル P に対して，自分を中心とする ( 2 × M + 1 ) × ( 2 × M + 1 ) 個のピクセルが持つ R, G, B 値の平均値を与える．異なる幾つかの M の値について，以下の実験を行い，結果の違いを確認する．

( 2 × M + 1 ) × ( 2 × M + 1 ) 個のピクセルが持つ R, G, B 値を単純に平均化する．

( 2 × M + 1 ) × ( 2 × M + 1 ) 個のピクセルに異なる重みを与えて加重平均化する．例えば，以下のような重みを与える．

3 × 3 ピクセル ( M = 1 )
1/10	1/10	1/10
1/10	2/10	1/10
1/10	1/10	1/10

5 × 5 ピクセル ( M = 2 )
1/65	2/65	3/65	2/65	1/65
2/65	3/65	4/65	3/65	2/65
3/65	4/65	5/65	4/65	3/65
2/65	3/65	4/65	3/65	2/65
1/65	2/65	3/65	2/65	1/65

フラグメントシェーダ（tex.frag）で周囲のフラグメント（ピクセル）の位置を参照したい場合には，フラグメント（ピクセル）座標値 gl_FragCoord を用いて，例えば，左右のピクセル位置の x 座標値は
　gl_FragCoord.x - 1.0，gl_FragCoord.x + 1.0，
上下のピクセル位置の y 座標値は
　gl_FragCoord.y - 1.0，gl_FragCoord.y + 1.0，
によって参照できる．

シェーダプログラム中で配列を使って重みを扱う場合，例えば，以下のようにする．

tex.frag

void main ( void )
{
  int i, j;
  vec4 col;                 // サンプリングしたテクスチャ色
  vec3 avg = vec3( 0.0 );   // テクスチャ色の平均値
  int m = 1;                // 平滑化するピクセルの範囲
  float w[9]                // 重み w[(2*m+1)*(2*m+1)]
    = float[9]( 0.1, 0.1, 0.1,
                0.1, 0.2, 0.1,
                0.1, 0.1, 0.1 );

  ...　省略　...

  for( j = -m; j <= m; j++ ) {
    for( i = -m; i <= m; i++ ) {

      ...　省略　...

      // 変数 col にピクセル [ i, j ] について
      // サンプリングしたテクスチャ色が入っているものとする．
      avg.rgb += ( w[(2*m+1)*(m+j)+(m+i)] * col.rgb );

      ...　省略　...

    }
  }

  ...　省略　...

  // フラグメントの色
  gl_FragColor.rgb = avg.rgb;
}

重みの与え方について，上のプログラム例のように，平滑化するピクセルの範囲を表す変数 m の値に応じて，合計が 1 となるような重みの値を直接的に書き込むことは面倒である．そこで，もっと簡単な方法で，結果的に合計が 1 となるような重みを与える方法を考えてみるとよい．

（３－４）エッジ検出フィルタ

フラグメントプログラム tex.frag を変更して，元のカラー画像のエッジ検出を行うプログラムを作成する．具体的には，ピクセル座標値 [ x, y ] のピクセル P( x, y ) について，以下の処理を行う．

ピクセル P( x, y ) を中心とする 3 × 3 個のピクセル P( x_i, y_j ) について，（３－１）のグレースケール変換を参考にして，グレースケール値 Y( x_i, y_j ) を計算する．
計算した 3 × 3 個のグレースケール値 Y( x_i, y_j ) に対して，x 方向と y 方向の微分フィルタを適用し，ピクセル P( x, y ) における微分値 Yx( x, y ) と Yy( x, y ) を求める．微分フィルタとして下の２種類を用い，（３－３）と同様の方法で 3 × 3 個の Y( x_i, y_j ) を加重平均化した値を微分値とする．なお，下の図では，横方向を x 方向，縦方向を y 方向とする．

A. プリウィット・フィルタ

-1 0 +1

-1 0 +1

-1 0 +1

x 方向の微分　

-1 -1 -1

0 0 0

+1 +1 +1

y 方向の微分

B. ソーベル・フィルタ

-1 0 +1

-2 0 +2

-1 0 +1

x 方向の微分　

-1 -2 -1

0 0 0

+1 +2 +1

y 方向の微分
微分ベクトル [ Yx( x, y ), Yy( x, y ) ] から勾配値 G( x, y ) を求め，その値をエッジ検出の結果として，ピクセル P( x, y ) の色として出力する（変数 gl_FragColor の r, g, b の全てに代入する）．勾配値 G( x, y ) を求める方法として，次の３種類を用いる．
1. ２つの微分値の絶対値のうちの大きなほう
  
  $G( x, y ) = max ( | Yx( x, y ) |, | Yy( x, y ) | )$
2. ２つの微分値の絶対値の和
  
  $G( x, y ) = | Yx( x, y ) | + | Yy( x, y ) |$
3. 微分ベクトルの大きさ
  
  G( x, y ) = sqrt( Yx( x, y )² + Yy( x, y )² )
  
  記号 sqrt は平方根をあらわす．
なお，変数 gl_FragColor の r, g, b は色値として 0.0 ～ 1.0 を有効な値とするため，求められた勾配値 G( x, y ) を係数によってスケーリングするなど，適宜，適切な明度で表示されるように工夫する．

プログラム例　（Visual Studio 2010 で作成）

元の画像の表示モデリング変換なし	（１－３）の（１－１）の場合 OpenGLアプリケーションのみを利用	（１－３）の（１－２）の場合フラグメント座標値 gl_FragCoord を利用	（１－４）の場合モデリング座標値 gl_Vertex を利用

GLSLの演習：テクスチャの利用

■ テクスチャマッピング

■ 準備

■ 演習

（１） テクスチャの基本的な利用

（１－１） OpenGLアプリケーションのみを利用したテクスチャマッピング

（１―２） シェーダを利用したテクスチャマッピング

（１－３） ４角形ポリゴンにテクスチャマッピングしていることの確認

（１－４） フラグメント（ピクセル）座標値とモデリング座標値の違い

（２） シェーダの利用による処理の高速化

（２－１） OpenGLアプリケーションのみを利用した場合

（２－２） シェーダを利用した場合

（３） シェーダを利用した画像処理

（３－１） グレースケール変換

（３－２） カラー値の反転

（３－３） 平滑化フィルタ

（３－４） エッジ検出フィルタ

（１）テクスチャの基本的な利用

（１―２）シェーダを利用したテクスチャマッピング

（１－３）４角形ポリゴンにテクスチャマッピングしていることの確認

（１－４）フラグメント（ピクセル）座標値とモデリング座標値の違い

（２）シェーダの利用による処理の高速化

（２－２）シェーダを利用した場合

（３）シェーダを利用した画像処理

（３－１）グレースケール変換

（３－２）カラー値の反転

（３－３）平滑化フィルタ

（３－４）エッジ検出フィルタ