83.3K+다운로드
사용 가이드로 건너뛰기
shader-dev작성자 MiniMax

Shader Dev 스킬.

이미지 작업을 위한 Claude Code 및 Codex 스킬: gLSL 셰이더: 레이 마칭, SDF, 유체, 파티클, 절차적 비주얼.

  • Images & Generative Art
  • 생성 예술
OpenDesign 다운로드사용 가이드 보기
MiniMax-AI/skills · skills/shader-dev/SKILL.mdSKILL.md
--- name: shader-dev description: Comprehensive GLSL shader techniques for creating stunning visual effects — ray marching, SDF modeling, fluid simulation, particle systems, procedural generation, lighting, post-processing, and more. --- ## Invocation ## Skill Structure ## How to Use ## Technique Routing Table ## Technique Index ## WebGL2 Adaptation Rules
2026-09-14에 업스트림 파일에서 읽은 전면 메타데이터 및 섹션 제목 · 전체 16,663자

01 기능

Claude Code와 Codex에서 shader-dev Skill이 하는 일

요약, 워크플로, 산출물을 모두 해당 스킬의 SKILL.md에서 그대로 읽어 정리한 내용입니다.

SKILL.md에서2026-09-14 읽음 · 실행 기록 아님

스킬 자체의 표현으로

실시간 시각 효과를 위한 36가지 ShaderToy 호환 셰이더 기법을 담은 단일 GLSL 스킬: SDF 지오메트리, 레이 마칭과 라이팅, 유체·파티클·물리 시뮬레이션, 자연 현상(해양, 지형, 대기, 볼류메트릭), 절차적 생성, 후처리, 오디오, WebGL2 디버깅.

라우팅 테이블은 각 요청을 techniques/ 아래의 기법 파일로 매핑하며, 이 파일들에는 핵심 원리, 구현 단계, 완전한 코드 템플릿이 담겨 있고 더 깊은 수학 내용은 reference/에 있습니다. 이후 독립형 HTML 페이지를 만들 때 WebGL2 적응 규칙을 적용합니다 — fragCoord 대신 gl_FragCoord.xy, mainImage를 감싸는 void main() 래퍼, 함수 호출 매크로 대신 const — 고정된 성능 예산 안에서, 빠른 레시피와 시각적 디버깅 치환과 함께.

산출물

  • 36가지 효과 기법 중 하나에 대한 ShaderToy 호환 GLSL로, 실시간 시각물의 기반으로 사용할 수 있습니다.
  • 캔버스가 뷰포트를 채우고 창 크기에 맞춰 리사이즈되며, 스크롤바 없이 검은 배경 위에 놓이고 ShaderToy 호환 유니폼 iTime, iResolution, iMouse, iFrame을 노출하는 독립형 HTML 페이지.
  • Buffer A/B 스타일의 상태를 위한 핑퐁 버퍼를 사용하여 WebGL2 프레임버퍼 위에 구축된 멀티패스 효과.
  • 포토리얼리스틱한 장면을 위해 ACES 톤 매핑과 2x SSAA, 비네트를 결합한 완성된 후처리 체인.
예시 프롬프트 보기 ↗

작동 방식

  1. 01
    요청을 기법으로 라우팅하기

    에이전트는 36개 파일을 모두 읽는 대신, 사용자의 표현을 기법 라우팅 테이블과 매칭하여 하나의 주요 기법과 조합 가능한 기법들을 선택합니다.

  2. 02
    기법 파일 읽기

    techniques/ 아래의 각 파일은 독립적으로 구성되어 있으며, 해당 효과의 원리, 순서화된 구현 단계, 완전한 코드 템플릿을 제공합니다.

  3. 03
    수학이 필요하면 Reference/로 확장

    유도 과정이나 고급 패턴이 필요한 경우, 에이전트는 기법 파일 끝에 있는 링크를 따라 해당 reference/ 가이드로 이동합니다.

  4. 04
    ShaderToy 출력을 WebGL2로 포팅

    독립형 HTML 결과물의 경우, 페이지를 작성하기 전에 ShaderToy 스타일 코드 위에 WebGL2 적용 규칙을 적용합니다.

  5. 05
    레시피를 조합해 파이프라인 구성

    빠른 레시피는 단일 효과가 아니라 지오메트리, 렌더링, 라이팅, 대기, 후처리 등의 모듈을 연결해 완전한 파이프라인을 구성합니다.

  6. 06
    출력을 교체하며 디버깅

    실제 색상을 복원하기 전에 오류를 정확히 찾기 위해 출력을 임시로 노멀, 스텝 수, 깊이 또는 SDF 밴드로 교체합니다.

02 적합성 확인

shader-dev 스킬을 사용해야 하는 경우

Claude Code 또는 Codex에서 이 유형의 이미지 작업이 필요할 때 shader-dev 스킬을 사용합니다. 아래 적합성 및 제한 사항은 스킬 자체 파일에서 가져온 것입니다.

적합한 경우

  • 로드된 메시가 아니라 부호 있는 거리 필드가 암시적 표면을 구동하는, 순수하게 수학으로 3D 객체와 씬을 모델링하는 방식입니다.
  • 핑퐁 버퍼 전체에 걸쳐 이송, 확산, 압력 투영이 필요한 실제 솔버가 요구되는 유체, 연기, 잉크 룩입니다.
  • 레일리/미 산란, 갓레이 또는 표면 하 산란 근사가 필요한 하늘과 대기 장면입니다.
  • 오실레이터와 엔벨로프부터 필터, FM 신시시스까지, 셰이더 자체에 구워 넣은 절차적 오디오입니다.
  • 극좌표 리매핑, 만화경 폴딩, 스파이럴 좌표계를 기반으로 구축된 양식화된 2D 작업입니다.

한계 인지하기

  • 제약이 없는 GPU 예산에는 적합하지 않습니다. 대상 환경이 헤드리스 소프트웨어 렌더링일 수 있으므로 반복 횟수를 낮게 유지해야 합니다.
  • 매크로는 루프 경계를 설정하는 안전한 방법이 아닙니다 — 일부 ES 버전에서는 루프에 런타임 상수가 요구됩니다.
  • 지형 헬퍼는 XZ 좌표만 받으므로, 전달하기 전에 전체 vec3 위치를 스위즐해야 합니다.

제공할 사항

  • 일반 언어로 표현한 효과 요청이 스킬은 /shader-dev <request> 형태로 호출되며, 요청 텍스트는 $ARGUMENTS에 담깁니다. 효과 관련 용어로 표현하면 라우팅 테이블이 이를 매칭할 수 있습니다.
  • 테이블 어휘 기준의 효과 카테고리라우팅 테이블은 유체/연기/잉크 효과 같은 의도를 키로 사용하며, 각 의도를 주요 기법과 그 기법에 결합할 기법들에 매핑합니다.

03 스킬 내부

shader-dev 스킬이 Claude Code와 Codex에 부여하는 규칙

SKILL.md가 에이전트에게 설정하는 8가지 구체적인 지시, 기본값, 제한 — 결과를 바꾸는 파일의 부분입니다.

  1. WebGL2 셰이더 헤더 출력

    생성되는 모든 셰이더는 #version 300 es로 시작하며, 프래그먼트 셰이더는 precision highp float;를 추가하고 out vec4 fragColor를 선언하며, varying은 in/out으로 변환됩니다.

  2. gl_FragCoord.xy를 사용하고, fragCoord는 절대 사용하지 않음

    ShaderToy의 fragCoord는 WebGL2에 존재하지 않으므로, 좌표 연산은 gl_FragCoord.xy를 읽어야 하며 그렇지 않으면 셰이더가 컴파일되지 않습니다.

  3. mainImage를 실제 Main()으로 감싸기

    ShaderToy 템플릿은 void mainImage(out vec4 fragColor, in vec2 fragCoord)를 유지하며, 표준 void main()이 실제 프래그먼트 좌표로 이를 호출합니다.

  4. 호출자보다 피호출자를 먼저 선언하기

    GLSL에는 전방 선언이 없으므로, getAtmosphere()에서 호출하는 getSunDirection() 같은 함수는 그보다 위에 정의되어야 하며, 그렇지 않으면 코드 순서를 재배치해야 합니다.

  5. #define에 함수 호출을 넣지 않기

    #define SUN_DIR normalize(vec3(...)) 같은 매크로는 유효하지 않습니다. 미리 계산된 정규화 값을 담은 const로 대체해야 합니다.

  6. GLSL 예약어를 이름으로 사용하지 않기

    patch, cast, sample, filter, input, output, common, partition, active를 포함한 식별자는 예약어이므로 변수명으로 사용해서는 안 됩니다.

  7. JS 상태는 상단에 선언하기

    HTML 페이지에서 let/const 변수는 이를 참조하는 함수보다 앞서 스크립트 블록 상단에 두어야 합니다. 그렇지 않으면 Temporal Dead Zone 오류가 발생하며 캔버스가 흰 화면으로 남습니다.

  8. 성능 예산 내에서 작업하기

    레이 마칭 메인 루프는 128단계, 볼륨 샘플링 및 조명 내부 루프는 32단계, FBM은 6옥타브로 제한됩니다. 배포 환경이 제한된 헤드리스 소프트웨어 렌더링을 사용할 수 있기 때문입니다.

04 활용하기

Claude Code 또는 Codex에 shader-dev 설치

npx skills add 명령 한 번 실행 후, 에이전트에서 첫 번째 작업을 수행하고 결과 체크리스트를 확인합니다.

Claude Code, Codex 또는 사용 중인 에이전트에 shader-dev 추가

프로젝트에서 실행합니다. 설치 프로그램이 어떤 에이전트에 추가할지 묻습니다.

Terminal
npx skills add https://github.com/MiniMax-AI/skills --skill shader-dev

skills/shader-dev/SKILL.md를 위한 일반적인 skills CLI 형식입니다. 저장소가 자체 경로를 문서화할 수도 있습니다.

Skill에 첫 번째 이미지 작업 과제 제공

이 프롬프트를 자신의 콘텐츠와 제약 조건으로 수정한 다음 Claude Code 또는 Codex에서 실행하십시오.

Example prompt
create a raymarched SDF scene with soft shadows

출처: SKILL.md 예시(원문 그대로).

첫 번째 결과 확인

SKILL.md 자체가 올바른 결과의 모습으로 제시하는 내용:

  • 매개변수 개수와 타입을 포함해 모든 호출이 정의와 일치하는지 확인하십시오 — float fbm(vec3 p)는 vec2 uv를 받을 수 없습니다.
  • 엄격한 타입 일치를 강제하십시오. 스칼라에는 명시적 생성자가 필요하며, vec2는 .z로 읽을 수 없습니다.
  • 구조체 값 사이를 선택하는 삼항 연산자는 if/else로 다시 작성하십시오. ESSL에서는 이를 허용하지 않습니다.
  • 픽셀당 중첩 루프 반복 횟수를 1000회 상한과 비교해 세십시오. 초과하면 브라우저가 멈춥니다.
  • col = nor * 0.5 + 0.5로 노멀을 시각화하고 밴딩이 있는지 확인하십시오. 밴딩이 보이면 엡실론 값이 너무 큽니다.
  • uniform 위치가 null로 반환되면 컴파일러가 해당 uniform을 최적화로 제거한 것입니다 — 제거될 수 없는 방식으로 사용하십시오.

OpenDesign에서는 shader-dev가 기본 포함되어 있습니다: Plugins → Skills에서 상단 바에서 선택하십시오.

OpenDesign 다운로드빠른 시작 가이드 읽기

05 오픈 소스, 추적 가능

출처, 라이선스 및 검증

이 페이지의 사실이 어디에서 왔으며 언제 마지막으로 확인되었는지 안내합니다.

Author
MiniMax
Repository
github.com/MiniMax-AI/skills 브랜치 main
스킬 파일
skills/shader-dev/SKILL.md 검증 시 콘텐츠 체크섬 기록됨; 커밋 60aaae5
License
MIT LICENSE에서 확인; SKILL.md에 "MIT"로 명시됨.
리포지토리 스타
13,547 MiniMax-AI/skills 저장소 전체에 대해 2026-09-14에 촬영한 GitHub 스냅샷으로, 이 카탈로그에는 6개의 스킬이 포함되어 있습니다. shader-dev의 평가나 사용 횟수가 아닙니다.
OpenDesign에서 검증됨
2026-09-14 소스 파일, 경로, 라이선스 텍스트 및 별 개수가 확인되었습니다. OpenDesign 메인에 번들로 포함됨(2026-08-28 확인됨); 이 페이지에 실시간 실행이 기록되지 않았습니다.

SKILL.md 내부

  1. 호출 방식/shader-dev <request> 형태로 실행되며, 요청 내용은 $ARGUMENTS를 통해 전달됩니다.
  2. 스킬 구조SKILL.md의 구성, techniques/ 안의 기법별 가이드, 그리고 더 상세한 reference/ 파일들.
  3. 사용 방법네 단계로 이루어집니다: 라우팅, 기법 파일 읽기, 참조 링크 따라가기, WebGL2 규칙 적용.
  4. 기법 라우팅 표각 사용자 의도를 주요 기법 및 함께 조합할 기법에 매핑합니다.
  5. 기법 색인36가지 기법을 카테고리별로 묶고, 각각에 한 줄 설명을 붙였습니다.
  6. WebGL2 적용 규칙ShaderToy를 WebGL2로 변환하기: 버전, fragCoord, main 래퍼, 매크로, 함정.
  7. HTML 페이지 설정독립 실행형 페이지 요구 사항: 전체
스킬 자체 설명
"놀라운 시각 효과를 생성하기 위한 포괄적인 GLSL 셰이더 기술 — 레이 마칭, SDF 모델링, 유체 시뮬레이션, 파티클 시스템, 절차적 생성, 조명, 후처리 등."

SKILL.md의 프론트 매터 설명입니다. 전체 파일은 약 16,663자입니다. GitHub에서 전체 파일 읽기.

Shader Dev

실제 이미지 작업 태스크에서 shader-dev를 실행합니다.

shader-dev 스킬은 OpenDesign 내부에 포함되어 있습니다. 앱을 다운로드하고, Plugins → Skills에서 스킬을 선택하고, 위의 프롬프트를 붙여넣은 다음, 결과 전에 계획을 읽습니다.

OpenDesign 다운로드모든 스킬 보기
터미널
npx skills add https://github.com/MiniMax-AI/skills --skill shader-dev