Shader Skills: AI 에이전트용 절차적 GLSL 및 Shadertoy 도구 모음

Shader Skills(저자: @gokayfem)는 AI 코딩 에이전트를 위한 그래픽 프로그래밍 툴킷입니다. Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI에서 절차적 GLSL 및 Shadertoy 셰이더를 생성하고 디버그하며 개선할 수 있습니다.

이미지 출처: https://github.com/gokayfem/shader-skills

이 프로젝트는 기존 AI 코딩 에이전트가 GLSL 코드를 생성할 때 흔히 겪는 수치 부정확성, WebGL 호환성 누락, 잘못된 부호(Sign) 처리 등의 한계를 해결하기 위해 설계되었습니다. 20개 모듈에 걸친 186개의 GLSL 함수와 의존성 번들러, 검사 도구를 제공합니다.

주요 기능 및 구성 모듈

Shader Skills는 단순한 프롬프트 모음이 아니라, 에이전트가 직접 호출하고 검증할 수 있는 실행 가능한 도구 체인을 포함하고 있습니다.

• 검증된 그래픽스 빌딩 블록: SDF(Signed Distance Function) 레이마칭, 노이즈, 패턴, 절차적 지형, 물, 구름, 볼륨 렌더링 등 20개 모듈에 186개의 함수 제공. 모든 SDF는 GPU에서 Lipschitz 바운드, 표면 투영 기반 정확성, 내부/외부 부호를 검사하며, 곡선은 브루트포스 거리와도 비교합니다.
• 의존성 자동 번들러: 에이전트가 필요한 함수를 이름으로 호출하면 하나의 독립된 파일로 병합하는 의존성 번들러 포함.
• GLSL 린트 및 검사 도구: WebGL1 잔재, mainImage 누락, #version 선언 등을 검사하고 glslangValidator를 통해 컴파일 유효성 확인.
• 예제 템플릿: 즉시 실행 가능한 11개의 Shadertoy 예제 및 still-life, terrain, volumetric clouds 등의 갤러리 템플릿 내장.

설치 및 사용 방법

Node.js 22.20 이상 환경에서 skills CLI를 통해 프로젝트에 즉시 추가할 수 있습니다.

npx skills add gokayfem/shader-skills

Claude Code 플러그인 장착 시:

claude plugin marketplace add gokayfem/shader-skills
claude plugin install shader-skills@shader-skills

파이썬 기반 표준 라이브러리 도구를 통한 검색 및 번들링 예시:

python3 skills/shader-art-coding/scripts/glsl_tools.py search petal leaf
python3 skills/shader-art-coding/scripts/glsl_tools.py bundle skills/shader-art-coding/templates/raymarch-sdf.glsl -o /tmp/shader-skills-example.glsl
python3 skills/shader-art-coding/scripts/glsl_tools.py check /tmp/shader-skills-example.glsl

기술적 한계 및 주의사항

• 타겟 환경 제한: 생성되는 모든 셰이더는 WebGL2 / GLSL ES 3.00 표준을 타겟으로 합니다. DirectX의 HLSL이나 Unity ShaderLab은 본 도구의 지원 범위를 벗어납니다.
• 원작자 시연: @gokayfem은 X 게시물에서 Claude Opus 5.5가 20초 분량의 비디오 클립을 텍스처나 비디오 프레임 없이 156KB GLSL 프래그먼트 셰이더로 재구성했다고 밝혔습니다.

출처

• GitHub Repository: gokayfem/shader-skills
• 공식 릴리즈: Shader Skills v2.0.0 Release
• 원작자 X 공지: @gokayfem Video 2 GLSL Announcement