영상이 아니라 브라우저가 실시간으로 그린 바다, three.js Ultra-Water

아래 사진들은 영상이 아닙니다. 브라우저가 실시간으로 계산해서 그린 바다입니다. 10월 28일 공개된 Ultra-Water(three.js, WebGL2, MIT)를 받아서 빌드하고, 헤드리스 크롬으로 띄워 장면을 바꿔 가며 찍었습니다.

무엇을 계산하나

• FFT로 만든 먼바다 물결
• 해안에서 부서지는 파도와 거품
• 물 밑에 비치는 빛 무늬(코스틱)
• 물속으로 들어갔을 때의 화면

장면은 Lagoon, Golden hour, Breakers, Underwater, Aerial, Flotsam 등 여러 개이고 화면 속 설정 패널에서 고릅니다.

얼마나 빠른가

작가가 README에 올린 측정값입니다. RTX 3060, 크롬, 4× MSAA에 모든 기능을 켜고 1440p와 같은 픽셀 수(3.3MP)로 쟀습니다.

이 글의 사진은 그래픽 가속 없이 소프트웨어 렌더러로 찍어서 매우 느리게 그려졌습니다. 화면은 같지만 속도는 위 표와 다릅니다. 휴대폰과 태블릿은 해상도를 낮춘 가벼운 설정이 따로 있습니다.

돌려 보기

git clone https://github.com/Humpalumps/Ultra-Water
cd Ultra-Water
npm install
npm run dev

터미널에 나온 localhost 주소를 열면 Lagoon 장면부터 시작합니다. 마우스(폰은 손가락)로 시점을 돌릴 수 있습니다.

가져다 쓸 때

코드는 MIT 라이선스이고, 다른 프로젝트에서 가져온 코드는 저장소의 THIRD_PARTY_NOTICES.md에 따로 정리돼 있습니다. 웹 게임 배경이나 랜딩 페이지 첫 화면에 넣을 때는 그 고지도 함께 확인하세요.

오늘 할 일

저장소를 받아 npm run dev로 띄워 보세요. 그래픽카드가 있는 컴퓨터라면 설정 패널의 benchmark 버튼으로 내 컴퓨터 속도도 잴 수 있습니다.