Web GL Ocean Simulation

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.<p>If anyone is interested in playing around with it, I threw it up at JSFiddle here: <a href="http://jsfiddle.net/zyAzg/" rel="nofollow">http:&#x2F;&#x2F;jsfiddle.net&#x2F;zyAzg&#x2F;</a><p>Excellent demo.

&gt; Your browser does not appear to support the required technologies.<p>It would&#x27;ve been nice to have an &#x27;I don&#x27;t care, proceed anyway&#x27; button. The check excludes Safari 7, which runs the demo just as well as Chrome.<p><a href="http://jsfiddle.net/bYHfh" rel="nofollow">http:&#x2F;&#x2F;jsfiddle.net&#x2F;bYHfh</a><p>^ removes the hasWebGLSupport() invocation.<p>Very nice demo, though!

Thank you for the Youtube fallback! (<a href="https://www.youtube.com/watch?v=IrUehq6vJss&amp;feature=youtu.be" rel="nofollow">https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=IrUehq6vJss&amp;feature=youtu.be</a>)

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

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.<p>BTW geistner waves reference here: <a href="http://http.developer.nvidia.com/GPUGems/gpugems_ch01.html" rel="nofollow">http:&#x2F;&#x2F;http.developer.nvidia.com&#x2F;GPUGems&#x2F;gpugems_ch01.html</a>

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?

Reminds me of this shader toy shader. <a href="https://www.shadertoy.com/view/XdsGDB" rel="nofollow">https:&#x2F;&#x2F;www.shadertoy.com&#x2F;view&#x2F;XdsGDB</a>

Might be system dependent, though couldn&#x27;t help but notice a non-trivial difference in the OpenGL rendering quality, between Firefox and Chrome.<p>Chrome 32 beta on OS X, produced an anti-aliased canvas, whereas Firefox 25 had the dreaded jaggies @ 1680x1050

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

This is a really awesome demo. Great work.<p>I&#x27;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

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

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

I knew this is a bit irrelevant, just want to show a pure js ripple effect which I borrowed before: <a href="http://jsfiddle.net/esteewhy/5Ht3b/6/" rel="nofollow">http:&#x2F;&#x2F;jsfiddle.net&#x2F;esteewhy&#x2F;5Ht3b&#x2F;6&#x2F;</a>

This runs at about 7 frames per second in Chrome on my 10-month-old 13&quot; Macbook Pro at work.<p>Are people with better graphics cards seeing 60 (or even 30) fps? I&#x27;d love to be able to see this in all its glory.

Relevant: <a href="http://www.babylonjs.com/Scenes/Worldmonger/index.html" rel="nofollow">http:&#x2F;&#x2F;www.babylonjs.com&#x2F;Scenes&#x2F;Worldmonger&#x2F;index.html</a><p>Scene with water, made with BabylonJS.

Hitting ctrl-+&#x2F;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.

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.

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

I&#x27;d like to listen to the bottom edge of the simulated region played back as a waveform as the simulation progresses.

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

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

excellent work, thanks for sharing. my wavyness simulation resulted in more literal results [1] so i&#x27;m glad to have code to study for improvements.<p>[1]: <a href="https://www.youtube.com/watch?v=EnG6I1nsHy4" rel="nofollow">https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=EnG6I1nsHy4</a>

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

That is really cool.<p>Is that some sort of fluctuating perlin noise?

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

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

Very realistic, with the foam it would be perfect

I would love to see this code fully commented!

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

That&#x27;s super cool!

This is really cool

looks cool, but it&#x27;s really slow.

Really cool!

which browser can display?

Love it!

wow this is great!

I remember seeing this run smoothly on a P2 after a very small executable download in late 90&#x27;s. How far we&#x27;ve come in a big, stupid circle back where we started.<p>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.<p>The only impressive thing about this demo is how many YCombinator readers are impressed with blinkenlights

You know...IE11 does support webgl...just saying. (I don&#x27;t think it checked...)

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.<p>most programmers can come up with a much better solution to this problem if removed from google and forbidden access to gpu gems.<p>this is at least well presented though...<p>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.<p>i&#x27;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...