61 KB HTML 파일로 구현한 실시간 바다 시뮬레이션

Claude Code(Opus 5.5)를 사용하여 실시간 해양 시뮬레이션을 만들었습니다. 이것은 WebGPU를 이용해 브라우저에서 일몰 바다를 렌더링하는 단일 61KB HTML 파일입니다. FFT 파도 시뮬레이션, 하얀 포말(whitecaps), 구름이 있는 물리 기반 하늘(physically based sky), 그리고 햇빛 반짝임(sun glitter)을 갖추고 있습니다. WASD 키와 마우스를 이용해 주변을 비행하며 돌아다닐 수 있습니다.

Claude Code를 사용한 방법: 저는 "WebGPU 환경에서 부유 카메라를 사용하여 가장 사실적인 물 장면을 만들어라"라는 하나의 프롬프트를 제공했습니다. 코드는 엔진이나 라이브러리 없이 렌더러를 처음부터 작성했습니다. 자신의 출력물 스크린샷을 찍고 별도의 서브 에이전트(subagents)에게 이 스크린샷들을 비평하게 하여, 스스로의 결과물을 평가하지 않도록 했습니다. 전체 과정은 약 30분이 소요되었습니다.

무료로 사용해 보기: ocean-noniv.vercel.app (가급적 Chrome에서). WebGPU를 지원하는 GPU가 필요하며, 노트북의 경우 Chrome을 전용 GPU에 강제 할당해야 합니다. 그렇지 않으면 성능이 좋지 않거나 아예 실행되지 않을 수 있습니다. RTX 5070 Ti에서는 2560×1440 해상도에서 약 260 FPS를 얻었습니다. 주변을 둘러보려면 캔버스(canvas)를 클릭하고, 이동하려면 WASD 키를 누르며, 설정 패널은 H 키를 사용합니다. 압축되지 않고 더 체계화된 버전의 레포지토리: github.com/Noniv/web-ocean /u/Any-Reputation8118이 제출했습니다 [link] [comments]