shader-dev
Shader Craft — GLSL 셰이더 기법
WebGL2로 브라우저에서 실행되는 레이 marched 3D 장면부터 유체 시뮬레이션까지 — 사실적인 시각 효과를 위한 완전한 프로덕션급 GLSL 셰이더를 생성합니다.
스킬 ZIP 다운로드
Claude에서 업로드
설정 → 기능 → 스킬 → 스킬 업로드로 이동
토글을 켜고 사용 시작
테스트해 보기
"shader-dev" 사용 중입니다. 보로노이 색상 팔레트를 사용한 극좌표 UV 조작으로 만화경 패턴 만들기
예상 결과:
- WebGL2 캔버스가 포함된 완전한 HTML 페이지
- 극좌표/로그-극좌표 좌표 변환이 있는 프래그먼트 셰이더
- 셀 패턴 생성을 위한 보로노이/월리 노이즈 함수
- 생생한 색상을 위한 코사인 색상 팔레트 매핑
- 각도 반복을 통한 만화경 대칭 (예: 8중 대칭)
- 동적 시각 효과를 위한 시간 기반 애니메이션 회전
"shader-dev" 사용 중입니다. 부드러운 그림자와 색상 블리딩을 갖춘 패스 트레이싱 글로벌 일루미네이션 장면 구축
예상 결과:
- 몬테카를로 샘플링을 갖춘 완전한 패스 트레이서
- 여러 객체와 머티리얼을 갖춘 SDF 장면 정의
- 디퓨즈 및 스페큘러 BSDF 샘플링
- 러시안 룰렛 패스 종료
- 프로그레시브 렌더링을 위한 누적 버퍼
- 수렴된 이미지를 위한 톤매핑 및 디스플레이
보안 감사
안전This skill consists entirely of GLSL shader reference documentation (36 markdown files in techniques/ and reference/ directories). Detected risk factors (external_commands, scripts, filesystem, network) are false positives triggered by code examples in markdown documentation. The skill contains no executable scripts, no network requests, no filesystem operations, and no external command invocations. All code samples are GLSL shader snippets for educational/reference purposes. Safe to publish.
품질 점수
만들 수 있는 것
인터랙티브 셰이더 아트 및 데모씬
웹 브라우저에서 실시간으로 실행되는 GLSL 셰이더를 사용하여 매혹적인 시각 예술 작품, 데모씬 프로덕션 또는 생성 예술 설치를 만듭니다. 레이 마칭, 절차적 노이즈, 도메인 워핑과 같은 기법을 결합하여 독창적인 비주얼을 만들어냅니다.
WebGL 게임 효과 및 셰이더
물/해양 표면, 지형 렌더링, 불/불꽃/눈을 위한 파티클 시스템, 후처리 파이프라인, 대기 라이팅 등 게임 준비 완료 시각 효과를 구현합니다 — 모두 WebGL2에서 클라이언트 측에서 실행됩니다.
과학 시각화 및 시뮬레이션
과학 데이터를 위한 GPU 가속 시각화를 구축합니다: 유체 역학 시뮬레이션, N-체 중력 시뮬레이션, 셀룰러 오토마타, 반응-확산 패턴, 볼륨 구름/안개 렌더링.
이 프롬프트를 사용해 보세요
여러 기하학적 객체(구, 상자, 토러스)가 부드러운 최소값(smin)으로 결합된 레이 마칭 SDF 장면이 포함된 독립형 HTML 페이지를 만드십시오. 부드러운 그림자, 환경 폐색, 3중 조명 야외 라이팅 모델을 추가합니다. 마우스를 통한 카메라 오르빗 컨트롤을 포함합니다.
절차적 지형을 렌더링하는 WebGL2 셰이더를 생성하십시오. FBM 지형(침식과 같은 디테일을 위한 6옥타브 및 미분)을 사용한 하이트필드 레이 마칭을 사용하십시오. 이중평면 텍스처링, 레일리/미를 사용한 높이 기반 대기 산란, 해수면의 게르스터너 파도 해양을 추가합니다. ACES 톤 매핑과 2x SSAA를 적용합니다.
멀티패스 핑퐁 프레임버퍼를 사용한 GLSL의 나비에-스톡스 솔버로 유체 시뮬레이션을 구축하십시오. 이류, 확산, 압력 투영(자코비 반복), 염료/속도를 추가하기 위한 마우스 상호작용을 포함합니다. 흐름장을 시각화하기 위해 색상 팔레트를 사용하십시오.
불 효과를 위한 상태 비저장 파티클 시스템 셰이더를 만드십시오. 난류를 위해 절차적 노이즈를 사용하고, 밝은 노란색에서 깊은 빨간색까지의 그라디언트를 위해 따뜻한 색상 팔레트를 사용하며, 적절한 알파 블렌딩을 포함합니다. 중력을 적용한 별도의 파티클 시스템으로 불꽃 레이어를 추가합니다.
모범 사례
- 항상 성능 예산을 준수하십시오: ≤ 128 레이 마칭 스텝, ≤ 32 볼륨 샘플, ≤ 6 FBM 옥타브, ≤ 픽셀당 1000회 중첩 루프 반복
- GLSL에서 사용 전에 함수를 선언하십시오 — C/C++와 달리 GLSL은 모든 구현에서 전방 선언을 지원하지 않습니다
- 프레임 간 상태 유지가 필요한 효과(유체 시뮬레이션, 패스 트레이싱, 파티클 시스템)에는 멀티패스 버퍼 기술을 사용하십시오
- ShaderToy 코드를 적절히 변환하십시오: mainImage()를 main()으로 감싸고, fragCoord 대신 gl_FragCoord를 사용하며, out vec4 fragColor를 선언합니다
- #define보다 const를 선호하십시오 — GLSL 매크로는 함수 호출을 사용할 수 없으며 제한이 있습니다
피하기
- 성능 예산 초과 — 픽셀당 1000회 이상의 루프는 브라우저를 멈추게 합니다
- 계산된 값에 #define 매크로 사용 — GLSL 전처리기는 매크로에서 함수 호출을 평가할 수 없습니다
- 컴파일러에 의해 최적화로 제거될 수 있는 유니폼 접근 — 유니폼이 프래그먼트 출력에서 사용되는지 항상 확인하십시오
- 다른 루프 내부에 레이 마칭 또는 볼륨 샘플링 중첩 — 복잡도가 곱해져 GPU 시간 제한을 초과합니다