[HN Gopher] WebGL Water (2010)
___________________________________________________________________
WebGL Water (2010)
Author : gaws
Score : 202 points
Date : 2025-05-10 00:13 UTC (22 hours ago)
(HTM) web link (madebyevan.com)
(TXT) w3m dump (madebyevan.com)
| 90s_dev wrote:
| 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.
| felipellrocha wrote:
| Webgl2fundamentals is pretty great :)
| kaesve wrote:
| 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 wrote:
| I second this! Shame it's still not finished though. I did
| this tutorial like 5 years ago
| akomtu wrote:
| shadertoy.com
| 90s_dev wrote:
| 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!
| dahart wrote:
| 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.
| vhcr wrote:
| The "problem" with it is that you only learn about fragment
| shaders, you should also learn about the WebGL API, and
| vertex shaders.
| dahart wrote:
| 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/.
| Exuma wrote:
| This is my most voted submission. This thing literally never gets
| old
| Exuma wrote:
| 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 wrote:
| 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.
| larodi wrote:
| 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 wrote:
| Be the change you want to see
| asadm wrote:
| Wasnt this one of the demo that Figma co-founder used make a case
| for web-based editor?
| ketzo wrote:
| 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 wrote:
| 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 wrote:
| As well as esbuild. I wonder what he's doing these days since
| he stepped out of Figma.
| timschmidt wrote:
| My Rust CAD library is based on his CSG.js:
| https://github.com/timschmidt/csgrs
| Retr0id wrote:
| This has always been my "is webgl working?" test page
| Retr0id wrote:
| By the way, I think it's (2011) not (2010)
| notarealllama wrote:
| Still. My god.
| ByteAtATime wrote:
| 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 wrote:
| Here I am running just fine on a 3 year old phone
| throw310822 wrote:
| It's running fine (not too smoothly but ok) on my 8 years old
| Xiaomi MI6.
| moffkalast wrote:
| My old phone is running it at exactly Uncaught Error: This
| demo requires the OES_texture_float extension fps
| chris_pie wrote:
| Same on a not-old Pixel 8
| corysama wrote:
| 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
| ashoeafoot wrote:
| The in suit battery driven hamdwarmer he invented it!
| qoez wrote:
| I remember this running well on a low end macbook pro back
| then.
| dustbunny wrote:
| Is this open source?
| dothack wrote:
| https://github.com/evanw/webgl-water
| earth2mars wrote:
| If you are on Android try Kiwi browser to see this
| vgb2k18 wrote:
| What does Kiwi do different? The water appears to work well on
| Brave.
| notarealllama wrote:
| 5 year old low end Motorola Android with Firefox and ublock.
| Smooth as a baby's bottom. Genuinely surprised!
| satvikpendem wrote:
| Kiwi is deprecated by the way, use Firefox or just use Chrome
| which is what Kiwi was anyway.
| chris_pie wrote:
| Some features of Kiwi were merged to Edge, which means it now
| supports extensions (any extension if using developer options
| in Canary)
| gitroom wrote:
| 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.
| bobajeff wrote:
| 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_ wrote:
| 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 wrote:
| I'm also getting the error on Android, latest Chrome.
| moffkalast wrote:
| Latest Firefox on Android does seem to work, oddly enough.
| How the turntables...
| bobajeff wrote:
| Nope. Using Chrome 136.0.7103.87 on Android.
| JonoW wrote:
| Getting this error on a brand new Pixel 9 Pro, latest Chrome.
| Odd
| Maken wrote:
| Install Firefox. Not joking.
| ricardobeat wrote:
| When this was made in 2010 mobile phones had no WebGL
| support at all.
|
| Ironically Chrome was also the only browser that supported
| it without beta flags, looks like their mobile version
| never caught up.
| landgenoot wrote:
| When you move the ball up, but keep it still under water, you'll
| see the water level rise.
|
| Why?
| tomcam wrote:
| To encourage you to file a PR
| NetOpWibby wrote:
| This is incredible. My goodness.
| pjmlp wrote:
| After all these years, Android Chrome still doesn't support the
| extensions required by this demo, this is the issue with Web 3D
| adoption.
| throw310822 wrote:
| Works fine for me.
| pjmlp wrote:
| 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.
| ankit_mishra wrote:
| 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;
| Traubenfuchs wrote:
| ...so how does water look like in 2025 on WebGPU?
| fulafel wrote:
| 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 wrote:
| I see three such comments, all posted before you posted. Oh
| well. I'd hoped you were right about this.
| fulafel wrote:
| Ah, I didn't reload before writing the comment. Oh well.
| chrisjj wrote:
| "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.
| A_Stefan wrote:
| This example never ceases to amaze
___________________________________________________________________
(page generated 2025-05-10 23:01 UTC)