Claude Code(Opus 5)와 Three.js로 절차적 사막 탐험 게임을 만들었습니다
I built a procedural desert explorer with Claude Code (Opus 5) and Three.js
핵심 요약
Claude Code와 Three.js를 활용해 텍스처나 메시 없이 셰이더만으로 구현한 절차적 사막 탐험 데모입니다.
- 기술 스택 — Claude Code와 Three.js를 사용하여 셰이더 기반의 절차적 사막 환경을 구현함.
- 핵심 기능 — 메시나 텍스처 없이 GPU 셰이더로만 지형과 모래 변형, 마법 효과를 생성함.
- 개발 방식 — Claude Code에 헤드리스 크롬을 연동해 GPU 성능을 측정하며 최적화함.
- 체험 방법 — 웹 브라우저에서 직접 실행 가능하며 WASD와 마우스로 상호작용함.
이건 그래픽 기술 데모로 만들었으며, 전부 Claude Code와 Opus 5를 사용했습니다.
개요: 3인칭 시점으로 돌아다니는 브라우저 기반 사막입니다. 지형은 GPU 클립맵 위의 절차적 모래 언덕 필드이며, 메시나 텍스처, 다운로드된 에셋 없이 모든 표면이 셰이더 코드로 생성됩니다. 걸어 다니는 곳마다 모래가 영구적으로 변형되고 서서히 다시 침식됩니다. GPU 천 시뮬레이션으로 구현된 후드 로브, 픽셀 단위로 계산된 물리 기반 하늘, 그리고 지형에 실제 구덩이를 파거나 탈 수 있는 모래 언덕을 만드는 6가지 모래 마법(1~5번 키 및 우클릭)이 포함되어 있습니다.
Claude 활용 방식: TSL 셰이더, 컴퓨트 커널, 물리 통합, 그리고 이를 측정하는 Node 도구까지 전부 Claude가 작업했습니다. 이 프로젝트를 성공시킨 워크플로우는 Claude에게 자체적인 도구를 제공한 것입니다. 앱을 실행하고 스크린샷을 찍어 서브시스템별 GPU 비용을 보고하는 헤드리스 크롬 환경을 구축해, 측정된 수치를 바탕으로 변경 사항을 적용했습니다.
체험하기: WebGPU를 지원하는 브라우저에서 https://desert-dusky.vercel.app/ 에 접속하세요. WASD로 이동하고, 1~5번 키와 우클릭으로 마법을 사용합니다. F3으로 성능 오버레이를, F1으로 설정 메뉴를 켜고 끌 수 있습니다.
5070 Ti에서 테스트했으며, 1440p 해상도에서 약 160FPS가 나옵니다.
