WebGL Water (2010)

106 gaws 32 5/10/2025, 12:13:38 AM madebyevan.com ↗

Comments (32)

ketzo · 4h ago
Saw the “made by Evan Wallace” and went “huh, that sounds familiar…”

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

pentagrama · 3h ago
He push and work on the implementation of Rust [1] and WebAssembly [2] to the tool.

[1] https://medium.com/figma-design/rust-in-production-at-figma-...

[2] https://medium.com/figma-design/webassembly-cut-figmas-load-...

satvikpendem · 2h ago
As well as esbuild. I wonder what he's doing these days since he stepped out of Figma.
NetOpWibby · 4m ago
This is incredible. My goodness.
ByteAtATime · 4h ago
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.

ghkbrew · 4h ago
Here I am running just fine on a 3 year old phone
landgenoot · 41m ago
When you move the ball up, but keep it still under water, you'll see the water level rise.

Why?

tomcam · 33m ago
To encourage you to file a PR
Exuma · 4h ago
This is my most voted submission. This thing literally never gets old
Exuma · 4h ago
Here is a trick: pause the simulation and drag the ripples back and forth really fast, it will create a "mega" wave. Then unpause and it will create a massive tsunami
quantadev · 4h ago
Or pause it and click the water surface 100 times to raise up a lot of potential energy that makes a very profound wave front when it comes down when you start it.
90s_dev · 4h ago
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.
kaesve · 4h ago
I like https://thebookofshaders.com/ . It’s unfinished and I don’t think it’s been updated in years, but what’s there is pretty good
felipellrocha · 4h ago
Webgl2fundamentals is pretty great :)
akomtu · 3h ago
shadertoy.com
vhcr · 3h ago
The "problem" with it is that you only learn about fragment shaders, you should also learn about the WebGL API, and vertex shaders.
90s_dev · 3h ago
https://www.shadertoy.com/view/XXyGzh

... this is amazing!

I can't wait to dig in and figure out how to add effects like this over my 2d content!

gitroom · 1h ago
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.
dustbunny · 2h ago
Is this open source?
dothack · 2h ago
asadm · 4h ago
Wasnt this one of the demo that Figma co-founder used make a case for web-based editor?
bobajeff · 1h ago
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'

_bin_ · 57m ago
You must be on a very old browser, a terminal browser, ladybird, something like that. PEBCAK. https://developer.mozilla.org/en-US/docs/Web/API/OES_texture...
fbrchps · 44m ago
I'm also getting the error on Android, latest Chrome.
bobajeff · 8m ago
Nope. Using Chrome 136.0.7103.87 on Android.
Retr0id · 4h ago
This has always been my "is webgl working?" test page
Retr0id · 3h ago
By the way, I think it's (2011) not (2010)
notarealllama · 2h ago
Still. My god.
earth2mars · 2h ago
If you are on Android try Kiwi browser to see this
vgb2k18 · 2h ago
What does Kiwi do different? The water appears to work well on Brave.
notarealllama · 2h ago
5 year old low end Motorola Android with Firefox and ublock. Smooth as a baby's bottom. Genuinely surprised!
satvikpendem · 2h ago
Kiwi is deprecated by the way, use Firefox or just use Chrome which is what Kiwi was anyway.