GLSL 내장 함수 정리

모든 함수는 WebGL 1.0 / GLSL ES 1.0 기준으로, Three.js 또는 RawShaderMaterial에서 사용할 수 있는 범위로 제한

---

GLSL 내장 함수 정리

기본 전제

• GLSL은 벡터 기반 수학 언어입니다.
• 대부분의 함수는 float, vec2, vec3, vec4에 대해 오버로드(overload)되어 있습니다.
• 각 함수는 GPU 병렬 연산에 최적화되어 있습니다.

---

1. 산술 함수 (Arithmetic)

abs(x)	절댓값	abs(-3.2) → 3.2
sign(x)	부호 반환 (-1, 0, 1)	sign(-5.0) → -1.0
floor(x)	내림	floor(1.9) → 1.0
ceil(x)	올림	ceil(1.2) → 2.0
fract(x)	소수점 이하만 반환	fract(3.75) → 0.75
mod(x, y)	나머지 계산	mod(5.3, 2.0) → 1.3
min(x, y)	최소값	min(3.0, 4.0) → 3.0
max(x, y)	최대값	max(3.0, 4.0) → 4.0
clamp(x, min, max)	값 제한	clamp(5.0, 0.0, 1.0) → 1.0
mix(x, y, a)	선형 보간 (Lerp)	mix(0.0, 10.0, 0.3) → 3.0
step(edge, x)	계단 함수	step(0.5, 0.7) → 1.0, step(0.5, 0.2) → 0.0
smoothstep(edge0, edge1, x)	부드러운 step	smoothstep(0.0, 1.0, 0.5) → 0.5

---

2. 삼각 함수 (Trigonometry)

radians(deg)	도 → 라디안
degrees(rad)	라디안 → 도
sin(x)	사인
cos(x)	코사인
tan(x)	탄젠트
asin(x)	역사인
acos(x)	역코사인
atan(y, x)	방향 각도 (벡터 좌표 기준)

⚠️ atan(y, x)은 2개 인자일 때, atan2와 동일합니다.
결과는 [-π, π] 범위입니다.

---

3. 지수/로그 함수 (Exponential & Logarithmic)

pow(x, y)	x의 y승
exp(x)	e^x
log(x)	자연로그 (ln x)
exp2(x)	2^x
log2(x)	log₂(x)
sqrt(x)	제곱근
inversesqrt(x)	1 / sqrt(x)

---

4. 벡터/기하 함수 (Vector Math)

length(v)	벡터의 길이
distance(p1, p2)	두 점 사이 거리
dot(v1, v2)	내적
cross(v1, v2)	외적 (vec3만 해당)
normalize(v)	단위 벡터 반환
faceforward(n, i, ng)	반대 방향으로 벡터 뒤집기
reflect(I, N)	반사 벡터 계산
refract(I, N, eta)	굴절 벡터 계산

reflect와 refract는 주로 빛/물 표면 표현에 사용됩니다.

---

5. 불규칙 함수 (Noise는 없음)

GLSL ES 1.0 (WebGL1 기준)에는 noise 내장 함수가 정식 지원되지 않습니다.
→ 보통 셰이더 코드로 직접 구현하거나 noise.glsl 같은 유틸 코드를 사용합니다.

---

 

GLSL 내장 함수 응용 사례

실제 게임 및 이펙트 제작에서 자주 활용되는 예시 위주로 구성

---

1. mix() – 색상 보간 (Lerp)

용도:

• 두 색상 사이를 부드럽게 전환 (fade-in/out, 부드러운 색 변화)

예시:

vec3 startColor = vec3(1.0, 0.0, 0.0); // 빨강
vec3 endColor = vec3(0.0, 0.0, 1.0);   // 파랑
float progress = clamp(time * 0.1, 0.0, 1.0); // 0~1로 제한

vec3 finalColor = mix(startColor, endColor, progress);
gl_FragColor = vec4(finalColor, 1.0);

실제 사용 예:

• HP 감소 시 점점 붉게
• 하늘 색상 일몰 표현

---

2. step() + smoothstep() – 엣지/단계 효과

용도:

• 셀 셰이딩, 윤곽선 추출, 부드러운 마스크 표현

예시:

float edge = 0.5;
float sharpEdge = step(edge, vValue); // 딱 끊기는 경계
float softEdge = smoothstep(edge - 0.05, edge + 0.05, vValue); // 부드러운 경계

실제 사용 예:

• 셀 애니메이션 셰이딩
• 마스킹 애니메이션
• 그림자 흐림 표현

---

3. fract() + sin() – 파동/움직이는 텍스처

용도:

• 시간 기반 애니메이션
• 노이즈처럼 불규칙한 흐름 표현

예시:

float wave = sin(uv.x * 10.0 + time) * 0.5 + 0.5;
vec3 color = mix(colorA, colorB, wave);
gl_FragColor = vec4(color, 1.0);

실제 사용 예:

• 물결 효과
• 사이버펑크 UI 흐름
• UV 애니메이션

---

4. dot() – 조명 계산의 핵심

용도:

• Lambertian 조명 모델 구현 (diffuse lighting)

예시:

vec3 lightDir = normalize(vec3(1.0, 1.0, 0.5));
float diff = max(dot(normal, lightDir), 0.0);
vec3 diffuse = diff * lightColor;

실제 사용 예:

• 기본적인 조명
• Toon 셰이딩 경계 판별

---

5. reflect() – 반사 표현

용도:

• 금속/거울/물 표면 구현

예시:

vec3 viewDir = normalize(cameraPosition - fragPosition);
vec3 reflectDir = reflect(-viewDir, normal);

실제 사용 예:

• 동적 환경 맵 (CubeCamera)
• 미러 씬
• 금속 효과

---

6. refract() – 굴절 표현

용도:

• 물 속, 유리, 렌즈 효과

예시:

vec3 refractDir = refract(viewDir, normal, 1.0 / 1.33); // 공기 → 물

실제 사용 예:

• 물 아래에서 보는 왜곡
• 유리 통과 시 이미지 왜곡
• 돋보기 효과

---

7. mod() – 반복되는 패턴 만들기

용도:

• 격자, 체크무늬, 반복되는 텍스처
• 타일링 (tiling)

예시:

vec2 tileUV = mod(vUv * 10.0, 1.0);
vec3 tileColor = texture2D(uTexture, tileUV).rgb;

실제 사용 예:

• 타일 맵 패턴
• UI 장식
• 무한 배경 반복

---

흔한 조합 

// 애니메이션 UV 움직임
vec2 offsetUv = vUv + vec2(time * 0.1, 0.0);

// 셀 셰이딩 그림자
float lightStrength = dot(normal, lightDir);
float toonStep = step(0.5, lightStrength);

// 혼합 색상
vec3 color = mix(darkColor, lightColor, toonStep);