Web GL Ocean Simulation

by clukic • 13 years ago

695 134 13 years ago

The code is quite cool to look at. Love seeing the extensive use of matrices and mathematics to create such a beautiful and mesmerizing display.

If anyone is interested in playing around with it, I threw it up at JSFiddle here: http://jsfiddle.net/zyAzg/

Excellent demo.

thearn4• 13 years ago

Great demo, well written code. Though reading through it also highlights that JS is not a great language for linear algebra. But I don't think anyone is really suggesting otherwise.

segmondy• 13 years ago

"JS is not a great language for linear algebra." what does that even mean? It's a general purpose language. It all boils down to how you want to use it, like any other general purpose language. A lot of times in cases like this, people choose not to make it look pretty and easy to read to gain performance. This simulation is very CPU intensive, trying to have pretty code and speed is going to be tough.

neumann• 13 years ago

Can I ask why JS is no good? (Genuine question)

I thought the only consideration would be speed? The algebra is mainly looping. Isn't that way most languages try to handball algebra to LAPACK/BLAS?

albertzeyer2• 13 years ago

I wonder if it was all handwritten. Esp. functions like invertMatrix or premultiplyMatrix. Or what he used to generate the code.

I once used WolframAlpha to get me some complicated formulas and wrote a custom WA-plaintext-output-to-C translator for that output to use it in my code. Here is the script: https://github.com/albertz/helpers/blob/master/wolframalpha_...

Example input: http://www.wolframalpha.com/input/?i=solve+a*x_1%5E3+%2B+b*x...

Output: s->a = ((x1 + x2 - 2.) / pow(x2 - x1, 3.)); s->b = ((- (((x1 + x2 - 2.) * pow(x1, 2.)) / pow(x2 - x1, 3.)) - ((4. * x2 * (x1 + x2 - 2.) * x1) / pow(x2 - x1, 3.)) + ((6. * (x1 + x2 - 2.) * x1) / pow(x2 - x1, 3.)) - ((7. * pow(x2, 2.) * (x1 + x2 - 2.)) / pow(x2 - x1, 3.)) + ((6. * x2 * (x1 + x2 - 2.)) / pow(x2 - x1, 3.)) - 1.) / (4. * x2 - 4.)); s->c = (1. / 2.) * ((((x1 + x2 - 2.) * pow(x1, 2.)) / pow(x2 - x1, 3.)) + ((4. * x2 * (x1 + x2 - 2.) * x1) / pow(x2 - x1, 3.)) - ((6. * (x1 + x2 - 2.) * x1) / pow(x2 - x1, 3.)) + ((pow(x2, 2.) * (x1 + x2 - 2.)) / pow(x2 - x1, 3.)) - ((6. * x2 * (x1 + x2 - 2.)) / pow(x2 - x1, 3.)) - ((4. * (- (((x1 + x2 - 2.) * pow(x1, 2.)) / pow(x2 - x1, 3.)) - ((4. * x2 * (x1 + x2 - 2.) * x1) / pow(x2 - x1, 3.)) + ((6. * (x1 + x2 - 2.) * x1) / pow(x2 - x1, 3.)) - ((7. * pow(x2, 2.) * (x1 + x2 - 2.)) / pow(x2 - x1, 3.)) + ((6. * x2 * (x1 + x2 - 2.)) / pow(x2 - x1, 3.)) - 1.)) / (4. * x2 - 4.)) + 1.); s->d = (1. / 4.) * ((((x1 + x2 - 2.) * pow(x1, 3.)) / pow(x2 - x1, 3.)) - ((4. * x2 * (x1 + x2 - 2.) * pow(x1, 2.)) / pow(x2 - x1, 3.)) - (((x1 + x2 - 2.) * pow(x1, 2.)) / pow(x2 - x1, 3.)) - ((pow(x2, 2.) * (x1 + x2 - 2.) * x1) / pow(x2 - x1, 3.)) + ((2. * x2 * (x1 + x2 - 2.) * x1) / pow(x2 - x1, 3.)) + ((6. * (x1 + x2 - 2.) * x1) / pow(x2 - x1, 3.)) + x1 - ((pow(x2, 2.) * (x1 + x2 - 2.)) / pow(x2 - x1, 3.)) + ((6. * x2 * (x1 + x2 - 2.)) / pow(x2 - x1, 3.)) + ((4. * (- (((x1 + x2 - 2.) * pow(x1, 2.)) / pow(x2 - x1, 3.)) - ((4. * x2 * (x1 + x2 - 2.) * x1) / pow(x2 - x1, 3.)) + ((6. * (x1 + x2 - 2.) * x1) / pow(x2 - x1, 3.)) - ((7. * pow(x2, 2.) * (x1 + x2 - 2.)) / pow(x2 - x1, 3.)) + ((6. * x2 * (x1 + x2 - 2.)) / pow(x2 - x1, 3.)) - 1.)) / (4. * x2 - 4.)) + 1.);

(https://github.com/albertz/music-player/blob/master/ffmpeg_p... SmoothClipCalc::setX)

omn1236• 13 years ago

It's worth pointing out that you should rarely, if ever, use exact formulas since there are a lot of problems with numerical stability amongst other things. Often it is faster to just numerically solve the system.

For example, in your case you are solving Ax=b which you can easily solve by a simple LU decomposition. Plus if your A changes, your exact formula is wrong, so using an LU decomposition just makes sense. Plus your code will look way cleaner as well. And way easier to debug.

http://en.wikipedia.org/wiki/LU_decomposition

exDM693• 13 years ago

I wonder if it was all handwritten. Esp. functions like invertMatrix or premultiplyMatrix. Or what he used to generate the code.

Yes, it probably is hand written. Or more likely, copied from some well known resource such as MESA.

Computer graphics deals extensively with 4x4 matrices, so there are hand written implementations of elementary operations such as matrix inverse, all unrolled and precomputed so that there's no loops or anything. (NOTE: this isn't really basic loop unrolling, these are not simple loops to begin with).

http://stackoverflow.com/questions/1148309/inverting-a-4x4-m... http://stackoverflow.com/questions/2624422/efficient-4x4-mat...

fve89• 13 years ago

For cases where the most basic simplifications are enough (0*x=0 etc.) there is this one: http://glat.info/flatorize/

bd• 13 years ago

Just to clarify - the bulk of the work here is done in GLSL shaders on the GPU, not with matrices in JavaScript.

All that matrix code you see in the source here is basically just the minimum prerequisite for doing 3D graphics, it would be the same if you just wanted to get a spinning cube with some camera control.

The real magic happens in the shaders which compute water mesh displacement, normals and shading directly on the GPU (21 simulation passes + 1 rendering pass + 1 initialization pass, using several floating point textures, seems like stateful simulation with ping-ponging, basically using graphics rendering pipeline to do GPGPU without a need for OpenCL / CUDA).

mistercow2• 13 years ago

basically using graphics rendering pipeline to do GPGPU without need for OpenCL / CUDA

It would be really cool to see a project that would make that easier to do in JS more generally. Basically a similar idea to Parakeet or Numba, but with GLSL as a target.

MBCook• 13 years ago

ust to clarify - the bulk of the work here is done in GLSL shaders on the GPU, not with matrices in JavaScript.

I noticed that, which I thought was pretty cool. I was playing with it in Chrome on OS X when I realized that it wasn't doing too much to my CPU, even when I cranked the simulation up to max.

jheriko4• 13 years ago

this is magic? isn't this precisely what the hardware was designed for? i wouldn't call this GPGPU personally - this is very much graphics.

GPGPU is more about e.g. doing multi-precision integer arithmetic on the GPU - where the processors are used for something which doesn't fit the 'streaming processor being fed vectors' pattern which the architecture was made for (of which this demo is a very good example) - quite literally 'general purpose'.

nanidin• 13 years ago

I'm not sure how I'd feel about a repost to jsfiddle without my permission if I were the original author. How is this any different than reposting xkcd or other webcomics on alternate hosting without the author's permission?

mylons• 13 years ago

because it's code in a browser. if the author didn't want us to look at the code, why would they let us download it?

berkut2• 13 years ago

I'd hardly call him the original author - A. it's based off Jerry Tessendorf's seminal Ocean Wave simulation paper from Siggraph 2001, and B. the code's very similar to Keith Lantz's non FFT version here, just in JS and WebGL shaders instead of C++:

http://www.keithlantz.net/2011/10/ocean-simulation-part-one-...

itry• 13 years ago

If anyone is interested in playing around with it, I threw it up at JSFiddle here

How do you know the author is ok with that?

bhouston2• 13 years ago

Very nice and fully custom code too! The UI is really clean and fits nicely with the WebGL via CSS transforms I believe. Props to you.

BTW geistner waves reference here: http://http.developer.nvidia.com/GPUGems/gpugems_ch01.html

alan_cx• 13 years ago

Sorry if this is a dumb question, but how hard would it be to add a boat that realistically bobs up and down with the water?

Recoil42• 13 years ago

Really not hard at all, actually -- depending on how realistic you'd like it, of course.

bhouston2• 13 years ago

Just calculate the boat's water displayment via some very approximate measure. Then use that to determine buoyancy relative to boat weight and just integrate that overtime and add some dampening to represent friction/inertia.

But there is a better way of doing interactive waves from a boat, wave particles:

http://www.cemyuksel.com/research/waveparticles/waveparticle...

adamwong246• 13 years ago

sheesh, all these great blogs... Mine looks like it was made by a middle schooler.

nickthemagicman• 13 years ago

That is really cool.

Is that some sort of fluctuating perlin noise?

nspragmatic• 13 years ago

Your browser does not appear to support the required technologies.

It would've been nice to have an 'I don't care, proceed anyway' button. The check excludes Safari 7, which runs the demo just as well as Chrome.

http://jsfiddle.net/bYHfh

^ removes the hasWebGLSupport() invocation.

Very nice demo, though!

Achshar• 13 years ago

I am on latest chrome on win8, I still get that message. I guess it needs something more powerful than the onboard GPU I have.

alexwright• 13 years ago

I'm using the onboard/ondie Intel HD4000 and it works. You might have a driver that is blacklisted. Chrome and I think other browsers have a list of drivers known to allow execution of dangerous shader code and block WebGL in those cases.

mnw21cam• 13 years ago

Agreed, I get the message, but your link leads to a very cool demo, on Firefox 17.

pcmonk• 13 years ago

Agreed. Chrome 27 on Linux, and I get that message, but the demo actually runs fine.

dhimes• 13 years ago

Is there a google chrome extension that allows me to modify the served javascript from the original page?

meatsock• 13 years ago

excellent work, thanks for sharing. my wavyness simulation resulted in more literal results [1] so i'm glad to have code to study for improvements.

[1] https://www.youtube.com/watch?v=EnG6I1nsHy4

nawitus• 13 years ago

Crashed my browser (using Firefox 25 on Arch Linux). Maybe it would've worked, but I only waited for 25 seconds.

dingdingdang2• 13 years ago

Honestly very impressive, idea: if made into fullscreen (i.e. without edges visible) and with an added horizon and an emulated sun-rise/sun-set this would make for totally enthralling watching - the "live'ness" of it makes it a thousand times more interesting to the eye than images or pre-recorded video material.

mentos• 13 years ago

I'd love to see that!

A dream/stretch goal would be some sort of a vessel (fishing boat?) that allowed me to recreate the 'perfect storm' and WASD around while trying stay afloat.

crisnoble• 13 years ago

It could even pull weather data for wind speed and direction along with time of day for the suns position.

kevincennis• 13 years ago

This runs at about 7 frames per second in Chrome on my 10-month-old 13" Macbook Pro at work.

Are people with better graphics cards seeing 60 (or even 30) fps? I'd love to be able to see this in all its glory.

ajanuary• 13 years ago

It's definitely performing better than that on my 2nd gen 13" MBP on Chrome. Could it be struggling with retina?

kcbanner• 13 years ago

60fps in Chrome on MBP 15"

nucleardog• 13 years ago

Running better than that for me in Chrome on the Mid-2010 13" MBP work has me on.

chc2• 13 years ago

I don't know how to check the FPS, but it looks perfectly smooth to me on a 2010-era 15" MBP.

tbob22• 13 years ago

60fps here (3.4ghz Core 2 Quad/GTX 470/Firefox/fullscreen 1920x1200). CPU usage is 9%, GPU usage is 22%.

rikkus• 13 years ago

20.1fps, 2008 Macbook unibody, Chrome. Not using much CPU so seems to be doing GPU stuff.

AterCattus2• 13 years ago

60fps (old Intel HD graphics in Linux Mint).

krelian• 13 years ago

Where would one start if they wanted to learn the math needed to achieve something like this?

gaius• 13 years ago

Start with matrices and eigenvectors and take it from there.

http://en.wikipedia.org/wiki/Matrix_(mathematics)

omn1236• 13 years ago

I've alluded to this in other comments but a lot of the mathematics is linear algebra. As gaius mentions, check out the wikipedia article. There are plenty of linear algebra books out there. Recently I've really enjoyed the book by Meyer which is free although it does get quite advanced and is mostly theorem / proof-style. It's also free so who can complain.

http://matrixanalysis.com/DownloadChapters.html

Here is a link I found yesterday which gets you solving the 2D NS equations.

http://lorenabarba.com/blog/cfd-python-12-steps-to-navier-st...

I've take a quick look through it and it seems pretty good. It introduces many of the most important ideas of solving PDEs. Obviously there are huge tomes on various techniques to solve the Navier-Stokes equations but this link, I think, does a pretty good elementary introduction. A more comprehensive treatment would require a more thorough background in mathematics (e.g. I wrote a 2D NS solver using the vorticity formulation and FFTs but to understand the equivalence requires a greater background).

As for the cool visualisation, I cannot help you. I don't know any fancy graphics programming since I normally use the built-in plotting tools of Python and Matlab.

fhd2• 13 years ago

I'd suggest a good book over Wikipedia articles, most math articles are particularly useless for learning stuff IMO.

I learned quite a lot from "Mathematics and Physics for Programmers", although I wouldn't call it perfect. I'm also quite interested in "Essential Mathematics for Games and Interactive Applications".

It's true, once you've got linear algebra figured out you can do a whole lot in the simulation/games space, but it helped me to learn the more advanced stuff in terms of games and simulations.

iguana• 13 years ago

Awesome demo, and a great way to turn your laptop into a heater. Still, performed quite well on my 15" retina mbp.

computer• 13 years ago

Thank you for the Youtube fallback! (https://www.youtube.com/watch?v=IrUehq6vJss&feature=youtu.be)

brokenparser• 13 years ago

Error on line 36: An ”body” start tag seen but an element of the same type was already open.

untog• 13 years ago

A great demonstration on why such validation doesn't really matter at all.

scrdhrt• 13 years ago

Really cool!

Impossible• 13 years ago

Reminds me of this shader toy shader. https://www.shadertoy.com/view/XdsGDB

dualogy• 13 years ago

Yeah, love that one too. Insanely great. But it's raytracing the sphere and raymarching the water distance-fields per fragment, right? Not gonna fly realtime any longer (or at all) if you ever wanted to use it with additional polygonal art. ;)

zobzu• 13 years ago

Redundant but I just want to say it: this is well done:)

colszowka• 13 years ago

Hitting ctrl-+/ctrl-- on chrome leads to interesting results :) Impressive demo, kept staring at it for a while pondering the exciting future the web platform has in it.

julien421• 13 years ago

That's super cool!

AsymetricCom3• 13 years ago

I remember seeing this run smoothly on a P2 after a very small executable download in late 90's. How far we've come in a big, stupid circle back where we started.

Now instead of a small executable, we need a large executable to sit on top of a large API on top of the CPU before even touching the GPU, and a network connection to download all the dependant APIs and libraries every time the page is loaded.

The only impressive thing about this demo is how many YCombinator readers are impressed with blinkenlights

hexasquid• 13 years ago

I'd venture that the differences these day is that there is no install step and it works on many different systems.

AsymetricCom3• 13 years ago

many different systems.

Sure, for varying values of "works" and "different" and "no install step".

I'm going to go out on a limb here and state that a DOS executable from the 90's will run on more machines in the world than this demo, given "platforms" similarly to what this demo takes as a given.

jdlshore• 13 years ago

People value being not having to manually download and install software. You can either take advantage of this, or you can complain about it.

daven112• 13 years ago

...or come up with a better way to download and install software, oh wait a minute Apple did that and made a billion dollar industry downloading apps.

10098• 13 years ago

Yes. Makes me smile when I hear the word "demo" being thrown around. I always thought the point of a demo was to come up with something impressive with very limited resources. Remember 64k demos? http://www.youtube.com/watch?v=Qv7y3eKyVUo

nitrogen• 13 years ago

I'd like to listen to the bottom edge of the simulated region played back as a waveform as the simulation progresses.

skylervm• 13 years ago

This is a really awesome demo. Great work.

I'd love to see it with different ocean floors to be able to see how waves break in different locations based on certain conditions. Someone please make this happen! :D

berkut2• 13 years ago

It's heavily based on Jerry Tessendorf's "Simulating Ocean Water" paper, so it only does open water: interaction of water and wind using Phillips' Spectrum.

So it doesn't model the interaction with land in any way.

IvanK_net• 13 years ago

Too sad they are using "OES_texture_float" extension :( It would be more interesting to see it done with pure WebGL.

jheriko4• 13 years ago

computers have now become so powerful that this stuff is easy. you can implement it in a way which, aside from platform, is really quite naive and wasteful - and still get applause.

most programmers can come up with a much better solution to this problem if removed from google and forbidden access to gpu gems.

this is at least well presented though...

its a shame the code has been posted. whilst i normally assume that demos like this are unlikely to be smart or impressive these days - this time i know for sure. its actually a good deal worse than i ever would have imagined.

i'm still quite torn whether all this horsepower is a good thing or not.... on the one had we get a demo like this without much in the way of understanding or resourcefulness. on the other hand we have hundreds of man hours being wasted at dev studios because clever efficiency is rapidly becoming a thing of the past...

WatchDog• 13 years ago

"most programmers can come up with a much better solution to this problem if removed from google and forbidden access to gpu gems." I doubt I could come up with such a solution even with access to google and gpu gems. I am not a particularly good programmer, but I know for certain that most programmers wouldn’t even know where to begin to implement something like this.

jheriko4• 13 years ago

don't be so doubtful. i started out down this path without google and the internet so its especially easy for me to see, but consider: do you even want to make this?

if you did i'd bet you'd find a way - google, wikipedia and free copies of gpu gems make it stupidly easy. the amount of understanding required to produce a demo like this is no more than is required to copy someone else's code or algorithm in any other discipline.

even without those, if you wanted to make this i bet you could come up with something pretty good on a first attempt. even now i bet that somewhere in there you have a pretty good idea of an approach - you might think its dumb, inefficient or must have a flaw in it - you might have no idea about what you need to feed the rendering pipeline - but i'd bet its pretty good - probably a lot better than you'd give it credit for.

lttlrck• 13 years ago

What is wrong with this solution?

wamatt• 13 years ago

Might be system dependent, though couldn't help but notice a non-trivial difference in the OpenGL rendering quality, between Firefox and Chrome.

Chrome 32 beta on OS X, produced an anti-aliased canvas, whereas Firefox 25 had the dreaded jaggies @ 1680x1050

AterCattus2• 13 years ago

I have the same thing in Win and Linux.

shobhitverma• 13 years ago

Love it!

circa• 13 years ago

wow this is great!

prembharath• 13 years ago

I am surprised how this runs smoothly even on lower end PCs. I was able to view it perfectly smooth on a old Dual Core, integrated graphics and 2GB RAM linux box.

niels_olson2• 13 years ago

That may be the only wave in SoCal today. But can I surf it? :)

izietto• 13 years ago

Very realistic, with the foam it would be perfect

blahbl4hblahtoo• 13 years ago

You know...IE11 does support webgl...just saying. (I don't think it checked...)

Quiark• 13 years ago

I really like the layout of the controls, it's a mix between infographics & some movie-like GUI and it works pretty well.

nailer• 13 years ago

I can't use the controls at all (Chrome, OS X). Clicking the sliders just moves the whole plane around.

dirkk0• 13 years ago

Works flawlessly here (Chrome, OS X).

I also love the controls, reminds me of Bret Vistors interactive document examples.

rocLv• 13 years ago

which browser can display?

codeplay• 13 years ago

I knew this is a bit irrelevant, just want to show a pure js ripple effect which I borrowed before: http://jsfiddle.net/esteewhy/5Ht3b/6/

n1ghtmare_• 13 years ago

Wow, this is awesome. After many years of experience in programming this still makes me feel like a total idiot.

randartie• 13 years ago

I would love to see this code fully commented!

mahdavi• 13 years ago

looks cool, but it's really slow.

gulbrandr• 13 years ago

Relevant: http://www.babylonjs.com/Scenes/Worldmonger/index.html

Scene with water, made with BabylonJS.

pattle• 13 years ago

This is really cool

Web GL Ocean Simulation

Related Stories