WebGL Water (2010)

142 gaws 46 5/10/2025, 12:13:38 AM madebyevan.com ↗

Comments (46)

fulafel · 8m ago
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.

ketzo · 8h 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 · 6h 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 · 5h ago
As well as esbuild. I wonder what he's doing these days since he stepped out of Figma.
timschmidt · 1h ago
My Rust CAD library is based on his CSG.js: https://github.com/timschmidt/csgrs
ByteAtATime · 7h 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 · 7h ago
Here I am running just fine on a 3 year old phone
throw310822 · 2h ago
It's running fine (not too smoothly but ok) on my 8 years old Xiaomi MI6.
moffkalast · 1h ago
My old phone is running it at exactly Uncaught Error: This demo requires the OES_texture_float extension fps
ashoeafoot · 1h ago
The in suit battery driven hamdwarmer he invented it!
Exuma · 8h ago
This is my most voted submission. This thing literally never gets old
larodi · 2h ago
Demoscene never gets old, but why we get then so little submissions of it here? Demoscene reifies the creative-hacking culture, is it not?
Exuma · 8h 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 · 7h 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.
landgenoot · 4h ago
When you move the ball up, but keep it still under water, you'll see the water level rise.

Why?

tomcam · 3h ago
To encourage you to file a PR
90s_dev · 8h 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 · 7h 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
jonplackett · 49m ago
I second this! Shame it’s still not finished though. I did this tutorial like 5 years ago
felipellrocha · 8h ago
Webgl2fundamentals is pretty great :)
akomtu · 7h ago
shadertoy.com
vhcr · 6h 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 · 7h 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!

Retr0id · 7h ago
This has always been my "is webgl working?" test page
Retr0id · 7h ago
By the way, I think it's (2011) not (2010)
notarealllama · 5h ago
Still. My god.
NetOpWibby · 3h ago
This is incredible. My goodness.
asadm · 8h ago
Wasnt this one of the demo that Figma co-founder used make a case for web-based editor?
gitroom · 5h 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.
Traubenfuchs · 58m ago
…so how does water look like in 2025 on WebGPU?
dustbunny · 6h ago
Is this open source?
dothack · 6h ago
pjmlp · 2h ago
After all these years, Android Chrome still doesn't support the extensions required by this demo, this is the issue with Web 3D adoption.
ankit_mishra · 2h ago
Same for me on. Getting this error - Uncaught Error: This demo requires the OES_texture_float extension WebGL Water

Using - Chrome 136.0.7103.87 Android 15;

throw310822 · 2h ago
Works fine for me.
pjmlp · 2h ago
Actually, I just cross-checked on WebGL Report, and it does indeed support the extension, not that changes having a black page complaining the extension is missing.
bobajeff · 4h 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_ · 4h 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 · 4h ago
I'm also getting the error on Android, latest Chrome.
moffkalast · 1h ago
Latest Firefox on Android does seem to work, oddly enough. How the turntables...
bobajeff · 3h ago
Nope. Using Chrome 136.0.7103.87 on Android.
earth2mars · 5h ago
If you are on Android try Kiwi browser to see this
vgb2k18 · 5h ago
What does Kiwi do different? The water appears to work well on Brave.
notarealllama · 5h ago
5 year old low end Motorola Android with Firefox and ublock. Smooth as a baby's bottom. Genuinely surprised!
satvikpendem · 5h ago
Kiwi is deprecated by the way, use Firefox or just use Chrome which is what Kiwi was anyway.
haidirul · 2h ago
alikhaidir767@gmail.com