FarazzShaikh/THREE-CustomShaderMaterial

개요 Three.js의 기본 재질(Material)을 커스텀 GLSL 셰이더로 확장할 수 있게 해주는 라이브러리다. MeshStandardMaterial 같은 PBR 재질의 라이팅·그림자 기능은 유지하면서 셰이더 커스터마이징이 가능하다.

핵심 내용 Three.js 기본 재질의 컴파일된 셰이더에 커스텀 GLSL 코드를 주입하는 방식으로 동작한다. 기존 PBR 라이팅, 그림자, fog 등 Three.js 내장 기능을 그대로 유지하면서 정점/프래그먼트 셰이더를 커스터마이징할 수 있다. @react-three/fiber와도 잘 호환된다.

기존 대비 차별점 순수 커스텀 ShaderMaterial을 사용하면 Three.js의 내장 조명 시스템을 직접 재구현해야 했다. CSM은 기존 재질 위에 커스텀 로직만 추가하는 방식으로 이 문제를 해결한다.

활용 가능성 크리에이티브 코딩, 게임 비주얼 이펙트, 인터랙티브 3D 웹 경험, Three.js 기반 데이터 시각화에서 셰이더 효과가 필요할 때 활용할 수 있다.

참고 자료 - 원본