WebGL Water (2010)

134 gaws 43 5/10/2025, 12:13:38 AM madebyevan.com ↗

Comments (43)

ketzo · 6h 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 · 5h 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-...

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

Why?

tomcam · 2h ago
To encourage you to file a PR
90s_dev · 6h 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 · 6h 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 · 6h ago
Webgl2fundamentals is pretty great :)
akomtu · 5h ago
shadertoy.com
vhcr · 5h 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 · 5h 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 · 6h ago
This has always been my "is webgl working?" test page
Retr0id · 5h ago
By the way, I think it's (2011) not (2010)
notarealllama · 4h ago
Still. My god.
NetOpWibby · 2h ago
This is incredible. My goodness.
pjmlp · 1h 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 · 42m 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 · 1h ago
Works fine for me.
pjmlp · 1h 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.
gitroom · 3h 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.
asadm · 6h ago
Wasnt this one of the demo that Figma co-founder used make a case for web-based editor?
dustbunny · 5h ago
Is this open source?
dothack · 4h ago
bobajeff · 3h 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_ · 2h 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 · 2h ago
I'm also getting the error on Android, latest Chrome.
moffkalast · 12m ago
Latest Firefox on Android does seem to work, oddly enough. How the turntables...
bobajeff · 2h ago
Nope. Using Chrome 136.0.7103.87 on Android.
earth2mars · 4h ago
If you are on Android try Kiwi browser to see this
vgb2k18 · 4h ago
What does Kiwi do different? The water appears to work well on Brave.
notarealllama · 4h ago
5 year old low end Motorola Android with Firefox and ublock. Smooth as a baby's bottom. Genuinely surprised!
satvikpendem · 4h ago
Kiwi is deprecated by the way, use Firefox or just use Chrome which is what Kiwi was anyway.
haidirul · 1h ago
alikhaidir767@gmail.com