from Hacker News

WebGL Water (2010)

by gaws on 5/10/25, 12:13 AM with 63 comments

• by ketzo on 5/10/25, 12:42 AM

  Saw the “made by Evan Wallace” and went “huh, that sounds familiar…”

  Yeah, not surprising this guy went on to build Figma! Super cool

• by ByteAtATime on 5/10/25, 1:07 AM

  Back in 2010, this "require[d] a decent graphics card"

  Now, my phone's integrated graphics can run it very smoothly. Moore's law at play.

• by Exuma on 5/10/25, 12:39 AM

  This is my most voted submission. This thing literally never gets old

• by 90s_dev on 5/10/25, 12:34 AM

  On this note, can anyone recommend basic webgl 2d effects tutorial? I have a super exciting project I'm really close to announcing, but the last step is adding some pretty Animal Well style effects via webgl2, but I know practically nothing about webgl except the very very basics that you learn from webgl2fundamentals.org. Any pointers would be appreciated.

• by chrisjj on 5/10/25, 1:17 PM

  "Uncaught Error: This demo requires the OES_texture_float extension WebGL Water Made by Evan Wallace

  This demo requires a decent graphics card and up-to-date drivers. If you can't run the demo, you can still see it on YouTube.

  Interactions: Draw on the water to make ripples Drag the background to rotate the camera Press SPACEBAR to pause and unpause Drag the sphere to move it around Press the L key to set the light direction Press the G key to toggle gravity Features: Raytraced reflections and refractions Analytic ambient occlusion Heightfield water simulation * Soft shadows Caustics (see this for details) * * requires the OES_texture_float extension * requires the OES_standard_derivatives extension" on Android Chrome.

• by asadm on 5/10/25, 12:41 AM

  Wasnt this one of the demo that Figma co-founder used make a case for web-based editor?

• by fulafel on 5/10/25, 8:33 AM

  This is probably the first time (not counting ignored times) it was been posted which doesn't have comments about breakage on some browser.

  Makes you wonder how long it takes that WebGPU reaches the same status.

• by Retr0id on 5/10/25, 12:48 AM

  This has always been my "is webgl working?" test page

• by pjmlp on 5/10/25, 6:08 AM

  After all these years, Android Chrome still doesn't support the extensions required by this demo, this is the issue with Web 3D adoption.

• by bobajeff on 5/10/25, 3:56 AM

  I guess I'm the only one for whom this doesn't work I get:

  'Uncaught Error: This demo requires the OES_texture_float extension'

• by andrewrn on 5/11/25, 3:57 PM

  Very cool!

  Something I noticed is that you can’t make perturbations on the surface of the water by rapidly moving the ball beneath the water.

  Don’t have time to dig into the sim to know why, but that is a monitor flaw.

  Later edit: ah, looks like rendering was the focus not sim, per the maker’s website.

• by landgenoot on 5/10/25, 4:40 AM

  When you move the ball up, but keep it still under water, you'll see the water level rise.

  Why?

• by dustbunny on 5/10/25, 2:22 AM

  Is this open source?

• by Traubenfuchs on 5/10/25, 7:44 AM

  …so how does water look like in 2025 on WebGPU?

• by NetOpWibby on 5/10/25, 5:17 AM

  This is incredible. My goodness.

• by A_Stefan on 5/10/25, 6:44 PM

  This example never ceases to amaze

• by earth2mars on 5/10/25, 2:43 AM

  If you are on Android try Kiwi browser to see this

• by gitroom on 5/10/25, 3:26 AM

  Pretty cool how a basic demo like this still feels fresh, even on my old phone. Always makes me want to mess with web tech more.