react
Featured
react
React is a JavaScript library for building user interfaces with declarative, component-based, and cross-platform design.
AI repository intelligence
FR-AI / ANALYSISWhy it is worth attention
It showcases a faithful reproduction of real-time water simulation and caustics in modern rendering APIs, with all shaders written in both GLSL and WGSL without runtime transpilation, addressing WebGPU constraints like explicit-LOD sampling and double-buffered caustics.
Who it is for
- Graphics programmers interested in WebGPU/WebGL2 water rendering
- PlayCanvas developers seeking high-quality demo or reference implementation
- Students and educators studying real-time water simulation or caustics techniques
- Github users exploring porting legacy graphical demos to modern APIs
Use cases
- Learning how to implement heightfield water simulation with caustics on WebGPU
- Prototyping interactive water effects for games or visual applications
- Comparing WebGPU vs WebGL2 performance and shader authoring approaches
- Demonstrating explicit-LOD sampling and double-buffering patterns for WebGPU compliance
Strengths
- All shaders are ported verbatim in both GLSL and WGSL, eliminating runtime transpilation dependencies
- Supports both WebGPU (preferred) and WebGL 2, with explicit fallback handling
- Faithfully reproduces original demo's physics, caustics, raytraced reflections, and interactive drag control
- Handles WebGPU-specific constraints like explicit-LOD sampling and double-buffered render targets for caustics
Considerations
- Single demo application—not packaged as a reusable library or component
- Requires the PlayCanvas engine as a dependency, limiting portability to other frameworks
- Performance characteristics not documented; may require tuning for different hardware or screen sizes
README quick start
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
Description
Evan Wallace's WebGL Water demo ported to the PlayCanvas Engine, running on WebGPU (native WGSL) and WebGL 2.
Related repositories
Similar projects matched by category, topics, and programming language.
tandpfun
Featured
wardrobe
A GPT‑image powered app that extracts individual garment cutouts from photos, organizes them into a digital wardrobe, and generates modeled outfit previews.
mshumer
Featured
Claude-of-Duty
A browser-based first-person shooter built entirely with procedural generation and orchestrated AI agents, featuring 55k lines of Three.js/WebGL2 code and no art assets.