

Web GL Ocean Simulation - clukic
http://david.li/waves/

======
randomdrake
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/](http://jsfiddle.net/zyAzg/)

Excellent demo.

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

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

~~~
mcpherrinm
I think the closest you'll get right now is something like THREE.js that
builds shaders for you out of a high level graphics API.

~~~
mistercow
That seems to me actually further than just writing the GLSL shaders yourself.
I suppose the MVP would be a library that simply eases getting data in and out
of webgl.

------
nspragmatic
> 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](http://jsfiddle.net/bYHfh)

^ removes the hasWebGLSupport() invocation.

Very nice demo, though!

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

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

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

------
bhouston
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](http://http.developer.nvidia.com/GPUGems/gpugems_ch01.html)

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

~~~
bhouston
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...](http://www.cemyuksel.com/research/waveparticles/waveparticles.pdf)

------
Impossible
Reminds me of this shader toy shader.
[https://www.shadertoy.com/view/XdsGDB](https://www.shadertoy.com/view/XdsGDB)

~~~
dualogy
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. ;)

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

~~~
AterCattus
I have the same thing in Win and Linux.

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

~~~
omn123
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](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...](http://lorenabarba.com/blog/cfd-python-12-steps-to-navier-stokes/)

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.

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

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

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

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

~~~
dirkk0
Works flawlessly here (Chrome, OS X).

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

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

------
codeplay
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/](http://jsfiddle.net/esteewhy/5Ht3b/6/)

------
kevincennis
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
It's definitely performing better than that on my 2nd gen 13" MBP on Chrome.
Could it be struggling with retina?

~~~
kcbanner
60fps in Chrome on MBP 15"

------
gulbrandr
Relevant:
[http://www.babylonjs.com/Scenes/Worldmonger/index.html](http://www.babylonjs.com/Scenes/Worldmonger/index.html)

Scene with water, made with BabylonJS.

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

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

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

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

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

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

------
meatsock
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](https://www.youtube.com/watch?v=EnG6I1nsHy4)

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

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

------
nickthemagicman
That is really cool.

Is that some sort of fluctuating perlin noise?

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

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

------
izietto
Very realistic, with the foam it would be perfect

------
randartie
I would love to see this code fully commented!

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

------
julien421
That's super cool!

------
pattle
This is really cool

------
mahdavi
looks cool, but it's really slow.

------
scrdhrt
Really cool!

------
rocLv
which browser can display?

------
shobhitverma
Love it!

------
circa
wow this is great!

------
AsymetricCom
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
I'd venture that the differences these day is that there is no install step
and it works on many different systems.

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

~~~
vectorpush
_Sure, for varying values of "works" and "different" and "no install step"._

You could say the same thing about anything related to web browsers. What's
your point?

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

Right... except a user has to trust you enough to download and execute your
DOS binary rather than just execute a javascript file in a browser sandbox.

~~~
AsymetricCom
I already have a sandbox, it's called a computer.

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

------
jheriko
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
"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.

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

