버텍스 및 프래그먼트 셰이더

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
Shader "Unlit/ToonVertx"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
    }
    SubShader
    {
        Tags { "RenderType"="Opaque" }
        LOD 100
 
        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            // make fog work
            #pragma multi_compile_fog
 
            #include "UnityCG.cginc"
 
            struct appdata
            {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
            };
 
            struct v2f
            {
                float2 uv : TEXCOORD0;
                UNITY_FOG_COORDS(1)
                float4 vertex : SV_POSITION;
            };
 
            sampler2D _MainTex;
            float4 _MainTex_ST;
 
            v2f vert (appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = TRANSFORM_TEX(v.uv, _MainTex);
                UNITY_TRANSFER_FOG(o,o.vertex);
                return o;
            }
 
            fixed4 frag (v2f i) : SV_Target
            {
                // sample the texture
                fixed4 col = tex2D(_MainTex, i.uv);
                // apply fog
                UNITY_APPLY_FOG(i.fogCoord, col);
                return col;
            }
            ENDCG
        }
    }
}
 
cs


프로퍼티


머티리얼의 일부로 저장되고 머티리얼 인스펙터에 나타나게 될 셰이더 변수(텍스처, 컬러 등)를 포함하고 있다.

언릿 셰이더 템플릿에서는 하나의 텍스처 프로퍼티가 선언되어있따.



SubShader



하나의 셰이더는 하나 이상의 서브셰이더를 포함할 수 있고 서브 셰이더는 일차적으로 다른 GPU성능에 맞는 셰이더를 구현하기 위해 사용된다.



Pass

각 서브셰이더는 여러 개의 패스로 구성되며 각 패스는 해당 셰이더의 머티리얼과 함께 렌더링될 동일 오브젝트용 버텍스 및 프래그먼트 코드의 실행을 나타낸다.

단순한 쉐이더는 하나의 패스만 사용하는 경우가 많지만 조명과 상호작용하는 셰이더의 경우 더 많은 패스를 필요로 한다.


CGPROGRAM .. ENDCG

버텍스 및 프래그먼트 셰이더 내의 HLSL코드 부분을 이 곳 안에 작성한다.



버텍스 셰이더


3D모델의 각 버텍스에서 실행되는 프로그램이다.

여기서 버텍스 위치를 오브젝트 공간에서 이른바 "클립공간"으로 변환한다.

GPU가 오브젝트를 화면에 래스터화하기 위해 클립 공간을 사용한다.

프래그먼트 셰이더에서 텍스처를 샘플링하기 위해 필요로한다.


래스터화 :  백터 그래픽 이미지를 비디오 디스플레이나 프린터 등의 래스터 디바이스에 출력하기 위해 래스터 이미지로 변환하는 것



프래그먼트 셰이더



오브젝트가 화면에 차지하고 있는 모든 픽셀마다 실행되는 프로그램이며 보통 각 픽셀의 컬러를 계산하고 출력하기 위해 사용된다.

화면에 보통 수백만 개의 픽셀이 있으며 프래그먼트 셰이더는 이 모든 픽셀에 대해 실행된다.


일부 변수 또는 함수 정의 뒤에는 기호가 붙는다. 이 기호에 대해서도 정리 해야겠다.

(예: POSITION 또는 :SV_Target)이 시맨틱은 이 변수의 "의미"를 GPU에 알려준다.


<셰이더를 적용>



모델을 한 가지 색으로 만드는 셰이더 예제


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 Properties
    {
        // Color property for material inspector, default to white
        _Color ("Main Color", Color) = (1,1,1,1)
    }
    SubShader
    {
        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            
            // vertex shader
            // this time instead of using "appdata" struct, just spell inputs manually,
            // and instead of returning v2f struct, also just return a single output
            // float4 clip position
            float4 vert (float4 vertex : POSITION) : SV_POSITION
            {
                return mul(UNITY_MATRIX_MVP, vertex);
            }
            
            // color from the material
            fixed4 _Color;
 
            // pixel shader, no inputs needed
            fixed4 frag () : SV_Target
            {
                return _Color; // just return it
            }
            ENDCG
        }
    }
}
cs

이 구조는 입력(appdata)및 출력(v2f)용으로 구조체를 사용하지 않고 셰이더 함수는 입력을 수동으로 판독하는 구조이다.


#pragma vertex vert : 프로젝션, 컬러, 텍스쳐 나 다른 fragment쉐이더를 coordinate하기 위해 사용 

#pragma fragment frag : 렌더링 창에서 이미지 속성을 수정하기 위한 쉐이더 프로그램, 각 화소마다 실행


POSITION : 변형 된 정점 위치

SV_POSITION : 픽셀 위치를 설명

UnityObjectToClipPos : 오브젝트 공간의 한 점을 동질적인 좌표에 있는 카메라의 클립공간으로 변환(World, View, Projection 행렬 연산을 쉽게 해주는 유니티 도우미 함수)


SV_Target : 결과를 어떤 렌더에게 보낼지 설정


<적용 후>

(얼굴은 적용하지 않아서 색이 남아있음)


학습참고

1) https://docs.unity3d.com/kr/current/Manual/SL-VertexFragmentShaderExamples.html

2) https://haewoneee.tistory.com/27


반응형

+ Recent posts