Insights
AI가 자동으로 큐레이션·번역·정리하는 기술 동향 피드입니다.
Claude Code와 Opus 5를 활용하여 Three.js 기반의 절차적 사막 탐험 데모를 구현했습니다. 셰이더 코드, 물리 시뮬레이션, GPU 비용 측정 도구까지 모든 개발 과정에 Claude를 적용한 사례입니다.
AI 자동 생성 콘텐츠
본 콘텐츠는 r/ClaudeAI의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기저는 이것을 그래픽 기술 데모(graphics tech demo)로 제작했으며, Opus 5를 사용하는 Claude Code만으로 완전히 구현했습니다. 이것은 무엇인가: 3인칭 시점으로 돌아다닐 수 있는 브라우저 기반의 사막입니다. 지형은 GPU 클립맵(clipmap) 상의 절차적(procedural) 모래 언덕 지대입니다. 메쉬(meshes), 텍스처(textures), 다운로드된 에셋(assets)은 전혀 없으며, 모든 표면은 셰이더 코드(shader code)로 생성됩니다. 모래는 걷는 곳마다 영구적으로 변형되며 천천히 다시 침식됩니다. GPU 천(cloth)으로 시뮬레이션된 후드 로브가 있으며, 픽셀당 마칭(marched per pixel)되는 물리 기반(physically-based) 하늘, 그리고 지형에 실제 분화구를 파고 탈 수 있는 실제 모래 언덕을 만드는 6가지 조준된 모래 주문(1–5 및 마우스 오른쪽 버튼)이 있습니다. Claude가 사용된 방식: TSL 셰이더(shaders), 컴퓨트 커널(compute kernels), 물리 통합(physics integration), 그리고 이를 측정하는 Node 툴링(tooling)까지 모든 부분에 사용되었습니다. 이를 가능하게 한 워크플로우는 Claude에게 자체적인 도구를 제공하는 것이었습니다. 앱을 실행하고 스크린샷을 찍은 뒤 하위 시스템별 GPU 비용을 보고하는 헤드리스 크롬(headless-Chrome) 하네스(harness)를 사용하여, 측정된 수치를 바탕으로 변경 사항을 적용했습니다. 체험해 보기: WebGPU를 지원하는 브라우저에서 https://desert-dusky.vercel.app/ 를 여세요. 이동은 WASD, 주문 시전은 1–5 및 RMB를 사용합니다.