텍스처 적용(1) - 텍스처 좌표

텍스처 매핑(texture mapping)이란 메시의 삼각형 면에 이미지 자료를 입히는 기법으로, 이를 통해서 장면의 세부도와 사실감을 크게 높일 수 있다.

텍스처를 기입하려면 먼저 텍스처 좌표를 알아야 한다. Direct3D는 u 축이 이미지의 가로 방향이고, v 축이 이미지의 세로 방향인 텍스처 좌표계를 사용한다. 보통의 좌표계와는 달리 v축은 위에서 아래로 향해있다.(이게 중요.) 또한 텍스처 좌표는 [0,1] 구간으로 정규화돼있다. 이 범위 안에 있는 텍스처의 한 요소를 텍셀(texel; texture element)이라 부른다. 예를 들어 텍스처 좌표 (0.5, 0.5)는 텍스처의 실제 크기가 256 x 256 픽셀이든, 512 x 1024든 항상 정중앙의 텍셀에 해당된다.

삼각형의 각 꼭짓점 p1,p2,p3에 텍스처 매핑하고 싶은 이미지의 q1,q2,q3를 대응시키면, 이미지의 안쪽 부분이 보간돼 삼각형에 각각 대응하게 된다. 이를 코드로 작성해보겠다.

struct VertexTexture
{
	D3DXVECTOR3 position;
	D3DXVECTOR2 uv;
};

vertices = new VertexTexture[4];
vertices[0].position = D3DXVECTOR3(-0.5f, -0.5f, 0.0f);
vertices[1].position = D3DXVECTOR3(-0.5f,  0.5f, 0.0f);
vertices[2].position = D3DXVECTOR3( 0.5f, -0.5f, 0.0f);
vertices[3].position = D3DXVECTOR3( 0.5f,  0.5f, 0.0f);
		
vertices[0].uv = D3DXVECTOR2(0.0f, 1.0f);
vertices[1].uv = D3DXVECTOR2(0.0f, 0.0f);
vertices[2].uv = D3DXVECTOR2(1.0f, 1.0f);
vertices[3].uv = D3DXVECTOR2(1.0f, 0.0f);

위의 사진은 vertices 배열의 position 원소를 나타내는 것이다. 여기서 position의 좌표와 uv의 좌표에 주의하길 바란다. position은 원점 기준으로 상하좌우 0.5씩 거리를 줘서, 한 변의 길이가 1인 정사각형이 만들어지게 된다. 반면 텍셀의 좌표는 아까 말한대로, [0,1]의 범위를 가진다. 또한 텍셀의 y좌표가 거꾸로 돼있는 걸 주목해야 한다. 헷갈린다면 위의 두 사진을 합쳐보겠다.

각각 대응하는 좌표를 묶어 봤는데 더 헷갈릴 수도 있으려나...

이는 픽셀 셰이더에서 별다른 변환 없이 넘겨주면 된다.

D3D11_INPUT_ELEMENT_DESC layoutDesc[]
{
	{"POSITION", 0, DXGI_FORMAT_R32G32B32_FLOAT, 0, 0, D3D11_INPUT_PER_VERTEX_DATA, 0},
	{"TEXCOORD", 0 ,DXGI_FORMAT_R32G32_FLOAT, 0, sizeof(D3DXVECTOR3), D3D11_INPUT_PER_VERTEX_DATA, 0},
};

HRESULT hr = md3dDevice->CreateInputLayout
(
	layoutDesc,
	2,	//vertexcolor의 요소
	vsBlob->GetBufferPointer(),
	vsBlob->GetBufferSize(),
	&inputLayout
);
assert(SUCCEEDED(hr));

struct VertexInput
{
	float4 position : POSITION0;
	float2 uv : TEXCOORD0;
};

struct PixelInput
{
	float4 position : SV_POSITION0; 
    float2 uv : TEXCOORD0;
};

PixelInput VS(VertexInput input)
{
	PixelInput output;
	...
	output.uv = input.uv;

	return output;
}

여기까지 좌표를 대응하고, 이를 픽셀 셰이더로 넘겨주는 방법을 배웠다.