레슨 3 / 8·20분
패턴과 이펙트
GLSL 내장 함수로 패턴 만들기
GLSL의 수학 함수들을 조합하면 원, 줄무늬, 격자, 그라데이션 등 다양한 패턴을 만들 수 있습니다. step()은 이진 분할, smoothstep()은 부드러운 전환, mix()는 선형 보간, fract()는 반복 패턴에 사용됩니다. 이 함수들을 창의적으로 조합하면 무한한 비주얼을 생성할 수 있습니다.
glsl
precision mediump float;
uniform float u_time;
uniform vec2 u_resolution;
void main() {
vec2 st = gl_FragCoord.xy / u_resolution;
// ── step(edge, x) — x가 edge보다 크면 1.0, 아니면 0.0 ──
float s = step(0.5, st.x); // 왼쪽 절반 = 0, 오른쪽 절반 = 1
// ── smoothstep(a, b, x) — a~b 사이에서 부드럽게 0→1 전환 ──
float ss = smoothstep(0.3, 0.7, st.x); // 0.3~0.7 구간에서 서서히 전환
// ── mix(a, b, t) — 두 값을 t 비율로 혼합 (선형 보간) ──
vec3 red = vec3(1.0, 0.2, 0.2);
vec3 blue = vec3(0.2, 0.2, 1.0);
vec3 blended = mix(red, blue, st.x); // 왼→오른쪽으로 빨강→파랑
gl_FragColor = vec4(blended, 1.0);
}원, 줄무늬, 그라데이션 패턴
glsl
precision mediump float;
uniform float u_time;
uniform vec2 u_resolution;
void main() {
// 중앙 기준 좌표 (-0.5 ~ 0.5), 종횡비 보정
vec2 st = (gl_FragCoord.xy - u_resolution * 0.5) / u_resolution.y;
// ── 원 그리기 ──
float dist = length(st); // 중심으로부터 거리
float circle = smoothstep(0.3, 0.28, dist); // 반지름 0.3 원
// ── 줄무늬 패턴 ──
// fract(x) — 소수 부분만 반환 (0~1 반복)
float stripes = step(0.5, fract(st.x * 10.0)); // 수직 줄무늬 10개
// ── 물결치는 줄무늬 ──
float wave = sin(st.x * 20.0 + u_time * 3.0) * 0.5 + 0.5;
// ── 동심원(링) 패턴 ──
float rings = sin(dist * 40.0 - u_time * 5.0) * 0.5 + 0.5;
// ── 회전하는 그라데이션 ──
float angle = atan(st.y, st.x); // 각도 (-PI ~ PI)
float spiral = fract(angle / 6.2832 + u_time * 0.2);
// 색상 합성
vec3 color = vec3(0.0);
color += vec3(0.2, 0.5, 0.9) * circle;
color += vec3(rings * 0.3, wave * 0.2, spiral * 0.5);
gl_FragColor = vec4(color, 1.0);
}glsl
precision mediump float;
uniform float u_time;
uniform vec2 u_resolution;
// ── 격자(Grid) 패턴 ──
float grid(vec2 st, float size) {
vec2 grid = fract(st * size);
// mod()로도 반복 가능: mod(st * size, 1.0)
return step(0.05, grid.x) * step(0.05, grid.y);
}
// ── 방사형 패턴 ──
float radial(vec2 st, float count) {
float angle = atan(st.y, st.x);
return step(0.5, fract(angle * count / 6.2832));
}
void main() {
vec2 st = (gl_FragCoord.xy - u_resolution * 0.5) / u_resolution.y;
float d = length(st);
float g = grid(st, 8.0);
float r = radial(st, 12.0);
vec3 color = vec3(0.05);
color = mix(color, vec3(0.1, 0.3, 0.6), g);
color = mix(color, vec3(0.8, 0.2, 0.5), r * smoothstep(0.4, 0.1, d));
// 중앙 glow
color += vec3(1.0, 0.7, 0.3) * (0.02 / d);
gl_FragColor = vec4(color, 1.0);
}- •step(edge, x) — 임계값 기준 이진 분리 (0 또는 1)
- •smoothstep(a, b, x) — a~b 구간에서 부드러운 전환 (0→1)
- •mix(a, b, t) — t 비율로 선형 보간 (0: a, 1: b)
- •length(v) — 벡터 길이 (원점으로부터 거리)
- •distance(a, b) — 두 점 사이 거리
- •fract(x) — 소수 부분 반환, 반복 패턴의 핵심
- •mod(x, y) — 나머지 연산, fract와 유사한 반복 효과
- •atan(y, x) — 각도 계산, 방사형/나선 패턴에 사용
💡
smoothstep의 두 인자 순서를 바꾸면(큰 값, 작은 값) 반전 효과를 얻습니다. 예를 들어 smoothstep(0.3, 0.28, dist)는 dist가 0.28 이하면 1.0, 0.3 이상이면 0.0입니다. 이 기법으로 테두리가 부드러운 도형을 만들 수 있습니다.