Open Sea — 실시간 WebGPU 바다
Three.js TSL로 렌더링한 실시간 WebGPU 바다입니다. Gerstner 너울, FBM 미세 표면 디테일, 스펙트럼 하늘, 해상 상태 및 시간 제어, 손을 대지 않아도 되는 드리프트 모드를 갖췄습니다. 이 사례는 Kimi K3로 생성되었습니다.
Loading preview...
149725 views
WebGPU와 Three.js TSL로 'Open Sea'라는 독립형 실시간 바다 데모를 만드세요. FBM 미세 표면 노멀을 적용한 Gerstner 파도 너울과 시간에 따라 변화하는 스펙트럼 하늘을 렌더링하세요. 드래그로 카메라를 공전시키고 스크롤로 확대·축소하는 제어 기능, 해상 상태 및 시간 슬라이더와 실시간 FPS 표시를 갖춘 HUD 패널, 카메라가 스스로 미끄러지듯 이동하는 드리프트 모드를 지원하세요. 빌드 과정 없이 모든 것을 하나의 정적 페이지에 구현하고, 렌더러가 시작되는 동안 세련된 초기화 상태를 표시하며, WebGPU를 사용할 수 없을 때도 자연스럽게 성능을 낮춰 작동하도록 하세요.
WebGPU와 Three.js TSL로 'Open Sea — Night Storm'이라는 독립형 실시간 바다 데모를 만드세요. FBM 미세 표면 노멀을 적용한 Gerstner 파도 너울과 시간에 따라 변화하는 스펙트럼 하늘을 렌더링하세요. 드래그로 카메라를 공전시키고 스크롤로 확대·축소하는 제어 기능, 폭풍 강도 및 파도 높이 슬라이더와 실시간 FPS 표시를 갖춘 HUD 패널, 카메라가 스스로 미끄러지듯 이동하는 드리프트 모드를 지원하세요. 빌드 과정 없이 모든 것을 하나의 정적 페이지에 구현하고, 렌더러가 시작되는 동안 세련된 초기화 상태를 표시하며, WebGPU를 사용할 수 없을 때도 자연스럽게 성능을 낮춰 작동하도록 하세요.
WebGPU와 Three.js TSL로 'Open Sea'라는 독립형 실시간 바다 데모를 만드세요. FBM 미세 표면 노멀을 적용한 Gerstner 파도 너울과 시간에 따라 변화하는 스펙트럼 하늘을 렌더링하세요. 간단한 부력으로 너울 위에 떠 있는 로우 폴리 범선을 추가하고, 카메라는 범선을 따라가거나 자유롭게 공전할 수 있게 하면서 보는 사람이 WASD로 범선을 조종할 수 있게 하세요. 드래그로 카메라를 공전시키고 스크롤로 확대·축소하는 제어 기능, 해상 상태 및 시간 슬라이더와 실시간 FPS 표시를 갖춘 HUD 패널, 카메라가 스스로 미끄러지듯 이동하는 드리프트 모드를 지원하세요. 빌드 과정 없이 모든 것을 하나의 정적 페이지에 구현하고, 렌더러가 시작되는 동안 세련된 초기화 상태를 표시하며, WebGPU를 사용할 수 없을 때도 자연스럽게 성능을 낮춰 작동하도록 하세요.
WebGL2 대체 버전 제공하기
처음부터 WebGPU 지원 여부를 감지하고 더 가벼운 WebGL2 버전을 제공하여 모든 최신 브라우저에서 데모가 작동하게 하세요.
Websites Agent 사용해 보기시작 시 WebGPU 지원 여부를 감지하고 WebGPU를 사용할 수 없을 때 더 가벼운 WebGL2 렌더러로 대체하되, 두 경로에서 동일한 장면과 제어 기능을 유지하는 'Open Sea' 독립형 실시간 바다 데모를 만드세요. FBM 미세 표면 노멀을 적용한 Gerstner 파도 너울과 시간에 따라 변화하는 스펙트럼 하늘을 렌더링하세요. 드래그로 카메라를 공전시키고 스크롤로 확대·축소하는 제어 기능, 해상 상태 및 시간 슬라이더와 실시간 FPS 표시를 갖춘 HUD 패널, 카메라가 스스로 미끄러지듯 이동하는 드리프트 모드를 지원하세요. 빌드 과정 없이 모든 것을 하나의 정적 페이지에 구현하고, 렌더러가 시작되는 동안 세련된 초기화 상태를 표시하며, 모바일 레이아웃에서는 터치 공전 기능과 함께 HUD가 하단 시트로 접히도록 하세요.
다음도 마음에 드실 수 있습니다