시작 - GLSL [1]

각 GLSL 에디터마다 제공되는 코드는 다르지만 그 목적은 거의 비슷하다.

따라서 오늘은 기본 제공되는 코드들을 분석해보겠다.

#ifdef GL_ES
precision mediump float;
#endif

uniform float u_resolution;
uniform float u_mouse;
uniform float u_time;

void main() {
	gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
}

The Book of Shader Editor에서 새 프로젝트를 시작하면 GLSL 파일을 생성하면 아래와 비슷한 기본 코드가 제공된다.

 

#ifdef GL_ES

이 줄은 GLSL 코드가 WebGL에서 실행될 때 해당하는 코드 블록을 컴파일하도록 하는 전처리기 지시문입니다. GL_ES가 정의되어 있는 경우, 이 블록의 코드가 사용된다.

C언어로 치자면 #define과 비슷하겠다.

precision mediump float;

WebGL에서 사용하는 데이터 유형의 정밀도를 설정하는 데 사용된다. mediump는 중간 정밀도를 나타내며, 픽셀 색상 계산에 사용될 부동 소수점의 정밀도를 나타낸다.

#endif

전처리기 지시문의 종료를 나타낸다. 이 부분은 #ifdef GL_ES에 대응한다.

uniform float u_resolution;

외부에서 제공되는 해상도 정보를 나타내는 유니폼 변수다. 이 변수는 셰이더 내에서 읽기 전용으로 사용된다.

이 변수를 통해 화면 비율을 바꿀수도, 전체적인 쉐이더의 기준점도 변경할 수 있기때문에 꼭 기억하고 있어야한다.
uniform float u_mouse;

마우스 입력을 나타내는 유니폼 변수이다. 
uniform float u_time;

실행 시간 정보를 나타내는 유니폼 변수이다.

이 정보를 사용해 시간이 지남에 따라 쉐이더가 변하는 효과를 얻을 수 있다.

따라서 가장 중요한 변수 중 하나이다.

gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);

이 줄에서는 모든 픽셀의 색상을 흰색으로 설정한다. vec4(1.0, 1.0, 1.0, 1.0)는 RGBA 색상을 나타내며, 여기서는 투명도를 1.0으로 설정하여 완전히 불투명한 흰색을 의미한다.

여기서 gl_FragColor는 C언어에서 printf와 같이 약속된 함수이다.

gl_FragColor외에도 gl_FragCoord도 존재한다. 이는 각 에디터마다 지정하는 변수 이름이 다르기에 항상 알아봐야한다.

Shader Toy 기본 코드

위 그림은 ShaderToy의 변수를 나타내는 창인데, 위에서 설명했던 gl_FragColor와 gl_FragCoord는 여기에서는 iResolution과 fragColor등으로 이름은 비슷하지만 약간씩 다른 것을 볼 수 있다.