[손에 잡히는 쉐이더] GLSL의 기본 구조 : Uniform과 GL_FragCoord

공부용으로 작성되는 페이지입니다. 틀린 부분이나 환경에 따라 오류가 발생할 수 있습니다. 

 

 

---

 

기본적으로 openGL을 그리기 위해서는 cmake나 GLFW 등 다른 라이브러리를 동반해서 많이 사용하지만

해당 스터디에서는 The Book of Shaders Editor 라는 웹 에디터를 사용한다. 

 

이 스터디에서 작성하지 않은 파이프라인이나 기타 용어는 다른 글 참고 (TD 기반이므로 혼재되어있음 주의)

[GLSL] Graphics pipeline과 Vector4

 

 

1. GLSL의 기본 구조

 

#ifdef GL_ES
precision mediump float;
#endif

uniform float u_time;

void main() {
	gl_FragColor = vec4(1.0,0.0,1.0,1.0);
	// 사전에 내장된 컬러 함수 
	//Vec4는 RGBA값을 담아내는데 주로 쓰인다 
	//범위는 0~1사이에 제한되므로 주의 
}

 

2.  Uniform

uniform이란 셰이더 외부에서 셰이더 프로그램에 전달해주는 변수로,  CPU에서 GPU로 정보를 넘겨주는 변수를 말한다.

아래 예시에서도 화면의 해상도나 시간같이 한 번 정해지면 바뀌지 않는 변수들임을 확인할 수 있다.

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution; 
//Cpu에서 GPU로 변경된 해상도를 넘겨주는 변수이므로 uniform을 사용해야한다. 
uniform float u_time; //시간변수 

void main() {
	gl_FragColor = vec4(abs(sin(u_time)),0.0,0.0,1.0);
}

//절댓값 함수(abs)와 -1과 1 사이를 오가는 함수(sin)이 쓰임
//절댓값이 R값이 U_time에 따라 0과 1을 오가는 값이 된다.  

4. GL_FragCoord

프래그먼트 쉐이더는 결국 화면의 어느 픽셀에 어떤 RGB값을 띄울것인가가 최종 목표이자 이유이다.

그렇다면 ‘어느 픽셀’ 즉, 위치는 어떻게 구해야하는걸까? 그것을 해결하기 위한 변수가 GL_FragCoord이다.

 

GL_FragCoord는 화면에 존재하는 모든 픽셀에 동일하게 적용되는데, 이는 곧 어느 픽셀이나 동일한 값을 받는다는 것을 의미한다.

그런데 어떻게 위치마다 다른 색상이 나올 수 있을까?

 

 

결국국 GL_FragCoord =  좌표를 의미하기 때문이다. XYZW 값을 가지고 있으며

GLSL에서는 좌측 하단을 원점으로 양의 방향으로 x, y 값이 증가한다.

 

#ifdef GL_ES
precision mediump float;
#endif

void main() {

vec 2  st = gl_FragCoord.xy/u_resolution;
//위 변수는 '현재 픽셀이 가지고 있는 좌표의 XY 데이터를 가져와라'  가 된다. 
//같은 gl_FragCoord 변수라고 하더라도 픽셀의 상대적 위치에 따라 값이 바뀌는 것이다.
//가령 원점의 경우 0,0값이 될것이다. 

}

 

 

참고자료

 

GLSL / Shader