電子ガジェットいろいろ

電子系のガジェットやアプリ開発等の話題を書いてます

iPhoneSDKでOpenGL ESのテクスチャ画像の呼び方

OpenGL ESのテクスチャ画像の呼び方のメモ
例として、プロジェクト作成時に"OpenGL ES Application"を選んだプロジェクトをカスタマイズする。

テクスチャ画像をプロジェクトに追加する。

今回用意したテクスチャ画像(tex.png

これをプロジェクトのResourcesに追加する。

テクスチャファイルの画像サイズは、64x64や128x128等、2の倍数の正方形のみです。(最大1028x1028)

フレームワークの追加

Frameworksへ"CoreGraphics.framework"を追加する。

"EAGLView.m"へテクスチャをロードするメッドを追加

処理の細かい説明は省略します。
以下のソースを参考にしてください。
細かく理解できなくても、このソースは汎用的に使い回しができます。

// パラメータにテクスチャ画像のファイル名を指定する。
-(void)setTexture:(NSString *)texturename {
	// テクスチャ画像ファイルをロード
	UIImage *teximage = [UIImage imageNamed:texturename];

	CGImageRef textureImage = teximage.CGImage;
	// サイズを取得
	NSInteger texWidth = CGImageGetWidth(textureImage);
	NSInteger texHeight = CGImageGetHeight(textureImage);
	// テクスチャデータのメモリを確保(使わなくなったら解放を忘れずに!)
	GLubyte *textureData = (GLubyte *)malloc(texWidth * texHeight * 4);
	// テクスチャ画像のコンテキストを作成
 	CGContextRef textureContext = CGBitmapContextCreate(
					textureData,
					texWidth,
					texHeight,
					8, texWidth * 4,
					CGImageGetColorSpace(textureImage),
					kCGImageAlphaPremultipliedLast);
	CGContextDrawImage(textureContext, CGRectMake(0.0, 0.0, (float)texWidth, (float)texHeight), textureImage);
	CGContextRelease(textureContext);
	
	// ここまでがロード処理
	//これからテクスチャの初期化処理

	GLuint texid;

	glGenTextures(1, &texid);
	
	glBindTexture(GL_TEXTURE_2D, texid);
	glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, texWidth, texHeight, 0, GL_RGBA,GL_UNSIGNED_BYTE, textureData);
	
	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_LINEAR); 
	glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MIN_FILTER,GL_LINEAR); 
}

"EAGLView.m"のdrawViewをカスタマイズしてテクスチャ画像を表示してみる

- (void)drawView {
    
    const GLfloat squareVertices[] = {
        -0.5f, -0.5f,
        0.5f,  -0.5f,
        -0.5f,  0.5f,
        0.5f,   0.5f,
    };

    // テクスチャ座標配列を定義(追加)
    const GLfloat squareCoords[] = {
        0.0f, 0.0f,
        1.0f, 0.0f,
        0.0f, 1.0f,
        1.0f, 1.0f,
    };

    /* squareColorsの定義を削除
    const GLubyte squareColors[] = {
        255, 255,   0, 255,
        0,   255, 255, 255,
        0,     0,   0,   0,
        255,   0, 255, 255,
    };
    */
	
    // テクスチャセット処理
    [self setTexture:@"tex.png"];
    
    [EAGLContext setCurrentContext:context];
    
    glBindFramebufferOES(GL_FRAMEBUFFER_OES, viewFramebuffer);
    glViewport(0, 0, backingWidth, backingHeight);
    
    glMatrixMode(GL_PROJECTION);
    glLoadIdentity();
    glOrthof(-1.0f, 1.0f, -1.5f, 1.5f, -1.0f, 1.0f);
    glMatrixMode(GL_MODELVIEW);
    glRotatef(3.0f, 0.0f, 0.0f, 1.0f);
    
    glClearColor(0.5f, 0.5f, 0.5f, 1.0f);
    glClear(GL_COLOR_BUFFER_BIT);
    
    glVertexPointer(2, GL_FLOAT, 0, squareVertices);
    glEnableClientState(GL_VERTEX_ARRAY);

    // 色配列の定義を削除
    //glColorPointer(4, GL_UNSIGNED_BYTE, 0, squareColors);
    //glEnableClientState(GL_COLOR_ARRAY);

    // テクスチャ座標配列を定義(追加)
    glTexCoordPointer(2, GL_FLOAT, 0, squareCoords);
    glEnableClientState(GL_TEXTURE_COORD_ARRAY);
    
    // テクスチャを有効化(追加)
    glEnable(GL_TEXTURE_2D);

    glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);
    
    glBindRenderbufferOES(GL_RENDERBUFFER_OES, viewRenderbuffer);
    [context presentRenderbuffer:GL_RENDERBUFFER_OES];
}

実行してみる

デフォルトで回転している四角形にテクスチャ画像がマッピングされています。

OpenGLプログラミングガイド 原著第5版

OpenGLプログラミングガイド 原著第5版