[엔진심화] 05. GlowDissolve, UV, Pixel Shader&Vertex Shader

목차

• GlowDissolve
  - 원리 이해하기
  - 만들어보기
• UV
  - UV 기본개념
  - 응용하기
• Pixel Shader & Vertex Shader
  - Pixel Shader
  - Vertex Shader

 

*일부 gif는 클릭해야 보입니다.

---

■ GlowDissolve

1. 원리 이해하기

이전에 만들었던 Dissolve 셰이더는 이런 느낌이었다.

 

이제 여기에 사진과 같이 빛나는 부분과 텍스쳐를 추가해보자.

 

기존 Dissolve 셰이더는 특정 텍스쳐를 대비가 강하게 만든 뒤 offset을 조절하는 방향으로 만들었었다.

만약 여기서 offset 값이 다른 요소와 합쳐준다면, 둘 사이의 차이가 생기는 부분에 저렇게 emissive를 넣어서 위와 같이 표현할 수 있지 않을까?

 

 

2. 만들어보기

전체 구성은 사진과 같다.

 

수업때는 단색으로 진행했지만 좀 더 예쁘게 만들어보고싶어서 텍스쳐를 넣는 걸로 수정했다.

 

 

1) Dissolve texture

우선 나는 처음 부분에 특정 방향의 그라데이션을 넣어서 dissolve가 해당 특정 방향으로 적용되는 것처럼 보이게 하고 싶었기 때문에, 첫 부분에 텍스쳐 둘끼리 곱해주는 부분을 추가했다.

 

2) 모양 만들기

offset이라는 이름의 property를 반전해준 다음 (인스펙터 창에서 다루기 쉬워진다) 아까 만들었던 dissolve 텍스쳐에 빼준다. 그런 뒤, 나온 결과물을 좀더 딱딱하게 (가장자리가 회색에서 더 흰색으로 가게, 즉 대비가 강해지게) 해주기 위해서 Hard라는 이름의 property로 나눠준다. 그렇게 해주면 0부터 1의 색상을 그래프로 봤을 때, 좀 더 경사가 심해지게 된다.

그 다음 값이 0 미만, 혹은 1초과가 되지 않도록 saturate노드로 한번 잘라주고, floor로 딱딱하게 만들어준다.

 

 

3) 텍스쳐 Lerp 시키기, Emissive 강도 조절 추가

위에서 만들었던 모양의 흰색 부분/검정색 부분에 각각 색을 넣어주기 위해서 Lerp 시켜준다.

단색도 괜찮고, 텍스쳐도 괜찮다.

그 다음 우리가 만들려고 하는 셰이더는 띠 같은 부분에 이미시브가 생기는 것이므로, Multiply 노드로 색상이 HDR 영역으로 넘어갈 수 있게끔 만들어준다.

그런 다음, BaseColor에 연결해준다.

 

4) Alpha

알파값 또한 선명하게 만들어주기 위해 Ceiling노드를 사용해준다.

참고로 여기서 Ceiling 노드가 아니라 위에서 했던 것처럼 Floor 노드를 사용해주면 빛나는 부분만 남게된다.

 

완성!

 

참고로 그라데이션을 처음에 곱해주지 않으면 아래처럼 전체적으로 변하는 모습이 된다.

Alpha 부분에서 Ceiling 노드가 아닌 Floor 노드를 이용해서, 값들을 0으로 내려버린 모습. 빛나는 곳만 남았다.

 

 

 

■ UV

1. UV 기본개념

 

UV라는 것은 모델링 작업을 할 때 많이 접하게 되는데, 이것을 게임 엔진 안에서 정말 다양하게 활용할 수 있으며, 꼭 이해하고 넘어가야 하는 중요한 개념이다.

 

UV란, 간단히 말해서 버텍스의 정보에 대응하는 (0,0)에서 (1,1) 까지의 공간을 말하는 것이다.

하나의 좌표로 볼 수 있으며, 각각의 축이 u 축과 v 축이다.

x축, y축과 같이 연속되는 두 개의 알파벳을 축 이름으로 정한 것이다.

 

이 오묘한 그라데이션을 아마 많이 보았을 것이다.

이게 바로 UV 좌표 공간을 색으로 표현한 것이다.

U(가로 축)는 R값으로, V(세로 축)은 G값으로 표현해서, 위 그림을 잘 보면 왼쪽 아래, 즉 (0,0)은 검정색이고, 오른쪽 위, 즉 (1,1)은 노란색인 것을 확인할 수 있는데 이건 float3으로 RGB값을 표현한 것에서 B 부분만 없는 것과 같다.

이게 바로 UV좌표 공간을 각각 R과 G라는 채널로 표현한 값이었던 것이다.

 

* OpenGL과 DirectX는 UV좌표가 조금 다르다.

아래 이미지를 참고하면 된다. 유니티에서는 OpenGL UV 좌표를 사용한다.

 

이 UV 좌표에도 똑같이 연산을 할 수 있는데, 이미지로 보면 이해가 빠를 것이다.

gif 상에서는 U축과 V축 동일하게 약 0.3만큼 더했다고 치면,

맨 왼쪽 아래 버텍스를 기준으로 (0,0) 에서 (0.3,0.3)이 된 것이다.

나머지 버텍스들도 똑같이 움직인다.

만약 UV좌표가 (0.5,0.5)인 버텍스가 각각의 축에 0.3씩 더해졌다고 치면 (0.8,0.8)이 된다.

 

이제 저 연산을 엔진에서 해보자.

UV coordinate 노드에 add 노드를 이용해서 더해준다.

위 사진의 UVAdd라는 property값이 높아질수록 UV가 이동하는 것을 확인할 수 있다.

달걀의 메인 텍스쳐(체크무늬)와 무지개색 텍스쳐 둘다 연산을 적용 해 주었기 때문에 둘 다 좌표가 움직인다.

 

UV를 펼 때 이런 UV의 특징을 이용해서 응용을 할 수 있다.

이렇게 UV를 왜곡해서 편 뒤, 엔진으로 가져와서 똑같이 add연산을 해주고 결과물을 보면

이런 느낌으로 텍스쳐가 왜곡되어서 나온다.

비슷하게 활용해서 굴절되는 느낌을 쉽게 만들어줄 수 있다.

 

 

 

 

■ Pixel Shader & Vertex Shader

설명을 들어가기 전 렌더링 파이프라인에 대해 알아볼 필요가 있다.

우리가 화면에서 볼 수 있는 결과물은 이런 절차들을 거쳐서 화면에 출력되게 된다.

그 중 오늘은 버텍스 셰이더와 픽셀 셰이더에 관해 알아볼 것이다.

 

1. 버텍스 셰이더

우리가 알고있는 '버텍스'를 다루는 단계이다.

위의 사진에서 Vertex라고 쓰여있는 윗부분에 해당한다.

버텍스를 실질적으로 변화시키는 역할을 하는데, 대표적인 예로 Displacement Map이 있다.

잠깐 설명하자면 Displacement Map은 노멀맵과는 다르게 오브젝트의 버텍스를 실제로 움직여서, 외곽을 변화시켜준다. (반대로 노멀맵은 픽셀 셰이더 단계라고 유추해볼 수 있다.)

이렇듯 실제 버텍스에 변화를 줄 수 있는 것이 버텍스 셰이더 단계라고 보면 된다.

따라서 해당 셰이더의 연산이 수행될 땐 계산해야 하는 만큼의 버텍스 수 만큼 계산한다.

 

2. 픽셀 셰이더

버텍스 셰이더와는 다르게, 화면상에 출력되는 '픽셀'의 값을 다룰 수 있는 단계이다.

이 단계에서는 버텍스는 건드리지 못하고 화면상에 픽셀이 어떻게 출력될 것인지를 다룰 수 있는데, 위에서 언급했던 노멀맵이 대표적이다. 노멀맵은 물체의 외곽은 변화시키지 못하는 대신, 물체의 표면에 버텍스로는 표현하지 못했던 디테일한 표현을 추가해줄 수 있다.

버텍스 셰이더가 버텍스의 수만큼 계산했다면, 픽셀 셰이더는 픽셀의 수만큼 계산해준다.

 

귀여운 병아리 / 뭔가 예쁜거

 

*저번 글 내용에 잘못된 부분이 있어 수정했습니다.

_MainTex, _AlphaTex, _Color 등으로 앞에 _를 붙여서 자주 사용한다고 한다. 라는 부분이 있었는데,

SRP에서는 _BaseColor처럼 규약이 바뀌었다고 합니다.

 

청강문화산업대학교 3학년 1학기 게임그래픽엔진심화 수업 정리입니다.