[NDK-OpenGL_03] 텍스쳐 입히기

원래 점, 선, 면 부터 시작을 해야하지만 급한일이 생기는 관계로 텍스쳐입히는 방법으로 바로 들어가겠습니다!

텍스쳐 재료로 사용될 이미지는 기본적으로 2의 제곱수 이여야합니다. 2의 제곱수가 아니라면 텍스쳐가 정상출력되지 않습니다.
또한 이미지의 크기는 최대 1024 * 1024까지 사용할 수 있습니다. 가로와 세로는 같을필요가 없고 가로와 세로 모두 2의 제곱수이면 됩니다.

2의 제곱수인 이미지를 한 장 준비합시다. 이 팬더이미지는 512*512 입니다.

1. 자바에서 이미지 데이터 보내기
이미지를 drawable폴더에 넣고 GLView.java를 보겠습니다.

package pe.berabue.opengl;

import javax.microedition.khronos.egl.EGLConfig;
import javax.microedition.khronos.opengles.GL10;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.opengl.GLSurfaceView;
import android.opengl.GLSurfaceView.Renderer;
import android.view.MotionEvent;

public class GLView extends GLSurfaceView implements Renderer {

	private Context mContext;
	
	private static native void nativeCreated(); 
    private static native void nativeChanged(int w, int h);
    private static native void nativeUpdateGame();
	private static native void nativeOnTouchEvent(int x, int y, int touchFlag);
	private static native void nativeSetTextureData(int[] pixels, int width, int height);
	
	public GLView(Context context) {
		super(context);
		this.setRenderer(this);
		this.requestFocus();
		this.setRenderMode(RENDERMODE_WHEN_DIRTY);
		this.setFocusableInTouchMode(true);
		
		mContext = context;
	}

	public void onDrawFrame(GL10 gl) {
		nativeUpdateGame();
	}

	public void onSurfaceChanged(GL10 gl, int w, int h) {
		nativeChanged(w, h);
	}

	public void onSurfaceCreated(GL10 gl, EGLConfig config) {
		nativeCreated();
		
		Bitmap bmp = BitmapFactory.decodeResource(mContext.getResources(), R.drawable.panda);
		int[] pixels = new int[bmp.getWidth()*bmp.getHeight()];
		bmp.getPixels(pixels, 0, bmp.getWidth(), 0, 0, bmp.getWidth(), bmp.getHeight());
		
		nativeSetTextureData(pixels, bmp.getWidth(), bmp.getHeight());
	} 
	
	@Override
	public boolean onTouchEvent(MotionEvent event) {
		nativeOnTouchEvent((int)event.getX(), (int)event.getY(), event.getAction());
		return true;
	}
}

비트맵을 사용하기위한 Context와 텍스쳐데이터를 보내기위한 nativeSetTextureData();
그리고 onSurfaceCreated() 부분의 코드가 추가되었습니다.
가장 중요한 onSurfaceCreated(); 부분을 보겠습니다.

Bitmap bmp = BitmapFactory.decodeResource(mContext.getResources(), R.drawable.panda);
　위에서 저장한 panda이미지를 불러옵니다.
int[] pixels = new int[bmp.getWidth()*bmp.getHeight()];
　픽셀데이터를 담을수 있도록 위 이미지의 가로*세로 크기의 int배열을 생성합니다.
bmp.getPixels(pixels, 0, bmp.getWidth(), 0, 0, bmp.getWidth(), bmp.getHeight());
　해당 이미지의 픽셀데이터를 읽어와 배열에 저장합니다.
nativeSetTextureData(pixels, bmp.getWidth(), bmp.getHeight());
　해당 픽셀데이터, 가로, 세로 크기를 전달합니다 ~


2. jni-ndk.c 에서 받기

void Java_pe_berabue_opengl_GLView_nativeSetTextureData(JNIEnv* env, jobject thiz, jintArray arr, jint width, jint height)
{
	char *data = (*env)->GetByteArrayElements(env, arr, 0);

	setTextureData(data, width, height);

	(*env)->ReleaseByteArrayElements(env, (jbyteArray)arr, data, JNI_ABORT);
}

char *data = (*env)->GetByteArrayElements(env, arr, 0);
　자바에서 넘어온 배열을 통째로 복사합니다.
setTextureData(data, width, height);
　픽셀데이터와, 이미지의 가로, 세로 크기를 보내버리고 ~
(*env)->ReleaseByteArrayElements(env, (jbyteArray)arr, data, JNI_ABORT);
　자바에서 넘어온 배열을 해제시켜줍니다!

JNI 부분은 아직도 이해가안되서 사용하기가 어렵네요... 대충 기능만 적었습니다..ㅜㅜ


3. GLGameRenderer.c에서 나머지를 해결해봅시다.

먼저 변수 몇개가 필요할것같군요.

GLuint	g_textureName;
int		g_nX;
int		g_nY;
int		g_nPandaWidth;
int		g_nPandaHeight;

g_textureName;
　각각의 텍스쳐마다 이름을 지정해주어 해당텍스쳐를 불러내는 용도입니다.
텍스쳐의의 시작점(LT기준)과 텍스쳐 크기에 사용될 변수가 있습니다. ( 적당히 초기화를 해주시면됩니다. )

void setTextureData(char *data, int width, int height)
{
	g_nPandaWidth = width;
	g_nPandaHeight = height;

	glGenTextures(1, &g_textureName);
	
	glBindTexture(GL_TEXTURE_2D, g_textureName);
	
	glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
	glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
		
	glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, width, height, 0, GL_RGBA, GL_UNSIGNED_BYTE, (void*)data);
}

텍스쳐를 만들어내는 곳입니다.

glGenTextures(1, &g_textureName);
　void glGenTextured(GLsizei n, GLuint *텍스쳐);
　OpenGL에서는 텍스쳐에 각각의 번호를 매겨사용을합니다.
　생성할 텍스쳐의 수(n)와 텍스쳐의 이름(번호)으로 사용될 배열을 넘겨주면 배열에 값이 들어옵니다.
glBindTexture(GL_TEXTURE_2D, g_textureName);
　사용할 텍스쳐를 선택합니다. 2차원이면서 g_textureName의 이름(번호)를 가진 텍스쳐를 사용할겁니다.
glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
　축소시에 부드럽게
glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
　확대시에 픽셀을 유지
　위 두 함수의대한 설명은 http://mrhoya.tistory.com/entry/Filtering-MIPMAP%EC%9D%98-%EC%9D%B4%ED%95%B4 
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, width, height, 0, GL_RGBA, GL_UNSIGNED_BYTE,(void*)data);
 　glTexImage2D(GLenum target, GLint level, GLint internalformat, GLsizei width, GLsizei height
　　　　　　　, GLint border, GLenum format, GLenum type, const GLvoid *pixels)
　target : 2차원 텍스쳐를 생성합니다.
　level : 디테일 레벨, 밉맵핑을 사용하지 않으면 보통 0
　internalformat : 이미지 데이터의 내부 포맷
　width : 텍스쳐 가로폭
　height : 텍스쳐 세로폭
　border : 테두리두께로 0 ~ 2 인듯싶습니다(?) 보통 0
　format : 픽셀 데이터의 포맷
　pixels : 픽셀 데이터


텍스쳐를 생성했으니 그려봅니다!

void updateGameLoop()
{
	glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);


	drawPanda();
}

void drawPanda()
{
	GLfloat vertices[12] = {
			g_nX				,	g_nY+g_nPandaHeight	,	0.0f,	// LEFT  | BOTTOM
			g_nX+g_nPandaWidth	,	g_nY+g_nPandaHeight	,	0.0f,	// RIGHT | BOTTOM
			g_nX				,	g_nY				,	0.0f,	// LEFT  | TOP
			g_nX+g_nPandaWidth	,	g_nY				,	0.0f	// RIGHT | TOP
	};
	
	GLfloat texture[8] = {
			0	, 1,
			1	, 1,
			0	, 0,
			1	, 0
	};

	
	glEnable(GL_TEXTURE_2D);

	glBindTexture(GL_TEXTURE_2D, g_textureName);

    glEnableClientState(GL_VERTEX_ARRAY);
	glVertexPointer(3, GL_FLOAT, 0, vertices);
    
    glEnableClientState(GL_TEXTURE_COORD_ARRAY);
	glTexCoordPointer(2, GL_FLOAT, 0, texture);
	glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);

    glDisableClientState(GL_TEXTURE_COORD_ARRAY);
    glDisableClientState(GL_VERTEX_ARRAY);

	glDisable(GL_TEXTURE_2D);
}

drawPanda(); 팬더를 그립니다 ~ 
vertices
　텍스쳐가 그려질 좌표(정점)입니다.
texture
　그려질 텍스쳐의 영역입니다. 0 ~ 1까지 값이 들어가며 0 ~ 100%로 보시면됩니다.
　위 배열에서 왼쪽은 w이며, 오른쪽은 h입니다.
　만약, 이미지의 좌상단 1/4만을 출력하고싶다면 1을 0.5로 바꾸어주면 됩니다.
glEnable(GL_TEXTURE_2D);
　2D텍스쳐를 활성화시킵니다.
glBindTexture(GL_TEXTURE_2D, g_textureName);
　바로 위에서 만들어주었던 이름(번호)과 동일한 텍스쳐를 그릴것이구요~
glEnableClientState(GL_VERTEX_ARRAY);
　해당 기능 활성화시 glVertexPointer에 설정한 vertices를 참고하여 렌더링
glVertexPointer(3, GL_FLOAT, 0, vertices);
　버텍스 데이터 좌표배열을 지정 
　3 : 좌표 당 버텍스 수. 2~4
　GL_FLOAT : 타입
　0 : 배열 내의 버텍스 간격. ( 여기서는 배열하나의 여러개의 좌표를 갖고있지 않으므로 0 )
　vertices : 데이터 포인터　
glEnableClientState(GL_TEXTURE_COORD_ARRAY);
　해당 기능 활성화시 glTexCoordPointer 에 설정한 texture 를 참고하여 렌더링 
glTexCoordPointer(2, GL_FLOAT, 0, texture);
　텍스쳐 좌표 배열을 지정
　2 : 배열당 좌표 수 1 ~ 4
　GL_FLOAT : 타입
　0 : 배열 내의 좌표 간격
　texture : 데이터 포인트
glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);
　GL_TRIANGLE_STRIP(연속 삼각형) : 해당 모양으로 그리기
　0 : 배열의 첫번째 인덱스
　4 : 사용할 인덱스 수
glDisableClientState(GL_TEXTURE_COORD_ARRAY);
glDisableClientState(GL_VERTEX_ARRAY);
　비활성화


여기까지! 입니다!!

빌드 후 실행해보면 ~ 짜잔!!

으헉... 빼먹은게 있습니다.
자바에서 픽셀데이터를 보내왔을때 데이터의 색상순서가 RGBA가 아닌 BGRA순서입니다.
그럼, 순서를 바꾸어줍시다~!

void setTextureData(char *data, int width, int height)
{
	int i;
	char *buf;

	buf = (char *)malloc((sizeof(char)*width*height)<<2);

	for (i = 0; i < width*height*4; i += 4)
	{
		buf[i]   = data[i+2];
		buf[i+1] = data[i+1];
		buf[i+2] = data[i];
		buf[i+3] = data[i+3];
	}

	g_nPandaWidth = width;
	g_nPandaHeight = height;

	glGenTextures(1, &g_textureName);
	
	glBindTexture(GL_TEXTURE_2D, g_textureName);
	
	glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
	glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
		
	glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, width, height, 0, GL_RGBA, GL_UNSIGNED_BYTE, (void*)buf);

	free(buf);
}

변수 두개와 메모리할당, for문, 그리고 아래쪽에 메모리를 해제시켜주는 부분이 추가되었습니다.
픽셀데이터와 같은 크기의 메모리를 할당받고 BGRA -> RGBA순서로 변경해줍니다.
glTexImage2D() 마지막 값이 data -> buf로 바뀌었내요.

다시 빌드 후 실행해보면 ~

정상출력되었습니다!

 
위의 vertices와 texture 배열을 이용하면
원하는 위치를 중심으로 출력하거나, 좌표, 그려질 영역등을 마음대로 조절할 수 있습니다.
또한 값의 순서를 바꾸면 이미지가 정상출력이 되지 않습니다.
OpenGL은 모든 도형을 삼각형을 합쳐서 그리기때문에 정점의 순서를 맞추어주지 않으면 텍스쳐가 제대로 나오지 않습니다~
한번해보세요 ~

오늘은 여기까지 ~