WebGL Water (2011)

http://madebyevan.com/webgl-water/

by joubert • 9 years ago

91 31 9 years ago

madebyevan.com

tehsauce2• 9 years ago

His webgl pathtracer is very cool also! http://madebyevan.com/webgl-path-tracing/

worldsayshi• 9 years ago

Wow that's really close to "perfect" real time performance.

floatboth• 9 years ago

hmm, the pathtracer doesn't work in Firefox Nightly on Windows (only wireframe select boxes are visible, the traced image is all black). However it does work in Servo!

And the water works very well in all browsers except Servo.

hyperpallium3• 9 years ago

Why aren't there floating-point textures on mobile GPUs? (To me) it seems a pretty straightforward addition, and many more GPGPU tasks become easier.

Sure, you can en/decode yourself, but faster in silicon.

Sure, there's openCL, but it's more fiddly, gives worse performance, and no-one uses it.

chrisseaton• 9 years ago

(To me) it seems a pretty straightforward addition

Maybe it has some significant cost in power consumption. Perhaps adding it to the silicon reduces power efficiency even when it isn't being used.

mechanical_berk3• 9 years ago

ES3 requires floating-point texture support, so any mobile GPU which supports that will support floating-point textures. The extension may not be exposed in ES2 of course.

Note that:

- 32-bit float texture filtering is not required to be supported, as it may cost significant area.

- Floating-point framebuffer support is not required, due to patent issues... :S

hyperpallium3• 9 years ago

So patents are what prevents render to float texture on mobile?

DiThi2• 9 years ago

Do you have more info on the patent issue?

ge96• 9 years ago

Just wanted to point out not working on Chromebook

Uncaught Error: This demo requires the OES_texture_float extension

I've seen this before though on Reddit, pretty cool how well it works on Mobile.

Also I realize OP may not be related to the post/created it and I should file a bug or whatever, I'm just posting it here.

rasz• 9 years ago

Judging by how it runs on the desktop(4 year old gpu) and YT clip it was developed on anemic laptop and never speed tested, reminds me of Wing Commander or Test Drive 3. Learn from the past and dont link main loop speed to framefate.

jlg23• 9 years ago

I think for a demo that is perfectly fine since you get an immediate performance indicator.

I remember that the initial fbdev-on-linux folks showcased their drivers with well known animations[1] at 4-digit frame rates and never had to answer performance questions again.

[1] IIRC something like glxgears and some 3d-tubes screensaver - might have that wrong though, that was about 17 years ago.

lloeki• 9 years ago

Indeed, and with surprising results. I remember running this on a laptop (HD4000 or something) some years ago on which it ran like crap, and it took a dedicated Radeon card (6870 IIRC) to have it smooth. Today it runs what appears to be a solid vsync'd 60fps on my iPhone 6s.

fulafel• 9 years ago

This is from 2011 or so.

diimdeep• 9 years ago

Mind blown when first saw this somewhere in 2011

mkilling• 9 years ago

Are there any more modern real-time water effects out there/being researched? This basic effect has been around for a while now.

SXX2• 9 years ago

As far as I aware best available for real-time is NVIDIA FleX:

https://www.youtube.com/watch?v=pfonMfP__Ks

In open source field there is Mantaflow that available in Blender, but it's of course not solution for real-time.

dharma1• 9 years ago

yes, this is pretty cool.

https://www.youtube.com/watch?v=55rsJI11FOA

http://physicsforests.com/

tyingq• 9 years ago

Not much newer, but I like the in-depth slides that cover how it was done:

The effect: https://29a.ch/sandbox/2012/terrain/

The slides that explain: https://29a.ch/slides/2012/webglwater/

tehsauce2• 9 years ago

Look at david.li webgl demos

tomxor• 9 years ago

SPH is better and i've seen some webgl ones out there.

SXX2• 9 years ago

Anyone who want to check one of the best WebGL demos should try this:

http://codeflow.org/webgl/craftscape/

FraKtus• 9 years ago

Nice!

acomjean• 9 years ago

hint: you can click on the water

asadlionpk• 9 years ago

This was amazing when I first saw it. More so because I was working on an SPH implementation:

http://jsexperiments.herokuapp.com/sph/

source: https://github.com/asadm/SPHjs

polpo• 9 years ago

Cool tech demos like this one can have unforeseen uses: On an episode of the podcast Reply All [1], a "trip sitter" would use this site to help calm people down who were on bad trips, and it was pretty effective.

[1] https://gimletmedia.com/episode/44-shine-on-you-crazy-goldma...

cryodesign• 9 years ago

First time I saw this it was awesome - still is - real-time water effects in the browser.

Didn't know Evan is co-founder of figma.com - maybe that's why the app feels quite snappy in the browser.

dfield• 9 years ago

Yep, Evan is my cofounder! We started talking about building collaborative creative tools using WebGL shortly after he built this demo in an afternoon during summer 2011.

Shameless plug: if anyone is interested in working with us on Figma, we're hiring. https://www.figma.com/careers#jobs

WebGL Water (2011)

Related Stories