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.
qoez [3 hidden]5 mins ago
I remember this running well on a low end macbook pro back then.
ghkbrew [3 hidden]5 mins ago
Here I am running just fine on a 3 year old phone
corysama [3 hidden]5 mins ago
Everyone forgets what machines are capable of if you actually optimize. This game did everything shown here in real time on phones 14 years ago https://youtu.be/JDvPIhCd8N4
throw310822 [3 hidden]5 mins ago
It's running fine (not too smoothly but ok) on my 8 years old Xiaomi MI6.
moffkalast [3 hidden]5 mins ago
My old phone is running it at exactly Uncaught Error: This demo requires the OES_texture_float extension fps
ashoeafoot [3 hidden]5 mins ago
The in suit battery driven hamdwarmer he invented it!
chrisjj [3 hidden]5 mins ago
"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.
Exuma [3 hidden]5 mins ago
This is my most voted submission. This thing literally never gets old
larodi [3 hidden]5 mins 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?
a1371 [3 hidden]5 mins ago
Be the change you want to see
Exuma [3 hidden]5 mins 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 [3 hidden]5 mins 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.
fulafel [3 hidden]5 mins 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.
kelnos [3 hidden]5 mins ago
I see three such comments, all posted before you posted. Oh well. I'd hoped you were right about this.
fulafel [3 hidden]5 mins ago
Ah, I didn't reload before writing the comment. Oh well.
asadm [3 hidden]5 mins ago
Wasnt this one of the demo that Figma co-founder used make a case for web-based editor?
90s_dev [3 hidden]5 mins 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 [3 hidden]5 mins 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 [3 hidden]5 mins ago
I second this! Shame it’s still not finished though. I did this tutorial like 5 years ago
felipellrocha [3 hidden]5 mins ago
Webgl2fundamentals is pretty great :)
akomtu [3 hidden]5 mins ago
shadertoy.com
vhcr [3 hidden]5 mins ago
The "problem" with it is that you only learn about fragment shaders, you should also learn about the WebGL API, and vertex shaders.
dahart [3 hidden]5 mins ago
Not having to learn the API & vertex shaders is definitely a feature of ShaderToy, not a problem. :P The extremely low barrier to entry to writing shaders is one of it’s best qualities. Anyway, the question asked about 2d effects, so they maybe don’t need vertex shaders, and they can of course learn the small amount of WebGL API needed somewhere else like https://webgl2fundamentals.org/.
I can't wait to dig in and figure out how to add effects like this over my 2d content!
dahart [3 hidden]5 mins ago
It’s super easy. ShaderToy draws a rectangle on the screen and runs the given shader on it. There’s a small amount of plumbing to wire in a few variables like time & mouse position, and your texture coordinates. The rendering part of ShaderToy is simple enough that you can make your own clone in a day. The rest of the site is the hard part, the editor, the API & saving shaders in the cloud, getting lots of people to write awesome shaders, etc., but the rendering part is near trivial.
bobajeff [3 hidden]5 mins 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'
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.
NetOpWibby [3 hidden]5 mins ago
This is incredible. My goodness.
pjmlp [3 hidden]5 mins 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 [3 hidden]5 mins 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 [3 hidden]5 mins ago
Works fine for me.
pjmlp [3 hidden]5 mins 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.
Traubenfuchs [3 hidden]5 mins ago
…so how does water look like in 2025 on WebGPU?
earth2mars [3 hidden]5 mins ago
If you are on Android try Kiwi browser to see this
vgb2k18 [3 hidden]5 mins ago
What does Kiwi do different? The water appears to work well on Brave.
notarealllama [3 hidden]5 mins ago
5 year old low end Motorola Android with Firefox and ublock. Smooth as a baby's bottom. Genuinely surprised!
satvikpendem [3 hidden]5 mins ago
Kiwi is deprecated by the way, use Firefox or just use Chrome which is what Kiwi was anyway.
HN.zip
Yeah, not surprising this guy went on to build Figma! Super cool
[1] https://medium.com/figma-design/rust-in-production-at-figma-...
[2] https://medium.com/figma-design/webassembly-cut-figmas-load-...
Now, my phone's integrated graphics can run it very smoothly. Moore's law at play.
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.
Makes you wonder how long it takes that WebGPU reaches the same status.
... this is amazing!
I can't wait to dig in and figure out how to add effects like this over my 2d content!
'Uncaught Error: This demo requires the OES_texture_float extension'
Ironically Chrome was also the only browser that supported it without beta flags, looks like their mobile version never caught up.
Why?
Using - Chrome 136.0.7103.87 Android 15;