OpenGLでテクスチャを実装しようとすると画像にノイズが入ります

Question

###前提・実現したいこと
OpenGLを使って簡単なCGを作っています。
2つアニメーションを実装している立方体があるうち、中心の立方体の6面にストラクチャを貼ろうとしたところ、実行時エラーが発生しました。
試しに、1つのポリゴンを表示するようにしているところです。

###発生している問題・エラーメッセージ
テクスチャの画像に下の実行結果のようなノイズが入ってしまう。

###該当のソースコード

#include <stdio.h>
#include <GLUT/glut.h>
#include <stdlib.h>

#define KEY_ESC 27

/*Gold*/
float diffuse[]={0.7, 0.6, 0.2, 1.0};     //拡散反射成分(R,G,B,A強度0.0〜1.0)
float specular[]={0.6, 0.5, 0.4, 1.0};    //鏡面反射成分(R,G,B,A強度0.0〜1.0)
float ambient[]={0.3,0.2,0.1,1.0};        //環境光反射成分(R,G,B,A強度0.0〜1.0)
float shininess=10.0;                    //鏡面光の鋭さ(0.0〜128.0)

double param_big = 0.0;
double param_small = 0.5;

/* Texture */
#define TEXWIDTH 256
#define TEXHEIGHT 256
//#define TEXWIDTH 512
//#define TEXHEIGHT 512
static const char texture1[] = "./image01.data";
//static const char texture2[] = "sample.data";

void myKbd(unsigned char key,int x, int y){
  if(key==KEY_ESC)exit(0);
}
void texture_map(void){
    // --------- テクスチャマッピング開始 -------------
    glEnable(GL_TEXTURE_2D);
    glNormal3d(0.0,0.0,1.0);  //法線ベクトルの設定
    glBegin(GL_QUADS);
    glTexCoord2d(0,1); glVertex3d(-1,-1,0);   //左下
    glTexCoord2d(1,1); glVertex3d(1,-1,0);    //左上
    glTexCoord2d(1,0); glVertex3d(1,1,0);     //右上
    glTexCoord2d(0,0); glVertex3d(-1,1,0);    //右下
    //上面
//    glTexCoord2d(0.0,1); glVertex3d(0.0,0.0,0.0);   //左下
//    glTexCoord2d(0.0,0.0); glVertex3d(1,0.0,0);    //左上
//    glTexCoord2d(1,0.0); glVertex3d(1,0,-1);     //右上
//    glTexCoord2d(1,1); glVertex3d(0,0.0,-1);    //右下
    //底面
//    glTexCoord2d(0.0,0.5); glVertex3d(0,-0.5,0);   //左下
//    glTexCoord2d(0.0,0.0); glVertex3d(0,-0.5,-0.5);    //左上
//    glTexCoord2d(0.5,0.0); glVertex3d(0.5,-0.5,-0.5);     //右上
//    glTexCoord2d(0.5,0.5); glVertex3d(0.5,-0.5,0.0);    //右下
//    //左側
//    glTexCoord2d(0.0,0.5); glVertex3d(0.0,-0.5,0.0);   //左下
//    glTexCoord2d(0.0,0.0); glVertex3d(0.0,0.0,0.0);    //左上
//    glTexCoord2d(0.5,0.0); glVertex3d(0.0,0.0,-0.5);     //右上
//    glTexCoord2d(0.5,0.5); glVertex3d(0.0,-0.5,-0.5);    //右下
//    //奥側
//    glTexCoord2d(0.0,0.5); glVertex3d(0.0,-0.5,-0.5);   //左下
//    glTexCoord2d(0.0,0.0); glVertex3d(0.0,0.0,-0.5);    //左上
//    glTexCoord2d(0.5,0.0); glVertex3d(0.5,0.0,-0.5);     //右上
//    glTexCoord2d(0.5,0.5); glVertex3d(0.5,-0.5,-0.5);    //右下
//    //右側
//    glTexCoord2d(0.0,0.5); glVertex3d(0.5,-0.5,0.0);   //左下
//    glTexCoord2d(0.0,0.0); glVertex3d(0.5,0.0,0.0);    //左上
//    glTexCoord2d(0.5,0.0); glVertex3d(0.5,0,-0.5);     //右上
//    glTexCoord2d(0.5,0.5); glVertex3d(0.5,-0.5,-0.5);    //右下
//    //手前側
//    glTexCoord2d(0.0,0.5); glVertex3d(0.0,-0.5,0.0);   //左下
//    glTexCoord2d(0.0,0.0); glVertex3d(0.0,0.0,0.0);    //左上
//    glTexCoord2d(0.5,0.0); glVertex3d(0.5,0.0,0.0);     //右上
//    glTexCoord2d(0.5,0.5); glVertex3d(0.5,-0.5,0.0);    //右下
    glEnd();
    glDisable(GL_TEXTURE_2D);
    // --------- テクスチャマッピング終了 -------------
}
void display(void){        // ディスプレイコールバック関数

  // -------いつも必要な関数----------------
  glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);     //デプスバッファの設定（隠面消去のため）
  glEnable(GL_DEPTH_TEST);
  glPushMatrix();
  // ------------------------------------

  gluLookAt(3.0, 3.0, 5.0,      // 視点の位置
            0.0, 0.0, 0.0,      // 見たいものの位置
            0.0, 1.0, 0.0);     // 画像のどこが上なのかを指定(ベクトル)
  glColor4f(0.0,0.0,0.0,1.0);

  // --------- 外側の直方体　回転 ------------------
  glPushMatrix();                             //現在の座標系を保存
  glRotatef(45.0*(float)param_big,1.0,0.0,0.0);       //座標系をy軸周りに(45 × i)度回転


  glPushMatrix();                             //回転した状態の座標系を保存
  glTranslatef(0.0,0.0,-1.0);                    //座標系を平行移動

  //課題2
  glPushMatrix();                             //現在の座標系を保存
  glRotatef(-45.0*(float)param_big,1.0,0.0,0.0);       //座標系をy軸周りに(45 × i)度回転
  // --------------------------------------------

  //立方体の描画（外側）
  glLineWidth(2.0);
  glutWireCube(2.0);

  glPopMatrix();                              //平行移動前の座標系を復元
  glPopMatrix();                              //平行移動も回転もしていない元の座標系を復元
  glPopMatrix();

  // 照明をON
  // glEnable(GL_LIGHT0);
  // glEnable(GL_LIGHTING);

  //表面属性の設定
  glMaterialfv(GL_FRONT,GL_DIFFUSE,diffuse);
  glMaterialfv(GL_FRONT,GL_SPECULAR,specular);
  glMaterialfv(GL_FRONT,GL_AMBIENT,ambient);
  glMaterialf(GL_FRONT,GL_SHININESS,shininess);
    

  // ------ 中心の直方体 回転 -----------
  glPushMatrix();                             //現在の座標系を保存
  glRotatef(-45.0*(float)param_small,1.0,0.0,0.0);       //座標系をy軸周りに(45 × i)度回転


  glPushMatrix();                             //回転した状態の座標系を保存
  glTranslatef(0.0,0.0,-1.0);                 //座標系を平行移動

  glPushMatrix();                             //現在の座標系を保存
  glRotatef(45.0*(float)param_small,1.0,0.0,0.0);       //座標系をy軸周りに(45 × i)度回転
  // ----------------------------
    
  texture_map();

  glPopMatrix();                              //平行移動前の座標系を復元
  glPopMatrix();                              //平行移動も回転もしていない元の座標系を復元
  glPopMatrix();

  glPopMatrix();      //座標系の復帰
  glDisable(GL_DEPTH_TEST);   //デプスバッファ更新を無効にする（隠面消去OFF）
  glutSwapBuffers();
}
void myReshape(int width, int height){
  double aspect = (double)width/(double)height;

  glViewport(0,0,width,height);
  glMatrixMode(GL_PROJECTION);
  glLoadIdentity();
  gluPerspective(30.0,aspect,1.0,100.0);    //透視投影の設定
  glMatrixMode(GL_MODELVIEW);
}

void myMouse(int button,int state, int x,int y){   //マウスコールバック関数
  if(state == GLUT_DOWN){
    switch(button){
      case GLUT_LEFT_BUTTON:
        exit(-1);break;
    }
  }
}
void init(char *progname){        //初期化関数
  int width = 500, height = 500;

  glutInitWindowPosition(0,0);
  glutInitWindowSize(width,height);
  glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGBA | GLUT_DEPTH);    //デプスバッファの設定（隠面消去のため）
  glutCreateWindow(progname);
  glClearColor(1.0,1.0,1.0,1.0);
    
//テクスチャ画像の読み込み
GLubyte texture[TEXHEIGHT][TEXWIDTH][3];
FILE *fp;
if((fp=fopen("./image01.data","rb")) != NULL){
    fread(texture, sizeof texture, 1,fp);
    fclose(fp);
}else{
    // 任意のエラー処理を記述
    perror(texture1);
}
glPixelStorei(GL_UNPACK_ALIGNMENT,1); //アライメント(データの格納方法)の設定

glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, TEXWIDTH, TEXHEIGHT, 0,
             GL_RGB, GL_UNSIGNED_BYTE, texture);   //画像データをテクスチャメモリにセットする

//テクスチャパラメータの設定(テクスチャマッピングの拡大・縮小法の設定)
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST);

//テクスチャの合成環境の設定(ポリゴンの陰影等をテクスチャに反映する等の設定)
glTexEnvf(GL_TEXTURE_ENV,GL_TEXTURE_ENV_MODE,GL_REPLACE);
}

void idle(void){
  param_big +=0.1;
  param_small += 0.05;
  glutPostRedisplay();
}

int main(int argc,char *argv[]){      //メイン関数
  glutInit(&argc,argv);

  init(argv[0]);
  glutReshapeFunc(myReshape);
  glutDisplayFunc(display);
  glutKeyboardFunc(myKbd);
  glutMouseFunc(myMouse);
  //課題3
  glutIdleFunc(idle);
  glutMainLoop();

  return 0;
}

実行結果

###補足情報(言語/FW/ツール等のバージョンなど)
C言語

Answer 1

init関数内で、windowを作成する前にテクスチャ描画部分を呼び出していたため、エラーが出ていました。記述順を変えると実行できました。

Comments

[Bongo]

動きましたか!あとはテクスチャ座標をうまく設定して、各面に意図通りの絵を貼る作業ですね。ご不明点がありましたら、私の分かる範囲であればなるべくお力になりたいと思います。

※今はコメントアウトされているようですが、今後照明効果も加えるようでしたら、立方体の各面ごとに正しく法線を設定してやる必要があるでしょう。現状では全頂点の法線が(0.0,0.0,1.0)になっており、陰影がおかしくなってしまうかと思います。

[motyaa]

ご返信ありがとうございます。
実行は成功したのですが、ポリゴンに対してテクスチャにノイズが入って出力されてしまいます。
また、法線ベクトルについてかしこまりました。ここで上面の法線ベクトルは上向きだからy=1.0だという考えで間違えないでしょうか？

[Bongo]

はい、法線ベクトルの件についてはその解釈で問題ないかと思います(同じく、底面なら(0.0, -1.0, 0.0)、左面なら(-1.0, 0.0, 0.0)、奥面なら(0.0, 0.0, -1.0)...)。
glNormal3dやglTexCoord2dは、一度実行すれば次にglNormal3d、glTexCoord2dを実行するまで同じ値が維持されるはずですので、glNormal3dは各面ごとに一回ずつ(「//上面」、「//底面」...のコメントの次の行にでも)設定してやれば充分かと思います。

テクスチャにノイズが入る現象ですが、もしかしてご質問者さんの場合、テクスチャデータファイルをGIMPで作成されていませんでしょうか?
といいますのも、「床井研究室 - 第1回 画像の読み込み」(http://marina.sys.wakayama-u.ac.jp/~tokoi/?date=20040913 )の一番下、コメント欄でのやりとりを見ますと、どうもGIMPが出力するファイルはRGBAの4チャンネルになってしまうらしいのです。
もしこの状況に該当しそうであれば、コメント欄のお返事にあるように、読み込み元ピクセルフォーマットをGL_RGBAに変更するとどうなるか試してみてください。

[motyaa]

お返事大変ありがとうございます。おっしゃる通り、画像はGIMPでエクスポート致しましたが、出力はRGBの3値で出力したため、問題ないと思ったのですがうまく描画されません。
また、この画像を使えば問題ないと言われて渡された画像に変更して実行して見たのですが同じ結果となりました。

[Bongo]

なるほど...サイトの方のコメントですと、RGBで出力してもRGBAになってしまうらしいのですが、念のためファイルサイズを確認していただけませんか?
正しくRGBのみになっていれば(幅256×高さ256×3チャンネル)÷1024 = 192KB、もしRGBAになってしまっていれば(幅256×高さ256×4チャンネル)÷1024 = 256KBになると予想されます。

しかし、「正しく表示されるはず」との画像までおかしくなっているということは、原因はファイルではないのかもしれませんね...
そのおかしな表示というのはどのようなものでしょうか。ノイズの入り方は、元の画像であることが分かるレベルなのか、あるいは砂嵐状で意味不明な見た目になってしまうのか...このあたりもヒントになるかもしれません。

その他試してみることとして思いつくのは、ピクセル内部フォーマットをちゃんとサイズ指定付きのものに変えてみる...とかですかね。
glTexImage2Dの3番目の引数を変えて、glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB8, TEXWIDTH, TEXHEIGHT, 0, GL_RGB, GL_UNSIGNED_BYTE, texture);にしてみると違いが出るでしょうか?

[motyaa]

お返事ありがとうございます。
質問内容を編集し、実行結果のスクリーンショットを添付、コードの更新を行いました。
もしお時間ございましたらご覧ください。
また、テクスチャのファイルサイズを確認したところ、66KBでした。
256×256のbmp形式の画像をGIMPで読込み、RAWデータにエクスポートしたのですが、192KBにはなりませんでした。
そしてglTexImage2Dの3番目の引数を変えて、glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB8, TEXWIDTH, TEXHEIGHT, 0, GL_RGB, GL_UNSIGNED_BYTE, texture);
に変更して実行したところ、実行結果に変化はありませんでした。

[Bongo]

すみません、せっかく画像を用意していただいたのに、なぜか表示されていませんでした...teratailの不具合でしょうか...?
もし画像をうまくアップロードできないようでしたら、私の方は別にteratail上でなくとも、どこかのアップローダーをご使用いただいてもまったく構いません。

ファイルサイズ66KBというのは妙に小さすぎる気がします。単純に考えて、256×256×3のGLubyte配列（196608バイト→192KB）にファイルの中身を丸ごと入れるなら、ファイルサイズも同じく192KBなければならないはずです。なんだか再びテクスチャファイルの方が怪しく思えてきました...

私もGIMP 2.8.22をダウンロードしてRAW画像エクスポートを試してみましたが、フォーマットに関しては、確かにおっしゃるとおり、ちゃんとRGB3チャンネルになるようですね。ただ、私の場合は意図通り192KBになっていました。ご質問者さんと何が違うんでしょうか?
一応、私の試したエクスポート手順を、以前の回答の後ろに追記しました。もし相違点などお気づきになりましたらコメント願います。

[motyaa]

コメントありがとうございます。
先程質問を編集し、画像を再添付致しました。
もう一度画像ファイルを確認してみます。

[Bongo]

ご添付の画像見えました。ありがとうございます。

画像を見て思いついたことを述べさせていただきますと...

- ちゃんとレナの姿が見えているということは、圧縮されていたわけではなさそう
- 上1/3しか意味ありそうな絵は表示されていない、つまりファイルサイズは1/3→64KB?
- 66KB - 64KB = 2KBのズレはあるがひとまず無視し（どうもFinderの「情報を見る」だと、メタデータ類も含めたサイズを表示しているのか、少し大きくなるっぽいです）64KBと仮定
- ファイルの正体は256×256のRAWグレースケール1チャンネル画像ではないか

こう考えると、ノイズ画像は...

- 連続したグレースケール3ピクセルがRGB1ピクセルと見なされて描画される
- 画像の変化が緩やかな部分は隣り合ったピクセルが似ているため、描画された映像も元とほぼ同じグレーに見える
- 画像の変化が大きい部分（帽子の飾りなど）ではRGBに異なるデータが入り、カラフルなノイズとなる
- 一行のデータ量は256×3バイトだが、これに1チャンネルのデータを詰め込んだので、元画像の1行目〜3行目が描画結果の1行目に押し込まれる→隣り合った行は互いに似ているので、あたかも横に3回繰り返して描画されたように見える
- 描画結果の下2/3はGLubyte配列の未初期化部分に残っていたピットパターンが表示されたもの

と説明できそうです。

なぜこうなったかの可能性ですが、もしかしてGIMPで画像を編集する際、タイトルバーに「(グレースケール, 1枚のレイヤー)」と表示されていませんでしたか?
私の試したところでは、この状態でRAWエクスポートすると1チャンネルデータになってしまうようです。
メニューの「画像(I)」→「モード(M)」→「RGB(R)」を選択して、タイトルバーが「(RGBカラー, 1枚のレイヤー)」に変わったのを確認し、これをRAWエクスポートしたところ意図通り192KBのファイルが生成されました。
もしこんな状況の可能性がありましたらお試しください。

[motyaa]

丁寧なアドバイス大変助かります。
学校に着きましたらその旨確認してみます。
それでは、またご連絡させていただきます。

[motyaa]

只今、頂いたご指摘を試したところ、192KBとなり、うまく描画されました。
やはりタイトルバーに「(グレースケール, 1枚のレイヤー)」と表示されていたため、ファイルサイズに不具合が起きていました。
小さなミスで申し訳ありません。
ありがとうございます。大変感謝しています。

[Bongo]

いえいえ、お気になさらないでください。私としても推理ゲームのようで面白かったです。学習がんばってください!

Answer 2

昔のOpenGLは自信がないですが、初期化時にウィンドウを作成するより前に（OpenGLコンテキストがない状態で）OpenGLの関数を使用しようとしているのがよくないかもしれません。

順序をちょっと入れ替えて、下記のようにしてみると変化はあるでしょうか?

void init(char *progname) {        //初期化関数
	//テクスチャ画像の読み込み
	GLubyte texture[TEXHEIGHT][TEXWIDTH][3];
	FILE *fp;
	if ((fp = fopen(texture1, "rb")) != NULL) {
		fread(texture, sizeof texture, 1, fp);
		fclose(fp);
	}
	else {
		// 任意のエラー処理を記述
		printf("texture not founed");
	}

	// ウィンドウ作成部分を「gl...」で始まる関数の使用箇所よりも手前に移動
	int width = 500, height = 500;

	glutInitWindowPosition(0, 0);
	glutInitWindowSize(width, height);
	glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGBA | GLUT_DEPTH);    //デプスバッファの設定（隠面消去のため）
	glutCreateWindow(progname);

	glPixelStorei(GL_UNPACK_ALIGNMENT, 1); //アライメント(データの格納方法)の設定
	glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, TEXWIDTH, TEXHEIGHT, 0, GL_RGB,
		GL_UNSIGNED_BYTE, texture);   //画像データをテクスチャメモリにセットする

	//テクスチャパラメータの設定(テクスチャマッピングの拡大・縮小法の設定)
	glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST);
	glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST);

	//テクスチャの合成環境の設定(ポリゴンの陰影等をテクスチャに反映する等の設定)
	glTexEnvf(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_REPLACE);
}

glTexCoord2dがよく分からないとのことですが、これはある頂点がテクスチャ画像中のどこに対応するかを指定するものです。
もしプログラムの実行がうまくいくようになりましたら、その後で実際にこの座標をいろいろ書き換えてみるのがいいかと思います。もし立方体の各面で同じ座標を指定したとすると、おそらくどの面にも同じ絵が貼り付けられた立方体ができあがるかと予想されます。

画像のどの部分がテクスチャ座標のどこに対応するかは、床井研究室 - 第２回 テクスチャの割り当てや床井研究室 - 第５回 テクスチャ座標がご参考になるでしょうか（サイトのコードとご質問者さんのコードが似ておりますので、すでにご覧になっているかもしれませんが...）。

※ちなみに、タイトルや本文の「ストラクチャ」は「テクスチャ」のことですかね?

###追記
Mac版GIMP 2.8.22でのRAW画像エクスポートを試してみましたので追記します。
サイズ256×256の画像全体をR 0、G 128、B 255の単色で塗りつぶして...

下図の設定でエクスポートしました（名前はtest.data）。

このファイルを、ターミナル上にてlsで見てみると、ファイルサイズは意図通り192KB（196608バイト）、odで見てみると、同じく意図通り中身は「00 80 ff 00 80 ff...（10進数だと0 128 255 0 128 255...）」が延々と続いていました。

ご質問者さんのテクスチャデータファイルをodで見てみる、あるいは適当なバイナリファイルエディタで開いてみると、中身はどうなっているでしょうか?意図通りエクスポートされていれば、ピクセルの色がそのまま「R G B R G B...」と並んでいるはずですが、もし何らかの圧縮がされていれば、意図とは違うバイト列になっているはずです（そして、サイズも192KBになっていないと思います）。ファイルサイズが66KBしかないというのがどうも気になるのですが、いかがでしょうか。

Comments

[motyaa]

コメントありがとうございます。
おっしゃる通り、床井研究室のページを参考にして作成しました。