HLSL 원 그리기

hlsl은 directX 의 shader언어로 c언어와 비슷한 언어이다. shader는 여러 색조, 명암, 농담 등을 고려해서 최종 색을 표현하는 프로그램이다. 

 

쉐이더는 파이프라인에서 vertex 위치에 대한 정보가 들어가게 되는데 그걸 처리해주는 것이 vertex shader이다. 처음 들어가는 위치에 대한 정보는 3D 상에서의 위치정보이고 해당 데이터가 우리 화면에서 어떻게 보일지 생각하면서 표현해주게 된다. 그리고 처리된 표현을 가지고 Rasterization 이라는 과정을 거쳐서 몇 개의 픽셀이 만들어지는지 결정하게 된다. rasterization에서는 위치에 따른 색 결정(interpolation), 뒷면을 그리지 않는 (back face culling) 등의 여러 작업들을 처리한다. 그리고 마지막으로 fragment shader에서 색을 처리하게 되는 작업을 통해 최종 결과물을 만들어 낸다.

 

여기서 이용자가 건들 수 있는 부분은 vertex shader, fragment shader이다. 

 

처음 vertex shader에서 3d 좌표를 받아와서 우리 화면에 어떻게 보일지 생각하고 바꿔주어야 한다. 

구조체로 input을 만들어서 입력을 받아오자

 

struct VS_INPUT 
{
   float4 mPosition : POSITION;  
};

 

c언어에서의 구조체와 같다 VS_INPUT 구조체의 속성으로 float4 는 4byte 크기라는 자료형이다. (x,y,z,a) 의 vertex 데이터들을 넣어줄 수 있다. mPosition은 POSITION에서 위치 정보들을 받아온다.

 

이제 input처리를 하고 최종 vertex 데이터를 내보내는 구조체를 만든다.

현재 input에는 픽셀 좌표계 상에서 3d 위치에 대한 정보가 들어 있다.  픽셀의 총 개수는 width * height 이다.

이런 픽셀좌표계를 중앙은 (0,0,0)으로 오는 world좌표계로 바꿔주어야 한다.

그리고 해당 좌표계에서 이제 화면에서 보이게 되는 좌표를 설정해야하는데 camera 좌표계, raster 좌표계, 이미지 좌표계 등으로 표현된다.

 

이렇게 다시 모니터에 표현되게 되는데 이것을 이제 원근법에 맞게 표현해주어야 한다. 원근법은 orthogonal projection, perspective projection가 있다. orthogonal projection는 점이 바로 수직으로 떨어지게 되는 것이다. 

perspective 원근 표현이 현실에 맞는 원근법이다.

요약하자면 world 좌표 - > view 좌표(raster, image, image) -> 원근 투영 순으로 표현하는 것이다.

float4x4 gWorldPosMatrix;
float4x4 gViewMatrix;
float4x4 gProjectionMatrix;

 

전역변수로 이렇게 만들어준다. 좌표계 변환을 위해서 모두 4x4 행렬이 필요하게 된다. 

 

struct VS_OUTPUT 
{
   float4 mPosition : POSITION;
   
};

 

output 구조체를 만들고 해당 위치 정보를 결과로 넘기게 된다.

 

VS_OUTPUT을 return하는 메인 함수를 만들 것이다.

VS_OUTPUT vs_main( VS_INPUT Input )
{
   VS_OUTPUT Output;

   Output.mPosition = mul( Input.mPosition, gWorldPosMatrix );
   Output.mPosition = mul( Output.mPosition, gViewMatrix);
   Output.mPosition = mul( Output.mPosition, gProjectionMatrix);
   
   return( Output );
   
}

 

여기서 mul은 행렬의 곱을 나타낸 것이다. world -> view -> project 순으로 곱을 한 output을 return 하게 되면

fragment shader에서 

float4 ps_main() : COLOR
{   
   return( float4( 1.0f, 0.0f, 0.0f, 1.0f ) );
   
}

 

이런 간단한 표현을 넣어준다. 이것은 모두 rgba 에서 r 값만 1인 빨간색을 나타낸다는 것이다.

 

그러면 결과로

빨간 원이 나오게 된다.

shader를 돌린 환경은 렌더몽키로 처음 기본 vertex를 input으로 넣는 것이 원 좌표에 대한 데이터로 생각해볼 수 있다.

 

전체 코드

vertexshader.vert

 

float4x4 gWorldPosMatrix;
float4x4 gViewMatrix;
float4x4 gProjectionMatrix;

struct VS_INPUT 
{
   float4 mPosition : POSITION;
   
};

struct VS_OUTPUT 
{
   float4 mPosition : POSITION;
   
};

VS_OUTPUT vs_main( VS_INPUT Input )
{
   VS_OUTPUT Output;

   Output.mPosition = mul( Input.mPosition, gWorldPosMatrix );
   Output.mPosition = mul( Output.mPosition, gViewMatrix);
   Output.mPosition = mul( Output.mPosition, gProjectionMatrix);
   
   return( Output );
   
}

 

fragment.frag

float4 ps_main() : COLOR
{   
   return( float4( 1.0f, 0.0f, 0.0f, 1.0f ) );
   
}