STEP 1. Shader code 직접 넣어보기
Glsl sandbox는 glsl의 온라인상에서 Pixel Shader를 테스트하는 곳이라고 할 수 있다. 접속해서 Create new effect! 버튼을 누르면 다음의 화면이 나온다.
마우스의 움직임에 따라 패턴이 달라지는 기본 코드인데, 지금 이해하기에는 어려움이 있으니 아래의 코드를 복사해 넣자.
다음의 기본적인 코드를 복사해 붙여넣자.
#ifdef GL_ES
precision mediump float;
#endif
uniform float time;
uniform vec2 resolution;
void main( void ) {
vec2 position = ( gl_FragCoord.xy / resolution.xy );
gl_FragColor = vec4( 1, 1, 1, 1 );
}흰색 화면이 나온다. 가장 마지막줄의 gl_FragColor 를 바꿔보자
gl_FragColor = vec4( 0, 0, 0, 1 );
검은 화면이 나온다. 0.5를 넣어주면 회색이 나온다. 다양한 숫자를 넣어보자.
gl_FragColor은 화면의 색상을 나타내고 vec4 는 4가지의 구성요소를 갖는다고 할 수 있다.
gl_FragColor = vec4( R, G, B, A );
이런 형식으로 값을 입력을 받고, glsl에서 색상의 범위는 0~255가 아닌 0~1이다. R, G, B자리에 원하는 숫자를 넣어보자. 단색은 너무 지루하니 변화를 줘보도록 하자. 그라데이션은 어떨까. 그라데이션을 위해 position을 이용해 보자.
vec2 position = ( gl_FragCoord.xy / resolution.xy );
position을 정의한 부분을 보자. 이것을 풀어서 쓰면
position.x = gl_FragCoord.x / resolution.x;
position.y = gl_FragCoord.y / resolution.y;라고 할 수 있는데 glsl의 간편한 언어의 특징이라고 생각하자. 이 부분을 보면 gl_FragCoord를 resolution으로 나누고 있다. gl_FragCoord는 현재 frame buffer안의 픽셀 조각들의 좌표를 가리키는데, 쉽게 말해 픽셀의 위치를 나타낸다고 할 수 있다. 왼쪽 위부터 1부터 오른쪽 끝으로 갈수록 400, 500증가할것이다. resolution은 말 그대로 현재 화면의 크기이다.
즉, vec2 position = gl_FragCoord.xy / resolution.x 이 값은 화면 어디에서나 0~1사이의 값을 갖는 점의 집합이라고 할 수 있겠다.
한번 이를 확인해 보도록 하자. gl_FragColor의 R, G, B에 position.x를 넣어보자.
gl_FragColor = vec4( position.x, position.x, position.x, 1 );
좌에서 우로 그라데이션이 생겼다. 반대의 그라데이션을 만들려면 어떻게 해야할까? 그렇다.
다음과 같이 하면 된다.
gl_FragColor = vec4( 1- position.x, 1- position.x, 1- position.x, 1 );
하지만 에러가 생긴다. 이는 position.x값이 실수이기 때문에 1(정수)에서 position.x(실수)를 뺄 수 없기 때문이다. 이럴 땐 1.0으로 바꿔주면 된다.
gl_FragColor = vec4( 1.0- position.x, 1.0- position.x, 1.0- position.x, 1 );
가끔씩 glslsandbox에서 에러가 날 때가 있는데 딱히 이유나 지점을 표시해 주지 않기 때문에 알 수 없는 일이 있다. 이럴 땐 실수가 들어가야 하는 곳에 정수가 들어간 것은 아닌지 의심해 보자.
STEP 2. position 을 이용한 색 변형
‘position’을 이용해서 다음처럼 여러가지로 바꿔보는게 가능하다.
gl_FragColor = vec4( position.x, position.y, position.x, 1 );
이런식으로 sin이나 cos을 이용하는 것도 가능하다.
gl_FragColor = vec4( sin(position.y), cos(position.x), position.x, 1 );
sin이나 cos을 이용할 때 재밌는 것은 인자를 아주 큰 수로 만들어주면 반복이 된다는 것이다.
gl_FragColor = vec4( sin(position.y*20.0), cos(position.x*12.0), tan(position.x), 1 );
숫자를 바꿔가며 자신만의 이미지를 만들어보자.