liminfo

GLSL Shader Reference

GLSL 셰이더 레퍼런스 - 타입, 내장 함수, uniform/varying

25개 결과

GLSL Shader Reference 소개

GLSL(OpenGL Shading Language)은 GPU에서 직접 실행되는 버텍스 셰이더와 프래그먼트 셰이더를 작성하는 데 사용되는 C 계열 언어입니다. 이 레퍼런스는 GLSL 1.00(WebGL 1)과 GLSL 3.00 ES(WebGL 2)에서 사용되는 내장 타입, 수식어(qualifier), 수학 함수, 벡터 함수, 텍스처 샘플링 함수, 내장 변수를 모두 다룹니다. 실시간 그래픽 이펙트, 포스트프로세싱 파이프라인, Shadertoy 같은 도구에서 생성적 아트를 만들 때 필요한 모든 내용이 담겨 있습니다.

그래픽 프로그래머, 게임 개발자, 크리에이티브 코더를 위한 레퍼런스입니다. 데이터는 여섯 가지 카테고리로 정리되어 있습니다: 타입(float, vec2, vec3, vec4, mat4, sampler2D, samplerCube, int, bool), 수식어(uniform, in/out, varying, attribute, const), 수학 함수(sin/cos/tan, pow/sqrt/abs, min/max/clamp, mix, step/smoothstep), 벡터 함수(length, normalize, dot, cross, reflect), 텍스처(texture2D/texture), 내장 변수(gl_Position, gl_FragColor, gl_FragCoord).

각 항목에는 정확한 문법, 한 줄 설명, 간결한 동작 예제가 포함되어 있습니다. 특히 GLSL 1.00 방식(attribute, varying, gl_FragColor)과 최신 GLSL 3.00 ES 방식(in/out 레이아웃 한정자, 사용자 정의 출력 변수)의 차이를 명확히 표시하여, WebGL 버전 간 포팅이나 레거시 코드 마이그레이션 시 큰 도움이 됩니다.

주요 기능

  • float, vec2, vec3, vec4, mat3, mat4, sampler2D, samplerCube, int, bool을 포함한 GLSL 전체 타입 시스템
  • uniform, in/out(GLSL 300 ES), varying 및 attribute(GLSL 100), const 등 수식어 레퍼런스
  • 삼각함수(sin, cos, tan), 거듭제곱/제곱근(pow, sqrt, abs), 범위 제한(min, max, clamp) 등 수학 내장 함수 전체
  • 선형 보간(mix/lerp), step, smoothstep을 이용한 부드러운 전환 효과
  • length, normalize, 내적(dot), 외적(cross), reflect를 포함한 벡터 수학 함수
  • WebGL 1(texture2D)과 WebGL 2(texture)의 텍스처 샘플링 함수 비교
  • gl_Position(버텍스 출력), gl_FragColor(GLSL 100 프래그먼트 출력), gl_FragCoord(화면 좌표) 내장 변수
  • GLSL 100과 GLSL 300 ES의 코드 예제를 나란히 제공하여 버전 간 마이그레이션을 쉽게 파악 가능

자주 묻는 질문

GLSL이 무엇이고 왜 레퍼런스가 필요한가요?

GLSL은 OpenGL과 WebGL에서 GPU 파이프라인을 프로그래밍하는 셰이딩 언어입니다. vec2, mat4 같은 전용 타입과 mix, smoothstep 같은 내장 함수가 일반 언어와 달라, 셰이더 개발 시 전용 레퍼런스가 필수적으로 필요합니다.

GLSL 1.00과 GLSL 3.00 ES의 차이는 무엇인가요?

GLSL 1.00은 WebGL 1에서 사용되며 attribute/varying 키워드와 gl_FragColor를 씁니다. GLSL 3.00 ES(WebGL 2)는 이것들을 in/out 한정자와 사용자 정의 출력 변수로 대체합니다. 이 레퍼런스에서는 각 문법이 어느 버전에 해당하는지 명확히 표시합니다.

JavaScript에서 GLSL 셰이더로 데이터를 어떻게 전달하나요?

uniform 변수를 사용합니다. GLSL에서 "uniform float uTime;"으로 선언하고, JavaScript에서 gl.uniform1f(location, value)로 값을 설정합니다. 이 레퍼런스에서는 애니메이션용 uTime, 텍스처용 sampler2D 등의 uniform 사용 예제를 확인할 수 있습니다.

vec2, vec3, vec4의 차이는 무엇인가요?

vec2는 float 2개(예: UV 좌표), vec3는 3개(RGB 색상 또는 XYZ 위치), vec4는 4개(RGBA 또는 동차 좌표)를 담습니다. 컴포넌트는 .x/.y/.z/.w로 접근하거나, .xy, .rgb 같은 스위즐(swizzle)로 활용할 수 있습니다.

smoothstep은 무엇이고 언제 사용하나요?

smoothstep(edge0, edge1, x)은 0과 1 사이의 부드러운 에르미트 보간값을 반환합니다. 날카로운 step()과 달리 점진적인 전환을 만들어 에지 안티앨리어싱, 페이드 효과, 절차적 텍스처 생성에 이상적입니다.

texture2D와 texture의 차이는 무엇인가요?

texture2D는 GLSL 1.00(WebGL 1)의 2D 텍스처 샘플링 함수입니다. GLSL 3.00 ES(WebGL 2)에서는 모든 샘플러 타입에 작동하는 오버로드된 texture() 함수로 대체됩니다. WebGL 2를 대상으로 한다면 texture()를 사용하는 것이 권장됩니다.

gl_FragCoord는 무엇이고 화면 이펙트에 어떻게 활용하나요?

gl_FragCoord.xy는 현재 프래그먼트의 픽셀 단위 화면 좌표를 제공합니다. 해상도 uniform으로 나누면(vec2 uv = gl_FragCoord.xy / uResolution) 0.0~1.0으로 정규화된 UV 좌표를 얻을 수 있어, 풀스크린 포스트프로세싱 셰이더의 표준적인 방법입니다.

Shadertoy 셰이더에도 이 레퍼런스를 활용할 수 있나요?

네. Shadertoy는 프래그먼트 셰이더만 사용하는 GLSL ES 방식으로 동작합니다. 이 레퍼런스의 수학, 벡터, 텍스처 함수는 모두 그대로 적용됩니다. Shadertoy에서는 uTime 대신 iTime, uResolution 대신 iResolution을 제공하지만, GLSL 함수 자체는 동일합니다.