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

GLSLの演習：基本的な処理

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

（１）シェーダを使わない（OpenGLアプリケーションのみ）の場合の動作を確認する．

main.cpp

/*
** 初期化
*/
static void init(void)
{
  ...　省略　...

  /* 初期設定 */
  glClearColor(1.0f, 1.0f, 1.0f, 1.0f);  /* 背景を白にする */

  ...　省略　...

  /* 光源の初期設定 */
  // glEnable(GL_LIGHTING);  /* 光源を無効化 */

  ...　省略　...

  /* シェーダプログラムの適用 */
  // glUseProgram(gl2Program);
  glUseProgram(0);  /* シェーダプログラムの適用を無効化 */
}

/*
** シーンの描画
*/
static void scene(void)
{
  static const GLfloat diffuse[] = { 0.6f, 0.1f, 0.1f, 1.0f };
  static const GLfloat specular[] = { 0.3f, 0.3f, 0.3f, 1.0f };

  /* 材質の設定 */
  glMaterialfv(GL_FRONT_AND_BACK, GL_AMBIENT_AND_DIFFUSE, diffuse);
  glMaterialfv(GL_FRONT_AND_BACK, GL_SPECULAR, specular);
  glMaterialf(GL_FRONT_AND_BACK, GL_SHININESS, 100.0f);

#if 1
  /* １枚の４角形を描く */
  glNormal3d(0.0, 0.0, 1.0);
  glBegin(GL_QUADS);
  glColor3d(1.0, 0.0, 0.0);  /* 赤 */
  glVertex3d(-1.0, -1.0,  0.0);
  glColor3d(0.0, 1.0, 0.0);  /* 緑 */
  glVertex3d( 1.0, -1.0,  0.0);
  glColor3d(0.0, 0.0, 1.0);  /* 青 */
  glVertex3d( 1.0,  1.0,  0.0);
  glColor3d(1.0, 1.0, 0.0);  /* 黄 */
  glVertex3d(-1.0,  1.0,  0.0);
  glEnd();
#else
  glutSolidTeapot(1.0);
#endif
}

OpenGLアプリケーション（main.cpp）内で glUseProgram(0); としてシェーダプログラムの適用を無効化することにより，バーテックスシェーダ simple.vert とフラグメントシェーダ simple.frag が動作しなくなる．
OpenGLアプリケーション内で４角形ポリゴンの４つの頂点に与えた赤色，緑色，青色，黄色がポリゴン内部で補間される．

（２）バーテックスシェーダとフラグメントシェーダの動作を確認する．

バーテックスシェーダ simple.vert 内の【実験１】，【実験２】，【実験３】について，それぞれ，行頭のコメント記号 // を外して実行する．

main.cpp

/*
** 初期化
*/
static void init(void)
{
  ...　省略　...

  /* 初期設定 */
  glClearColor(1.0f, 1.0f, 1.0f, 1.0f);  /* 背景を白にする */

  ...　省略　...

  /* 光源の初期設定 */
  // glEnable(GL_LIGHTING);  /* 光源を無効化 */

  ...　省略　...

  /* シェーダプログラムの適用 */
  glUseProgram(gl2Program);  /* シェーダプログラムの適用を有効化 */
}

/*
** シーンの描画
*/
static void scene(void)
{
  static const GLfloat diffuse[] = { 0.6f, 0.1f, 0.1f, 1.0f };
  static const GLfloat specular[] = { 0.3f, 0.3f, 0.3f, 1.0f };

  /* 材質の設定 */
  glMaterialfv(GL_FRONT_AND_BACK, GL_AMBIENT_AND_DIFFUSE, diffuse);
  glMaterialfv(GL_FRONT_AND_BACK, GL_SPECULAR, specular);
  glMaterialf(GL_FRONT_AND_BACK, GL_SHININESS, 100.0f);

#if 1
  /* １枚の４角形を描く */
  glNormal3d(0.0, 0.0, 1.0);
  glBegin(GL_QUADS);
  glColor3d(1.0, 0.0, 0.0);  /* 赤 */
  glVertex3d(-1.0, -1.0,  0.0);
  glColor3d(0.0, 1.0, 0.0);  /* 緑 */
  glVertex3d( 1.0, -1.0,  0.0);
  glColor3d(0.0, 0.0, 1.0);  /* 青 */
  glVertex3d( 1.0,  1.0,  0.0);
  glColor3d(1.0, 1.0, 0.0);  /* 黄 */
  glVertex3d(-1.0,  1.0,  0.0);
  glEnd();
#else
  glutSolidTeapot(1.0);
#endif
}

simple.vert

void main(void)
{
  // 頂点位置
  gl_Position = gl_ModelViewProjectionMatrix * gl_Vertex;

  // 頂点色
  gl_FrontColor = vec4(1.0, 0.0, 0.0, 1.0);  /* 【実験１】直接的に与えた色（赤） */
  // gl_FrontColor = gl_Color;  /* 【実験２】OpenGLアプリケーションから渡された色 */
  // gl_FrontColor = vec4(1.0) - gl_Color;  /* 【実験３】OpenGLアプリケーションから渡された色の反転色 */
}

simple.frag

void main (void)
{
  // フラグメントの色
  // gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
  gl_FragColor = gl_Color;  /* バーテックスシェーダから渡された色 */
}

バーテックスシェーダ（simple.vert）では，頂点の色を vec4 型の変数 gl_FrontColor に与えることができる．ここで，vec4 型は４次元ベクトルをあらわす変数の型であり，色を扱う場合には R(Red)，G(Green)，B(Blue)，A(Alpha) の４つの要素を与える．それぞれの色要素は 0.0 から 1.0 の範囲の値をとる．

フラグメントシェーダ（simple.frag）では，バーテックスシェーダから（ラスタライザを介して）渡された色を vec4 型の変数 gl_Color によって参照できる（gl_FrontColor ではない）．出力画像に表示する色を vec4 型の変数 gl_FragColor に代入する．ただし，前述したように，図形の重なりによって，１つのピクセルに対して複数のフラグメントが存在する場合には，最終的に最も視点に近い（つまり，最も奥行き値（デプス値，Ｚ値）が小さな）フラグメントが表示される．

【実験１】　OpenGLアプリケーション（main.cpp）内で４角形ポリゴンの頂点に与えた色は無効となり，バーテックスシェーダ（simple.vert）内で vec4(1.0, 0.0, 0.0, 1.0) によって直接的に与えた色（赤）が有効となる．
【実験２】　バーテックスシェーダ（simple.vert）内では，OpenGLアプリケーション内で頂点に与えた色を vec4 型の変数 gl_Color によって参照できる．この実験では，変数 gl_FrontColor に変数 gl_Color の色をそのまま代入している．
【実験３】　vec4(1.0) は vec4(1.0, 1.0, 1.0, 1.0) をあらわす． OpenGLアプリケーション内で頂点に与えた色 gl_Color の値を vec4(1.0) から引いた値を gl_FrontColor に与えることで，それぞれの色要素の値が反転する．

（３）バーテックスシェーダでユーザ定義変数（uniform変数）を使う．

バーテックスシェーダ simple.vert 内の【実験１】，【実験２】について，それぞれ，行頭のコメント記号 // を外して実行する．それぞれの場合で，マウスによって４角形ポリゴンを回転させ，ポリゴンの色を観察する．

main.cpp

/*
** 初期化
*/
static void init(void)
{
  ...　省略　...

  /* 初期設定 */
  glClearColor(1.0f, 1.0f, 1.0f, 1.0f);  /* 背景を白にする */

  ...　省略　...

  /* 光源の初期設定 */
  // glEnable(GL_LIGHTING);  /* 光源を無効化 */

  ...　省略　...

  /* シェーダプログラムの適用 */
  glUseProgram(gl2Program);
}

/*
** シーンの描画
*/
static void scene(void)
{
  static const GLfloat diffuse[] = { 0.6f, 0.1f, 0.1f, 1.0f };
  static const GLfloat specular[] = { 0.3f, 0.3f, 0.3f, 1.0f };

  /* バーテックスシェーダに渡す値 */
  float valVertC = 0.0;
  GLint valVertLoc;

  /* バーテックスシェーダに値を渡す */
  valVertLoc = glGetUniformLocation(gl2Program, "valVert");
  glUniform1f(valVertLoc, valVertC);

  /* 材質の設定 */
  glMaterialfv(GL_FRONT_AND_BACK, GL_AMBIENT_AND_DIFFUSE, diffuse);
  glMaterialfv(GL_FRONT_AND_BACK, GL_SPECULAR, specular);
  glMaterialf(GL_FRONT_AND_BACK, GL_SHININESS, 100.0f);

#if 1
  /* １枚の４角形を描く */
  glNormal3d(0.0, 0.0, 1.0);
  glBegin(GL_QUADS);
  glColor3d(1.0, 0.0, 0.0);  /* 赤 */
  glVertex3d(-1.0, -1.0,  0.0);
  glColor3d(0.0, 1.0, 0.0);  /* 緑 */
  glVertex3d( 1.0, -1.0,  0.0);
  glColor3d(0.0, 0.0, 1.0);  /* 青 */
  glVertex3d( 1.0,  1.0,  0.0);
  glColor3d(1.0, 1.0, 0.0);  /* 黄 */
  glVertex3d(-1.0,  1.0,  0.0);
  glEnd();
#else
  glutSolidTeapot(1.0);
#endif
}

simple.vert

uniform float valVert;  /* OpenGLアプリケーションから渡される値を格納する変数 */

void main(void)
{
  // 頂点位置
  gl_Position = gl_ModelViewProjectionMatrix * gl_Vertex;

  // 頂点色
  if( gl_Vertex.x < valVert ) {  /* 【実験１】モデリング座標値 gl_Vertex と比較 */
  // if( gl_Position.x < valVert ) {  /* 【実験２】クリッピング座標値 gl_Position と比較 */
    gl_FrontColor = vec4(1.0, 0.0, 0.0, 1.0);  /* 赤 */
  }
  else {
    gl_FrontColor = vec4(0.0, 1.0, 0.0, 1.0);  /* 緑 */
  }
}

simple.frag

void main (void)
{
  // フラグメントの色
  // gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
  gl_FragColor = gl_Color;  /* バーテックスシェーダから渡された色 */
}

OpenGLアプリケーション（main.cpp）からバーテックスシェーダ（simple.vert）に頂点ごとに変化しない値を渡したい場合には uniform 変数を用いる．このとき，まず，バーテックスシェーダ内で uniform 変数を定義する．上記のプログラムでは，simple.vert 内で
　uniform float valVert;
を定義している．この変数に main.cpp から値を渡したい場合，直接的に値を代入することはできない．上記の main.cpp 内で行っているように，関数 glGetUniformLocation と glUniform1f を用いた手続きによって代入を行う．上記の main.cpp 内では，まず，通常の変数に
　float valVertC = 0.0;
のように値 0.0 を代入しておき，その手続きに従って simple.vert 内の uniform 変数 valVert にその値を代入している．

上記の simple.vert 内では，【実験１】，【実験２】として，main.cpp から uniform 変数 valVert に渡された値 0.0 を用いた処理を行っている．具体的には，４角形ポリゴンの各頂点の x 座標の値を valVert の値 0.0 と比較して，各頂点に異なる色を与えている．つまり，頂点の x 座標が負であれば赤色，非負（０，または，正）であれば緑色を与えている．ただし，実験１と実験２では，頂点の x 座標の種類が異なる．プログラムを実行し，マウスによって４角形ポリゴンを左回りに９０度だけ回転した結果を下図に示す．

	①	→	②	→	③	→	④
説明図		→		→		→
実験１		→		→		→
実験２		→		→		→

【実験１】では，頂点の座標値として vec4 型の変数であるモデリング座標値 gl_Vertex を用いている．これは main.cpp 内で４角形ポリゴンを定義する際に用いたモデリング座標系における座標値であり，４角形ポリゴンに貼りついた座標系であると考えてよい．上の説明図では，灰色であらわした４角形ポリゴンに貼りついた [ x_v, y_v ] である．この実験では，モデリング座標値 gl_Vertex.x，つまり，４角形ポリゴンに貼りついた x 座標値 x_v によって各頂点に色が与えられるので，常に，頂点 V₀₀ と V₀₁ に赤色，頂点 V₁₀ と V₁₁ に緑色が与えられる．よって，４角形ポリゴンを回転しても，４角形ポリゴン上の色が固定されている．

【実験２】では，頂点の座標値として vec4 型の変数であるクリッピング座標値 gl_Position を用いている．これはウィンドウに貼りついた座標系であり，上の説明図では [ x_p, y_p ] であらわされ，その範囲は -1 ≤ x_p ≤ 1，-1 ≤ y_p ≤ 1 である．この実験では，クリッピング座標値 gl_Position.x，つまり，ウィンドウに貼りついた x 座標値 x_p によって各頂点に色が与えられるので，上図では，①と②では頂点 V₀₀ と V₀₁ に赤色，頂点 V₁₀ と V₁₁ に緑色が与えられるが，②→③の過程で頂点 V₀₀ と V₁₁ の x 座標値 x_p の正負が変化するため，③と④では頂点 V₀₁ と V₁₁ に赤色，頂点 V₀₀ と V₁₀ に緑色が与えられる．つまり，４角形ポリゴンの回転による頂点の位置の変化により，４角形ポリゴン上の色が変化する．

（４）フラグメントシェーダでユーザ定義変数（uniform変数）を使う．

以下のプログラムを実行し，マウスによって４角形ポリゴンを回転させ，ポリゴンの色を観察する．

main.cpp

/*
** 初期化
*/
static void init(void)
{
  ...　省略　...

  /* 初期設定 */
  glClearColor(1.0f, 1.0f, 1.0f, 1.0f);  /* 背景を白にする */

  ...　省略　...

  /* 光源の初期設定 */
  // glEnable(GL_LIGHTING);  /* 光源を無効化 */

  ...　省略　...

  /* シェーダプログラムの適用 */
  glUseProgram(gl2Program);
}

/*
** シーンの描画
*/
static void scene(void)
{
  static const GLfloat diffuse[] = { 0.6f, 0.1f, 0.1f, 1.0f };
  static const GLfloat specular[] = { 0.3f, 0.3f, 0.3f, 1.0f };

  /* フラグメントシェーダに渡す値 */
  float valFragC = 150.0;
  GLint valFragLoc;

  /* フラグメントシェーダに値を渡す */
  valFragLoc = glGetUniformLocation(gl2Program, "valFrag");
  glUniform1f(valFragLoc, valFragC);

  /* 材質の設定 */
  glMaterialfv(GL_FRONT_AND_BACK, GL_AMBIENT_AND_DIFFUSE, diffuse);
  glMaterialfv(GL_FRONT_AND_BACK, GL_SPECULAR, specular);
  glMaterialf(GL_FRONT_AND_BACK, GL_SHININESS, 100.0f);

#if 1
  /* １枚の４角形を描く */
  glNormal3d(0.0, 0.0, 1.0);
  glBegin(GL_QUADS);
  glColor3d(1.0, 0.0, 0.0);  /* 赤 */
  glVertex3d(-1.0, -1.0,  0.0);
  glColor3d(0.0, 1.0, 0.0);  /* 緑 */
  glVertex3d( 1.0, -1.0,  0.0);
  glColor3d(0.0, 0.0, 1.0);  /* 青 */
  glVertex3d( 1.0,  1.0,  0.0);
  glColor3d(1.0, 1.0, 0.0);  /* 黄 */
  glVertex3d(-1.0,  1.0,  0.0);
  glEnd();
#else
  glutSolidTeapot(1.0);
#endif
}

simple.vert

void main(void)
{
  // 頂点位置
  gl_Position = gl_ModelViewProjectionMatrix * gl_Vertex;
}

simple.frag

uniform float valFrag;  /* OpenGLアプリケーションから渡される値を格納する変数 */

void main (void)
{
  // フラグメントの色
  // gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
  if( gl_FragCoord.x < valFrag ) {  /* フラグメント（ピクセル）座標値 gl_FragCoord と比較 */
    gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);  /* 黄 */
  }
  else {
    gl_FragColor = vec4(1.0, 0.0, 1.0, 1.0);  /* 紫 */
  }
}

OpenGLアプリケーション（main.cpp）からフラグメントシェーダ（simple.frag）にフラグメント（ピクセル）ごとに変化しない値を渡したい場合には uniform 変数を用いる．その方法はバーテックスシェーダ（simple.vert）の場合と同様である．上記のプログラムでは，simple.frag 内で
　uniform float valFrag;
を定義している． main.cpp 内では，通常の変数に
　float valFragC = 150.0;
のように値 150.0 を代入しておき，バーテックスシェーダの場合と同様の手続きに従って simple.frag 内の uniform 変数 valFrag にその値を代入している．

プログラムを実行し，マウスによって４角形ポリゴンを左回りに９０度だけ回転した結果を下図に示す．上記の simple.frag 内では，main.cpp から uniform 変数 valFrag に渡された値 150.0 を用いた処理を行っている．具体的には，４角形ポリゴンの各フラグメントの x 座標の値を valFrag の値 150.0 と比較して，各フラグメントに異なる色を与えている．ここでは，フラグメントの座標値として vec4 型の変数であるフラグメント（ピクセル）座標値 gl_FragCoord を用いている．これはウィンドウ内のフラグメント（ピクセル）の位置をあらわす座標系であり，下の説明図では [ x_f, y_f ] であらわされる．ウィンドウ内のピクセル数が N_x × N_y の場合，その範囲は 0 ≤ x_f ≤ N_x，0 ≤ y_f ≤ N_y である．フラグメント（ピクセル）の位置が [ 0, 0 ] の場合に [ x_f, y_f ] = [ 0.5, 0.5 ]，[ N_x-1, N_y-1 ] の場合に [ x_f, y_f ] = [ N_x-0.5, N_y-0.5 ] となる．このプログラムでは，フラグメント座標値 gl_FragCoord.x，つまり，ウィンドウ内のフラグメントの x 座標値 x_f が valFrag = 150.0 より小さければ黄色，それ以上であれば紫色が与えられる．このプログラムでは，ウィンドウのサイズを指定していないため，ウィンドウ内のピクセル数はデフォルトの 300 × 300 である．よって，４角形ポリゴンの回転に関わらず，４角形ポリゴンの領域のうち，ウィンドウ内で左半分に含まれる領域は黄色，右半分に含まれる領域は紫色となる．なお，（３）の実験では，バーテックスシェーダ（simple.vert）内で４角形ポリゴンの各頂点に色を与えたため，ウィンドウに表示される４角形ポリゴン内の色は４つの頂点の色を（ラスタライザを介して）滑らかに補間した色となる．一方，この（４）の実験では，フラグメントシェーダ（simple.frag）内で各フラグメント（ピクセル）に色を与えるため，上記のフラグメント座標値の条件により，ウィンドウに表示される４角形ポリゴン内の色がはっきりと分かれる．

	①	→	②	→	③	→	④
説明図		→		→		→
実験		→		→		→

（５）バーテックスシェーダとフラグメントシェーダでユーザ定義変数（varying変数）を使う．

main.cpp

/*
** 初期化
*/
static void init(void)
{
  ...　省略　...

  /* 初期設定 */
  glClearColor(1.0f, 1.0f, 1.0f, 1.0f);  /* 背景を白にする */

  ...　省略　...

  /* 光源の初期設定 */
  // glEnable(GL_LIGHTING);  /* 光源を無効化 */

  ...　省略　...

  /* シェーダプログラムの適用 */
  glUseProgram(gl2Program);
}

/*
** シーンの描画
*/
static void scene(void)
{
  static const GLfloat diffuse[] = { 0.6f, 0.1f, 0.1f, 1.0f };
  static const GLfloat specular[] = { 0.3f, 0.3f, 0.3f, 1.0f };

  /* フラグメントシェーダに渡す値 */
  float valFragC = 150.0;
  GLint valFragLoc;

  /* フラグメントシェーダに値を渡す */
  valFragLoc = glGetUniformLocation(gl2Program, "valFrag");
  glUniform1f(valFragLoc, valFragC);

  /* 材質の設定 */
  glMaterialfv(GL_FRONT_AND_BACK, GL_AMBIENT_AND_DIFFUSE, diffuse);
  glMaterialfv(GL_FRONT_AND_BACK, GL_SPECULAR, specular);
  glMaterialf(GL_FRONT_AND_BACK, GL_SHININESS, 100.0f);

#if 1
  /* １枚の４角形を描く */
  glNormal3d(0.0, 0.0, 1.0);
  glBegin(GL_QUADS);
  glColor3d(1.0, 0.0, 0.0);  /* 赤 */
  glVertex3d(-1.0, -1.0,  0.0);
  glColor3d(0.0, 1.0, 0.0);  /* 緑 */
  glVertex3d( 1.0, -1.0,  0.0);
  glColor3d(0.0, 0.0, 1.0);  /* 青 */
  glVertex3d( 1.0,  1.0,  0.0);
  glColor3d(1.0, 1.0, 0.0);  /* 黄 */
  glVertex3d(-1.0,  1.0,  0.0);
  glEnd();
#else
  glutSolidTeapot(1.0);
#endif
}

simple.vert

varying float addxy;  /* フラグメントシェーダに渡す値を格納する変数 */

void main(void)
{
  // 頂点位置
  gl_Position = gl_ModelViewProjectionMatrix * gl_Vertex;

  // フラグメントシェーダに渡す値
  addxy = ( ( gl_Vertex.x + gl_Vertex.y ) + 2.0 ) / 4.0;  /* 【実験１】モデリング座標値 gl_Vertex を利用 */
  // addxy = ( ( gl_Position.x + gl_Position.y ) + 2.0 ) / 4.0;  /* 【実験２】クリッピング座標値 gl_Position を利用 */
}

simple.frag

uniform float valFrag;  /* OpenGLアプリケーションから渡される値を格納する変数 */
varying float addxy;  /* バーテックスシェーダから渡される値を格納する変数 */

void main (void)
{
  // フラグメントの色
  // gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
  if( gl_FragCoord.x < valFrag ) {  /* ピクセル座標値 gl_FragCoord と比較 */
    gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0) * addxy;  /* 黄 */
  }
  else {
    gl_FragColor = vec4(1.0, 0.0, 1.0, 1.0) * addxy;  /* 紫 */
  }
}

頂点ごとに異なる値について，バーテックスシェーダ（simple.vert）からフラグメントシェーダ（simple.frag）に値を渡したい場合には varying 変数を用いる．バーテックスシェーダが持つ頂点ごとの値がスクリーン上でラスタライズ（補間）されてフラグメント（ピクセル）ごとの値に変換され，フラグメントシェーダに渡される．この場合，バーテックスシェーダとフラグメントシェーダで同じ型と名前の varying 変数を定義する．上記のプログラムでは，simple.vert と simple.frag で
　varying float addxy;
を定義している． simple.vert 内で各頂点に与える値を変数 addxy に代入し，その値がラスタライズされてフラグメントごとの値に変換され，simple.frag 内の変数 addxy に渡される．

上記の simple.vert 内では，【実験１】，【実験２】として，頂点の x, y 座標値から
　addxy = ( ( x + y ) + 2.0 ) / 4.0;
のように値を求めて変数 addxy に代入している．それぞれの座標値の範囲を -1 ≤ x ≤ 1，-1 ≤ y ≤ 1 とすると，この範囲の四隅における変数 addxy の値は以下のようになる．

y	1	0.5	1.0
y	-1	0.0	0.5
		-1	1
		x

このプログラムの基本的な処理は（４）の実験と全く同じである．すなわち，OpenGLアプリケーション（main.cpp）からフラグメントシェーダ（simple.frag）にフラグメント（ピクセル）ごとに変化しない値を uniform 変数を用いて渡し，その値を利用してウィンドウ内のフラグメント（ピクセル）の位置に応じて４角形ポリゴンに色を与えている．具体的には，simple.frag 内の処理として，フラグメント座標値 gl_FragCoord.x と uniform 変数 valFrag = 150.0 の値を比較することで，４角形ポリゴンの回転に関わらず，４角形ポリゴンの領域のうち，ウィンドウ内で左半分に含まれる領域には黄色，右半分に含まれる領域には紫色が与えられる．（５）の実験では，この黄色と紫色に対して，変数 addxy の値を乗算した色を表示する．変数 addxy の値は，色の明暗を決める役割を果たす．上の表からわかるように，頂点の x, y 座標値に応じて，[ x, y ] = [ -1, -1 ] に近い位置では暗くなり，[ x, y ] = [ 1, 1 ] に近い位置では明るくなる．ただし，実験１と実験２では，（３）の実験と同様に，頂点の x, y 座標の種類が異なる．プログラムを実行し，マウスによって４角形ポリゴンを左回りに９０度だけ回転した結果を下図に示す．

	①	→	②	→	③	→	④
説明図		→		→		→
実験１		→		→		→
実験２		→		→		→

【実験１】では，頂点の座標値 [ x, y ] としてモデリング座標値 gl_Vertex を用いている．これは４角形ポリゴンに貼りついた座標系であり，上の説明図中の [ x_v, y_v ] である．また，main.cpp 内で４角形ポリゴンを定義する際に各頂点に与えているモデリング座標値から，その範囲は -1 ≤ x_v ≤ 1，-1 ≤ y_v ≤ 1 である．この実験では，モデリング座標値 gl_Vertex.x，gl_Vertex.y，つまり，４角形ポリゴンに貼りついた座標値 [ x_v, y_v ] によって各頂点に変数 addxy による明暗が与えられるので，常に，頂点 V₀₀ に近い位置では暗くなり，V₁₁ に近い位置では明るくなる．よって，４角形ポリゴンを回転しても，４角形ポリゴン上の明暗が固定されている．

【実験２】では，頂点の座標値 [ x, y ] としてクリッピング座標値 gl_Position を用いている．これはウィンドウに貼りついた座標系であり，上の説明図中の [ x_p, y_p ] であり，その範囲は -1 ≤ x_p ≤ 1，-1 ≤ y_p ≤ 1 である．この実験では，クリッピング座標値 gl_Position.x，gl_Position.y，つまり，ウィンドウに貼りついた座標値 [ x_p, y_p ] によって各頂点に変数 addxy による明暗が与えられるので，ウィンドウの左下に近い頂点には暗い値，右上に近い頂点には明るい値が与えられる．つまり，４角形ポリゴンの回転による頂点の位置の変化により，４角形ポリゴン上の明暗が変化する．

GLSLの演習：基本的な処理

（１） シェーダを使わない（OpenGLアプリケーションのみ）の場合の動作を確認する．

（２） バーテックスシェーダとフラグメントシェーダの動作を確認する．

（３） バーテックスシェーダでユーザ定義変数（uniform変数）を使う．

（４） フラグメントシェーダでユーザ定義変数（uniform変数）を使う．

（５） バーテックスシェーダとフラグメントシェーダでユーザ定義変数（varying変数）を使う．

（１）シェーダを使わない（OpenGLアプリケーションのみ）の場合の動作を確認する．

（２）バーテックスシェーダとフラグメントシェーダの動作を確認する．

（３）バーテックスシェーダでユーザ定義変数（uniform変数）を使う．

（４）フラグメントシェーダでユーザ定義変数（uniform変数）を使う．

（５）バーテックスシェーダとフラグメントシェーダでユーザ定義変数（varying変数）を使う．