WebGL 셰이더 플레이그라운드이란?
GLSL 버텍스 및 프래그먼트 셰이더를 작성하고 WebGL로 렌더링된 결과를 즉시 확인할 수 있습니다. 로컬 설치가 필요 없습니다. 셰이더 프로그래밍 학습, 효과 프로토타이핑, GPU 가속 그래픽 실험에 활용하세요.
기본 제공되는 uniform은 애니메이션용 `u_time`, 캔버스 크기를 담는 `u_resolution`, 포인터 위치를 담는 `u_mouse`, 렌더링된 프레임 수를 담는 `u_frame`, 그리고 바로 쓸 수 있는 타일링 노이즈 텍스처 `sampler2D u_noise`입니다. 아무 이미지나 업로드하면 `sampler2D u_texture`로 바인딩되어 프래그먼트 셰이더에서 바로 샘플링할 수 있습니다. 10가지 프리셋(gradient wave, plasma, circle SDF, noise tunnel, Mandelbrot, ray march sphere, metaballs, voronoi, starfield, worley cells)과 함께, 애니메이션 속도 슬라이더, 실시간 FPS 표시, 자동 컴파일 토글, 타임라인을 멈출 수 있는 일시정지 버튼, 소스 전체를 그대로 담는 공유 링크, 그리고 현재 프레임을 PNG로 내보내는 기능까지 갖춰져 있습니다.
사용 방법
- GLSL 프래그먼트 셰이더 코드를 에디터에 직접 입력하거나 붙여넣으세요. 기본 셰이더가 이미 로드되어 있습니다.
- 라이브 미리보기가 입력하는 대로 업데이트됩니다. 내장 유니폼에는 시간, 해상도, 마우스 위치가 포함됩니다.
- 셰이더를 PNG 스크린샷으로 내보내거나 코드를 복사하여 자신의 WebGL 프로젝트에 사용하세요.
사용 시기
- 로컬에 C++나 Three.js 프로젝트를 깔지 않고 GLSL 문법을 익히고 싶을 때.
- 프래그먼트 셰이더 효과를 게임 엔진이나 웹사이트에 옮기기 전 미리 시제품을 만들어볼 때.
- 포트폴리오, 발표 슬라이드, SNS 게시물에 쓸 애니메이션 배경 스틸 컷을 뽑을 때.
결과
물결 효과를 프로토타이핑하는 게임 개발자가 사인파와 time 유니폼을 사용한 프래그먼트 셰이더를 작성합니다. 미리보기 패널에 애니메이션 결과가 실시간으로 표시됩니다.
자주 묻는 질문
- C 언어나 그래픽스 프로그래밍을 알아야 사용할 수 있나요?
- GLSL은 C 계열의 작은 언어로 루프, 조건문, 부동소수점 연산 위주입니다. C·Java·JavaScript를 만져 본 사람이라면 금방 익숙해집니다. 프리셋에는 주석이 있어서 값만 바꿔 봐도 GPU 경험 없이 출발하기에 충분합니다.
- 셰이더는 컴파일됐는데 미리보기가 검은 화면이에요. 왜 그런가요?
- 흔한 원인: main 함수 밖에서 `gl_FragColor`에 쓰기, `vec4` 대신 `vec3` 반환, 노이즈 함수 안에서 0으로 나누기. 브라우저 콘솔을 열어 보세요. 컴파일이 성공한 것 같아도 WebGL이 유용한 경고를 출력합니다.
- 텍스처를 샘플링하거나 내 이미지를 넣을 수 있나요?
- 가능합니다. 미리보기 툴바의 이미지 업로드 버튼을 누르면 어떤 PNG나 JPG든 `sampler2D u_texture`로 바인딩됩니다. 함께 따라오는 float `u_hasTexture`가 이미지가 준비되는 순간 1.0이 되어, 셰이더에서 텍스처가 있는지 분기할 수 있습니다. Shadertoy의 채널 입력과 같은 방식입니다.
- 어느 WebGL 버전을 사용하나요?
- WebGL 1과 GLSL ES 1.0입니다. 즉 `in/out` 대신 `varying`, 명명 출력 대신 `gl_FragColor`를 쓰고 정수 텍스처는 지원하지 않습니다. WebGL 2나 데스크톱 OpenGL 3+용 셰이더는 문법을 살짝 손봐야 여기서 동작합니다.
- 서버로 무엇이 전송되나요?
- 아니요. 컴파일과 렌더링 모두 브라우저를 통해 로컬 GPU에서 일어납니다. 셰이더 소스가 페이지 밖으로 나가지 않으니, 복사하지 않고 탭을 닫으면 코드는 그대로 사라집니다.