본문으로 건너뛰기
NEVERTRUSTROBOTS

플레이그라운드

왼쪽에 GLSL을 쓰면 오른쪽에서 바로 보입니다. 입력하는 동안 다시 컴파일되고, 오류는 지금 보고 있는 줄을 가리킵니다. 설치도 가입도 필요 없습니다 — 주소창의 링크에는 언제나 편집기의 내용이 담겨 있습니다.

처음이신가요? 1강부터 차례로 내려가세요. 각 강은 짧고, 한 가지 생각만 바꾸며, 끝에는 직접 해볼 거리가 있습니다. 숫자 하나를 바꾸는 데 파일 전체를 이해할 필요는 없습니다.

언제나 사용 가능
  • vec2 u_res — 캔버스의 너비와 높이(픽셀)
  • float u_time — 시작 후 경과한 초
  • vec2 u_mouse — 캔버스 위의 0..1 좌표, 스무딩 적용
  • vec4 color — 출력하는 색
1 · Space
  • vec2 uvCentered()
  • vec2 uv01()
  • vec2 mouseCentered()
2 · Soft edges
  • float pixel(float d)
  • float softEdge(float d, float radius)
  • float circle(vec2 p, float radius)
  • float band(float d, float halfWidth)
  • float smin(float a, float b, float k)
3 · Colour
  • vec3 palette(float t, vec3 a, vec3 b, vec3 c, vec3 d)
  • vec3 palette(float t)
  • vec3 paletteNTR(float t)
4 · Frequency
  • float harmonic(float x, int octaves)
5 · Noise
  • float hash21(vec2 p)
  • float noise(vec2 p)
  • float fbm(vec2 p, int octaves)
  • float fbm(vec2 p)
  • vec2 warp(vec2 p, float amount, float scale)
6 · Symmetry
  • vec2 rot(vec2 p, float angle)
  • vec2 tile(vec2 p, float count)
  • vec2 mirror(vec2 p)
  • vec2 polar(vec2 p)
  • vec2 kaleido(vec2 p, float n)
7 · Light
  • float vignette(vec2 p, float radius, float softness)
  • float vignetteFrame(float strength)
  • float occlusion(float density, float strength)
  • vec3 fog(vec3 c, vec3 far, float distance, float density)

이 모든 것은 shader/lib.glsl에 있으며, 이 사이트의 모든 셰이더 앞에 붙습니다.