[카테고리:] GLSL

작성일자

GLSL, 무지개 색 표현

수평으로 7개의 무지개 색을 표현하는 프레그먼트 쉐어디 코드입니다. 배열 자료형을 사용하고 있는 예제 코드입니다.

uniform vec2 uResolution;
uniform float uTime;
uniform vec2 uMouse;

vec3 rainbow(float t) {
    vec3 colors[7];

    colors[0] = vec3(1.0, 0.0, 0.0); // 빨강
    colors[1] = vec3(1.0, 0.5, 0.0); // 주황
    colors[2] = vec3(1.0, 1.0, 0.0); // 노랑
    colors[3] = vec3(0.0, 1.0, 0.0); // 초록
    colors[4] = vec3(0.0, 0.0, 1.0); // 파랑
    colors[5] = vec3(0.29, 0.0, 0.51); // 남색
    colors[6] = vec3(0.56, 0.0, 1.0); // 보라
    
    int index = int(t * 7.0);
    return colors[index];
}

void main() {
    vec2 st = gl_FragCoord.xy/uResolution.xy;
    vec3 color = rainbow(st.x);
        
    gl_FragColor = vec4(color,1.0);
}

결과는 다음과 같습니다.

작성일자

GLSL의 mat4 타입에 대한 정리

mat4는 4×4 행렬입니다. 열을 우선(Column major) 순서로 해서 각 요소가 저장됩니다. 아래처럼요.

그래서 행렬의 첫번째 열과 세번째 열은 다음처럼 vec4 로 얻을 수 있습니다.

vec4 col1 = m[0];
vec4 col4 = m[3];

반면 첫번째 행과 세번째 행은 다음처럼 얻을 수 있습니다.

vec4 row1 = vec4(m[0][0], m[1][0], m[2][0], m[3][0]);
vec4 row4 = vec4(m[0][3], m[1][3], m[2][3], m[3][3]);

행렬의 특정 요소의 접근은, 예를들어 3번째 열의 4번째 행 요소는 다음과 같습니다.

float e = m[2][3];

행렬의 연산은 벡터의 수학적인 곱으로 많이 사용되는데 일반적으로는 다음과 같습니다.

vec4 v = ...;
mat4 m = ...;
vec4 t = m * v;

행렬과 벡터의 곱 순서를 다음처럼 바꿀 수 있는데, 그 결과는 위와 다릅니다.

vec4 t2 = v * m;

위처럼 벡터에 행렬을 곱하면 행렬을 전치시킨 것으로써, 위의 코드는 아래의 코드와 동일합니다.

vec4 t2 = traverse(m) * v;

행렬의 각 요소별 곱은 matrixCompMult이며 함수 이름에서 알 수 있듯이 거의 사용되지 않습니다.

마지막으로 역행렬을 구하는 함수는 inverse 입니다.