본문 바로가기
Graphics/GLSL

02. Hello world!

by Lein_ 2021. 12. 29.

Hello World

일반적으로 "Hello world!" 예제는 새로운 언어를 배울 때의 첫걸음이다.

 

GPU로 텍스트를 렌더링하는 것은 초심자에겐 매우 복잡한 작업이라 대신 색상을 출력하는 것으로 한다.

GLSL(openGL Shading Language)를 통해 프로그램을 작성할 것이며 OpenGL의 역사는 openglbook.com/chapter-0-preface-what-is-opengl.html를 참고해보면 좋다. (GLSL의 컨벤션이 왜 이렇게 되었는지 알 수 있다)

 

에디터는 http://editor.thebookofshaders.com/ 를 기준으로 한다.

#ifdef GL_ES
precision mediump float;
#endif

uniform float u_time;

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

밝은 핑크색의 픽셀이 출력된다. 위 코드에서 다음과 같은 사실들을 알 수 있다.

 

1. Shader Language는 하나의 main 함수가 존재한다.

 

2. 최종적으로 표시될 픽셀의 color는 global variable인 gl_FragColor이다.

 

3. 이 C-flavored language는 built-in 변수(gl_FragColor같은), 함수, 타입들이 존재한다. 위에서 vec4는 4차원 벡터로 4개의 float으로 이루어져 있다. 이외에 vec3, vec2나 float, int, bool 등도 존재한다.

 

4. vec4를 자세히 보면 RED, GREEN, BLUE, ALPHA 채널에 대응하는 4개의 인자를 볼 수 있다. 또한 이 값들은 normalized되어 0.0~1.0 사이에서 존재하는 값임을 알 수 있다. (100.0을 넣어도 1.0과 동일하고 -50을 넣어도 -1과 동일하다)

 

5. 이 예제에서 볼 수 있는 또다른 중요한 C언어의 feature로는 전처리기 매크로이다. 매크로는 사전 컴파일 단계의 일부이다. 이를 통해 #define 으로 전역 변수를 정의하거나 조건문 매크로(#ifdef, #endif) 선언이 가능하다. 모든 매크로 명령은 #로 시작한다. 사전 컴파일은 컴파일하기 직전에 발생하며 모든 콜들을 복사해 #define에 넣고 #ifdef, #ifndef 조건문을 체크한다. 위 예제에서는 GL_ES가 정의되었는지 체크하며, 이는 대부분 모바일 장치와 브라우저에서 코드가 컴파일될 때 발생한다.

 

6. 셰이더에서는 float 타입이 중요하며 따라서 정밀도또한 중요하다. 낮은 정밀도는 렌더링이 빠르지만 퀄리티가 떨어진다. 부동 소수점을 사용하는 각 변수의 정밀도를 지정할 수 있다. 위 예제의 두 번째 줄(precision mediump float;)에서는 모든 float의 정밀도를 medium으로 설정하고 있다. 이는 low(precision lowp float;)이나 high(precision highp float;)으로 설정할 수 있다.

 

7. 마지막으로 가장 중요한 사항은 GLSL 사양이 변수가 자동으로 캐스팅된다는 것을 보장하지 않는다는 것이다. 위 예제에서 vec4의 인자값들은 전부 부동소수점을 갖고 있다. 여기에 부동소수점을 갖지않은 정수를 넣으면 float으로 캐스팅이 되지 않고 조용히 컴파일 에러를 띄워버린다. 따라서 부동소수점을 입력하는 습관을 들여야 한다.

void main() {
  gl_FragColor = vec4(1,0,0,1);     // ERROR
}

위와 같이 소수점이 없다면 컴파일 에러가 나 흰색 화면만이 보이게 될 것이다.

 

그 외에는 C언어 문법과 유사하다. 다음과 같이 사용자가 직접 함수를 정의할 수도 있다.

vec4 red() {
  return vec4(1.0, 0.0, 0.0, 1.0);
}

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

따라서 다음과 같은 vec4도 문제없다.

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

 

간단한 예제지만 많은 것들을 살펴보았다.

 

 

'Graphics > GLSL' 카테고리의 다른 글

06. Shapes  (0) 2022.01.02
05. Colors  (0) 2021.12.31
04. Shaping functions  (0) 2021.12.30
03. Uniforms, gl_FragCoord  (0) 2021.12.30
01. Shader란 무엇인가?  (0) 2021.12.29

댓글