[DirectX9]텍스처(Texture)

 3D 그래픽스에서 사실성을 부여할 수 있는 대표적인 방법 중 하나가 텍스처이다. 텍스처는 메시와 같은 기하물체의 표면에 이미지을 씌우는 방법이다. 이미지를 씌우면 기하물체로 표현하기에는 부담스러운 표현을 비교적 간단하게 표현할 수 있다.

텍스처 맵핑(Texture Mapping)

출처

 위의 그림에서 왼쪽의 3D 물체는 와이어프레임으로 출력되고 있다. 이 물체를 구성하는 폴리곤들의 표면에 가운데에 있는 2D 이미지를 씌운다고 생각하자. 그 결과는 오른쪽과 같이 지구처럼 나타날 것이다. 3D 구와 구에 덮어씌울 2D 이미지 한 장으로 지구를 만들었다. 이처럼 텍스처 맵핑은 단순하지만 효과적으로 사실성을 표현할 수 있는 기법 중 하나이다.

 DirectX9에서 텍스처 맵핑을 하는 과정은 다음과 같다.

1. Direct3DTexture9 인터페이스 선언: 텍스처를 사용하기 위한 변수
2. 텍스처 좌표를 갖는 정점 선언: 사용자 정의 정점 구조체에서 선언
3. 텍스처 생성: 일반적으로 파일을 읽어서 생성
4. 텍스처 스테이지 설정: 텍스처 스테이지는 텍스처의 좌표 생성 및 랩핑 모드 등 텍스처 제어에 관한 설정
5. 그려질 텍스처를 지정: D3D 디바이스에 텍스처를 알린다.
6. 메시 그리기

 각각의 과정에 대해서 좀더 살펴보면 정점 버퍼를 생성할 때도 인터페이스가 필요했듯이, 텍스처를 사용하기 위해서도 텍스처 인터페이스가 필요하다. 그리고 사용자 정의 정점 구조체의 정점이 텍스처 상의 uv 좌표계에서 어디에 맵핑될지도 설정하여야 한다. 사용자 정의 정점 구조체에 텍스처 좌표값을 위한 변수가 추가되었으므로 FVF 플래그도 변경해주어야 한다. 그 다음 텍스처를 생성한다. 텍스처는 D3D 디바이스를 통해 D3DXCreateTextureFromFile() 함수를 호출하여 생성할 수 있다. 텍스처를 생성한 후, 텍스처를 어떻게 제어할 것인지에 관한 정보를 텍스처 스테이지를 통해 설정한다. 텍스처와 정점의 색을 섞을지 말지 등을 결정한다. 그리고 생성한 텍스처에 인덱스를 부여하여 D3D가 텍스처를 관리할 수 있도록 한다. 

 지금까지 설명한 과정을 코드로 다시 살펴보자. 아래의 코드는 텍스처 맵핑을 하는 핵심적인 부분들을 발췌한 것이다. 완성된 코드가 아님을 알려둔다.

// 1. Direct3DTexture9 인터페이스 선언 // 텍스처 정보 LPDIRECT3DTEXTURE9 g_pTexture = nullptr; // 사용자 정의 정점 구조체 struct CUSTOMVERTEX { D3DXVECTOR3 position; // 정점 좌표 D3DCOLOR color; // 정점 색깔 #ifndef SHOW_HOW_TO_USE_TCI FLOAT tu, tv; // 텍스처 좌표 #endif }; // 2. 텍스처 좌표를 갖는 정점 선언 // 사용자가 설정한 정점에 대한 정보를 나타내는 FVF 값 #ifdef SHOW_HOW_TO_USE_TCI #define D3DFVF_CUSTOMVERTEX (D3DFVF_XYZ | D3DFVF_DIFFUSE) #else #define D3DFVF_CUSTOMVERTEX (D3DFVF_XYZ | D3DFVF_DIFFUSE | D3DFVF_TEX1) #endif // 3. 텍스처 생성 // dog.bmp 파일로부터 텍스쳐를 생성한다. if ( FAILED( D3DXCreateTextureFromFile( g_pd3dDevice, L"sami.jpg", &g_pTexture ) ) ) { // 현재 폴더에 dog.bmp 파일이 없으면 상위폴더에서 파일이 있는지 확인한다. if ( FAILED( D3DXCreateTextureFromFile( g_pd3dDevice, L"..\\sami.jpg", &g_pTexture ) ) ) { MessageBox(NULL, L"Could not find dog.bmp", L"Texture.exe", MB_OK); return E_FAIL; } } // 4. 텍스처 스테이지 설정 // MODULATE 연산으로 색을 섞는다. g_pd3dDevice->SetTextureStageState(0, D3DTSS_COLOROP, D3DTOP_MODULATE); // TEXTURE의 색과 정점의 색(DIFFUSE)을 섞는다. g_pd3dDevice->SetTextureStageState( 0, D3DTSS_COLORARG1, D3DTA_TEXTURE ); g_pd3dDevice->SetTextureStageState( 0, D3DTSS_COLORARG2, D3DTA_DIFFUSE); // alpha 연산을 사용하지 않는다. g_pd3dDevice->SetTextureStageState( 0, D3DTSS_ALPHAOP, D3DTOP_DISABLE ); // 5. 그려질 텍스처를 지정 // 생성한 텍스처에 인덱스를 부여한다. g_pd3dDevice->SetTexture( 0, g_pTexture );

 아래의 이미지는 텍스처로 활용한 이미지이다. 텍스처를 생성할 때 파일명을 "sami.jpg"로 지정하였으므로 확인하도록 하자.

원통에 위의 이미지를 씌워보자

#include "stdafx.h" #include <Windows.h> #include <Mmsystem.h> #include <d3dx9.h> // SHOW_HOW_TO_UES_TCI //#define SHOW_HOW_TO_USE_TCI LPDIRECT3D9 g_pD3D = nullptr; // D3D LPDIRECT3DDEVICE9 g_pd3dDevice = nullptr; // 렌더링하는 D3D 디바이스 LPDIRECT3DVERTEXBUFFER9 g_pVB = nullptr; // 정점 버퍼 LPDIRECT3DTEXTURE9 g_pTexture = nullptr; // 텍스처 정보 // 사용자 정의 정점 구조체 struct CUSTOMVERTEX { D3DXVECTOR3 position; // 정점 좌표 D3DCOLOR color; // 정점 색깔 #ifdef SHOW_HOW_TO_USE_TCI FLOAT tu, tv; // 텍스처 좌표 #endif }; // 사용자가 설정한 정점에 대한 정보를 나타내는 FVF 값 #ifdef SHOW_HOW_TO_USE_TCI #define D3DFVF_CUSTOMVERTEX (D3DFVF_XYZ | D3DFVF_DIFFUSE) #else #define D3DFVF_CUSTOMVERTEX (D3DFVF_XYZ | D3DFVF_DIFFUSE | D3DFVF_TEX1) #endif HRESULT InitD3D( HWND hWnd ); HRESULT InitGeometry(); VOID Cleanup(); VOID Render(); VOID SetupMatrices(); LRESULT WINAPI MsgProc( HWND hWnd, UINT msg, WPARAM wParam, LPARAM lParam ); INT WINAPI WinMain( HINSTANCE hInst, HINSTANCE, LPSTR, INT ) { // 윈도우 클래스 선언 및 초기화, 등록 WNDCLASSEX wc = { sizeof( WNDCLASSEX ), CS_CLASSDC, MsgProc, 0L, 0L, GetModuleHandle( NULL ), NULL, NULL, NULL, NULL, L"D3D Tutorial", NULL }; RegisterClassEx( &wc ); // 윈도우 생성 HWND hWnd = CreateWindow( L"D3D Tutorial", L"D3D Tutorial 01: CreateDevice", WS_OVERLAPPEDWINDOW, 100, 100, 300, 300, GetDesktopWindow(), NULL, wc.hInstance, NULL ); // Direct3D 초기화 if ( SUCCEEDED( InitD3D( hWnd ) ) ) { // 정점 버퍼 초기화 if ( SUCCEEDED( InitGeometry() ) ) { // 윈도우 출력 ShowWindow( hWnd, SW_SHOWDEFAULT ); UpdateWindow( hWnd ); // 메세지 루프 MSG msg; ZeroMemory( &msg, sizeof( msg ) ); while ( msg.message != WM_QUIT ) { // GetMessage() 함수의 달리 대기하지 않는다. if ( PeekMessage( &msg, NULL, 0U, 0U, PM_REMOVE ) ) { TranslateMessage( &msg ); DispatchMessage( &msg ); } else { // 처리할 메세지가 없으면 렌더링한다. Render(); } } } } // 등록한 클래스의 메모리를 반환하고, 등록에서 제외한다. UnregisterClass( L"D3D Tutorial", wc.hInstance ); return 0; } HRESULT InitD3D( HWND hWnd ) { // D3D 객체 생성 if ( nullptr == ( g_pD3D = Direct3DCreate9( D3D_SDK_VERSION ) ) ) { return E_FAIL; } // D3D 디바이스를 생성하기 위해서 필요한 구조체 D3DPRESENT_PARAMETERS d3dpp; ZeroMemory( &d3dpp, sizeof( D3DPRESENT_PARAMETERS ) ); // 0으로 초기화하지 않으면 결과가 나오지 않을 수 있다. d3dpp.Windowed = TRUE; // 창모드 d3dpp.SwapEffect = D3DSWAPEFFECT_DISCARD; d3dpp.BackBufferFormat = D3DFMT_UNKNOWN; d3dpp.EnableAutoDepthStencil = TRUE; d3dpp.AutoDepthStencilFormat = D3DFMT_D16; // D3DDEVTYPE_HAL은 하드웨어 가속을 지원하도록 설정한다. // 전역변수 g_pd3dDevice에 D3D 디바이스 포인터를 저장한다. if ( FAILED( g_pD3D->CreateDevice( D3DADAPTER_DEFAULT, D3DDEVTYPE_HAL, hWnd, D3DCREATE_SOFTWARE_VERTEXPROCESSING, &d3dpp, &g_pd3dDevice ) ) ) { return E_FAIL; } // 삼각형의 뒷면을 표시하기 위한 코드, 컬링 기능을 끈다. g_pd3dDevice->SetRenderState( D3DRS_CULLMODE, D3DCULL_NONE ); // 조명 끄기 g_pd3dDevice->SetRenderState(D3DRS_LIGHTING, FALSE); // z 버퍼 기능을 켠다. g_pd3dDevice->SetRenderState( D3DRS_ZENABLE, TRUE ); return S_OK; } // 정점 버퍼 초기화, 텍스처 초기화 HRESULT InitGeometry() { // sami.jpg 파일로부터 텍스쳐를 생성한다. if ( FAILED( D3DXCreateTextureFromFile( g_pd3dDevice, L"sami.jpg", &g_pTexture ) ) ) { // 현재 폴더에 sami.jpg 파일이 없으면 상위폴더에서 파일이 있는지 확인한다. if ( FAILED( D3DXCreateTextureFromFile( g_pd3dDevice, L"..\\sami.jpg", &g_pTexture ) ) ) { MessageBox(NULL, L"Could not find dog.bmp", L"Texture.exe", MB_OK); return E_FAIL; } } // 정점 버퍼 생성 if ( FAILED( g_pd3dDevice->CreateVertexBuffer( 50 * 2 * sizeof( CUSTOMVERTEX ), 0, D3DFVF_CUSTOMVERTEX, D3DPOOL_DEFAULT, &g_pVB, NULL ) ) ) { return E_FAIL; } CUSTOMVERTEX* pVertices; // Lock() 함수의 첫 번째와 두 번째 인자를 0으로 전달하면 // Vertex Buffer의 전체 버퍼 크기로 설정 if ( FAILED( g_pVB->Lock( 0, 0, ( void** )&pVertices, 0 ) ) ) { return E_FAIL; } // 원통 형태를 만드는 알고리즘 for ( DWORD i = 0; i < 50; ++i ) { FLOAT theta = ( 2 * D3DX_PI * i ) / ( 50 - 1 ); // 원통의 아랫면을 구성하는 정점들 pVertices[2 * i].position = D3DXVECTOR3( sinf( theta ), -1.0f, cosf( theta ) ); // 원통의 아랫면을 구성하는 정점들의 색깔 설정 pVertices[2 * i].color = 0xffffffff; #ifdef SHOW_HOW_TO_USE_TCI pVertices[2 * i].tu = ( ( FLOAT )i ) / (50 - i); pVertices[2 * i].tv = 1.0f; #endif // 원통의 윗면을 구성하는 정점들 pVertices[2 * i + 1].position = D3DXVECTOR3( sinf( theta ), 1.0f, cosf( theta ) ); pVertices[2 * i + 1].color = 0xff808080; #ifdef SHOW_HOW_TO_USE_TCI pVertices[2 * i + 1].tu = ( ( FLOAT )i ) / ( 50 - i ); pVertices[2 * i + 1].tv = 0.0f; #endif } g_pVB->Unlock(); return S_OK; } // 객체 리소스를 반환하는 함수 VOID Cleanup() { // 객체의 리소스를 반환하는 순서가 중요하다. // 이 순서가 잘못되면 에러를 발생시킨다. // 생성의 역순 if ( g_pTexture != nullptr ) { g_pTexture->Release(); } if ( g_pVB != nullptr ) { g_pVB->Release(); } if ( g_pd3dDevice != nullptr ) { g_pd3dDevice->Release(); } if ( g_pD3D != nullptr ) { g_pD3D->Release(); } } // 화면을 그리는 함수 VOID Render() { if ( nullptr == g_pD3D || nullptr == g_pd3dDevice || nullptr == g_pVB || nullptr == g_pTexture ) { return; } // 후면 버퍼를 파란색으로 채운다. z버퍼를 지운다. g_pd3dDevice->Clear( 0, NULL, D3DCLEAR_TARGET | D3DCLEAR_ZBUFFER, D3DCOLOR_XRGB( 0, 0, 255 ), 1.0f, 0 ); // BeginScene() 함수로 디바이스에게 Rendering 시작을 알린다. if ( SUCCEEDED( g_pd3dDevice->BeginScene() ) ) { SetupMatrices(); // MODULATE 연산으로 색을 섞는다. g_pd3dDevice->SetTextureStageState(0, D3DTSS_COLOROP, D3DTOP_MODULATE); // TEXTURE의 색과 정점의 색(DIFFUSE)을 섞는다. g_pd3dDevice->SetTextureStageState( 0, D3DTSS_COLORARG1, D3DTA_TEXTURE ); g_pd3dDevice->SetTextureStageState( 0, D3DTSS_COLORARG2, D3DTA_DIFFUSE); // alpha 연산을 사용하지 않는다. g_pd3dDevice->SetTextureStageState( 0, D3DTSS_ALPHAOP, D3DTOP_DISABLE ); // 생성한 텍스처에 인덱스를 부여한다. g_pd3dDevice->SetTexture( 0, g_pTexture ); #ifdef SHOW_HOW_TO_USE_TCI D3DXMATRIXA16 mat; mat._11 = 0.25f; mat._12 = 0.00f; mat._13 = 0.00f; mat._14 = 0.00f; mat._21 = 0.00f; mat._22 = 0.25f; mat._23 = 0.00f; mat._24 = 0.00f; mat._31 = 0.00f; mat._32 = 0.00f; mat._33 = 0.25f; mat._34 = 0.00f; mat._41 = 0.00f; mat._42 = 0.00f; mat._43 = 0.00f; mat._44 = 1.00f; g_pd3dDevice->SetTransform(D3DTS_TEXTURE0, &mat); g_pd3dDevice->SetTextureStageState(0, D3DTSS_TEXTURETRANSFORMFLAGS, D3DTTFF_COUNT2); g_pd3dDevice->SetTextureStageState( 0, D3DTSS_TEXCOORDINDEX, D3DTSS_TCI_CAMERASPACEPOSITION); #endif // 와이어 프레임으로 본다. //g_pd3dDevice->SetRenderState(D3DRS_FILLMODE, D3DFILL_WIREFRAME); // 정점 버퍼를 출력 스트림으로 설정한다. g_pd3dDevice->SetStreamSource( 0, g_pVB, 0, sizeof( CUSTOMVERTEX ) ); // D3D에 정점 정보를 제공한다. g_pd3dDevice->SetFVF( D3DFVF_CUSTOMVERTEX ); // 실제 기하 물체를 그린다. g_pd3dDevice->DrawPrimitive( D3DPT_TRIANGLESTRIP, 0, 2 * 50 - 2 ); // Rendering이 끝났음을 알린다. g_pd3dDevice->EndScene(); } // 후면 버퍼를 현재 그리는 버퍼로 설정한다. // Double Buffering(이중 버퍼)와 관련된 내용이다. // 이중 버퍼를 사용하면서 이 함수를 실행하지 않으면 제대로 그려지지 않는다. g_pd3dDevice->Present( NULL, NULL, NULL, NULL ); } // 월드, 뷰, 프로젝션 행렬 설정 VOID SetupMatrices() { // 월드 행렬 설정 D3DXMATRIXA16 matWorld; /*UINT iTime = timeGetTime() % 1000; FLOAT fAngle = iTime * ( 2.f * D3DX_PI ) / 1000.f; D3DXMatrixRotationY( &matWorld, fAngle );*/ D3DXMatrixIdentity( &matWorld ); // 아래줄의 주석을 해제하면 원통이 x축을 기준으로 회전한다. D3DXMatrixRotationX(&matWorld, timeGetTime() / 500.0f); g_pd3dDevice->SetTransform( D3DTS_WORLD, &matWorld ); // 뷰 행렬 설정 D3DXVECTOR3 vEyePt( 0.0f, 3.0f, -5.0f ); // 카메라의 위치 D3DXVECTOR3 vLookatPt( 0.0f, 0.0f, 0.0f ); // 카메라가 바라보는 지점 D3DXVECTOR3 vUpVec( 0.0f, 1.0f, 0.0f ); // 카메라의 상향벡터 D3DXMATRIXA16 matView; // 카메라 변환 행렬 계산 D3DXMatrixLookAtLH( &matView, &vEyePt, &vLookatPt, &vUpVec ); // 계산된 카메라 변환 행렬을 적용 g_pd3dDevice->SetTransform( D3DTS_VIEW, &matView ); // 프로젝션 행렬 설정 D3DXMATRIXA16 matProj; // 투영 변환 행렬 계산 D3DXMatrixPerspectiveFovLH( &matProj, D3DX_PI / 4, 1.0f, 1.0f, 100.f ); // 계산된 투영 변환 행렬을 적용 g_pd3dDevice->SetTransform( D3DTS_PROJECTION, &matProj ); } // 윈도우 프로시저 함수 LRESULT WINAPI MsgProc( HWND hWnd, UINT msg, WPARAM wParam, LPARAM lParam ) { switch ( msg ) { case WM_DESTROY: Cleanup(); PostQuitMessage( 0 ); return 0; // 메세지 루프 변경 /*case WM_PAINT: Render(); ValidateRect(hWnd, NULL); return 0;*/ } return DefWindowProc( hWnd, msg, wParam, lParam ); }  #ifdef...#endif 선언이 자주 눈에 띌 것이다. 모르는 사람은 #ifdef...#endif에 대한 포스트을 확인하도록 하자. 어려운 것이 아니므로 금방 이해할 수 있을 것이다. SHOW_HOW_TO_USE_TCI가 선언되어 있는지 여부에 따라 컴파일이 달라진다. SHOW_HOW_TO_USE_TCI가 선언되지 않는 경우에는 알고리즘을 통해서 각각 정점에 해당하는 uv 좌표를 하나하나 설정해주고 있다. 위 이미지의 해상도는 100 * 100이다. uz 좌표계에서 (100, 0) 픽셀은 (1, 0)에 맵핑된다. (100, 100) 픽셀은 (1, 1)에 맵핑된다. 

 원기둥에 텍스처는 어떻게 맵핑되는지 살펴보자. 정점 버퍼 0번째 정점의 uv 좌표는 (0, 1)이다. 1번째 정점의 uv 좌표는 (0, 0)이다. 2번째 정점의 uv 좌표는 (1/49, 1), 3번째 정점의 uv 좌표는 (1/49, 0)이 된다. 결국 정점의 uv 좌표는 텍스처 이미지를 세로로 50등분한 수치가 정점에 맵핑된다. 

 참고로 텍스처로 사용할 파일은 main 함수가 실행되는 소스 파일과 같은 경우에 있거나, 그보다 한 단계 상위 폴더에 위치해야 한다. 이는 OS가 제공하는 현재 디렉토리(Current Directory) 개념과 관련이 있으므로 생소한 사람은 찾아보면 좋을 것 같다.

정리하면

• 텍스처 이미지는 uv 좌표를 가진다.
• 텍스처 맵핑을 하기 위해서 필요한 과정을 숙지해두자.

다음 주제: [DirectX9]멀티 텍스처(Mulit Texture)와 라이트 맵핑(Light Mapping)