GLSL, 원(Circle)

완전한 3차원 장면은 Shader로 완성된다고 할 수 있는데요. Shader를 통해 매우 사실적인 물, 안개, 번개 등과 같은 표현이 가능합니다. 아래는 Shader 언어 중 GLSL로 작성된 원을 렌더링하는 코드입니다.

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;

float circle(vec2 position, float radius) {
    return step(length(position), radius);
}

void main() {
    vec2 position = gl_FragCoord.xy / u_resolution;
    position -= 0.5;
    vec3 color = vec3(circle(position, 0.3));
    gl_FragColor = vec4(color, 1.0);

}

결과는 아래와 같구요.

코드를 보면 12번은 색상을 결정해야 하는 위치 좌표를 (0,0) ~(1,1)의 범위로 정규화해 줍니다. (0,0)은 화면의 좌측하단입니다. 13번은 다시 이 좌표를 (-0.5,-0.5) ~ (0.5,0.5)로 변경해 줍니다. 원의 가운데 위치하도록 하기 위함입니다. 8번은 원을 표현하기 위한 픽셀의 색상값을 결정하는 함수의 코드인데요. step(A, B)는 B가 A보다 크거나 같으면 1을 반환하고, 아니라면 0을 반환합니다.

GLSL를 이용한 그래픽 효과

3차원 그래픽에서 특수 효과는 쉐이더를 통해 대부분 구현됩니다. 이 글은 간단한 GLSL 쉐이더 코드를 통해 물과 불에 대한 효과를 소개합니다.

먼저 불에 대해 구현하고자 하는 모습은 다음과 같습니다.

다음은 물에 대한 결과입니다.

전체 소스코드는 아래 링크를 통해 다운로드 받으실 수 있습니다. 웹기반에서 구현된 코드이므로 js와 css, html 파일로 구성되어 있으며 WebGL 2.0으로 쉐이더 코드가 실행됩니다.