셰이더의 기초적인 문법과 텍스처 매핑(실습)

---

1. 기초 문법

RenderMonkey를 사용하여 HLSL의 기본적인 코드를 살펴보겠습니다.

RenderMonkey에서 DirectX 프로젝트를 생성합니다.

[ ※ ] Effect Workspace → (우클릭)  → Add Default Effect → DirectX → DirectX

생성하면 다음과 같은 Tree Control이 보입니다. 여기서 Vertex Shader와 Pixel Shader를 코딩할 수 있습니다.

// Vertex Shader
float4x4 gWorldMatrix;        // World Matrix
float4x4 gViewMatrix;         // View Matrix
float4x4 gProjectionMatrix;   // Projection Matrix

// struct for Input
struct VS_INPUT 
{
   float4 mPosition : POSITION; // 정점데이터에서 위치정보를 가져와 mPosition에 대입
};

struct VS_OUTPUT 
{
   float4 mPosition : POSITION;
};


VS_OUTPUT vs_main( VS_INPUT Input ) // 진입점 main
{
   VS_OUTPUT Output;

   Output.mPosition = mul( Input.mPosition, gWorldMatrix ); // 물체공간 x 월드행렬 = 월드공간
   Output.mPosition = mul( Output.mPosition, gViewMatrix ); // 월드공간 x 뷰행렬 = 뷰공간
   Output.mPosition = mul( Output.mPosition, gProjectionMatrix ); // 뷰공간 x 투영행렬 = 투영공간
   
   return Output;
}

gWorldMatrixm, gViewMatrix, gProjectionMatrix는 전역변수로 Variable Semantic을 사용하여 값을 가져옵니다.

각각 World, View, Projection에 Variable Semantic(우클릭)을 연결시켜 줍니다.

VS_INPUT에서 받는 값은 위 의 Tree Control에서 Stream Mapping을 더블 클릭하면 됩니다.

Usage에서 시맨틱을 선택하여 필요한 값을 불러올 수 있습니다.

예를 들어서 위의 그림의 POSITION 시맨틱은 정점데이터의 위치정보를 가져오는 것입니다.

Output을 통해서 래스터라이저에 정점셰이더의 결과값을 보냅니다.

---

// Pixel Shader
float4 ps_main() : COLOR // 진입점 main
{   
   return float4( 1.0f, 1.0f, 0.0f, 1.0f ); // 픽셀의 색 값을 지정
}

다음의 Pixel Shader 코드는 모든 Pixel의 색을 (1, 1, 0, 1)로 초기화 시켜주는 코드입니다.

---

위의 코드를 각각 실행(F5)시키면 다음과 같은 결과 화면이 보입니다.

---

2. 텍스처 매핑

// Vertex Shader
float4x4 gWorldMatrix;
float4x4 gViewMatrix;
float4x4 gProjectionMatrix;

struct VS_INPUT 
{
   float4 mPosition : POSITION;
   float2 mTexCoord : TEXCOORD0; // UV좌표
};

struct VS_OUTPUT 
{
   float4 mPosition : POSITION;
   float2 mTexCoord : TEXCOORD0; // UV좌표
};

VS_OUTPUT vs_main( VS_INPUT Input )
{
   VS_OUTPUT Output;

   Output.mPosition = mul( Input.mPosition, gWorldMatrix );
   Output.mPosition = mul( Output.mPosition, gViewMatrix );
   Output.mPosition = mul( Output.mPosition, gProjectionMatrix );
   
   Output.mTexCoord = Input.mTexCoord; // Input된 UV좌표를 Output의 UV좌표에 대입
   
   return Output;
}

TEXCOORD 시맨틱을 사용하여 UV좌표를 가져옵니다.

---

도형에 입힐 텍스처를 가져와야합니다. 

[ ※ ] Texture Mapping → (우클릭) → Add Texture → Add 2D Texture → "가져올 texture 선택"

[ ※ ] Pass0 →  (우클릭) →Add Texture Object → "가져온 texture 선택"

위의 과정을 마치면 Tree Control이 다음과 같이 나타날 것이다. (이름은 바꾼 것이다.)

// Pixel Shader
sampler2D DiffuseSampler; // 가져온 texture

struct PS_INPUT
{
   float2 mTexCoord : TEXCOORD0;
};

float4 ps_main(PS_INPUT Input) : COLOR0
{   
   float4 albedo = tex2D(DiffuseSampler, Input.mTexCoord); // 텍셀 연산
   return albedo.rgba;   // 스위즐(swizzle)
}

tex2D(텍스처 샘플러, UV좌표); // 을 통해서 텍셀의 값을 구할 수 있다.

 

스위즐(swizzle) : rgba 또는 xyzw를 사용하여 벡터의 성분에 접근하는 것 → 성분(채널)을 바꾸는 것도 가능하다.

return albedo.rbga; 

g와 b의 채널을 바꾼 결과값

---

위의 코드를 각각 실행(F5)시키면 다음과 같은 결과 화면이 보입니다.