레슨 1 / 8·20분
셰이더 기본
GLSL Fragment 셰이더란?
GLSL(OpenGL Shading Language)은 GPU에서 실행되는 프로그래밍 언어입니다. Fragment 셰이더(Pixel 셰이더)는 화면의 모든 픽셀에 대해 병렬로 실행되어 각 픽셀의 색상을 결정합니다. CPU에서 for 루프를 돌리는 것과 달리, GPU의 수천 개 코어가 동시에 각 픽셀을 처리하므로 매우 빠릅니다.
glsl
// ── 가장 기본적인 Fragment 셰이더 ──
precision mediump float; // 부동소수점 정밀도 선언 (필수)
void main() {
// gl_FragColor — 현재 픽셀의 최종 색상 (RGBA)
// vec4(빨강, 초록, 파랑, 투명도) — 각 값은 0.0 ~ 1.0
gl_FragColor = vec4(1.0, 0.0, 0.5, 1.0); // 밝은 핑크
}기본 데이터 타입과 gl_FragCoord
glsl
precision mediump float;
void main() {
// gl_FragCoord — 현재 픽셀의 화면 좌표 (왼쪽 아래가 원점)
// gl_FragCoord.x → 수평 위치 (픽셀)
// gl_FragCoord.y → 수직 위치 (픽셀)
// ── GLSL 기본 데이터 타입 ──
float x = gl_FragCoord.x; // 단일 부동소수점
int count = 5; // 정수
vec2 uv = gl_FragCoord.xy; // 2D 벡터 (x, y)
vec3 color = vec3(1.0, 0.5, 0.2); // 3D 벡터 (r, g, b)
vec4 rgba = vec4(color, 1.0); // 4D 벡터 (r, g, b, a)
// 화면 좌표를 이용한 그라데이션
// 화면 너비를 800으로 가정
float gradient = gl_FragCoord.x / 800.0;
gl_FragColor = vec4(gradient, 0.2, 1.0 - gradient, 1.0);
}glsl
precision mediump float;
void main() {
// 벡터 연산 예시
vec2 a = vec2(1.0, 2.0);
vec2 b = vec2(3.0, 4.0);
vec2 sum = a + b; // (4.0, 6.0)
vec2 scaled = a * 2.0; // (2.0, 4.0)
float dot = dot(a, b); // 내적: 1*3 + 2*4 = 11.0
float len = length(a); // 길이: sqrt(1^2 + 2^2)
// 스위즐링 — 벡터 성분을 자유롭게 추출/재조합
vec4 color = vec4(0.1, 0.5, 0.9, 1.0);
vec3 rgb = color.rgb; // (0.1, 0.5, 0.9)
vec2 rg = color.rg; // (0.1, 0.5)
vec3 bgr = color.bgr; // (0.9, 0.5, 0.1) 순서 변경!
gl_FragColor = vec4(rgb, 1.0);
}- •precision mediump float — 부동소수점 정밀도 선언 (WebGL 필수)
- •gl_FragColor — 출력: 현재 픽셀의 RGBA 색상 (vec4)
- •gl_FragCoord — 입력: 현재 픽셀의 화면 좌표 (vec4)
- •float, int — 스칼라 타입
- •vec2, vec3, vec4 — 2/3/4차원 벡터 타입
- •스위즐링(.rgb, .xy, .bgr) — 벡터 성분 자유롭게 접근/재조합
💡
GLSL에서 0과 1.0은 다릅니다! float 변수에 0을 대입하면 오류가 날 수 있으므로 반드시 0.0으로 작성하세요. 마찬가지로 vec3(1, 0, 0)이 아닌 vec3(1.0, 0.0, 0.0)으로 작성해야 합니다.