Microsoft MVP성태의 닷넷 이야기
Graphics: 7. Unity로 실습하는 Shader (5) - Flat Shading [링크 복사], [링크+제목 복사]
조회: 3166
글쓴 사람
홈페이지
첨부 파일
 

Unity로 실습하는 Shader (5) - Flat Shading

플랫 셰이더(flat shader)란 것도 있었군요. ^^ 다양한 장면을 연출하다 보면 일부러 이런 효과를 주는 경우도 있을 것입니다.

Flat Shading
; https://catlikecoding.com/unity/tutorials/advanced-rendering/flat-and-wireframe-shading/

Unity flat shader?
; http://makegamessa.com/discussion/3788/unity-flat-shader

아래의 shader 코드는 빛에 따른 음영이 아닌, 상단과 하단의 색을 정해 주면 그에 따라 그레이디언트처럼 shading을 합니다.

Shader "My/flatShader"
{
    Properties
    {
        _BaseCol("Base colour", Color) = (1,1,1,1)
        _TopCol("Top colour", Color) = (1,1,1,1)
    }
    SubShader
    {
        Pass
        {
            CGPROGRAM
    #pragma vertex vert
    #pragma fragment frag

    #include "UnityCG.cginc"

            float4 _TopCol, _BaseCol;

            struct appdata
            {
                float4 vertex : POSITION;
            };

            struct v2f
            {
                float4 vertex : SV_POSITION;
                float3 worldPos : TEXCOORD0;
            };

            v2f vert(appdata v)
            {
                v2f o;

                o.vertex = UnityObjectToClipPos(v.vertex);
                o.worldPos = mul(unity_ObjectToWorld, v.vertex);

                return o;
            }

            fixed4 frag(v2f i) : SV_Target
            {
                float3 x = ddx(i.worldPos);
                float3 y = ddy(i.worldPos);

                float3 norm = -normalize(cross(x, y));
                float l = saturate(dot(norm, float3(0, 1, 0)));
                fixed4 col = lerp(_BaseCol, _TopCol, l);

                return col;
            }
            ENDCG
        }
    }
}

여기서, pixel shader에서만 사용할 수 있는 ddxddy는 각각 World 좌표계를 기준으로 x, y 좌표에 대한 편미분 값(간단히 말해 기울기 값)을 반환합니다.

float3 x = ddx(i.worldPos);
float3 y = ddy(i.worldPos);

해당 기울기 값을 vector 취급해 외적을 한 후 정규화를 시키면 결국 x, y 기울기가 반영된 정규 벡터 값을 얻을 수 있습니다.

float3 norm = -normalize(cross(x, y));

그 값을 y 축에 대해 내적을 하면, 즉 y 축과의 코사인 각으로 값을 얻어내면 그 값이 곧 삼각형 폴리곤마다 갖게 되는 법선 벡터와 다를 바가 없습니다.

float l = saturate(dot(norm, float3(0, 1, 0)));

그리고 그 값을 기준으로 Model의 상/하위에 정해진 색상 구간으로 보간을 해주면,

fixed4 col = lerp(_BaseCol, _TopCol, l);

적당한 Flat 단위 별 색상이 입혀지게 되는 것입니다. 예를 들어, 상단을 흰색, 하단을 회색 계열로 하면 다음과 같이 렌더링됩니다.

flat_shader_1.png

텍스처를 입혀본 버전은, 상단 색상만 지정하도록 바꿨는데 역시 빛에 따른 음영을 넣지 않은 코드입니다.

Shader "My/flatTextureShader"
{
    Properties
    {
        _MainTex("Texture", 2D) = "white" {}
        _TopCol("Top colour", Color) = (1,1,1,1)
    }
    SubShader
    {
        Pass
        {
            CGPROGRAM
#pragma vertex vert
#pragma fragment frag

#include "UnityCG.cginc"

            float4 _TopCol, _BaseCol;
            sampler2D _MainTex;

            struct appdata
            {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
            };
            
            struct v2f
            {
                float4 vertex : SV_POSITION;
                float3 worldPos : TEXCOORD0;
                float2 uv : TEXCOORD1;
            };

            v2f vert(appdata v)
            {
                v2f o;

                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = v.uv;
                o.worldPos = mul(unity_ObjectToWorld, v.vertex);

                return o;
            }

            fixed4 frag(v2f i) : SV_Target
            {
                float3 x = ddx(i.worldPos);
                float3 y = ddy(i.worldPos);

                fixed4 textureColor = tex2D(_MainTex, i.uv);

                float3 norm = -normalize(cross(x, y));
                float l = saturate(dot(norm, float3(0, 1, 0)));
                fixed4 col = lerp(textureColor, _TopCol, l);

                return col;
            }
            ENDCG
        }
    }
}

상단만 흰색으로 지정하니 다음과 같이 렌더링되었습니다.

flat_shader_2.png




그 외에 다음의 글이 도움이 될 것입니다.

CG: Specify a variable not to be interpolated between vertex and fragment shader
; https://stackoverflow.com/questions/13876763/cg-specify-a-variable-not-to-be-interpolated-between-vertex-and-fragment-shader

참고로, 처음 소개했던 "Flat Shading" 글에서는 ddx, ddy를 이용한 방법이 아닌, geometry shader를 이용한 것으로 바꿨다고 합니다. 역시나, 가능한 shader만으로 자유로운 표현을 하려면 geometry의 힘을 종종 빌려야만 할 것 같습니다. ^^




[이 글에 대해서 여러분들과 의견을 공유하고 싶습니다. 틀리거나 미흡한 부분 또는 의문 사항이 있으시면 언제든 댓글 남겨주십시오.]

[연관 글]





[최초 등록일: ]
[최종 수정일: 7/18/2018 ]

Creative Commons License
이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.
by SeongTae Jeong, mailto:techsharer@outlook.com

비밀번호

댓글 쓴 사람
 




... 16  17  18  19  20  21  22  23  24  [25]  26  27  28  29  30  ...
NoWriterDateCnt.TitleFile(s)
11664정성태8/22/20182954개발 환경 구성: 393. 윈도우 환경에서 elasticsearch의 한글 형태소 분석기 설치
11663정성태8/25/20184189개발 환경 구성: 392. 윈도우 환경에서 curl.exe를 이용한 elasticsearch 6.x 기본 사용법
11662정성태8/21/20182354사물인터넷: 35. 병렬 회로에서의 커패시터파일 다운로드1
11661정성태8/21/20182210사물인터넷: 34. 트랜지스터 동작 - 컬렉터-이미터 간의 저항 측정파일 다운로드1
11660정성태9/4/20182104사물인터넷: 33. 세라믹 커패시터의 동작 방식파일 다운로드1
11659정성태8/19/20182243사물인터넷: 32. 9V 전압에서 테스트하는 PN2222A 트랜지스터파일 다운로드1
11658정성태8/18/20183753사물인터넷: 31. 커패시터와 RC 회로파일 다운로드3
11657정성태8/21/20182762사물인터넷: 30. 릴레이(Relay) 제어파일 다운로드3
11656정성태8/18/20181751사물인터넷: 29. 트랜지스터와 병렬로 연결한 LED파일 다운로드1
11655정성태8/18/20183017사물인터넷: 28. 저항과 병렬로 연결한 LED파일 다운로드1
11654정성태8/18/20182097사물인터넷: 27. 병렬 회로의 저항, 전압 및 전류파일 다운로드1
11653정성태8/18/20181988사물인터넷: 26. 입력 전압에 따른 LED의 전압/저항 변화파일 다운로드1
11652정성태9/11/20181872사물인터넷: 25. 컬렉터 9V, 베이스에 5V와 3.3V 전압으로 테스트하는 C1815 트랜지스터파일 다운로드1
11651정성태9/4/20183712사물인터넷: 24. 9V 전압에서 테스트하는 C1815 트랜지스터파일 다운로드3
11650정성태8/18/20182020사물인터넷: 23. 가변저항으로 분압파일 다운로드1
11649정성태8/14/20182155사물인터넷: 22. 저항에 따른 전류 테스트파일 다운로드1
11648정성태10/17/20182889사물인터넷: 21. 퓨즈를 이용한 회로 보호파일 다운로드3
11647정성태8/8/20182216오류 유형: 476. 음수의 음수는 여전히 음수가 되는 수(절대값이 음수인 수)
11646정성태8/8/20181950오류 유형: 475. gacutil.exe 실행 시 "Failure initializing gacutil" 오류 발생
11645정성태8/8/20182383오류 유형: 474. 닷넷 COM+ - Failed to load the runtime. [1]
11644정성태8/8/20183005디버깅 기술: 118. windbg - 닷넷 개발자를 위한 MEX Debugging Extension 소개
11643정성태8/12/20183175사물인터넷: 20. 아두이노 레오나르도 R3 호환 보드의 3.3v 핀의 LED 전압/전류 테스트 [1]파일 다운로드1
11642정성태8/3/20183136Graphics: 20. Unity - LightMode의 ForwardBase에 따른 _WorldSpaceLightPos0 값 변화
11641정성태8/3/20184531Graphics: 19. Unity로 실습하는 Shader (10) - 빌보드 구현파일 다운로드1
11640정성태8/3/20183256Graphics: 18. Unity - World matrix(unity_ObjectToWorld)로부터 Position, Rotation, Scale 값을 복원하는 방법파일 다운로드1
11639정성태8/2/20182640디버깅 기술: 117. windbg - 덤프 파일로부터 추출한 DLL을 참조하는 방법
... 16  17  18  19  20  21  22  23  24  [25]  26  27  28  29  30  ...