UNITY COOKBOOKSHOT BY. INS

PART 6쉐이더 (Shader) 뽀개기

쉐이더 (Shader) 란 ?

Shade( 색조ㆍ음영 ) 이란 뜻에 동사인 ‘ -er’ 를 붙여 “색의 농도 , 색조 , 명암을 주는 주체” 라고 해석할 수 있습니다 .게임에 표현되는 아름다운 그래픽 또는 여러 화면 효과를 전면적으로 다루는 역할을 수행하고자질구레한 그래픽의 게임도 Shader 라는 파운데이션으로 화장하듯이 게임의 시각효과를 치장할 수 있습니다 .하지만 , 그렇게 간단한 작업이 아니므로 수학 또는 여러 그래픽 개념 요소를 알고 있어야 합니다 .

( 1 / 13 )

SHADER !

게임 속에서의 빛 #1

유니티에서 평범하게 쓰이는 구 (Sphere) 를 봅시다 .일반적으로 객체를 쓰일 때는 몰랐지만 , 자세히 보면 객체에 지는 명암을 보실 수 있습니다 .물론 어디선가 빛을 받아 빛나는 영역과 그림자가 지는 영역으로 객체 자체에 음영이 집니다 .이는 기본 객체인 ‘ Directional Light’ 의 영향을 받는데 유니티 상에서의 ‘태양’ 입니다 .

( 2 / 13 )

# 구 (Shpere) 의 명암

제일 밝은 영역

제일 어두운 영역

게임 속에서의 빛 #2

내리쬐는 태양을 위로 올려 모든 사물이 빛을 받지 않도록 해보았습니다 .지금은 ‘ Point Light’ 로 주변 객체가 보이게 했지만 실제로는 아무것도 안보이는 어둠입니다 .벡터 한 줄기로 모든 음영을 계산한다고 생각하고 계세요 . 잠시 후 다룰 예정입니다 .이제 빛에 대해서 자세하게 ‘ Directional Light’ 외의 여러가지 라이트 종류를 살펴봅시다 .

( 3 / 13 )

게임 속에서의 빛 #3

‘Directional Light’ 는 게임 내의 태양을 의미합니다 . 모든 객체에 영향을 받고 심지어 하늘까지 영향을 받는 라이트입니다 .‘Pointlight’ 는 구체형 라이트이며 , 주변의 공간을 밝힐 때 자주 쓰입니다 .‘Spotlight’ 는 원뿔 모양 라이트이며 , 손전등이나 무대에서의 주인공을 밝힐 때 자주 쓰입니다 .다른 여러가지 라이트도 존재하지만 사용이 까다롭고 프리 버전에서는 사용할 수 없으니 생략하겠습니다 .

( 4 / 13 )

# Directional Light # Pointlight # Spotlight

게임 속에서의 빛 #4

위에서 설명한 명암 표현에 대해서 구체적으로 알아봅시다 .3D 물체의 Polygon 표현은 ‘ Vertex’ 3 개가 모여 이루는데 이 ‘ Vertex’ 하나 하나마다 법선 벡터가 존재합니다 .이는 ‘ Vertex’ 의 지면과 수직인 벡터를 뜻하며 ‘ Directional Light’ 벡터와 내적을 하여 0 ~ 1 값들을 구하여0 에 가까울수록 어두워 지는 Vertex 를 , 1 에 가까울수록 밝아지는 Vertex 를 칠해줍니다 .그리고 3 개의 Vertex 색상은 GPU 상에서 Blending( 혼합 ) 되어 그라데이션으로 표현 , 명암이 만들어집니다 . ( 5 /

13 )

Normal Vector

Sun

Vector (Sun)

34˚ (0.2)

25˚ (0.17)

85˚ (0.9)

RESULT:

#1 (↑)

#2 (↑)

#3 (→)

게임 속에서의 빛 #5

아 , 물론 명암을 표현하는 기술은 하나 더 있습니다 .Vertex 뿐만 아니라 픽셀 하나 하나에도 직교하는 법선 (Normal) 벡터가 있거든요이 기술은 내적 값을 구해 Vertex 가 아닌 픽셀 자체의 명암을 조정해버립니다 .훨씬 부드럽고 구체적인 명암을 만들어 버리지만 그만큼 비용을 많이 잡아먹는 것이 단점입니다 .

( 6 / 13 )

Normal Vector

RESULT:

#1 (↑)

#2 (↑)

#3 (→)

x1000 배 확대

게임 속에서의 빛 #6

방금 보신 두 기술은 ‘ Diffuse’ 라는 쉐이더 테크닉입니다 . 태양 빛이 물체에 닿으면 빛이 산란하여 주변을 밝힌다는 개념이죠 .그리고 하나 다른 기술이 있는데 바로 ‘ Specular’ 이라는 쉐이더 테크닉입니다 .이는 전구를 쳐다보면 바로 알 수 있습니다 . 빛이 투사체로부터 반사되어 우리 눈으로 들어오는 빛의 덩어리를 뜻합니다 .꽤나 반짝거리는 갑옷이나 , 눈동자 등 여러 물체에서 발견할 수 있는 표현 테크닉입니다 .

( 7 / 13 )

정 반사 난 반사

Specular

게임 속에서의 빛 #7

이렇게 두 가지 표현만으로 Material( 재질 ) 표현을 자유자재로 표현할 수 있는 것이죠 . 제일 많이 쓰이기도 하고요 .그리고 고맙게도 이런 쉐이더는 유니티 자체적으로 지원하여 마음대로 옵션 조절을 할 수 있습니다 .‘Albedo’ 에서 텍스쳐를 넣으면 맵핑이 되는 순간 Diffuse 가 발동하여 명암이 생기고 ,‘Specular’ 는 자체적인 조절바가 있어서 드래그 몇 번으로 광택을 낼 수 있는 좋은 기능이죠 .물론 이 기능들은 객체 컴포넌트로 존재하는 ‘ Material’ 에서 하실 수 있습니다 . 쉐이더와 공생관계니까요 .

( 8 / 13 )

# Diffuse # Specular # Diffuse + Specular

+ =

# 쉐이더 조정옵션

게임 속에서의 빛 #8

마지막으로 ‘ Normal Map’ 에 대해서 알아보겠습니다 . 일종의 눈 속임으로 불리는 테크닉인데이는 ‘ Albedo’ 에서 텍스트를 씌우듯이 ‘ Normal Map‘ 도 텍스쳐를 받고 객체에 씌우는 역할을 수행합니다 .근데 텍스쳐가 푸르딩딩 하지 않나요 ? 아까 객체의 픽셀마다 내적값 구해서 음영 표현하는 것을 보셨나요 ?맞습니다 . 저 씌워지는 대상의 객체 픽셀의 Normal Vecter 를 바꿔버리는 Offset Texture 입니다 .물론 변경 정보는 R(x축 ), G(y축 ), B(z축 ) 으로 표현되어 저런 색상의 텍스쳐가 나옵니다 .

( 9 / 13 )

# Normal Map

게임 속에서의 빛 #9

이해를 돕기 위하여 유니티에서 직접 만들어보겠습니다 .Plane Object 를 이용하여 A4 용지같은 텍스쳐를 넣고 , 구글링을 통하여 종이 질감의 Normap Map 을 구합니다 .이후 종이 객체의 Material Component 에서 ‘ Normal Map’ 에 텍스쳐를 추가합니다 .그러면 평평하게 누워있는 픽셀과 픽셀의 Normal Vecter 들이 Normal Map 을 통해 Normal Vecter 벡터가 휘게 되고Diffuse 쉐이더 내적 과정에서 종이가 구겨진 음영을 만들어버립니다 .

( 10 / 13 )

ADD# BEFORE # AFTER

UV?

머리 아픈 이론으로 잠시 쉴 겸 다른 것을 알아보겠습니다 .유니티 상에서의 객체를 ‘ Albedo’ 를 통해 텍스쳐를 씌울 때 마법 보따리 씌우듯이 씌워지는 것이 아닙니다 .페인트 (Texture) 를 들고 있고 , 설계도 (UV) 를 보면서 정확하게 칠하는 것이죠 .잔인한 표현이지만 UV 원리는 3D 모델을 조각내어 2D 좌표로 가죽을 펼쳐 설계도를 만들어 내는 것이죠 .그리고 ‘ UV’ 라는 표현은 ‘ XY’ 와 헷갈리지 않도록 단순히 저렇게 표현 된 것입니다 .

( 11 / 13 )

점과 선과 면 #1

쉐이더는 단순히 픽셀의 명암만 조절할 수 있는 것이 아닙니다 .3D 물체 상에서의 점 (Vertex), 선 (Edge), 면 (Polygon) 의 조작도 가능합니다 .유니티에서의 ‘ Terrain’ 객체는 붓으로 지형을 조정할 때 면에 붙어있는 수많은 Vertex 를 이용해 지형을 만들죠 .또한 DX11 로 넘어오면서 평평했던 지형을 실제로 입체감 있게 Mesh 자체를 변형하기도 합니다 .

( 12 / 13 )

# 터레인 (Terrain) # DX11 Tessellation

점과 선과 면 #2

실제로 사람을 아주 가까이에서 볼 때는 모공까지 뚜렷하게 볼 수 있지만아주 먼 거리에서 보게되면 형체조차 알아보기 힘들게 됩니다 .이는 유니티에서도 적용되어 있는데 거리가 멀 수록 해당 객체의 폴리곤이 감소되어 최적화 효과를 볼 수 있습니다 .또한 LOD 기능 또한 쉐이더 내부 코드에서 숫자만 변경하면 쉽게 적용 가능합니다 .

( 13 / 13 )

# LOD (Level Of Detail) # 쉐이더 코드의 LOD 수동 조정

End