WebGL Water Simulation

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

by devongovett • 15 years ago

463 85 15 years ago

madebyevan.com

T_S_• 15 years ago

Very nice. I would like to see somebody do a cannonball now.

nmeyer• 15 years ago

You can get close by turning on gravity by pressing 'G', then dragging the ball into the air and dropping it.

Unfortunately can't get it to splash since it's just a height-field simulation.

rvanniekerk• 15 years ago

I have to say, the most impressive part about this is the fact that my macbook doesn't even rev up like a jet engine like it would if I was..say...watching a flash video.

Awesome.

makmanalp• 15 years ago

Oh, the joys of running a task that is suitable for a GPU ... on a GPU!

ch0wn• 15 years ago

Also, the demo uses requestAnimationFrame and thus rendering is paused if the tab is in the background.

acgourley• 15 years ago

runs at 1 FPS on my older gen MBP

nitrogen2• 15 years ago

Maybe you have a graphics driver that's been black listed, so you're falling back to software? Try Googling for steps to override the WebGL driver blacklist in Firefox and Chrome (probably a command-line flag, about:flags, or about:config setting).

conradev2• 15 years ago

My new i7 MBA starts revving up when I open that in Safari.

culturestate2• 15 years ago

Mine as well. 8GB RAM and SSD.

chaosmachine• 15 years ago

Don't forget to press "G".

aculver• 15 years ago

Wow. That needs to be enabled by default.

hmottestad2• 15 years ago

I guess this is going to be the next race for browser compatibility. So far I've tried Firefox, Safari and Chrome all on OS X Lion, I'm hoping a newer version of Chrome will work, if not I guess this is all still mostly academics.

celoyd• 15 years ago

I’m on Lion and vanilla Chrome works for me. Safari also works if I turn on the Develop menu (in the Advanced tab of the preferences) and use it to turn on WebGL.

hmottestad2• 15 years ago

Yep, newest version of chrome does work. Which is also the only browser that does. It uses about 40% of a i5 dual core cpu in the Macbook Pro 15" mid 2010.

dhimes• 15 years ago

Got the latest stable for ubuntu 32 bit and it doesn't work.

chc• 15 years ago

I'm on a relatively ancient non-unibody MBP with a Penryn Core 2 Duo, 512 MB GeForce 8600M GT and Snow Leopard and it works on vanilla Chrome for me as well. And it uses 30%–40% here too — interesting since the i5 benches a lot better.

joelhaasnoot• 15 years ago

Doesn't seem to work here however on the Dev branch (15.0.849.0). Not that that's surprising: random stuff breaks regularly, and there's no way to go back...

azakai2• 15 years ago

It's probably more of a driver thing than a browser thing.

The demo works great on FF8 over here. Linux/NVidia.

watmough• 15 years ago

One of the great joys of using the FireFox Nightly, is that stuff like this usually works. Unless you need total extension compatibility, these have seemed rock-stable over the last month or so.

http://nightly.mozilla.org/ <--- try one of these

Taking one notch of one of my 4 cpus, since it's obviously running mainly on my Radeon 5570 graphics card/

rorrr• 15 years ago

OS X is still a tiny share of the market. This demo works just fine on Windows.

vmind2• 15 years ago

And here I am trying to get a bunch of 2d lines rendering quickly in a 2d canvas for some charts. So strange to me that something 'simple' like drawing 20,000 lines chugs along at ~20fps and a water simulation with caustics is there running at 30fps just fine. Goes to show how much you gain from a GPU if you're using it for something it's designed to do.

modeless3• 15 years ago

WebGL would draw your 20,000 lines much faster. It's not just for 3D; charting would be a perfectly reasonable use for WebGL.

vmind2• 15 years ago

Unfortunately it's a lot of smaller charts and they're embedded in an SVG based diagram interface as foreignObjects, which doesn't support a WebGL context (in Chrome at least). I'd love to play with WebGL, but not usable for this task.

Writing the whole interface in a WebGL canvas could be really fun, but far too much work for an MVP, and would kind of mess with making it work on iPad etc.

AshleysBrain3• 15 years ago

At this rate, you'd get an awful lot of people who can't see your chart if you did it in WebGL!

andrewljohnson• 15 years ago

Getting lots of 2D lines to render on a chart fast is fairl;y easy with Google Maps and KML. It uses Douglas Peuker simplification.

benmccann2• 15 years ago

This didn't work for me in Chrome 14 or FireFox 5. What the hell browser does this work in?

joeyespo• 15 years ago

Same here. Anybody have a YouTube demo we can all watch?

AshleysBrain3• 15 years ago

Seconding a call for a YouTube video. On Chrome 13, Windows 7, with a nVidia GeForce Go 7600 with the latest driver and OpenGL 2.1.2, and I get the error:

Vertex shader sampler count exceeds MAX_VERTEX_TEXTURE_IMAGE_UNITS (0).

You might laugh at my hardware, but from my own OpenGL work I know the majority of users out there have crappy old chips or god-awful Intel graphics chips which the vendors can't be bothered to support any more with decent drivers that support the latest OpenGL features. Most people don't surf with a gaming grade GPU. If WebGL is this fussy about hardware, it could severely limit its uptake.

bherms3• 15 years ago

Just made this. New Macbook Air. 1.7ghz. Google Chrome 14.0.835 beta

http://screencast.com/t/IFtRRvLDQ

edit: NEW LINK -- http://www.youtube.com/watch?v=NGonSVJSrZI

dman2• 15 years ago

Which OS?

benmccann2• 15 years ago

Ubuntu. I got a bit further in FireFox by following the instructions below, but it seems it still won't work until FF6.

http://www.ubuntugeek.com/howto-enable-webgl-on-firefox-4.ht...

nitrogen2• 15 years ago

According to https://developer.mozilla.org/en/WebGL#Gecko_6.0_notes OES_texture_float was added in Firefox 6. This is strange, though, because IIRC the path tracing demo that was posted recently used floating point textures, though perhaps through a different means (I'm not familiar with how extensions and texture formats work in WebGL).

Edit: I just got the demo to work in Chrome, and it says that, at least for caustics, OES_standard_derivatives is also required.

dagw2• 15 years ago

Chrome 13 on Windows 7, and it runs without problem

apike• 15 years ago

It works for me in Chrome 14.0.835.0 dev on Lion with a GeForce GT 330M (MacBook Pro 2010). Beautifully, at that.

polshaw• 15 years ago

works for me with firefox 6 (windows)

azakai2• 15 years ago

Works for me on FF8 on Linux, NVidia drivers.

dhotson• 15 years ago

Try type this into your location bar in Chrome:

about:gpu

.. it might be a GPU that isn't supported?

Groxx• 15 years ago

Works for me in Chrome 13, OSX 10.7

eraemaajaervi2• 15 years ago

I'm getting the "This demo requires OES_texture_float extension" error. Strangely, in the conformance test (https://cvs.khronos.org/svn/repos/registry/trunk/public/webg...) OES_texture_float passes without error.

using latest chromium dev build on latest ubuntu 32bit. same error in firefox 5.

dman2• 15 years ago

Which graphics card?

eraemaajaervi2• 15 years ago

integrated Intel GMA X4500 it's not a super expensive card, but also not really old.

lspci gives me

VGA compatible controller: Intel Corporation Mobile 4 Series Chipset Integrated Graphics Controller (rev 07) (prog-if 00 [VGA controller])

Vivtek• 15 years ago

Waves don't reflect off the sphere - they just pass right through it. Mind-bogglingly beautifully, of course.

Andrex2• 15 years ago

Doesn't work for me on Chrome 13 (Stable) or 15 (Canary) on Windows 7. Both throw up an "implicit truncation of vector type" error.

hacketyhack• 15 years ago

I'm running Chrome "13.0.782.112 m" on Windows 7 and it's working just fine.

Andrex2• 15 years ago

Ah, in that case it might be my GPU: ATI Radeon X1550

dagw2• 15 years ago

Works just fine for me with Chrome 13 and Windows 7

jamesaguilar• 15 years ago

Something really interesting happens if you move the ball to the surface, let the water become calm, then move the ball horizontally along the surface.

gcb• 15 years ago

wow. this logged me off my X session on ubuntu 10.10 stable and chrome 13.0.782.112

talicni_tom• 15 years ago

And they call it stable?

vimalg22• 15 years ago

Surface tension seems to be modeled too.

Try violently lifting the ball out of placid water.

The water 'sticks' to the ball for a while.

AndrewMoffat2• 15 years ago

that's just the initial surface disturbance. it starts at the center of where the sphere breaches the water and has an amplitude. the disturbance radiates outward from that center, but there's no "sticking" to other meshes happening

vimalg22• 15 years ago

I knew there was something not entirely right with my statement.

Thanks for pointing out what.

AndrewMoffat2• 15 years ago

this is the algorithm that governs the surface waves. it's remarkably simple and well suited to the parallel computing that shaders can offer: http://freespace.virgin.net/hugo.elias/graphics/x_water.htm

dendory• 15 years ago

Another HN item that can only been seen by those using Google Chrome. When will it stop? Are we really so dumb and foolish to go right back to the "Works only in IE6" days? WHY is it that because it's Chrome and not IE6, that makes it alright?

doctoboggan• 15 years ago

It works in Safari as well. You have to enable webgl in the developer menu first though

agildehaus• 15 years ago

Chrome isn't the only browser that works: - Safari 5.1 (released with Lion) works if you enable WebGL in the developer menu. - Firefox 6.0 works with this demo. 5.0 tells me a feature is missing. - Opera's WebGL preview build fails in the exact same way as Firefox 5.0, which indicates to me that a newer build might work.

WebGL is an emerging standard supported by FOUR major browser vendors (Google, Apple, Opera, Mozilla). Microsoft is the only one not currently adopting. It's a continuation of them doing their own thing without a care about inter-operability. Silverlight 5 implements GPU-accelerated 3D so Microsoft likely considers WebGL to be a competing product.

barrkel• 15 years ago

Microsoft considers the security implications of open-ended access (relatively) to be insecure, and the crashes other users are reporting on this article right here prove them right, for now. GPU drivers have never before been considered attack surfaces requiring hardening against malicious attackers. Stand by for the first major attack using this vector.

jxcole• 15 years ago

When I bought my computer I didn't think graphics were important. Now I wish I had spent some money on a good graphics card. I might have to buy one so I can develop stuff like this.

For those who are interested, if you have a laptop with an intel based graphics card, you are probably using something called Mesa. After researching for a long time, Mesa is some sort of a graphics driver that works on Linux. Apparently, if you have Mesa 7.10+ and Firefox 6 webgl works, though I haven't figured out how to upgrade Mesa. The default on Ubuntu 10.04 is 7.4 or something like that. Apparently, Mesa is pretty buggy and can crash a lot.

If anyone has more info about this subject, I would appreciate it.

oomkiller2• 15 years ago

Mesa is a software 3D driver. It uses the CPU instead of your GPU. I've never had an intel igp on Linux, but it should probably be using intel drivers for 3d, not Mesa.

thristian• 15 years ago

Mesa was originally a pure-software implementation of OpenGL (with the trademarks filed off), but since it was the only complete, open-source GL stack, a lot of open-source hardware drivers re-use parts of it, including the official Intel graphics drivers.

To the grandparent poster: Like any system component, the best way to upgrade Mesa is to upgrade your OS. Sadly, the latest version of Ubuntu is 11.04, which comes with Mesa 7.10.2, and Firefox blacklists every version of Mesa before 7.10.3, so you'll probably have to wait for 11.10 (or just force-enable webgl).

kpozin• 15 years ago

Warning: this demo crashed my integrated graphics driver about 15 seconds in. YMMV.

mtogo• 15 years ago

Hrm, the site says that latest versions of both Firefox (Stable & Aurora) and Opera, and Chromium 6 don't support WebGL. Is there any browser this is supposed to work in?

istvanp• 15 years ago

It works in Aurora [1] but the FPS is really much lower than what I get in Chrome where it's completely smooth. [1] http://www.mozilla.com/en-US/firefox/channel/

Edit: I have version 13 of Chrome and version 7.0a2 (2011-08-10) of Aurora.

tom9729• 15 years ago

Works great in Chrome 13 on mac.

becomevocal• 15 years ago

Eventually we'll want more from our standard, flat websites. WebGL is part of that. Not every site of course, but with the inevitable increases in processing power that come in the future so will our desire to be inventive with it.

Keep in mind we're entering a post-PC era. Our mobile and tablets already include (a bit) of GPU acceleration for certain CSS transitions. This is where WebGL will shine, in my opinion.

fuzzythinker• 15 years ago

Don't forget to check out all his other impressive works! http://madebyevan.com/

ajross• 15 years ago

Doesn't work on Intel graphics (at least under linux with F15-era drivers). "This demo requires OES_texture_float extension." Float textures are pretty bleeding edge even for fancy GPUs.

WebGL Water Simulation

Related Stories