[GLSL] 5 - Shaping functions

// 개요

1차원 함수를 만드는 방법을 알아본다. 

이를 알아야 기초가 튼튼해진다.

 

데이터를 검은색에서 흰색으로의 그라데이션으로 시각화한다.

또한 녹색 선도 그려서 시각화한다.

plot 함수 기능에 의문 가지지 말아야한다. 나중에 알아볼 것이다.

 

// 직선

#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) {    
    return smoothstep(0.02, 0.0, abs(st.y - st.x));
}

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

    float y = st.x;

    vec3 color = vec3(y);

    // Plot a line
    float pct = plot(st);
    color = (1.0-pct)*color+pct*vec3(0.0,1.0,0.0);

	gl_FragColor = vec4(color,1.0);
}

// 거듭제곱

0.0과 1.0 사이의 값을 가진 선을 블렌딩하고, 모양을 만드는 기술을 익힌다.

x와 y사이의 이 1:1 관계를 선형 보간이라고 한다.

 

몇 가지 수학 함수를 사용하여 선의 모양을 만들 수 있다.

예를 들어 x를 5의 거듭제곱을 하여 곡선으로 만든다.

// 생략함
void main() {
    vec2 st = gl_FragCoord.xy/u_resolution;
    float y = pow(st.x,5.0);
}

 

Step and Smoothstep

// step

step() 은 두 개의 매개변수를 받는다. 

첫 번째는 임계값이다.

두 번째는 전달하는 값이다.

임계 미만의 값은 0.0을 반환한다.

임계 이상의 값은 1.0을 반환한다.

// 생략함
void main() {
    vec2 st = gl_FragCoord.xy/u_resolution;
    float y = step(0.5,st.x);
}

// smoothstep

두 개의 숫자와 보간할 값을 인자로 넣는다.

이 함수는 정의된 범위 사이의 값을 보간한다.

처음 두 개의 매개변수는 보간의 시작과 끝을 위한 것이다.

세 번째 매개변수는 보간할 값(대상)을 위한 것이다.

// 생략함

void main() {
    vec2 st = gl_FragCoord.xy/u_resolution;
    float y = smoothstep(0.1,0.9,st.x);
}

 

Sine and Cosine

애니메이션을 적용하거나, 모양을 만들거나, 값을 혼합하고 싶을 때 사인과 코사인은 유용하다.

두 함수는 함께 작동하여 원을 만들 수 있다.

각도(라디안 단위)가 주어지면,

반지름이 1인 원의 가장자리에 있는 점의 정확한 x(코사인)와 y(사인) 위치를 반환한다.

 

또한 정규화된 값(-1에서 1 사이의 값)을 매우 부드럽게 반환한다는 점은 이를 다른 곳에 응용하기에 좋다.

 

Some extra useful functions

아래 함수들을 익히면 좋다.

그 이유는 구글에서 generative art 검색해보면 알 수 있다.

https://en.wikipedia.org/wiki/Generative_art

y = mod(x,0.5); // return x modulo of 0.5
y = fract(x); // return only the fraction part of a number
y = ceil(x);  // nearest integer that is greater than or equal to x
y = floor(x); // nearest integer less than or equal to x
y = sign(x);  // extract the sign of x
y = abs(x);   // return the absolute value of x
y = clamp(x,0.0,1.0); // constrain x to lie between 0.0 and 1.0
y = min(0.0,x);   // return the lesser of x and 0.000
y = max(0.0,x);   // return the greater of x and 0.0

 

Advance shaping functions

그 외에 다양한 형태의 고급 함수들을 소개한다.

자세한 설명은 없어 생략하였다. 참고하려면 본문 참고

https://thebookofshaders.com/05/