为什么值得关注

它忠实再现了实时水模拟和焦散效果，所有着色器同时提供 GLSL 和 WGSL 两种版本，无需运行时转译，并妥善处理了 WebGPU 的限制（如显式 LOD 采样和双缓冲焦散图）。

适合谁使用

对 WebGPU/WebGL2 水渲染感兴趣的图形程序员
寻找高质量演示或参考实现的 PlayCanvas 开发者
学习实时水模拟或焦散技术的学生和教育工作者
探索将经典图形演示移植到现代 API 的 GitHub 用户

典型使用场景

学习如何在 WebGPU 上实现高度场水模拟与焦散效果
为游戏或可视化应用原型设计交互式水效果
比较 WebGPU 与 WebGL 2 的性能和着色器编写方式
演示 WebGPU 合规所需的显式 LOD 采样和双缓冲模式

项目优势

所有着色器均以 GLSL 和 WGSL 逐字移植，无需运行时转译依赖
同时支持 WebGPU（推荐）和 WebGL 2，并提供显式降级处理
忠实复现原始演示的物理、焦散、光线追踪反射和交互拖拽控制
处理了 WebGPU 特有的限制，如显式 LOD 采样和为焦散图使用双缓冲渲染目标

使用前须知

单个演示应用，未打包为可复用的库或组件
依赖 PlayCanvas 引擎，限制了向其他框架的可移植性
未记录性能表现，可能需要针对不同硬件或屏幕尺寸进行调整

README 快速开始

WebGPU Water — A PlayCanvas port of WebGL Water

A port of Evan Wallace's WebGL Water (2011) to the PlayCanvas Engine. It reproduces the original demo's rendering and physics:

GPU heightfield water simulation (ping-pong float render targets)
Real-time caustics via the differential-area method
Raytraced reflection & refraction with a Fresnel blend and sky cubemap
A draggable sphere that displaces the water, with optional buoyancy physics
Analytic ambient occlusion and soft caustic shadows

Running

npm install
npm run dev      # start the Vite dev server
npm run build    # production build into dist/

Then open the printed local URL.

Controls

Draw on the water to make ripples
Drag the background to rotate the camera
Drag the sphere to move it around
SPACEBAR to pause / unpause
G to toggle gravity (sphere physics)
L (hold) to point the light along the camera direction

How it maps onto PlayCanvas

Original (`lightgl.js`)	This port
`GL.Texture` float RTs + `drawTo`	`pc.Texture` (RGBA32F/16F) + `pc.RenderTarget`, ping-pong swap
Full-screen sim passes	`pc.ShaderUtils.createShader` + `pc.drawQuadWithShader` in `update`
Caustics into a 1024² texture	dedicated camera + layer → double-buffered RTs (projected mesh)
`GL.Shader` / inline GLSL	`pc.ShaderMaterial` with custom GLSL and WGSL (no transpilation)
`GL.Mesh.plane/sphere/cube`	hand-built `pc.Mesh` matching the original vertex layouts
matrix stack + `GL.Raytracer`	orbit camera entity + `camera.screenToWorld` ray picking

The shaders are ported almost verbatim (see src/shaders/). The only changes are renaming engine-reserved identifiers and using PlayCanvas's built-in attribute/uniform names (aPosition, matrix_viewProjection). Both cameras run with GAMMA_NONE / TONEMAP_NONE so colors match the original's raw output.

WebGPU and WebGL 2

Runs on WebGPU (preferred) and falls back to WebGL 2. Every shader is written in both GLSL (`src/shaders/*.gls

项目描述

Evan Wallace's WebGL Water demo ported to the PlayCanvas Engine, running on WebGPU (native WGSL) and WebGL 2.

webgpu-water-playcanvas