스킬 shader-programming-glsl
📦

shader-programming-glsl

안전

GLSL로 GPU 셰이더 작성하기

GPU 셰이더로 멋진 시각 효과를 만들고 그래픽 렌더링을 최적화하세요. 이 가이드에서는 실시간 그래픽을 위한 GLSL 구문, 정점 및 프래그먼트 셰이더, 셰이더 수학을 학습합니다.

지원: Claude Codex Code(CC)
📊 70 적절함
1

스킬 ZIP 다운로드

2

Claude에서 업로드

설정 → 기능 → 스킬 → 스킬 업로드로 이동

3

토글을 켜고 사용 시작

테스트해 보기

"shader-programming-glsl" 사용 중입니다. 화면 중심을 기준으로 펄스 글로우 효과를 만드는 셰이더를 만들어 주세요

예상 결과:

중심에서 가장자리까지 색상 보간을 사용하여 방사형 그라데이션 애니메이션을 만들기 위해 smoothstep 및 시간 기반 sin 함수를 사용하는 프래그먼트 셰이더

"shader-programming-glsl" 사용 중입니다. 100번 반복 실행되는 이 셰이더 루프를 어떻게 최적화할 수 있나요?

예상 결과:

반복 횟수 감소, 조기 종료 사용, CPU에서 상수 미리 계산, 더 나은 GPU 성능을 위해 분기를 step/mix 함수로 교체하는 권장 사항

보안 감사

안전
v1 • 2/25/2026

All 33 static analysis findings are false positives. The SKILL.md file is educational documentation about GLSL shader programming. Backtick-quoted text represents GLSL code examples in markdown format, not shell command execution. C2 keywords and system reconnaissance patterns are GLSL built-in variables (gl_Position, gl_FragColor, varying) and shader language syntax. No actual security risks detected.

1
스캔된 파일
122
분석된 줄 수
0
발견 사항
1
총 감사 수
보안 문제를 찾지 못했습니다
감사자: claude

품질 점수

38
아키텍처
100
유지보수성
87
콘텐츠
31
커뮤니티
100
보안
83
사양 준수

만들 수 있는 것

대화형 비주얼을 만드는 웹 개발자

웹사이트용 애니메이션 배경, 파티클 시스템, 후처리 효과를 포함한 Three.js 프로젝트의 사용자 정의 셰이더를 빌드합니다.

사용자 정의 효과를 구현하는 게임 개발자

독특한 비주얼 스타일, 지형 생성, 실시간 조명 효과를 만들기 위해 Unity 또는 Unreal Engine용 셰이더를 작성합니다.

생성 아트를 탐색하는 창의적 코더

디지털 아트 설치용 SDF, 레이마칭, 프래그먼트 셰이더 기술을 사용한 절차적 생성을 실험합니다.

이 프롬프트를 사용해 보세요

기본 프래그���트 셰이더 설정 
Three.js에서 사용하기 위해 UV 좌표를 기반으로 색상 그라데이션을 만드는 기본 GLSL 프래그먼트 셰이더를 작성해 주세요.
변환이 포함된 정점 셰이더 
시간 uniform과 sin/cos 함수를 사용하여 메시에 파형 변형을 적용하는 정점 셰이더를 생성해 주세요.
레이마칭 SDF 장면 
부드러운 합집합 연산을 사용하여 결합된 여러 SDF 도형(구체 및 상자)이 있는 레이마칭 프래그먼트 셰이더를 만들어 주세요.
후처리 효과 
밝은 픽셀을 추출하고 가우시안 블러를 적용한 다음 원본 이미지와 합성하는 블룸 후처리 셰이더를 작성해 주세요.

모범 사례

  • if-else 분기 대신 보간에는 mix(), 임계값에는 step()/smoothstep() 사용
  • 셰이더에서 계산하는 대신 CPU에서 상수 값을 미리 계산하고 uniforms로 전달
  • 메모리 대역폭을 최소화하��� GPU 벡터 유닛을 활용하기 위해 관련 데이터를 vec4로 패킹

피하기

  • 루프 내의 무거운 조건부 분기는 GPU 병렬성을 감소시키고 스레드 분기 발생
  • CPU에서 미리 계산된 uniforms를 전달하는 대신 프래그먼트마다 정적 값 계산
  • 불필요한 정밀도(mediump로 충분한데 highp 사용)는 모바일에서 대역폭과 전력 낭비

자주 묻는 질문

정점 셰이더와 프래그먼트 셰이더의 차이점은 무엇인가요?
정점 셰이더는 3D 정점 위치를 2D 화면 좌표로 변환합니다. 프래그먼트 셰이더는 각 픽셀의 최종 색상을 결정합니다. 정점 셰이더는 정점마다 한 번 ���행되고, 프래그먼트 셰이더는 픽셀마다 한 번 실행됩니다.
셰이더가 검은 화면으로 표시되는 ��유는 무엇인가요?
gl_Position.w가 1.0인지 확인하고, 호스트 애플리케이션에서 uniforms가 설정되었는지 확인하고, UV 좌표가 0-1 범위 내에 있는지 확인하며, 셰이더가 오류 없이 컴파일되었는지 확인하세요.
GLSL에서 스위즐링은 무엇을 의미하나요?
스위즐링을 사용하면 .xyzw, .rgba, .stpq와 같은 접미사를 사용하여 벡터 ��성 요소를 재정렬하거나 선택할 수 있습니다. 예를 들어 color.zyx는 vec3의 RGB 채널을 반전시킵니다.
정점 셰이더에서 프래그먼트 셰이더로 데이터를 전달하려면 어떻게 하나요?
varying 키워드를 사용하세요. 두 셰이더 모두에 varying을 선언하고, 정점 셰이더에 할당하며, 프래그먼트 셰이더에서 읽습니다. 값은 프리미티브 전체에 걸쳐 보간됩니다.
레이마칭이란 무엇이며 언제 사용해야 하나요?
레이마칭은 부호�� 거리 함수를 사용하여 광선을 따라 단계적으로 이동하여 3D 장면을 렌더링합니다. 절차적 기하학, 유기적 모양, 기존 래스터화로는 어려운 효과에 사용하세요.
모바일 기기에서 셰이더 성능을 어떻게 개선할 �� 있나요?
가능한 mediump 정밀도를 사용하고, 텍스처 조회를 최소화하고, 루프 반복을 줄이며, 동적 분기를 피하고, CPU에서 복잡한 계산을 미리 계산하세요.

개발자 세부 정보

작성자

sickn33

라이선스

MIT

리포지토리

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/shader-programming-glsl

참조

main

파일 구조

📄 SKILL.md