FFT 바다
공개된 해양학·그래픽스 기법만으로 처음부터 구현한 실시간 바다입니다. 게임이 아니라 기술 실험이고, 풍속을 올리면 파고가 물리 공식대로 따라 올라갑니다.
여기서 바로 써 보기
아래 버튼을 누르면 이 페이지 안에서 실행됩니다. 누르기 전에는 앱 데이터를 받지 않으므로, 소개만 읽고 가셔도 됩니다. 설치도 로그인도 없습니다.
누구에게 필요한가요
물이 어떻게 그려지는지 궁금하거나, 바다를 직접 만들어 보려는 개발자
주요 기능
- Tessendorf 계열 FFT 파랑과 JONSWAP 스펙트럼
- 스웰·풍파·잔물결 3단 캐스케이드
- 야코비안으로 판정하는 파도 부서짐과 포말
- 선체 메시에서 실측한 프로브 14개로 뜨는 배
- 뒤집혀도 스스로 일어나는 복원 모멘트
- 굴절 패스로 실제로 보이는 수중 지형 — 두께는 가정하지 않고 깊이로 잰다
- 돌고래·상어·열대어. 종마다 해부 구조가 달라 꼬리가 눕고 서는 축까지 다르다
- 돌고래는 수면 위로 뛴다. 물 밖에서는 저을 것이 없어 그냥 포물체다
- 배수 유량에서 유도한 선수 물보라 — 정지하면 0, 파도에 선수가 묻히면 폭증
- 쇄파선은 고정된 원이 아니라 파고로 정해지는 수심 등고선
- 항주 이력에서 복원한 켈빈 V자 항적
- 방위마다 반경이 달라 해변과 절벽이 한 섬에 공존한다
- 배가 섬에 얹힌다. 완만한 해변에는 선수부터, 바위 위에서는 그쪽으로 기운다
- 텍스처가 아니라 함수로 계산하는 하늘과 반사
- 잔잔부터 폭풍까지 프리셋 6종, 품질 4단계
제품 방향
항적과 수중 시점이 없다고 적어 뒀던 것이 이번에 둘 다 들어왔습니다. 굴절 패스를 넣자 해석적으로 칠하던 물 밑이 실제 지형으로 바뀌었고, 그 위에 물고기와 해안 쇄파가 얹혔습니다. 배 속도도 6.5노트에서 18.6노트가 됐습니다 — 전체 저항의 92%를 차지하던 항이 전진까지 묶고 있었습니다. 남은 것은 폭풍 전속에서 선수가 깊이 묻히는 구간과, 저각 태양에서 하늘이 평평해지는 한계입니다.
만들면서 쓴 글
- 배가 6.5노트밖에 못 나가던 이유 — 흔들림을 잡던 항이 전진까지 잡고 있었습니다
파도에서 배가 덜 흔들리게 하려고 넣은 항력이 전체 저항의 92%였습니다. 아래위 흔들림 기준으로 크기를 잡은 값을 전 방향에 똑같이 걸었으니 앞으로 가는 것도 그만큼 막혔습니다. 속도를 풀자 느릴 땐 닿지 않던 결함 둘이 드러났습니다.
- 쇄파선은 해변의 성질이 아니라 바다의 성질입니다
파도가 부서지는 선을 섬 둘레의 고정된 원으로 잡으면 강풍에서 모래 위에 파도가 부서집니다. 파도는 자기 파고에 견줄 만한 수심에서 부서지므로 그 선은 바다가 정합니다. 그리고 배에는 지형 충돌이 아예 없어서 섬을 뚫고 지나가고 있었습니다.
- 물 밑을 상수로 칠하고 있었습니다 — 굴절 패스를 넣자 숨어 있던 것들이 드러났습니다
수면 아래를 노이즈 섞은 상수 색으로 칠하고 있었습니다. 실제 지형을 굴절시켜 비추도록 바꾸자 물이 가려 주던 결함이 둘 나왔습니다. 그리고 흰 면의 원인을 여섯 번 오진하게 만든 건 렌더링이 아니라 제 검증 도구였습니다.
- "이게 물고기냐" — 돌고래가 흰 물고기로 보인 이유 셋
물고기를 넣었더니 돌고래가 그냥 흰 물고기였습니다. 지느러미가 두께 0이었고, 몸통 만드는 방식이 주둥이 있는 형태를 못 만들었고, 광택이 너무 세서 무늬를 통째로 지우고 있었습니다. 물고기가 오직 물을 통해서만 보인다는 사실이 나머지 설계를 거의 다 정했습니다.
- FFT 바다 안내서 — 슬라이더 하나가 무엇을 바꾸는지
브라우저에서 바다를 띄우고 풍속을 올려 보면 파고가 따라 올라갑니다. 그게 눈속임이 아니라 공식이라는 걸 확인하는 방법과, 화면에 있는 것들이 각각 무슨 뜻인지 정리했습니다.
- 유료 데모의 소스를 뜯는 대신 논문을 읽고 바다를 다시 만들었다
잘 만든 바다 데모를 보고 "이거 어떻게 했지"가 아니라 "이건 무슨 기법이지"에서 시작했습니다. FFT 파랑과 JONSWAP 스펙트럼, 3단 캐스케이드로 처음부터 구현했고, 파고가 물리 공식과 맞는지 픽셀을 읽어 검증했습니다.
현재 상태
실험 공개
- 개발 시작2026년 7월
- 마지막 작업2026.08.19
사용 안내
- WebGL2와 EXT_color_buffer_float가 필요합니다. 데스크톱 브라우저를 권합니다
- 1 궤도 · 2 자유비행 · 3 승선. 승선 중에는 WASD로 조타하고 R로 배를 되돌립니다
- 선체 모델이 11MB라 첫 로딩이 큽니다. 한 번 받으면 브라우저가 캐시합니다
- GPU를 제법 씁니다. 느리면 우측 패널에서 품질을 낮추세요
- 선체 모델은 gogiart의 SS Minnow III(CC BY 4.0)이고 앱 패널에 표기됩니다
바로가기
써 보셨나요?
좋았던 점, 불편했던 점, 버그, 바라는 기능을 남겨 주세요. 읽어 본 뒤 공개하고, 고치는 데 씁니다.