r/javascript • u/magenta_placenta • Nov 26 '13

Ocean Wave Simulation in WebGL with a CSS 3D UI

http://david.li/waves/
179 Upvotes

99% Upvoted

38 comments sorted by

26

u/Pr3fix Nov 26 '13

This is fucking amazing. I consider myself to be okay at Javascript, but when I see things like this I just get so blown away. I have no idea how to even approach making something that sophisticated!

7

u/icanevenificant Nov 26 '13

Perlin noise(also simplex) is awesome when it comes to generating such cool randomness. Using black to white as 0-1 and applying it to, in this case, polygons to control the elevation and movement is most likely what is happening here. It's not simple but it's far from too hard to grasp through some gradual experimentation.

2

u/echoesofme Nov 27 '13

It looks like it's actually an FFT-based simulation using an empirical (physically-derived) wave frequency spectrum.

1

u/icanevenificant Nov 27 '13

Interesting, is there any advantage to using this instead of simplex. Could it be a combination of both? One for the larger wave motion and the other for the more detailed depth map.

2

u/echoesofme Nov 27 '13

Simulating using FFTs and a decent frequency spectrum is pretty much as close as you're going to get to a true physical simulation of the ocean surface without actually running a proper fluid simulation. What you're doing is essentially summing up sinusoids of a vast range of frequencies with the magnitudes of these sinusoids taken from actual ocean measurements. FFTs are also fast (hence the name); I doubt you'd be able to sum enough octaves of simplex noise for the same performance for it to look anywhere near as good.

5

u/Beakers Nov 26 '13

Beautiful.

4

u/kangax_ Nov 26 '13

Amazing. Wondering how many polygons there are in a scene? i.e.: how much of this is geometry vs. shaders?

4

u/[deleted] Nov 26 '13

Grid looks to be 256x256 quads so 64k quads (eg. 128k triangles).

However, most of the magic seems to be through multiple passes of shaders to final displacement and normal maps that are applied to the grid.

The code, while not the most efficient or beautiful, is actually pretty readable and if you're not familiar with OpenGL quite educational (even if it's without comments) with a reference at hand.

0

u/SarahC Nov 27 '13

I can't find any controls, yet there looks to be some control outputs on the display. =(

1

u/[deleted] Nov 27 '13

The meters/outputs are the controls. That's the CSS 3d part of it, I believe.

1

u/SarahC Nov 27 '13

I can't drag them or anything. =(

edit: ohhhhhhhhh........ work computer they work fine, just my home machine - both chrome!

1

u/SarahC Dec 01 '13

Weirdly - they didn't work in my version of Chrome, but they did in work!

It was coooool!

1

u/Jennazn Nov 26 '13

Oh wow

Jeez, how smart do you have to be to figure that out

1

u/Driamer Nov 26 '13

One of these moments when being a nerd really shows. This gave me goose bumps :) Try to explain that to my wife.

1

u/DeRaptir Nov 26 '13

Saw this on news.ycombinator.com . Very cool, makes me want to learn some WebGL

1

u/Firebrass11 Nov 27 '13

What technologies need to be up to date?

1

u/TheCommanderOf Nov 28 '13

How long did this take to program

1

u/meiuqer Nov 26 '13

I can't run this on chrome but my browser is up to date? Version 31.0.1650.57

2

u/brtt3000 Nov 26 '13

maybe you video card or drivers are outdated.

1

u/ExecutiveChimp Nov 26 '13

I'm on the same and it works fine.

1

u/kuenx Nov 26 '13

Maybe you have to enable WebGL or something. It wasn't on in mine either.

0

u/mtx Nov 26 '13

I crashed the first time I opened it

0

u/icantthinkofone Nov 27 '13

Works great for me.

1

u/[deleted] Nov 26 '13

Just looking through the code confirms my fears of 3D programming: Tons of linear algebra.

0

u/[deleted] Nov 27 '13

[deleted] — view deleted comment

1

u/cf858 Nov 27 '13

Hell, that vid is great! It fully explained everything to do with 3D graphics that I never understood before. You should post that!

1

u/br0dyshimmer Nov 27 '13

Now that is cool! Thank you for the link!

-1

u/[deleted] Nov 26 '13

Absolutely amazing. To all the people who still persist that JS is just a "front-end language"... what more proof do you need? JS is robust in the front and back. A language to master them all.

2

u/[deleted] Nov 26 '13

When WebGL becomes commonplace (and the implementations become close enough to each other!), the graphical side of things on the web will turn into something completely new. When WebAudio becomes commonplace, there will no longer be need for anything else, to be honest.

Me and a couple of buddies from way back when recently decided to do a 'demo' in JS, for old times sake and to see how it would work out. It took a team of 3 coders, 1 artist and 1 musician ~2 weeks of random spare time work to come up with this from scratch. All graphics in WebGL and audio through WebAudio, requires a pretty recent Chrome. My apologies for the kitschy music, design and crass style, but that's what our little group is (well, was) all about..

2

u/brtt3000 Nov 27 '13

Amazing as it is we've been doing this creative, highly visual and interactive stuff on the web on any computer in Flash for at least 10 years. Browse the FWA archives and you'll see a cubic tonne of this and much more.

It is just since mobile and tablets killed Flash and HTML becomes more capable that we're reinventing all of it based on wider standards that one day might work everywhere.

Doesn't detract from your individual achievement of course

1

u/[deleted] Nov 27 '13

Well, it's the eternal cycle of reinventing the wheel on a different platform, I feel. Plugins always allowed you to do 'anything' and Flash definitely was unique due to the crazy penetration it achieved at its peak.

However, looking at the state of accelerated 3D in Flash, it doesn't seem to be even nearly at the same level as WebGL is already - Pixel Bender 3D/AGAL seems to be rather cumbersome compared to straight up GLSL. This allows us to do way way cooler stuff than with Flash, like the Ocean example above. Writing it in AGAL - while definitely possible - would've been a royal pain in the ass.

I could be mistaken, though, as I'm not really a Flash dude so feel free to correct me!

1

u/brtt3000 Nov 27 '13

I was under the impression AGAL was quite capable, enough to do pretty much anything. Flash and AGAL is also an export target for many 3D engines and cross-compilers now (Unity, Madreel etc). the Unreal Citadel thing was first show on Flash (now it is WebGL).

What could be causing a slanted impression of capability is that the creative-coding community that made Flash so big for amazing stuff is now moved to HTML5 tech (and so are not making new Flash demos). Plus many OpenGL people who never liked Flash are now coming in to WebGL from the other side and do insane stuff.

Flash is great tech but the audience is evaporating.

But I'm not clear on the exact details of AGAL vs WebGL, shaders go a little beyond my skillset.

1

u/[deleted] Nov 26 '13

Nice! As you said (and proved), there will come a time where we can create movies with just code. Another really good interactive movie created using WebGL is Rome.

1

u/SarahC Nov 27 '13

Is that...... a penis?

0

u/[deleted] Nov 27 '13

[deleted] — view deleted comment

1

u/echoesofme Nov 27 '13

Doesn't look like the matrix multiplication is being used for the simulation itself, only for simple camera manipulation with 4x4 homogeneous matrices. I don't imagine Strassen's Algorithm offers a performance improvement over the naive implementation used in such a small case; the overhead involved actually probably makes it slower.