[6기 수원 최웅엽] 셰이더 알아보기

GLSL

셰이더 언어는 c++과 비슷한 모양을 가집니다. 각 셰이더 프로그램은 하나의 메인을 가져야 하며 ;로 문장의 끝을 나타냅니다. javascript언어가 ;없이 코딩 가능하기 때문에 실수하기도 하는데 조심해야 합니다.

이를 테스트 해볼 수 있는 웹상의 사이트도 많이 있습니다.

원시타입

원시타입은 void, bool, int, float 에 GLSL타입인 vec2,3,4(2,3,4차원 float 벡터) ivec2,3,4(2,3,4차원 integer 벡터) bvec2,3,4(2,3,4차원 bool 벡터) mat2,3,4(2x2, 3x3, 4x4 차원 메트릭스) sample2D, samplerCube 2D혹은 큐브 매핑된 텍스쳐에 대한 핸들러 그리고 struct를 설정할 수 있습니다..

Struct myStruct{ vec3 some; }

제한자

const(상수), uniform(일정한 값), attribute(웹지엘에서의 정점별 VS정보), varying(VS쓰기, FS읽기)가 있습니다

파라미터 제한자

In(파라미터를 함수로 넘겨준다), out(함수 밖으로 파라미터를 넘겨주지만 초기화되지 않았다), inout(함수 밖으로 넘겨주는데 초기화되어 있다.)

예를들어

Vec3 a = {0,0,0}
vec3 b;
void c(a, out b){
    b = a * 3;
}

정확도 제한자

Highp(최소 정확도), mediump(중간 정확도), lowp(최하 정확도, 그래도 색상채널의 값은 완벽하게 표현 가능)

불변 제한자

Invariant

내장 변수

그리고 간단한 내장변수들을 가지고 있습니다.

위에서 사용했던 gl_Position 같은 것입니다. (사용하는 곳)

vec4 gl_Position : 정점 위치(VS),

float gl_PointSize : 점 크기(VS), 

vec4 gl_FragCoord : 프레임 버퍼 내 프래그먼트 위치(FS), 

bool gl_FrontFacing : 프래그먼트가 앞면인지 뒷면인지(FS), 

vec2 gl_PointCoord : 점 내에서의 프래그먼트 위치(FS), 

vec4 gl_FragColor : 최종 프래그먼트 색상(FS), 

vec4 gl_FragData[] : 색상 첨부 값 n에대한 프래그먼트 색상(FS)

내장 상수

내장 상수도 가지고 있고 이들은 각각 최소 요구조건이 정해져 있습니다.

Gl_MaxVertexAttribs = 8

gl_MaxVertexUniformVectors = 128 .. 

다양한 값들이 있는데 특별한 경우가 아니면 변경할 필요 없는 값들 입니다.

벡터 성분

그리고 각 구조체 변수는 각각의 내장값에 접근이 가능한데

{x,y,z,w}나 {r,g,b,a}, {s,t,p,q}등으로 접근이 가능합니다.

또한 이는 대입에 간단하게 사용할 수 있는데 

vec4 color;

vec4 mycolor = {1.0, 1.0, 1.0, 0.5}

color.rgb = mycolor.rgg

위와 같이 color의 r에 r, g에 g, b에 g의 값이 대입된다는 것을 알 수 있습니다.

그리고 shader에서는 매트릭스와 벡터연산의 복잡한 과정을 기본적으로 제공합니다.

Vec3 uv,vv,wv

float f;

mat3 mttt;

float f = 1.4;

vec4 color = vec4(1.0, 1.0, 1.0, 1.0);

vec4 a = vec2(2.0, 4.0);

vec2 b = vec2(6.0, 8.0);

mat2 mtt = mat2(a, b); 

-> 세로로 우선해서 들어갑니다

[ 

2.0, 6.0,

4.0, 8.0

]

mat2 mtt = mat2(1.0, 0.0, 0.0, 1.0)

-> mat2 mtt = mat2(1.0) 와 같은 항등 행렬

vv = uv + f;

-> vv.x = uv.x + f; vv.y = uv.y + f; vv.z = uv.z + f 와 같습니다

내장 함수

그리고 행렬연산에서 많이 사용하는 내적, 외적 등 수학적 계산을 쉽게 할 수 있는 내장 함수들이 있습니다. 

w = cross(u, v); 외적 w = dot(u, v); 내적

단 이때 T sin(T angle)처럼 입력과 출력은 같아야합니다.

각도 및 삼각함수는 

T radians(T degrees) : 각도를 라디안으로

T degrees(T andgle) : 라디안을 각도로

T sin(T angle), T cos(T angle), T tan(T angle) : 사인 코사인 탄젠트

T asin(T angle), T acos(T x), T atan(T y, T x), T atan(T y_over_x) : 아크 사인, 코사인, 탄젠트

지수 함수

T pow(T x, T y) : x의 y승

T exp(T x) : e^x

T exp2(T x) : 2^x

T log(T x) : y = logex

T log2(T x) : y = log2x

T sqrt(T x) : x^1/2

T inversesqrt(T x) : x^-1/2

일반 함수

Abs(T x) : 절대값

sign(T x) : 양수,음수,0 확인

floor(T x) : 정수 내림

ceil(T x) : 정수 올림

fract(T x) : 소숫점영역 

mod(T x, T y) : x – y * floor(x/y) 나머지 값

mod(T x, float y) : 부동소수 y를 이용한 나머지 값

min(T x, T y), min(T x, float y) max…

기하함수

Float length(T x) : 벡터길이 반환

float distance(T x, T y) : 벡터거리 반환

float dot(T x, T y) : 내적 반환

vec3 cross(vec3 x, vec3 y) : 외적 반환(3차원 공간의 벡터들간의 이항연산의 일종)

T normalize(T x) : x와 방향은 같지만 길이가 1인 벡터를 반환

T faceforward(T n, T I, T nref) : 씬 카메라를 향하게끔 정점 법선을 조절

T reflect(T I, T n) : 반사방향 반환, n은 법선, i는 입사벡터

T refract(T I, T n, float eta) : 굴절방향 반환, n은 법선, i는 입사벡터

이 외에도 벡터의 크기비교(bvec less Than…), 항등비교 (bvec equal…), 하나라도 옳다면(bool any(bvec x)) 혹은 전부(bool all(bvec x)), true-false 변환(bvec not(bvec x))나 텍스쳐 로드함수들이 있습니다. 

전체적인 쉐이더 함수들에 대해 알아보았습니다.

다음에는 이것을 어떻게 사용하고 webgl과 접목시키는지 알아보겠습니다.