glsl 코드 분석1

https://thebookofshaders.com/05/

Algorithmic drawing 파트 코드를 분석한 내용이다.

화면은 오른쪽으로 검정에서 하얀색으로 그라데이션 되어있고

화면 축을 외쪽 하단에서 오른쪽 상단으로 초록선이 그려지고 있다.

코드를 보고 smoothstep 부분이 이해가 안됐다. ( 왜 저렇게 했지? )

smoothstep 함수의 경우 참고 edge0 < x <edge1 일 경우 보간한 값을 리턴하고 x <= edge0 = 0, x >= edge1 = 1 을 리턴한다.

근데 책에선 edge0이 edge1보다 크다. 이건 옳바른 사용법이 아니다.

옳바른 사용법은 아래와 같다.

// Plot a line on Y using a value between 0.0-1.0
float plot(vec2 st) {
    return 1.0 - smoothstep(0.0, 0.02, abs(st.y - st.x));
}

아무튼 코드를 라인바인 라인으로 해석해보겠다.

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;

// Plot a line on Y using a value between 0.0-1.0
float plot(vec2 st) {
	// step을 쓰지 않고 smoothstep을 쓴 이유
    // step을 쓸 경우 픽셀 색상이 갑자기 초록색으로 변한다.
    // 그럴 경우 계단 현상이 화면에 보이게 되기 때문에 smooth step을 썼다.
    // 0.02는 라인 두께를 의미한다.
    return 1.0 - smoothstep(0.0, 0.02, abs(st.y - st.x));
}

void main() {
	vec2 st = gl_FragCoord.xy/u_resolution;

    float y = st.x;

	//  y값은 0 -> 1로 증가
    // 화면을 검정색에서 하얀색으로 그라데이션 하기 위한 색상
    vec3 color = vec3(y);

    // Plot a line
    float pct = plot(st);
    
    // pct와 color를 보간한 새로운 색을 만들어낸다.
    // 이 과정을 스킵하면 계단현상이 발생한다.
    color = (1.0-pct)*color+pct*vec3(0.0,1.0,0.0);

	gl_FragColor = vec4(color,1.0);
}