[GLSL] GLSL 내장함수 : step, Mix

공부용으로 작성되는 페이지입니다. 틀린 부분이나 환경에 따라 오류가 발생할 수 있습니다. 

 

---

 

이번 강의 내용 목차 

 

4번째 강의는 크게 IF문 / 함수(Step, Mix)로 구성되어있다. 

if문을 통해서 한 이미지 내에서 분기점을 만들고, 그 분기점에 따라 다른 이펙트가 적용되도록 만드는 것이 이번 강의의 목적이다.

참고로 문법적인 상세한 설명은 하지 않을 예정이며 모두 다루진 않으니 영상도 한 번쯤 시청하는걸 권한다. 

IF문 

TD 내의 좌표를 생각해보자. 지난 시간처럼 따로 곱해주지않는한 좌표는 기본적으로 (0,0) -> (1,1) 로 구성되어있다. 

if문과 좌표값을 적절히 사용하면 한 이미지 내에서도 여러가지 변형을 적용할 수 있다. 

void main()
{

    vec2 p = vUV.st;
    vec4 color = vec4(0.0);
    if(p.x < 0.5) {
        color = texture(sTD2DInputs[0], p);
    } else {
        color = texture(sTD2DInputs[0], p).bgra;
    }

    fragColor = TDOutputSwizzle(color);

}

 

0.5보다 큰 else에 해당하는 위치만 bgra로 나타나는 것을 시각적으로 확인 가능하다

 

 

Step() 과 Mix()

step()

 

Step() 는 GLSL 내장함수로, step(x,y) 일 때 y가 x보다 작으면 0을 반환, 그 외에는 1을 반환해준다. 

값을 입력받았을 때 0보다 작으면 0, 1보다 크면 1로 만들어주는 Saturate() 와 유사한 면이 있는 거 같다. 

(쉐이더나 쉐이더 그래프를 다룰 때 보간하느라 질리게 보게 되는 녀석이다)

 

    float edge = 0.5;
    float x = p.x;
    float result = step(edge, x);

 

즉, 이 코드에서는 p.x에서 0.5보다 작은쪽은 0이 된다! 

if문을 쓰지 않으면서도 동일한 결과를 얻을 수 있다는 이야기다. 

 

Mix()

 

mix()는 mix(x,y,a) 일 때 x는 보간 시작 값, y는 보간될 값, a는 보간하는데 사용될 수치값이다.

해당 예제에서는 x,y는 rgb-bgr 값으로 쓰였으며 a는 step()로 만든 result 변수를 사용하였다. 

    vec3 RGB = texture(sTD2DInputs[0], p).rgb;
    vec3 BGR = texture(sTD2DInputs[0], p).bgr;

    float edge = 0.5;
    float x = p.x;
    float result = step(edge, x);

    color = mix(RGB, BGR, result);

 

 

 결과적으로 if문으로 만들었던 범위와 색상을 모두 만족하여 동일한 결과를 볼 수 있다. 

 

(위) if문 / (아래) step() + mix()

 

if문에 비해 작성하기는 어렵지만, GPU의 처리 속도가 느려지고 작업이 복잡해질수록 작성해야할 양이 너무 많아진다.

가능하면 내장 함수를 써서 코드를 간략화하는데 익숙해지도록 하자. 

 

(좌)를 표현하는데 if문은 4줄을 작성해야한다

 

 

 

참고자료

https://youtu.be/NsPLgN6mZ8s?si=V3zFhsEcKduvFKAi

The Book of Shaders: color

The Book of Shaders