TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Web GL Ocean Simulation

695 pointsby clukicover 11 years ago

39 comments

randomdrakeover 11 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.<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.
评论 #6803267 未加载
评论 #6802985 未加载
评论 #6803282 未加载
评论 #6802828 未加载
评论 #6803292 未加载
nspragmaticover 11 years ago
&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!
评论 #6802930 未加载
评论 #6803333 未加载
评论 #6804425 未加载
评论 #6806942 未加载
评论 #6803015 未加载
computerover 11 years ago
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>)
dingdingdangover 11 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&#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.
评论 #6803094 未加载
评论 #6803142 未加载
bhoustonover 11 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.<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>
alan_cxover 11 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?
评论 #6802888 未加载
评论 #6802851 未加载
Impossibleover 11 years ago
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>
评论 #6806850 未加载
wamattover 11 years ago
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
评论 #6807270 未加载
krelianover 11 years ago
Where would one start if they wanted to learn the math needed to achieve something like this?
评论 #6804527 未加载
评论 #6807167 未加载
评论 #6803753 未加载
skylervmover 11 years ago
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
评论 #6804142 未加载
Quiarkover 11 years ago
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.
评论 #6807369 未加载
iguanaover 11 years ago
Awesome demo, and a great way to turn your laptop into a heater. Still, performed quite well on my 15&quot; retina mbp.
codeplayover 11 years ago
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>
kevincennisover 11 years ago
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.
评论 #6803435 未加载
评论 #6803089 未加载
评论 #6804681 未加载
评论 #6804959 未加载
评论 #6803339 未加载
评论 #6803248 未加载
评论 #6807253 未加载
gulbrandrover 11 years ago
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.
colszowkaover 11 years ago
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.
prembharathover 11 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.
IvanK_netover 11 years ago
Too sad they are using &quot;OES_texture_float&quot; extension :( It would be more interesting to see it done with pure WebGL.
nitrogenover 11 years ago
I&#x27;d like to listen to the bottom edge of the simulated region played back as a waveform as the simulation progresses.
nawitusover 11 years ago
Crashed my browser (using Firefox 25 on Arch Linux). Maybe it would&#x27;ve worked, but I only waited for 25 seconds.
n1ghtmare_over 11 years ago
Wow, this is awesome. After many years of experience in programming this still makes me feel like a total idiot.
meatsockover 11 years ago
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>
brokenparserover 11 years ago
Error on line 36: An ”body” start tag seen but an element of the same type was already open.
评论 #6803179 未加载
nickthemagicmanover 11 years ago
That is really cool.<p>Is that some sort of fluctuating perlin noise?
niels_olsonover 11 years ago
That may be the only wave in SoCal today. But can I surf it? :)
zobzuover 11 years ago
Redundant but I just want to say it: this is well done:)
iziettoover 11 years ago
Very realistic, with the foam it would be perfect
randartieover 11 years ago
I would love to see this code fully commented!
adamwong246over 11 years ago
sheesh, all these great blogs... Mine looks like it was made by a middle schooler.
julien421over 11 years ago
That&#x27;s super cool!
pattleover 11 years ago
This is really cool
mahdaviover 11 years ago
looks cool, but it&#x27;s really slow.
scrdhrtover 11 years ago
Really cool!
rocLvover 11 years ago
which browser can display?
shobhitvermaover 11 years ago
Love it!
circaover 11 years ago
wow this is great!
AsymetricComover 11 years ago
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
评论 #6805269 未加载
评论 #6803883 未加载
评论 #6804189 未加载
blahbl4hblahtooover 11 years ago
You know...IE11 does support webgl...just saying. (I don&#x27;t think it checked...)
jherikoover 11 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.<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...
评论 #6804395 未加载
评论 #6807781 未加载