WebGL Water (2010)

220•gaws•7mo ago

Comments

90s_dev•7mo 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.

felipellrocha•7mo ago

Webgl2fundamentals is pretty great :)

kaesve•7mo 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•7mo ago

I second this! Shame it’s still not finished though. I did this tutorial like 5 years ago

akomtu•7mo ago

shadertoy.com

90s_dev•7mo 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!

dahart•7mo 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.

vhcr•7mo 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•7mo 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/.

Exuma•7mo ago

This is my most voted submission. This thing literally never gets old

Exuma•7mo 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•7mo 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.

larodi•7mo 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•7mo ago

Be the change you want to see

asadm•7mo ago

Wasnt this one of the demo that Figma co-founder used make a case for web-based editor?

ketzo•7mo 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•7mo 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•7mo ago

As well as esbuild. I wonder what he's doing these days since he stepped out of Figma.

timschmidt•7mo ago

My Rust CAD library is based on his CSG.js: https://github.com/timschmidt/csgrs

Retr0id•7mo ago

This has always been my "is webgl working?" test page

Retr0id•7mo ago

By the way, I think it's (2011) not (2010)

notarealllama•7mo ago

Still. My god.

ByteAtATime•7mo 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•7mo ago

Here I am running just fine on a 3 year old phone

throw310822•7mo ago

It's running fine (not too smoothly but ok) on my 8 years old Xiaomi MI6.

moffkalast•7mo ago

My old phone is running it at exactly Uncaught Error: This demo requires the OES_texture_float extension fps

chris_pie•7mo ago

Same on a not-old Pixel 8

throw310822•7mo ago

Works well for me even on a 50€ (fifty euro!) chinese tablet I bought a few weeks ago.

corysama•7mo 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

TXCSwe•7mo ago

Have you heard of KKrieger? So yeah, if you optimize enough, machines can do quite cool stuff!

atiedebee•7mo ago

I think KKrieger required pretty beefy specs for the time. It's a different kind of optimization they were aiming for (code size Vs execution speed)

Although a friend of mine ran it on an integrated intel GPU recently and it performed great.

ashoeafoot•7mo ago

The in suit battery driven hamdwarmer he invented it!

qoez•7mo ago

I remember this running well on a low end macbook pro back then.

dustbunny•7mo ago

Is this open source?

dothack•7mo ago

https://github.com/evanw/webgl-water

earth2mars•7mo ago

If you are on Android try Kiwi browser to see this

vgb2k18•7mo ago

What does Kiwi do different? The water appears to work well on Brave.

notarealllama•7mo ago

5 year old low end Motorola Android with Firefox and ublock. Smooth as a baby's bottom. Genuinely surprised!

satvikpendem•7mo ago

Kiwi is deprecated by the way, use Firefox or just use Chrome which is what Kiwi was anyway.

chris_pie•7mo ago

Some features of Kiwi were merged to Edge, which means it now supports extensions (any extension if using developer options in Canary)

gitroom•7mo 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.

bobajeff•7mo 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_•7mo 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•7mo ago

I'm also getting the error on Android, latest Chrome.

moffkalast•7mo ago

Latest Firefox on Android does seem to work, oddly enough. How the turntables...

bobajeff•7mo ago

Nope. Using Chrome 136.0.7103.87 on Android.

JonoW•7mo ago

Getting this error on a brand new Pixel 9 Pro, latest Chrome. Odd

Maken•7mo ago

Install Firefox. Not joking.

ricardobeat•7mo ago

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•7mo ago

When you move the ball up, but keep it still under water, you'll see the water level rise.

Why?

tomcam•7mo ago

To encourage you to file a PR

NetOpWibby•7mo ago

This is incredible. My goodness.

pjmlp•7mo 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.

throw310822•7mo ago

Works fine for me.

pjmlp•7mo 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.

ankit_mishra•7mo 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;

Traubenfuchs•7mo ago

…so how does water look like in 2025 on WebGPU?

fulafel•7mo 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•7mo ago

I see three such comments, all posted before you posted. Oh well. I'd hoped you were right about this.

fulafel•7mo ago

Ah, I didn't reload before writing the comment. Oh well.

chrisjj•7mo 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.

A_Stefan•7mo ago

This example never ceases to amaze

andrewrn•7mo ago

Very 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.

Listen to Mixtapes from Before

My First Impressions of MeshCore Off-Grid Messaging

I built a tool to restore old family photos without ruining them with AI

Designing Electronics That Works

Most LLM cost isn't compute – it's identity drift (110-cycle GPT-4o benchmark)

Show HN: PlanEat AI, an AI iOS app for weekly meal plans and smart grocery lists

A Post-Incident Control Test for External AI Representation

اdifference gbps overview find answers

Measuring Impact of Early-2025 AI on Experienced Open-Source Dev Productivity

Show HN: Lazy Demos

AI-Driven Facial Recognition Leads to Innocent Man's Arrest (Bodycam Footage) [video]

Annual Production of 1/72 (22mm) scale plastic soldiers, 1958-2025

Error-Handling and Locality

Petition for David Sacks to Self-Deport

Get found where people search today

Show HN: An early-warning system for SaaS churn (not another dashboard)

Tell HN: Musk has never *tweeted* a guess for real identity of Satoshi Nakamoto

A Practical Approach to Verifying Code at Scale

Show HN: macOS tool to restore window layouts

30 Years of <Br> Tags

Kyoto

Decision Support System for Wind Farm Maintenance Using Robotic Agents

Show HN: X-AnyLabeling – An open-source multimodal annotation ecosystem for CV

Penpot Docker Extension

Company Thinks It Can Power AI Data Centers with Supersonic Jet Engines

If AIs can feel pain, what is our responsibility towards them?

Elon Musk's xAI Sues Apple and OpenAI over App Store Drama

Ask HN: Build it yourself SWE blogs?

Original Apollo 11 Guidance Computer source code

How Did the CIA Lose Nuclear Device?

Listen to Mixtapes from Before

My First Impressions of MeshCore Off-Grid Messaging

I built a tool to restore old family photos without ruining them with AI

Designing Electronics That Works

Most LLM cost isn't compute – it's identity drift (110-cycle GPT-4o benchmark)

Show HN: PlanEat AI, an AI iOS app for weekly meal plans and smart grocery lists

A Post-Incident Control Test for External AI Representation

اdifference gbps overview find answers

Measuring Impact of Early-2025 AI on Experienced Open-Source Dev Productivity

Show HN: Lazy Demos

AI-Driven Facial Recognition Leads to Innocent Man's Arrest (Bodycam Footage) [video]

Annual Production of 1/72 (22mm) scale plastic soldiers, 1958-2025

Error-Handling and Locality

Petition for David Sacks to Self-Deport

Get found where people search today

Show HN: An early-warning system for SaaS churn (not another dashboard)

Tell HN: Musk has never *tweeted* a guess for real identity of Satoshi Nakamoto

A Practical Approach to Verifying Code at Scale

Show HN: macOS tool to restore window layouts

30 Years of <Br> Tags

Kyoto

Decision Support System for Wind Farm Maintenance Using Robotic Agents

Show HN: X-AnyLabeling – An open-source multimodal annotation ecosystem for CV

Penpot Docker Extension

Company Thinks It Can Power AI Data Centers with Supersonic Jet Engines

If AIs can feel pain, what is our responsibility towards them?

Elon Musk's xAI Sues Apple and OpenAI over App Store Drama

Ask HN: Build it yourself SWE blogs?

Original Apollo 11 Guidance Computer source code

How Did the CIA Lose Nuclear Device?

WebGL Water (2010)

Comments

Tell HN: Musk has never tweeted a guess for real identity of Satoshi Nakamoto

Tell HN: Musk has never tweeted a guess for real identity of Satoshi Nakamoto