
WebGL Water Simulation - devongovett
http://madebyevan.com/webgl-water/
======
rvanniekerk
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
Oh, the joys of running a task that is suitable for a GPU ... on a GPU!

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

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

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

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

~~~
hiker
I agree for mobile web apps. For PC, tell them to switch away from IE. If
you're making high-end graphics, your users need a high-end browser.

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

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

~~~
AshleysBrain
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.

~~~
palish
Hardware compatibility is the least of WebGL's problems. Right now there's
essentially zero chance of WebGL powering any modern graphics engine. It
unfortunately seems doomed to a life of "hey-look-at-my-cool-effect". (Which
is neat, don't get me wrong. But it will never reach Doom 3 quality, and
that's a tragedy IMO.)

Example: WebGL doesn't even support compressed textures. The spec _actually
mandates_ "We will not support compressed textures, and this is by design".
Facepalm...

~~~
nkassis
Well my stuff isn't Doom3 level so I guess it's useless but I'm building
visualization tools for the brain imaging community with WebGL and for that it
works great. I have no fear that WebGL will do fine, it's an evolution of the
Web the same as was seen on the phones. Looks at 2006, did anyone seriously
think phones would be able to do much? Then a few years later Carmack shows
some cool demo engine for iOS Rage which looks about as good as the PS3.

As for compressed textures. It hasn't been ruled out for ever. This is stil
version 1.0 of the spec.

~~~
palish
I was of course talking specifically about WebGL for games...

But it seems like you'd run into many of the same hindrances. For example, how
will you get around the 5MB local storage limit? It would be unwieldly to re-
download the whole visualization dataset each time, no?

P.S. I have nothing but respect for the medical visualization community. A lot
of game graphics techniques were derived directly from work done in medical
research (for example, BSP rendering and voxel rendering).

~~~
nkassis
I offer multiple options, 1. they can open local files, option two is
obviously to get them from the server every time. For most things they don't
usually look at the same stuff multiple times. An average MRI is pretty low
resolution and can fit in under 50mb (average 10mb, 50-60 for fMRI scans) of
storage thus it's not to expensive to redownload it. For surface data it's
even less, my average brain surface is also under 10mb. Most of my users are
on University networks which helps a lot.

Also applications in the chrome web store can get around the local storage
limitation. I'd browsers to offer a quota system where the user can assign a
max amount to their applications. That would solve those issues.

------
chaosmachine
Don't forget to press "G".

~~~
aculver
Wow. _That_ needs to be enabled by default.

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

~~~
oomkiller
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
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).

~~~
oomkiller
Thanks for the extra info. I wasn't aware that hardware drivers used it, I
just remember back in the day Mesa meant no Soldier of Fortune demo and Beryl
:)

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

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

~~~
hmottestad
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
Got the latest stable for ubuntu 32 bit and it doesn't work.

~~~
demetris
Not all combinations of hardware and drivers work yet. See:

<http://www.khronos.org/webgl/wiki/BlacklistsAndWhitelists>

------
Andrex
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
I'm running Chrome "13.0.782.112 m" on Windows 7 and it's working just fine.

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

------
eraemaajaervi
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...](https://cvs.khronos.org/svn/repos/registry/trunk/public/webgl/sdk/tests/webgl-
conformance-tests.html)) OES_texture_float passes without error.

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

~~~
dman
Which graphics card?

~~~
eraemaajaervi
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])

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

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

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

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

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

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

~~~
AndrewMoffat
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

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

Thanks for pointing out what.

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

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

~~~
nmeyer
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.

------
AndrewMoffat
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>

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

~~~
talicni_tom
And they call it stable?

------
dendory
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?

~~~
agildehaus
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
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.

