6 ms·
WebGL Water (2010)
- earth2mars 1y agoIf you are on Android try Kiwi browser to see this
- vgb2k18 1y agoWhat does Kiwi do different? The water appears to work well on Brave.
- notarealllama 1y ago5 year old low end Motorola Android with Firefox and ublock. Smooth as a baby's bottom. Genuinely surprised!
- satvikpendem 1y agoKiwi is deprecated by the way, use Firefox or just use Chrome which is what Kiwi was anyway.
- chris_pie 1y agoSome features of Kiwi were merged to Edge, which means it now supports extensions (any extension if using developer options in Canary)
- 90s_dev 1y agoOn 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 1y agoWebgl2fundamentals is pretty great :)
- kaesve 1y agoI like https://thebookofshaders.com/ 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 1y agoI second this! Shame it’s still not finished though. I did this tutorial like 5 years ago
- deleted 1y ago[deleted]
- akomtu 1y agoshadertoy.com
- 90s_dev 1y agohttps://www.shadertoy.com/view/XXyGzh 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 1y agoIt’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 1y ago
- deleted 1y ago[deleted]
- Exuma 1y agoThis is my most voted submission. This thing literally never gets old
- Exuma 1y agoHere 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 1y agoOr 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 1y agoDemoscene never gets old, but why we get then so little submissions of it here? Demoscene reifies the creative-hacking culture, is it not?
- a1371 1y agoBe the change you want to see
- asadm 1y agoWasnt this one of the demo that Figma co-founder used make a case for web-based editor?
- ketzo 1y agoSaw the “made by Evan Wallace” and went “huh, that sounds familiar…” Yeah, not surprising this guy went on to build Figma! Super cool
- pentagrama 1y agoHe 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-e10a0ec31929 https://medium.com/figma-design/rust-in-production-at-figma-... [2] https://medium.com/figma-design/webassembly-cut-figmas-load-time-by-3x-76f3f2395164 https://medium.com/figma-design/webassembly-cut-figmas-load-...
- satvikpendem 1y agoAs well as esbuild. I wonder what he's doing these days since he stepped out of Figma.
- artifact_44 1y ago[dead]
- timschmidt 1y agoMy Rust CAD library is based on his CSG.js: https://github.com/timschmidt/csgrs https://github.com/timschmidt/csgrs
- Retr0id 1y agoThis has always been my "is webgl working?" test page
- Retr0id 1y agoBy the way, I think it's (2011) not (2010)
- notarealllama 1y agoStill. My god.
- ByteAtATime 1y agoBack 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 1y agoHere I am running just fine on a 3 year old phone
- throw310822 1y agoIt's running fine (not too smoothly but ok) on my 8 years old Xiaomi MI6.
- moffkalast 1y agoMy old phone is running it at exactly Uncaught Error: This demo requires the OES_texture_float extension fps
- chris_pie 1y agoSame on a not-old Pixel 8
- throw310822 1y agoWorks well for me even on a 50€ (fifty euro!) chinese tablet I bought a few weeks ago.
- corysama 1y agoEveryone 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 https://youtu.be/JDvPIhCd8N4
- TXCSwe 1y ago
- dustbunny 1y agoIs this open source?
- dothack 1y agohttps://github.com/evanw/webgl-water https://github.com/evanw/webgl-water
- gitroom 1y agoPretty 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 1y agoI 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_ 1y agoYou 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_float#browser_compatibility https://developer.mozilla.org/en-US/docs/Web/API/OES_texture...
- fbrchps 1y agoI'm also getting the error on Android, latest Chrome.
- moffkalast 1y agoLatest Firefox on Android does seem to work, oddly enough. How the turntables...
- bobajeff 1y agoNope. Using Chrome 136.0.7103.87 on Android.
- JonoW 1y agoGetting this error on a brand new Pixel 9 Pro, latest Chrome. Odd
- Maken 1y agoInstall Firefox. Not joking.
- ricardobeat 1y agoWhen 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 1y agoWhen you move the ball up, but keep it still under water, you'll see the water level rise. Why?
- tomcam 1y agoTo encourage you to file a PR
- NetOpWibby 1y agoThis is incredible. My goodness.
- haidirul 1y ago[flagged]
- pjmlp 1y agoAfter all these years, Android Chrome still doesn't support the extensions required by this demo, this is the issue with Web 3D adoption.
- throw310822 1y agoWorks fine for me.
- pjmlp 1y agoActually, 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 1y agoSame 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;
- rbower 1y ago[dead]
- Traubenfuchs 1y ago…so how does water look like in 2025 on WebGPU?
- fulafel 1y agoThis 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.
- chrisjj 1y 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.
- deleted 1y ago[deleted]
- A_Stefan 1y agoThis example never ceases to amaze
- andrewrn 1y agoVery cool! Something I noticed is that you can’t make perturbations on the surface of the water by rapidly moving the ball beneath the water. Don’t have time to dig into the sim to know why, but that is a monitor flaw. Later edit: ah, looks like rendering was the focus not sim, per the maker’s website.