셰이더 그래프 학습 정리 - '샤라웃 투 고라니🦌' (3)

💭회고

셰이더 그래프 학습 정리 - '샤라웃 투 고라니🦌' (2)

셰이더 그래프 학습 정리 - '샤라웃 투 고라니🦌'

---

1. Input 입력

1) Boolean 부울

: Static Bool Parameter과 StaticSwitch를 사용.

---

2) Color 색깔 (포스트 프로세싱)

2025.03.11 - [Dev./그래픽스 Graphics] - [TIL_250311_2] 포스트 프로세스 효과 #그래픽스

[TIL_250311_2] 포스트 프로세스 효과 #그래픽스

---

3) Constant 정적숫자

---

4) Integer 정수

머티리얼 자체에는 정수형 파라미터가 직접적으로 존재하지 않음(Scalar는 실수).

---

5) Slider 슬라이더

Parameter에 Min ~ Max 범위를 지정하면 머티리얼 인스턴스에서 슬라이더 형태로 편집 가능

---

6) Time 시간

Time 노드가 있음. DeltaTime 노드도 있음

언리얼 엔진에서 Delta Time은 시간 기반 계산에 중요한 개념이다. 머티리얼에서도 이를 활용하여 애니메이션이나 효과를 구현할 때 사용되기도 한다.
💠Delta Time은 두 프레임 사이에 걸린 시간, 즉 한 프레임이 끝나고 다음 프레임이 시작될 때까지의 시간.
💠머티리얼에서 애니메이션과 같은 시간 의존적 작업을 수행할 때 유용. 프레임 레이트가 일정하지 않더라도 애니메이션이 매끄럽게 재생될 수 있도록 도와준다.

---

7) Vector1, Vector2, Vector3, Vector4 (벡터의 연산)

유니티에서는 낮은 차원으로 전환돼서 계산이 되지만, 언리얼에서는 오류가 난다.

---

2. Geometry 기하학

1) Bitangent Vector, Normal Vector  (✨중요✨)

노말 벡터(Normal Vector): 3D 오브젝트의 표면에서 노말 벡터는 그 표면이 “어느 방향을 향하고 있는지”를 알려주는 화살표라고 생각하면 된다.

• 예를 들어, 평평한 종이가 있다고 할 때, 그 종이에서 수직으로 튀어나온 화살표가 바로 노말 벡터다. 이 화살표는 조명이 어디서 오더라도 빛이 어떻게 반사되는지 계산할 때 중요한 역할을 한다.
• Tangent Space에서의 노말: 3D 오브젝트에 기록된 노멀 정보(ex. 노멀 맵)가 없으면 기본적인 상태로("평평하다") (0,0,1)이라는 노멀 벡터를 사용한다. ➡️ (R=0, G=0, B=1)이므로 파란색으로 표현된다.
• 표면의 방향을 표현할 때 노멀 벡터뿐만 아니라 탄젠트 벡터 (Tangent Vector)와 비탄젠트 벡터 (Bitangent Vector)도 같이 사용된다. 탄젠트 벡터는 표면 위의 한 쪽 방향. 가로 방향(U)을 나타낸다. 바이탄젠트 벡터는 탄젠트 벡터의 수긴인, 세로 방향(V)을 나타낸다. 두 벡터는 노말 벡터와 함께 오브젝트 표면에서 직교(서로 수직)하는 기본 좌표계를 형성한다. 이 좌표계 덕분에 텍스처에 담긴 정보(주로 UV 좌표에 기록!)와 실제 3D 공간의 방향 정보를 연산할 수 있게 된다.
  • 이 세 벡터 T (탄젠트), B (비탄젠트), N (노말)로 TBN 행렬을 구성하여 :
  • 텍스처에 기록된 노멀 데이터(보통 RGB값으로 표현됨) ➡️ 실제 3D 모델의 조명 계산에 필요한 노멀 데이터(월드 스페이스 혹은 오브젝트 스페이스의 노멀)로 바꿀 수 있다.
  • 다시 말해 TBN 행렬은 텍스처와 3D 공간 사이의 번역기 역할을 한다고 보면 된다.
  • 역행렬(역치환)을 통한 기본 노멀 복원: 때에 따라 이 변환을 반대로 적용해서, 3D 모델의 노멀 정보에서 다시 탄젠트 공간의 기본 노멀인 (0,0,1)로 돌려보내야 할 때가 있다.
    
    • 디버깅 또는 테스트용 : 3D 그래픽 작업 중에 노멀 맵 데이터가 잘못 렌더링 되거나 왜곡된 경우, 원래 기본 노멀 데이터로 복원해서 문제를 찾는 데 도움을 줄 수 있다.
    • 누락된 노멀 데이터 복원 : 텍스처 맵의 노멀 정보가 불완전하여 누락된 경우, 기본값으로 복원해서 "평평한 표면"으로 처리할 수 있다. 이렇게 하면 비정상적인 렌더링 문제는 방지할 수 있다.

---

2) Screen Position 화면 UV (굴절 셰이더) 📌

모드를 Tiled로 하면 씬의 UV를 바둑판식으로 표현한 것처럼 보여진다. 이 씬 UV는 굴절 셰이더를 만들 때 유용하다. 굴절 셰이더는 주로 물, 유리, 얼음과 같은 투명한 재질을 표현할 때 사용한다.

구현 방식:

• 카메라 정보 가져오기 : GrabPass를 사용하여 화면의 텍스처 정보를 가져온다. 
  
  • GrabPass ? : 카메라가 현재 화면에 렌더링한 정보를 텍스처로 가져오는 기능. 이를 통해 화면의 배경 정보를 활용하여 굴절 효과를 계산할 수 있다.
  • Screen Position : 화면 좌표 기준으로 빛의 경로를 계산. 이를 통해 굴절된 이미지를 표현할 수 있다.
• UV 좌표 왜곡 : 굴절 효과를 위해 텍스처 좌표를 노이즈 값이나 수학적 계산을 통해 변형한다.
  • UV 매핑 : 굴절 효과를 적용하기 위해 텍스처 좌표를 왜곡시켜 빛이 굴절된 것처럼 보이게 한다.
• 렌더링 : 변형된 텍스처를 사용하여 굴절된 이미지를 렌더링한다.

 

3) UV

3D 도형을 전개도로 펼쳐, 텍스처를 입히기 위한 그림판이라고 보면 된다.

UV

UV는 Float2!. 즉, B는 없다

R 채널

G 채널

[UNITY] 쉐이더 3장 - UV Animation, Time, 불만들기

4) Vertex Color 정점 색깔 (지형 셰이더)

Vertex Color는 정점의 색깔을 표현한다.
랜드스케이프 지형 색상(머티리얼)에 활용된다.

[UNITY] 쉐이더 4장 - 버텍스 컬러

5) View Direction✨

각 정점 또는 프래그먼트(fragment, 화소)가 카메라(씬의 관찰자라고 할 수 있는 눈, 시야)와 어떤 방향에 위치해 있는지를 나타내는 벡터를 의미. 이 방향 벡터는 렌더링 시 다양한 시각 효과를 계산하는 데 사용된다.

• 카메라의 역할:
  • 카메라의 위치와 회전에 따라 오브젝트를 바라보는 방향이 달라진다.
  • 오브젝트의 월드 좌표와 카메라의 위치(혹은 방향)를 비교하여, 조명이나 후처리 효과에 사용되는 뷰 벡터(view vector, vire direction)를 계산할 수 있다.

우리 눈(카메라)의 방향과 노멀 벡터와의 각도가 거의 일치했을 때, 각도가 0이기 때문에 1에 가까워 밝게 나타나고, 모서리(?) 부근은 90에 가깝기에 0에 가까워서 어둡게 나타난다.

뷰 다이렉션을 노멀라이즈하면 크기가 1이 된다. 그 값과 노멀 벡터를 Dot Product(내적 연산)하면 Cosθ가 나온다.

뷰 다이렉션은 Fresnel의 기본 원소가 된다.

코사인 그래프 : 각도가 0에 가까우면 1, 각도가 90에 가까우면 0

✨뷰 벡터는 3D 그래픽스의 핵심 개념 중 하나로 렌더링 기술에서 중요한 역할을 한다!

• 1) 프래그먼트(오브젝트의 특정 점) 위치:
  각 픽셀이나 프래그먼트는 월드 좌표계 상에 위치를 가지고 있다. 예를 들어, 프래그먼트의 위치가 P라고 하면, 이 위치는 오브젝트의 월드 좌표로 표현된다.
• 2) 카메라 위치:
  카메라 역시 월드 좌표계 상에 위치를 가지고 있으며, 이 위치를 C라고 한다.
• 3) 뷰 벡터 계산:
  • 기본적으로 뷰 벡터는 프래그먼트에서 카메라까지의 방향을 나타낸다.
  • 계산은 간단하게 V = C - P 형태로 진행된다.
    • 여기서 V는 View Vector.
  • 이후 이 벡터를 정규화(Normalize) 하여 단위 벡터로 만들어 준다.
    ➡️ V = Normalize(CameraPosition - FragmentPosition)
    
    
• ⚠️주의사항:
  • 경우에 따라 뷰 벡터를 프래그먼트에서 카메라로 향하는 방향으로 계산하기도 하고, 반대로 카메라에서 프래그먼트로 향하는 방향으로 계산하기도 한다.
  • 조명 모델에 따라 어느 쪽을 사용하는지 결정되며, 예를 들어 Blinn-Phong 모델에서는 반사 벡터 계산 시 프래그먼트에서 카메라 방향의 벡터가 필요하다. 즉 모델마다 다르게 계산한다.
    

=========================================================================

⚡뷰 벡터가 사용되는 예시

1. 스페큘러 하이라이트 (Specular Highlights):
   • 뷰 벡터는 반사 벡터와 비교하여 스페큘러(빛 반사) 강도를 결정하는 데 사용된다. 빛이 표면에 반사되어 카메라로 들어오는 양을 계산한다.
   • 예를 들어, Blinn-Phong 조명 모델에서는 뷰 벡터와 반사 벡터(혹은 하프 벡터)를 내적하여 스페큘러 성분을 계산한다.
     

     

2. Fresnel 효과:
   • Fresnel 방정식은 관찰 각도에 따라 반사율이 달라지는 현상을 나타낸다.
   • 뷰 벡터와 표면의 노말 벡터 사이의 내적을 이용해 Fresnel 효과를 적용할 수 있다.
   • 이로 인해, 예를 들어 물이나 유리 같은 반사율이 높은 재질에서 각도에 따른 반사가 자연스럽게 표현된다.
3. 후처리 효과 (Post-Processing Effects):
   • 뷰 벡터는 화면 공간 효과(예: 화면 공간 반사, 안개 효과 등)에서 카메라 방향을 고려한 효과를 적용하는 데 활용된다.
   • 카메라의 상대적인 위치와 방향에 따라 효과의 강도나 범위를 동적으로 조절할 수 있다.
4. 환경 반사 (Environment Mapping):
   • 뷰 벡터는 환경 맵(예: 큐브 맵)에서 반사된 색상을 결정하는 데 사용된다.
   • 표면에서 반사된 벡터와 뷰 벡터의 관계를 이용해 환경의 이미지를 샘플링할 수 있다.

 

View Direction은 툰 셰이더(Toon Shader 또는 Cel Shader)를 구현하는 데 매우 중요한 요소이기도 하다...!

• A: View Direction과 법선 벡터의 각도에 따른 윤곽선 표현 : 윤곽선 생성 (Outline)
  
  • View Direction과 법선 벡터가 거의 수직일 때(물체의 가장자리) 윤곽선이 그려진다.

float outline = dot(normalize(viewDir), normalize(normal));
if (outline < outlineThreshold) {
    color = outlineColor;
}

• B: 단계적 셀 셰이딩 효과
  • View Direction과 광원 방향을 이용해 음영을 계산하고, 이를 몇 개의 이산적인 단계로 나눈다

vec3 lightDir = normalize(lightPos - fragPos);
float diffuse = max(dot(normal, lightDir), 0.0);
// 단계적 음영 효과 적용
diffuse = floor(diffuse * levels) / levels;
vec3 cellColor = lightColor * diffuse * objectColor;

• C: View Direction을 활용한 스타일화된 하이라이트
  • View Direction을 사용한 반사 계산을 통해 만화적인 하이라이트를 만든다

vec3 viewDir = normalize(cameraPos - fragPos);
vec3 reflectDir = reflect(-lightDir, normal);
float spec = pow(max(dot(viewDir, reflectDir), 0.0), shininess);
// 이진 하이라이트 효과 (있거나 없거나)
spec = (spec > specThreshold) ? 1.0 : 0.0;
vec3 specular = lightColor * spec;

• D: 가장자리를 강조하는 림 라이팅 효과
  • View Direction과 법선 벡터의 관계를 이용해 물체의 가장자리를 강조하는 효과

float rim = 1.0 - max(dot(viewDir, normal), 0.0);
rim = smoothstep(rimMin, rimMax, rim);
vec3 rimColor = rimLight * rim * rimIntensity;

유니티 예시

 

---

🔗참고 링크

https://mingyu0403.tistory.com/301

기본 라이팅 연산