テクスチャマッピング(Texture Mapping)

• テクスチャマッピングの基礎
• テクスチャファイル
• テクスチャバッファへの格納
• テクスチャの貼り付け
• 演習問題
• 自習問題

テクスチャマッピングの基礎

レンガのテクスチャを使ったスクリーンセーバ

1. テクスチャとなる画像を準備する


2. 準備した画像をテクスチャバッファに格納する
3. ポリゴンの幾何学的形状を指定して描画する
4. ポリゴンの描画と同時にテクスチャバッファでの座標を指定する

テクスチャファイル

テクスチャバッファへの格納

テクスチャの貼り付け

演習問題

• デジタルカメラでテクスチャにしたい画像を撮影します．この画像は後ほど使います．撮影した画像はウェブにアップしますが，作業に時間を要しますので，撮影がおわったら演習を進めて下さい．



• サンプルプログラムを用いて、テクスチャマッピングの手順を追っていきましょう。



1. 次のサンプルプログラムに目を通して下さい．以下で簡単に説明しています．
#include <GL/glut.h> #include <stdlib.h> #include <stdio.h> #define TEX_HEIGHT 16 #define TEX_WIDTH 16 static GLubyte image[TEX_HEIGHT][TEX_WIDTH][4]; void initTexture(void) { int i, j, c; for (i=0;i<TEX_HEIGHT;i++) { for (j=0;j<TEX_WIDTH;j++) { c = ( ((i&0x01)==0)^((j&0x01)==0) ); image[i][j][0]= image[i][j][1]= image[i][j][2]=c*255; image[i][j][3]=255; } } } void displayTexPolygon(void) { glEnable(GL_TEXTURE_2D); glBegin(GL_QUADS); glTexCoord2f(0.0, 0.0); glVertex3f(-5.0,-5.0, 0.0); glTexCoord2f(0.0, 1.0); glVertex3f(-5.0, 5.0, 0.0); glTexCoord2f(1.0, 1.0); glVertex3f( 5.0, 5.0, 0.0); glTexCoord2f(1.0, 0.0); glVertex3f( 5.0,-5.0, 0.0); glEnd(); glDisable(GL_TEXTURE_2D); } void display(void) { static float spin=0.0; glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT); glPushMatrix(); { glTranslatef(0.0, 0.0,-20.0); glRotatef(spin, 0.0, 1.0, 0.0); glColor3f(1.0, 1.0, 1.0); displayTexPolygon(); } spin+=1.0; glPopMatrix(); glFlush(); glutSwapBuffers(); } void init(void) { glClearColor(0.0, 0.0, 0.0, 0.0); glDepthFunc(GL_LEQUAL); glEnable(GL_DEPTH_TEST); initTexture(); glPixelStorei(GL_UNPACK_ALIGNMENT, 1); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST); glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, TEX_WIDTH, TEX_HEIGHT, 0, GL_RGBA, GL_UNSIGNED_BYTE, image); } void reshape(int w, int h) { glViewport(0, 0, (GLsizei) w, (GLsizei) h); glMatrixMode(GL_PROJECTION); glLoadIdentity(); glFrustum(-5.0, 5.0,-5.0, 5.0, 5.0, 500.0); glMatrixMode(GL_MODELVIEW); glLoadIdentity(); } int main(int argc, char** argv) { glutInit(&argc, argv); glutInitDisplayMode (GLUT_DEPTH|GLUT_DOUBLE|GLUT_RGBA); glutInitWindowSize (250, 250); glutInitWindowPosition (100, 100); glutCreateWindow (argv[0]); init(); glutIdleFunc(display); glutDisplayFunc(display); glutReshapeFunc(reshape); glutMainLoop(); return 0; }
2. テクスチャの準備

テクスチャの準備initTexture関数の中でおこなわれています． テクスチャバッファの２次元配列には，GLubyte型(unsigned char)でWIDTHｘHEIGHTｘ4個となっています．1画素にRGBAの4バイトを割り当てていることになります．テクスチャのサイズは縦横とも2の累乗になっていなければならないので，ここでは１６ｘ１６ですね．

initTexture関数の内部では、配列にチェック模様を格納していきます． 白いチェック模様を描くために，配列番号の下位１ビットで白黒を判定しています．つまり２で割り切れる場合は１，そうでなければ０をｃに代入しています．最終的に配列には０か２５５の値が代入されます．


3. テクスチャの格納

配列をテクスチャバッファに読みこみます．テクスチャの格納もプログラム初期化時にinit関数にて実行されています．

glPixelStorei()は，テクスチャバッファに格納される際の配列の並びを指定します．image[]という名前のついた配列をこれからテクスチャバッファに格納しようとするわけですが，この配列は並びが連続していますよ，という指定をしています．

glTexParameteriはテクスチャバッファを利用する際の設定をおこないます．テクスチャの反復やクランプ，拡大縮小時の描画に関する制御が可能です．

glTexImage2Dは，配列の内容をテクスチャバッファに格納する実質的なコマンドです．このコマンドでは以下の引数を持ちます． void glTexImage2D(GLenum target, GLint level, GLint component, GLsizei width, GLsizei height, GLint border, GLenum format, GLenum type, const GLvoid *pixels) 頻繁に使うパラメータはwidth,height,pixelです．width,heightはテクスチャバッファのサイズです．それぞれ2の累乗であることが必要です．pixelにはテクスチャが格納されている配列へのポインタ(ここではimage)を示します．


4. テクスチャの貼りつけ


テクスチャの切り取り，貼り付け指定は，物体の描画時におこなわれます．ここではdisplayTexPolygon()関数で行われています．

重要なのは，テクスチャマッピングを有効にするために，glEnable(GL_TEXTURE_2D)をコールすることです．glDisable(GL_TEXTURE_2D)を呼ぶとテクスチャマッピングを無効にします．この切り替えを上手にしないと，表示されるポリゴンすべてにテクスチャマッピングが適用される恐れがあります．



• サンプルプログラムをよく読んだ上でコンパイルし，実行して下さい．



• テクスチャの解像度を１６ｘ１６から６４ｘ６４に変更してみて下さい．



• テクスチャの解像度を２ｘ２に変更してみて，盤の目が粗くなることを確認して下さい．縦横に８回反復させることによって，１６ｘ１６と同じになることを確認しましょう．



• 外部ファイルを使用したテクスチャマッピングをしてみましょう．



1. 演習の冒頭で撮影した写真をここにアップします．この画像ファイルをダウンロードして下さい．



2. この画像ファイルはJPEG形式で，扱いにくいのでファイル変換します．ソフトはなんでも構いません．演習ではTGAファイルを扱いますので，TGA形式に変換して下さい．この時，解像度を縦横ともに2の累乗になるよう，変換を忘れずに．
   
   変換方法がわからない人はPhotoshop(スタート=>プログラム=>Adobe=>Photoshop5.5=>Adobe Photoshop5.5 を起動します．ダウンロードしたファイルを開くには，ファイル=>開くで構いません．解像度を変換するには，イメージ=>画像解像度です．「縦横比を固定」のチェックを外し，「画像の再サンプル」にチェックを入れ，ピクセル寸法に数値を記入します．ファイル形式を変換するには，ファイル=>別名で保存を選びます．保存時にTarga (*.TGA)を選択すれば，変換されたファイルが出力されます．(1ピクセルに何ビット割り当てるか聞いてくることもあるので，32bit(RGBA各8bit)を選びます)
   
   
3. TGAサンプル画像



4. テクスチャマッピングのプログラムを作成します．最初の課題で使用したプログラムを流用してみましょう．まず，自分の画像の解像度にあわせて， #define HEIGHT 16 #define WIDTH 16 の値を適宜変更しましょう．
   
   画像ファイルを読み込み，配列に格納するようにinitTexture関数を変更します． TGAフォーマットについては，ここに資料がありますので参考にして下さい．ファイル読み込み部の例を以下に記述しますが，なぜこうするのかは自分で解釈してください．また下の例ではファイル名が"test.tga"になっていますので自分のファイル名に変更が必要です．
   
   void initTexture(void) { FILE *fp; int x, z; /* texture file open */ if((fp=fopen("test.tga", "rb"))==NULL){ fprintf(stderr, "texture file cannot open\n"); return; } fseek(fp, 18, SEEK_SET); for(x=0;x<TEX_HEIGHT;x++){ for(z=0;z<TEX_WIDTH;z++){ image[x][z][2]=fgetc(fp);/* B */ image[x][z][1]=fgetc(fp);/* G */ image[x][z][0]=fgetc(fp);/* R */ image[x][z][3]=fgetc(fp);/* alpha */ } } fclose(fp); }



5. テクスチャ取り込み点や貼り付け点を各自で変更し，指定方法が表示にどう影響するのか，自分で試してみましょう．



6. 物体の色を変更してみましょう．テクスチャにどう影響をあたえるでしょうか．



7. 物体の形をいろいろ変更してみましょう．glutSolidTeapotは実はテクスチャマッピングに対応しています．試してみましょう．

自習問題

1. ここで勉強したOpenGLの関数は，
   
   glTexCoord2f()
   glPixelStorei()
   glTexParameteri()
   glTexImage2D()
   
   です．赤本やGLUTのマニュアルを利用して，復習しておきましょう．