[Graphics] Shader Programming & HLSL

[ 좌 : URP/Lit 쉐어더 ] [ 우 : 커스텀 셰이더 ]

귀엽죠? 제가 만든 3D 버터와 셰이더에용. 어떻게 만들었는지 아래 포스트에서 볼 수 있어용!
https://bulletprooves.tistory.com/6

 
벡터 관련 메서드 정리
https://bulletprooves.tistory.com/m/11

[Graphics] HLSL Vector 벡터 메서드 정리

---

Shader Programming

간혹 게임의 화려한 그래픽과 이펙트는, 예술 작품이라 불러도 손색없을 만큼 깊은 감동을 주기도 합니다.
특히 물 반사, 불꽃, 빛 헤일로와 캐스팅처럼 눈이 즐거운 복잡한 이펙트를 구현할 때에는
많은 신경을 써야 하며, 직접 짜게 됐을 때 훨씬 자유롭고 강력한 표현이 가능합니다.
 
Unity나 Unreal 같은 게임 엔진, 그리고 Blender와 같은 DCC 툴에서는
아래 사진처럼 노드와 엣지를 이용한 그래프 형태로 셰이더를 구성할 수도 있습니다.

[좌 : Unity Shader Graph ] [ 우 : Blender Shading Nodes ]

 

HLSL

HLSL (High Level Shader Language)는 Microsoft에서 만든, DirectX(그래픽 API)에 사용되는 언어입니다.
C와 닮은 점이 많고, 특히 벡터 연산 or 행렬(matrix) 연산 등, (normalize, dot, cross) 이공계 대학 수학이 응용됩니다.
(OpenGL-API의 GLSL과도 유사하며, 엔비디아의 CG 셰이더 언어와도 똑 닮았다고 합니다.)
HLSL은 크게 [Vertex, Geometry, Pixel] shader로 3종류가 있으며, GPU에게 내릴 명령을 프로그래밍합니다.
먼저 Unity에서 셰이더 코딩을 하기 위해서는 ShaderLab에 대해 간단히 이해하고 넘어가야 합니다.

ShaderLab

ShaderLab은 셰이더의 구조와 설정을 관리하는 Unity 전용 셰이더 스크립트 시스템입니다.
ShaderLab이 직접 GPU 계산을 하는 게 아니라, 셰이더 코드(HLSL/Cg)를 감싸서
Unity 엔진이 이를 확인해 렌더링 파이프라인에 등록하고 관리하는 역할을 합니다.
대충 구조는 아래와 같습니다.

Shader "어쩌구/저쩌구_셰이더_이름"
{
    Properties
    {
        // Inspector에서 조절할 수 있는 값들 (색상, 텍스처, 숫자)
        // 아래 예시
        _Color("Main Color", Color) = (1,1,1,1)
        _MainTex("Texture", 2D) = "white" {}
    }

    SubShader
    {
        // 실제 렌더링을 정의하는 부분
        Pass
        {
            CGPROGRAM
            // 여기는 HLSL로 GPU가 연산할 코드 작성
            ENDCG
        }
    }

    FallBack "보조_셰이더" // 지원 안 될 경우 대체할 셰이더
}

 
자세히 보면 Property에는 '_' 언더바를 붙이는데, Unity에 이미 있는 타입 struct들(예를 들면 Color)과
Conflicts(충돌)를 우려하기 때문에 구분하는 관례를 권장한다고 하네요. (이런데서 버그나면... 무섭잖아요 ㅠ.ㅠ)
 
위와 같이 CGPROGRAM ... ENDCG 안에 쓰는 게 바로 HLSL 스타일 코드입니다.
(예전에는 CG(C for Graphics)라고 불렸고, 요즘은 HLSL이라고 부르는 것 같습니다...)
(Unity는 내부적으로 HLSL을 쓰면서 OpenGL로도 자동 변환해준다는 영문 글을 본 것 같은데... 이 부분은 확실치 않습니다.)
 

(기본) 자료형

기본 Built-in 타입들을 정리했습니다.

Scalar

HLSL에서는 벡터, 색상, 위치(그림자) 등을 다루기 위해 아래와 같은 Vector / Matrix 연산에 특화된 타입을 사용합니다.
가장 단순한 타입은 스칼라(scalar) 타입으로 아래와 같습니다. (숫자만 딸랑 나오니까용)

	Type	Value
	bool	true or false
	int	signed integer
	uint	unsigned integer
	half	16-bit floating point
	float	32-bit floating point
	fixed	32-bit floating point

Vector

위에 타입들이 스칼라(Scalar)였으며, 위 원소들을 나열해 벡터(Vector)로 표현하고자 한다면,

아래와 같이 값을 묶어 벡터 단위로 표현이 가능합니다.

자료형 타입	의미	사용	ex.
float	그냥 float 하나	스칼라 값, 밝기 등	float x = 1.5;
float2	float 2개 묶음 (x, y)	UV 텍스처 좌표	float2 uv = float2(0.5, 0.5);
float3	float 3개 묶음 (x, y, z)	노말벡터, 방향	float3 normal = float3(0,1,0);
float4	float 4개 묶음 (x, y, z, w)	색깔(RGBA), 위치	float4 color = float4(1,0,0,1);

 
벡터 요소에 접근하고자 한다면,

float3 color = float3(1.0, 0.5, 0.2);
float r = color.r;   // = 1.0
float g = color.g;   // = 0.5
float b = color.b;   // = 0.2

 
.x, .y, .z, .w 또는 .r, .g, .b, .a 혹은 .s, .t (UV 좌표) 로 상황에 맞게 접근 가능합니다.

Matrix

만약 4 by 4 단위 행렬(Identity Matrix)을 데이터로 표현해보고 싶다,

float4x4 identity = {
    1, 0, 0, 0,  
    0, 1, 0, 0,  
    0, 0, 1, 0,  
    0, 0, 0, 1
};

 
위와 같이 float4x4로 표현이 가능합니다.
행렬은 주로 변환(회전, 이동, 확대/축소 등 다양하게)이 필요할 때 사용하게 됩니다.
행렬 크기에 따라, float4x4, float3x2 등 비정방행렬이든 정방행렬이든 표현이 가능하며,
만약 3 by 2 행렬의 데이터가 필요하다면 아래와 같이 작성할 수 있습니다.

float3x2 fMatrix = { 0.0f, 0.1f, // row 1
                     2.1f, 2.2f, // row 2
                     4.1f, 4.2f  // row 3
                   };

 
 
살짝 헷갈리실 수 있는데, float4는 위치 벡터나 rgba 색상처럼 '기능적으로' 다른 용도로 쓰이기도 합니다.
float2는 2차원 좌표를 의미하지만, float3와 float4로 확장해도 GPU 상에서는 모두 연산에 유사하게 사용된다고 합니다.
 

---

 
저 또한 아직 셰이더 프로그래밍에 대한 지식이 많이 부족하기 때문에,
제대로 된 정보는 각종 다큐먼트나 메뉴얼, 포럼 등을 살펴보셔야 할 것 같습니다.
한국어 자료나 튜토리얼 등이 친숙하지 않아 낯설고 조금 어려워 보이기도 하지만,
익혀두면 게임 프로그래머로서 분명 큰 도움이 되리라 생각됩니다.
그럼 HLSL 셰이더 프로그래밍 예제로 다시 찾아오겠습니다.
 
오늘도 좋은 하루되시길 바랍니다. ෆ⸒⸒⸜( ˶'ᵕ'˶)⸝
 
참고 1 : https://learn.microsoft.com/ko-kr/windows/win32/direct3dhlsl/dx-graphics-hlsl-pguide?redirectedfrom=MSDN

HLSL 프로그래밍 가이드 - Win32 apps

참고 2 : https://docs.unity3d.com/kr/current/Manual/SL-ShaderPrograms.html

Unity의 HLSL - Unity 매뉴얼

참고 3 : https://blog.naver.com/lifeisforu

그냥 그런 블로그 : 네이버 블로그

참고 4 : https://blog.naver.com/sorang226/222014055905

셰이더 언어 HLSL 집중 훈련 (Crash Course in HLSL)

참고 5 : http://www.silverwolf.co.kr/shader/79529

Shader - HLSL 내장 함수