Noniv/web-ocean

选用指南

AI 根据 README 整理 · 2026/10/17 11:46:12

使用方式

可直接在浏览器中打开ocean.html或ocean.min.html运行，也可通过npm install和npm start从源码启动。

查看 README 依据

You need a recent Chrome with WebGPU and a reasonably capable GPU. On a laptop, force Chrome onto the dedicated GPU in the Windows graphics settings, or it will fall back to the integrated one. Open `ocean.html` directly in the browser. `ocean.min.html` is the same page minified (61 KB instead of 102 KB). Both are self-contained and work from `file://`. To run from source: ``` npm install npm start # serves http://localhost:8080/ ```

部署要求

需要支持WebGPU的Chrome浏览器和性能足够的GPU，在笔记本电脑上需强制使用独立显卡。

查看 README 依据

You need a recent Chrome with WebGPU and a reasonably capable GPU. On a laptop, force Chrome onto the dedicated GPU in the Windows graphics settings, or it will fall back to the integrated one. Open `ocean.html` directly in the browser. `ocean.min.html` is the same page minified (61 KB instead of 102 KB). Both are self-contained and work from `file://`. To run from source: ``` npm install npm start # serves http://localhost:8080/ ```

已知限制

场景仅限开阔海洋，无海岸线、冲浪或水中物体；云层为两层平面而非体积云；远水比明亮地平线天空略暗。

查看 README 依据

At 2560 by 1440 on an RTX 5070 Ti, the GPU takes about 6 to 8 ms per frame, measured while other programs were also using the GPU. The HUD shows FPS and GPU time when the browser supports `timestamp-query`. The per-frame code reuses preallocated typed arrays and descriptors, so the garbage collector has almost nothing to do. The only recurring allocations are the objects WebGPU itself requires, such as the swap-chain view and command buffers. ## Known limitations - Far water is still somewhat darker than the bright horizon sky above it.

- The water is tuned toward turbid coastal water. The "Water turbidity" slider gives darker, bluer deep water when turned down. - The scene is open ocean only. There is no shoreline, surf, or objects in the water. - Clouds are two flat layers, not volumetric. ## How it was made