Webgl

shader-dev는 ShaderToy 스타일의 실시간 비주얼을 위한 실용적인 GLSL 셰이더 스킬입니다. 이 shader-dev 스킬을 사용하면 레이 마칭, SDF 장면, 조명, 파티클, 유체 모션, 후처리, UI 디자인용 shader-dev까지 일반적인 프롬프트보다 훨씬 적은 시행착오로 만들거나 디버깅할 수 있습니다.

Frontend Development용 threejs-textures 스킬은 texture loading, UV mapping, colorSpace, wrapping, filtering, environment maps를 다뤄 이미지가 Three.js materials에서 올바르게 렌더링되도록 돕습니다.

threejs-shaders는 GLSL, ShaderMaterial, uniforms, 정점 변형, 프래그먼트 효과를 사용해 Three.js 셰이더를 작성하는 실용 가이드입니다. 작동하는 셰이더 기준점이 필요하거나, 머티리얼 선택을 더 분명히 하고 싶거나, 일반적인 프롬프트보다 덜 헤매고 싶을 때 프런트엔드 개발에 활용하세요.

threejs-materials는 메시 재질을 선택, 설정, 문제 해결하는 데 쓰는 Three.js 재질 스킬입니다. 사실적인 PBR, 조명 없는 플랫 셰이딩, 툰 스타일과 디버그 뷰, 텍스처 기반 스타일링, 커스텀 셰이더에 활용할 수 있습니다. 더 빠르고 일관된 재질 결정을 필요로 하는 프런트엔드 개발팀에 특히 유용합니다.

Frontend Development용 threejs-postprocessing 스킬: EffectComposer 파이프라인, bloom, depth of field, blur, color grading, 그리고 커스텀 screen-space pass를 추가할 수 있습니다. 이 가이드를 사용해 렌더 체인을 설정하고, 효과를 조정하며, 기존 Three.js 씬에 composer 렌더링을 연결하세요.

threejs-loaders는 GLTF/GLB 모델, 텍스처, HDR 환경, 기타 비동기 리소스를 포함한 Three.js 에셋을 올바르게 로드하도록 도와줍니다. 안정적인 로딩, 진행률 처리, 장면 준비 단계의 버그 감소가 필요할 때 Frontend Development용 threejs-loaders 스킬을 사용하세요.

threejs-lighting은 Frontend 개발을 위한 실용적인 Three.js 조명 스킬입니다. 어떤 조명 유형을 선택할지, 그림자를 어떻게 설정할지, 환경 조명을 어떻게 더할지, 그리고 장면이 너무 평면적으로 보이거나, 지나치게 어둡거나, 과노출될 때 어떻게 바로잡을지 도와줍니다. 더 빠르고 일관된 장면 조명이 필요할 때 threejs-lighting 가이드를 활용하세요.

threejs-geometry는 실제 장면에 맞는 Three.js geometry를 고르는 데 도움을 줍니다. 내장 도형, BufferGeometry, 커스텀 메시, 인스턴싱까지 다루며, 적절한 생성자와 파라미터 순서, 성능을 고려한 출력을 찾아야 할 때 Frontend Development용 threejs-geometry skill을 사용하세요.

threejs-fundamentals는 프런트엔드 개발자가 Three.js 앱의 핵심 설정—씬, 카메라, 렌더러, 조명, 메시, 변환, 객체 계층—을 만들고 디버깅하는 데 도움을 줍니다. 이 threejs-fundamentals 가이드를 사용하면 빈 캔버스를 고치고, 객체를 올바른 위치에 배치하고, 깔끔한 첫 장면을 완성할 수 있습니다.

Three.js 모션 시스템을 위한 threejs-animation 스킬입니다. 키프레임, 애니메이션 클립, 믹서, 액션, 스켈레탈 재생, 모프 타깃, 절차적 모션을 다룹니다. GLTF 애니메이션 재생, 클립 블렌딩, 예측 부담이 적은 깔끔한 애니메이션 루프 구현이 필요할 때 Frontend Development에 활용하세요.