r/vibecoding•약 13시간 전•9•6
Three.js로 구현한 나루토 종말의 계곡 (2부): 스타일라이즈드 폭포 셰이더 및 AI 3D 메시 생성
Naruto’s Valley of the End in Three.js (Part 2): Stylized Waterfall Shader & AI 3D Mesh Generation
핵심 요약
Three.js와 AI 도구를 활용해 나루토 종말의 계곡을 구현하는 프로젝트의 2부로, 폭포 셰이더와 3D 모델 최적화 과정을 공유합니다.
- 폭포 셰이더 — 뎁스 및 충돌 감지를 통해 바위와 조각상 주변에 거품 효과를 동적으로 생성함
- 젖음 효과 — 폭포 미스트가 닿는 바위와 조각상 하단에 반짝이는 스펙큘러 레이어를 적용함
- AI 모델링 — Tripo AI를 활용해 부족한 조각상 파츠를 생성하고 블렌더에서 조립함
- GLB 최적화 — 불필요한 토폴로지 제거와 텍스처 압축으로 파일 용량을 4.6MB에서 300KB로 대폭 줄임
다들 안녕! 나루토 종말의 계곡 만들기 2부 가져왔어.
이번 업데이트에서는 스타일라이즈드 폭포 셰이더 세팅이랑 거대 석상 하단부 마무리하는 데 집중했어.
폭포 셰이더 (Three.js):
• 깊이 & 충돌 감지: 물이 바위나 석상에 닿는 부분마다 거품이 동적으로 생기게 만들었어.
• 기본 충격 & 물보라 거품: 하단에 UV 왜곡 애니메이션을 넣어서 물살이 거칠게 흐르는 느낌이랑 거품 층을 구현했어.
• 젖음 셰이더 효과: 물안개가 닿는 주변 바위랑 석상 밑부분에 은은하게 젖어서 반짝이는 스펙큘러 레이어를 입혔어.
3D 워크플로우 & Tripo AI 연동:
석상 나머지 부분(다리, 발, 하단 베이스)은 Tripo AI 써서 부족한 지오메트리랑 텍스처를 빠르게 뽑아냈어. 다 만들고 나서는 블렌더에서 합친 다음에 GLB 파일로 뽑았지.
용량 줄이려고 GLB 압축기를 썼는데, 이게 불필요한 토폴로지를 정리해주고 화질 조절하면서 텍스처 압축까지 해주거든. 덕분에 4.6MB짜리가 300KB 조금 넘는 수준으로 줄었어. 이거 진짜 쓸만함.
🔗 링크랑 리소스는 댓글에 남겨둘게
