WebGL 프래그먼트 셰이더 실시간 코딩 플레이그라운드 - CYBER-SHADER STUDIO

WebGL 프래그먼트 셰이더 실시간 코딩 플레이그라운드(CYBER-SHADER STUDIO)는 웹 브라우저 상에서 GLSL(OpenGL Shading Language) ES 1.0/2.0 기반 프래그먼트 셰이더를 실시간으로 자유롭게 코드 작성, 수정, 컴파일하며 독창적인 2D/3D 비주얼 아트, 생성 예술(Generative Art), 레이마칭(Raymarching) 프랙탈 및 플라즈마 파동을 제작할 수 있는 미래지향적 사이버네틱 스튜디오입니다.

별도의 그래픽 라이브러리 설치나 복잡한 빌드 환경 없이 60 FPS 실시간 뷰포트 위에서 코딩할 수 있으며, 코드를 재컴파일하지 않고도 슬라이더와 네온 컬러 피커를 통해 유니폼(Uniform) 변수를 실시간 미세 조절할 수 있습니다. 제작한 비주얼 결과물은 PNG 고해상도 이미지, WebM 애니메이션 비디오, GLSL (.frag) 코드, 그리고 단일 독립 실행형 HTML 패키지로 내보낼 수 있습니다.

🌟 핵심 주요 기능

• 🌌 사이버네틱 미래지향적 다크 UI (Cybernetic Dark Theme):
  • 딥 사이버 네이비와 네온 시안/마젠타 글로우 테마, 듀얼 레이아웃 분할 창(Editor & Live Viewport), CRT 스캔라인 Overlay, FPS 및 렌더링 타임 실시간 모니터링 HUD를 제공합니다.
• ⚡ 실시간 GLSL 컴파일러 & 스마트 에러 디버그 콘솔:
  • 코드를 입력하거나 Ctrl + S 키를 누르면 WebGL 파이프라인에서 즉각 셰이더를 컴파일합니다.
  • GLSL 문법 에러 발생 시 exact line number와 구문 오류 원인을 하단 디버그 콘솔에 즉시 출력하여 빠르게 버그를 잡을 수 있습니다.
• 🎛️ 실시간 라이브 파라미터 & 네온 컬러 컨트롤러:
  • u_time 재생 속도(0.1x ~ 3.0x), u_color1 (Primary Neon), u_color2 (Secondary Accent) RGB 피커 지원.
  • u_param1 ~ u_param4 파라미터 슬라이더를 통해 주파수, 패턴 밀도, 변형 왜곡 강도, 줌 레벨, 글로우 광량을 60 FPS 인터랙티브 60Hz로 조절할 수 있습니다.
• 🔮 16가지 엄선된 고품질 GLSL 프리셋 라이브러리:
  1. 사이버네틱 네온 튜닝 파동: 네온 그리드 라인과 디지털 에너지를 머금은 플라즈마 파동.
  2. 우주 성운과 차원 워프: FBM(Fractional Brownian Motion) 레이마칭 volumetric 우주 성운과 별빛.
  3. 큐빅 퀀텀 프랙탈 구체: 3D 구체와 프랙탈 큐브 간 모핑 레이마칭 발광체.
  4. 액체 메탈 블롭 & 리플: 금속 광택 크롬 반사 필드와 오로라 리플.
  5. 전기 보로노이 에너지 셀: 실시간 Voronoi 세포 분열 및 네온 라이프 아크.
  6. 크리스탈 홀로그램 프리즘: 색수차(Chromatic Aberration) 분산과 홀로그램 스캔라인.
  7. 용암 램프 마그마 유체: 마그마 유체와 메타볼(Metaballs) 점성 융합.
  8. 가상 파동 동기화 Visualizer: 가상 음파 주파수 스펙트럼 합성 비주얼라이저.
  9. 사이버 웜홀 하이퍼스페이스 터널: 시공간을 초월하는 속도감 있는 워프 그리드 터널.
  10. 사이버펑크 3D 미드나잇 시티: Procedural 3D 고층 빌딩 시티 스카이라인 레이마칭.
  11. 블랙홀 사건의 지평선 & 중력 렌즈: 강착원 반사 링과 빛의 중력 굴절 블랙홀.
  12. 태양 화염 & 플라즈마 아크: 폭발하는 태양 코로나 플라즈마 프로튜버런스.
  13. 레트로 80s 씬스웨이브 썬셋: 80년대 레트로 원근법 Grid 지평선과 스트라이프 태양.
  14. 펜로즈 타일 & 사이케데릭 만다라: 대칭 기하학 패턴 모핑 만다라 캘레이도스코프.
  15. 퀀텀 입자 흩날림 & 오로라: 흩날리는 퀀텀 먼지 입자와 빛나는 오로라 리본.
  16. 사이버 메트릭스 텍스트 글리치 레인: 디지털 텍스트 코드 글리치 빗줄기 이펙트.
• 🖼️ 텍스처(sampler2D) 슬롯 지원:
  • 절차적 노이즈(Noise), 사이버 격자(Grid), 컬러 스펙트럼(Gradient) 생성 및 사용자가 직접 커스텀 이미지 파일(PNG/JPG)을 업로드하여 u_texture0 샘플러로 전달 가능.
• 📥 다양한 형태의 파일 다운로드 & 내보내기:
  • PNG 스냅샷: 현재 캔버스 프레임을 고화질 이미지로 즉시 저장.
  • WebM 5초 애니메이션 영상: MediaRecorder API를 통한 실시간 비디오 녹화.
  • GLSL 소스코드 (.frag): 표준 프래그먼트 셰이더 파일 다운로드.
  • 단일 독립실행 HTML 파일: WebGL 렌더링 코드와 셰이더가 하나로 압축된 순수 HTML 웹앱 저장.

🛠️ 사용 방법 (How to Use)

1. 셰이더 프리셋 선택:
   • 상단 헤더의 셰이더 프리셋 드롭다운에서 원하는 비주얼 스타일(우주 성운, 퀀텀 구체, 사이버 그리드 등)을 선택합니다.
2. 실시간 코드 편집:
   • 좌측 ‘GLSL 코더’ 탭에서 코드를 자유롭게 수정하고 Ctrl + S 키나 컴파일 & 적용 버튼을 누르면 실시간 뷰포트에 바로 반영됩니다.
3. 라이브 파라미터 미세 조절:
   • ‘라이브 파라미터’ 탭으로 이동하여 슬라이더를 옮기거나 컬러 피커를 바꿔 시각 효과를 극대화해 보세요.
4. 마우스 인터랙션:
   • 뷰포트 캔버스 위에서 마우스를 이동하거나 클릭하면 u_mouse 유니폼 값이 전달되어 마우스 위치에 반응하는 인터랙션 visual을 얻을 수 있습니다.
5. 결과물 다운로드:
   • 내보내기 메뉴를 통해 PNG 이미지, 5초 비디오 영상, GLSL 코드 파일, 또는 오프라인에서도 동작하는 독립 실행 HTML 파일로 다운로드하세요.

자주 묻는 질문 (FAQ)

어떻게 시작하나요?

앱을 열면 제공되는 기본 설정과 화면 안내를 확인할 수 있습니다. 먼저 예시 상태에서 주요 조작을 살펴본 뒤, 목적에 맞게 입력값이나 도구를 변경해 보세요.

별도 설치가 필요한가요?

이 앱은 웹 브라우저에서 실행하도록 구성되어 있습니다. 원활한 사용을 위해 최신 브라우저와 안정적인 인터넷 환경을 권장합니다.

결과가 예상과 다르게 보이면 무엇을 확인해야 하나요?

현재 선택한 설정, 입력값, 화면 크기, 브라우저 상태에 따라 결과가 달라질 수 있습니다. 초기화 또는 예시 설정으로 돌아간 뒤 값을 하나씩 바꿔 확인하면 원인을 파악하기 쉽습니다.