[ 대마왕의 유니티 URP 셰이더 그래프 스타트업 1 ] Part01 ~ Part03

Part1. 셰이더

1. 셰이더란 무엇인가?

일반적 정의

 3D 컴퓨터 그래픽에서 최종적으로 화면에 출력하는 픽셀의 색을 정해주는 함수

 

감성 한 스푼

 직영하면 음영, 그늘. 그래픽 데이터의 음영과 색상을 계산하여 다양한 재질을 표현하는 계산 방법 

 

메터리얼 vs 셰이더

메터리얼은 셰이더를 담는 그릇이다. 

구분	셰이더	머티리얼
역할	그리는 법 정의	셰이더에 값을 채워넣은 '스킨'
형태	코드 or 그래프	에셋 파일
실행	GPU	GPU에서 셰이더와 함께 작동
관계	머터리얼의 뼈대	셰이더에 따라 달라짐

 

 

2. 왜 그래픽 아티스트가 셰이더를 배워야 하는가?

나는 프로그래머니까 왜 내가 셰이더를 배워야 하는가 생각해보자면

1. cs 스크립트를 짜는 것 이외에 셰이더로 구현할 수 있는 것들이 존재함. 두 가지를 모두 알고 내가 선택하고 싶다.

2. 이 분야에 대한 기초적인 소양을 갖추기 위해.

3. 재밌을 것 같다. 나도 펑펑 내리는 눈, 물 구현해보고 싶다...!

---

Part2. URP와 셰이더 그래프

1. 유니티 URP (Universal REnder Pipeline)

유니티는 2018버전부터 SRP(Scriptable Render Pipeline)이라는 렌더링 파이프라인을 추가하여 발표함

이 안에서 구동되는 2가지의 템플릿을 공개했는데, HDRP와 URP이다.

 

HDRP(High Definition Render Pipeline)는 하이엔드 PC나 콘솔 등을 고려해서 고품질의 비주얼을 구현하는데 적합한 파이프라인이고,

URP(Universal Render Pipeline)는 2019.1부터 정식 출시된 Mobile 및 하이엔드 콘솔 및 PC에서도 사용가능한 범용 렌더링 파이프라인이다.

 

-> 극사실적인 그래픽이 필요한 AAA게임에는 HDRP가 쓰이고, 여러 플랫폼으로 출시해야 하거나 성능 최적화를 고려해야 하는 경우에는 URP가 쓰인다.

 

2. 셰이더 그래프 (Shader Graph)

HLSL는 셰이더 프로그래밍 언어이다. Unity, Unreal, DirectX 등에서 GPU에서 실행되는 셰이더를 작성할 때 쓰는 표준 언어 중 하나이다.

이 책에서는 HLSL 셰이더를 노드 형태의 껍데기로 감싸 만든 셰이더 그래프로 학습할 예정.

셰이더 그래프로 제작된 셰이더는 HLSL 셰이더로 다시 변환되어 적용된다.

 

---

Part3. 셰이더를 익히기 위한 기반 지식들

1. 렌더링 파이프라인 (Rendering Pipeline: 렌더링의 순서)

* 랜더링 파이프라인이란?

 3D 데이터를 GPU에 전달해서, 최종적으로 화면에 2D 이미지(픽셀)로 그리기까지의 일련의 처리 과정

 

1단계. 오브젝트 데이터 받아오기

CPU가 3D 모델의 버텍스(정점) 데이터, 텍스쳐, 머티리얼 정보를 GPU에게 넘겨주는 단계

• 이 데이터는 GPU 메모리에 저장되고, GPU에서는 넘겨 받은 버텍스들을 이어 붙여 삼각형들을 생성해서 오브젝트의 기본적인 형태를 갖출 수 있게 된다.
• ex) 정점의 인덱스 넘버, 정점 좌표(x,y,z), 텍스쳐 좌표(u,v), 노멀(법선 벡터), 색상, 탄젠트(접선) 등

 

2단계. 정점(버텍스) 셰이더

버텍스들을 받아서 좌표 변환을 하는 단계

• 로컬 좌표 -> 월드 좌표 -> 뷰(카메라) 좌표(오쏘그래픽) -> 프로젝션 좌표(퍼스펙티브) 순으로 변환을 거친다.

 

3단계. 레스터라이져

정점 셰이더로 위치 변환된 삼각형들을 픽셀(프래그먼트) 단위로 분해하는 단계

• 3D 석고상을 사진기로 찍어 2D 이미지로 만들듯이, 3D 이미지가 2D 이미지가 되는 순간이다.
• ex) A 정점의 UV가 (0,0), B가 (1,0), C가 (0,1)면 가운데 픽셀의 UV는 (0.33, 0.33)쯤 됨

 

4단계. 픽셀 셰이더/ 프레그먼트 셰이더

각 픽셀마다 실행되는 셰이더 함수로, 해당 픽셀의 최종 색상을 결정하는 단계

 

• 조명, 텍스처, 그림자, 알파, 노멀, 반사, 굴절 등 모든 시각적 요소가 여기에 들어감

 

* 읽어보면 좋을 내용

https://docs.unity3d.com/kr/2022.1/Manual/render-pipelines.html

렌더 파이프라인 - Unity 매뉴얼

 

 

2. 모니터에 표현되는 색과 빛의 기본원리

색을 숫자로 인식하기

• 모니터에 표현되는 색은 가산혼합(빛의 삼원색). 모두 더하면 흰색이 된다.
•  RGB가 모여 하나의 픽셀을 이루고 있음

예시

흰색 = RGB(100%, 100%, 100%) = Float3(1.0, 1.0, 1.0)
검은색 = RGB(0%, 0%, 0%) = Float3(0.0, 0.0, 0.0)
빨간색 = RGB(100%, 0%, 0%) = Float3(1.0, 0.0, 0.0)
회색 = RGB(50%, 50%, 50%) = Float3(0.5, 0.5, 0.5)

 

컬러를 연산해보기

컬러를 Float3(R, G, B) 형식으로 생각하면, 벡터처럼 연산할 수 있다.

 

컬러의 덧셈/ 뺄셈

• 두 색을 더함으로써 밝아지거나 새로운 색이 생성됨
• Float3(1.0, 0.0, 0.0) + Float3(0.0, 1.0, 0.0) = Float3(1.0, 1.0, 0.0) → 빨강 + 초록 = 노랑
• 단, 결과값 clamp(0~1) 해줘야 함

컬러의 곱셈/ 나눗셈

• 색 또는 색과 스칼라(숫자)를 곱함
• Float3(1.0, 0.5, 0.0) * Float3(0.5, 1.0, 1.0) = Float3(0.5, 0.5, 0.0)
• 밝기를 조절하거나 그림자 표현에 활용

컬러의 반전

• 각 색 성분을 1.0에서 빼줌
• Float3(1.0, 0.0, 0.0) → 빨강
• 반전: Float3(0.0, 1.0, 1.0) → 하늘색