[엔진심화] 03. 셰이더 연산 기초

목차

• 셰이더 연산 기초
  
  - 셰이더 컬러 연산 개념
     1. 그래프로 이해하기
     2. 색은 숫자
     3. GLSL Grapher로 실습해보기
  
  - Graph Inspector 세부 설정들
     1. Workflow
     2. Unlit/Lit
     3. Additive,Multiply,Alpha
  
  - 예제 만들어보기
  
  
  

 

---

■ 셰이더 컬러 연산 개념

1. 그래프로 이해하기

 

많은 부분이 포토샵에서 커브를 편집하는 개념과 같다.

셰이더그래프에서는 그라데이션 텍스쳐 등 시각적으로 프리뷰를 볼수있지만 개념적으로는 커브 편집 즉 숫자로 색상들을 다룬다는 것으로 이해하면 된다.

간단히 말했을 때 검정색은 0, 흰색은 1이다.

그리고 그 사이의 어두운 회색, 밝은 회색 등의 색상은 0과 1 사이의 값으로 표현된다.

 

그래프로 보면 쉽게 이해할 수 있다.

www.desmos.com/calculator?lang=ko

Desmos | 그래핑 계산기

▲ 수식으로 그래프를 쉽게 그려볼 수 있는 사이트이다.

 

우선은 그래픽적인 설명 없이 수식으로만 그래프를 관찰해보자.

 

 

이렇게 0부터 1까지 있는 직선 그래프가 있다고 했을 때,

여기에 모든 값을 0.5씩 더한다고 하면

 

이렇게 0.5부터 1.5까지 있는 그래프가 된다.

 

반대로 모든 값에 0.5씩 뺀다고 하면

 

이렇게 -0.5부터 0.5까지 있는 그래프가 된다.

 

또 2제곱을 하거나, 0.5제곱을 하면 각각 이런 모양의 그래프가 된다.

 

 

이렇게 자신이 만들고 싶은 그래프 모양을 만들기위해 여러가지 수식을 사용해서 작업을 진행할 수 있다.

 

예를들어 좌우반전 되어있는 그래프를 만든다면,

1에서 원본 값을 빼 주면 된다.

 

실제로 포토샵에서 그래프를 이렇게 바꿔주면 색이 반전된다.

이에 대해서는 밑에서 더 정리해볼 것이다.

 

또, V 모양인 그래프를 만들고싶다면,

원본 그래프에서 0.5씩을 빼준 후 절대값을 적용하면 된다.

그리고 여기서 ^모양으로 만들어주려면,

아까 했던 것처럼 그래프를 반전시키기 위해 1에서 값들을 빼주면 된다. (1-x)

 

2. 색은 숫자

 

위에서 설명했듯, 색은 모니터에 표현되는 과정을 거치기 전에는 숫자로 되어있는 일종의 값들이다.

검정색부터 흰색까지는 0부터 1까지의 숫자들로 표현된다.

 

이 숫자들을 일종의 선형적인 그래프 (/ 모양)로 이해할 수 있고, 이런 모습은 포토샵에서도 확인해볼 수 있다.

원래 이렇게 되어있던 이미지의 커브를 약간 수정하면

 

이렇게 검정색부터 흰색까지, 그리고 그 사이의 많은 색들로 이루어진 색깔들에 변화가 생긴다.

셰이더그래프 상에서 숫자를 그래프처럼 편집하는 것도 이런 개념과 같다.

 

3. GLSL Grapher + Shader Graph로 실습해보기

 

GLSL Grapher (fordhurley.com)

GLSL Grapher

 

GLSL 언어를 바로 사용해보고 결과값을 얻어볼 수 있는 사이트이다.

여기서 간단하게 몇 가지 예제를 제작해보자. 원리는 위에서 설명했던 것과 같다.

위에서 만들었던 것과 비슷하게 그대로 수식을 적어주면 된다.

 

★세미콜론(;) 잊어버리지 않기!!!

 

 

 

float y(float x) {
  return (x);
}

 

x=y라는, 정말 일직선인 그래프이다.

 

float y(float x) {
  return (1.0-x);
}

1-x를 해주면 반전된다.

float y(float x) {
  return abs(x-0.5)*2.0;
}

*여기서 abs는 절댓값(absolute) 라는 뜻이다.

float y(float x) {
  return 1.0-abs(x-0.5)*2.0;
}

 

float y(float x) {
  return pow(3.,1.0-abs(x-0.5)*2.0)/3.;
}

* 여기서 pow는 제곱을 해주는 함수이다.

float y(float x) {
  float a = 12.0;
  return abs(floor(x*a)/a);
}

* 변수 a를 미리 만들어놓고, floor라는 계단식으로 그래프를 만들어주는 함수를 이용해 a단계의 계단이 있는 그래프를 만들었다.

여기에서 a의 값을 수정하면 계단이 (0,0)부터 (1,1)까지 몇 개가 있는지도 바로 수정된다.

float y(float x) {
  float a = 50.0;
  return abs(floor(x*a)/a);
}

* 위 그래프에서 계단은 총 50개이다.

 

float y(float x) {
  return saturate(x*2.0);
}

* saturate는 0 이하, 1 이상인 값들을 전부 0과 1로 만들어버린다.

 

멀리서 보면 이런 느낌이다. 그래프가 절대로 0 이하로 내려가거나, 1 이상으로 올라가지 않아 유용하게 쓸 수 있다.

 

 

이제 위에서 했던것들을 Shader Graph에서 만들어보자.

알아보기 쉽게 그라데이션 텍스쳐를 사용했다.

 

▶ Add (+)

 

각각의 값들에 똑같이 특정 값을 더해주므로 전체적으로 균등하게 밝아지는 것을 볼 수 있다.

 

▶ Subtract (-)

 

역시 전체적으로 균등하게 값이 빼지는 것을 볼 수 있다.

 

▶ Multiply (*)

 

Multiply의 경우, 예를 들어 이미 1이었던 값에 3을 곱하면 3이 되지만, 0이었던 값에 3을 곱해도 그대로 0이다.

이렇듯 값이 작으면 작을수록 변화가 적고, 값이 크면 클수록 변화가 크기 때문에 위의 Add와 Subtract와는 다른 느낌이 난다.

 

▶ Power (^)

 

Power는 제곱(^)이다. Multiply와 비슷한 느낌으로 변화한다.

 

 

 

■ Graph Inspector 세부 설정들

 

 

 

- Workflow

Unlit이 아닌 Lit 상태일 때 나오게 되는데, 스펙큘러 워크플로우로 가는지, 메탈릭 워크플로우로 가는지를 정해줄 수 있는 옵션이다.

스펙큘러 워크플로우를 고르면 마스터 스택에 스펙큘러 컬러가 생긴다.

 

스펙큘러 워크플로우를 골랐을 시, 메탈릭에 영향을 받지 않고 직접 스펙큘러 컬러를 지정해서 머테리얼을 만들 수 있다.

 

-Unlit/Lit

 

각각 빛에 영향을 받지 않는/영향을 받는 셰이더라고 생각하면 된다.

Unlit에서 Surface를 Transparent로 해줬을 경우 Additive, Multiply, Alpha 로 설정할 수 있는데 그 효과는 다음과 같다.
(위에서 그래프로 실습한 것이나, 여기에서 설정해주는 것이나 Additive, Multiply는 포토샵에서 볼 수 있는 그것과 같다.)

일단 아래 당근 이미지에서 알파를 쉽게 만들기 위해 B채널에서 뽑아서 반전시킨 뒤 알파에 연결해주었다.

(물론 정확한 알파는 아니다.)

 

 

▶ Additive

색이 서로 더해진다.

 

▶ Multiply

색이 서로 곱해진다.

 

▶ Alpha

알파를 적용한 순수한 상태의 이미지를 보여준다.

 

 

참고로 Surface를 Transparent가 아닌 Opaque로 골랐을 때는 이렇게 알파가 적용되지 않는다.

 

■ 예제 만들어보기

점차 사라지는 노이즈 모양의 셰이더를 만들어보고 싶었다.

 

배운 것들을 적당히 조합해서, 특정 변수의 값에 따라서 서서히 사라지는 것 같은 느낌으로 텍스쳐가 변화할 수 있게 만들었다.

추가로 컬러도 조절가능하도록 마지막에 multiply로 색상을 입히는 기능을 추가했다.

빛나는 느낌을 위해서 다시 multiply로 일정 값을 곱해 컬러가 hdr영역으로 넘어갈 수 있게끔 해주기도 했다.

 

 

다른 텍스쳐를 넣어 본 것들

Shere에넣어 본 것들

 

 

잘 작동한다.

 

+ 이번주는 시간이 좀 더 많았다면 뭔가 더 예쁜 걸 만들 수도 있었을 것 같은데, 그러지 못해서 아쉽다.ㅠㅠ

 

 

---

 

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