12 ms·
Web GL Ocean Simulation
- nitrogen 13y agoI'd like to listen to the bottom edge of the simulated region played back as a waveform as the simulation progresses.
- skylervm 13y agoThis 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 13y agoIt'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 13y agoToo sad they are using "OES_texture_float" extension :( It would be more interesting to see it done with pure WebGL.
- randomdrake 13y agoThe 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.
- thearn4 13y agoGreat 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 13y 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.
- relaunched 13y agoLook into something like Octave, where matrices are first-order data types, and you'll know exactly what he means.
- Kiro 13y agoHad a look. Still think JS is fine.
- relaunched 13y agoJS is fine; in the same way that is fine to use a sandbox shovel to dig the foundation of a house. Languages are designed for a purpose, though they can be used for all sorts of things. There is a larger upfront cost to learning the right language for the right job. However, many people opt to try to fit a square peg into a round hole.
- Crito 13y agoOr look at Python/Numpy. General purpose language with a sufficiently advanced library that doing linear alg stuff becomes a very pleasant experience. Way, way, way nicer than spelling it all out like this JS code has to. Then again, I might be biased there since I've spent a decent chunk of time porting MATLAB/Octave code to Python/Numpy so that we could get it into production in a robust way..
- relaunched 13y ago
- albertzeyer 13y agoI 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_translate.py https://github.com/albertz/helpers/blob/master/wolframalpha_... Example input: http://www.wolframalpha.com/input/?i=solve+a*x_1%5E3+%2B+b*x_1%5E2+%2B+c*x_1+%2B+d+%3D+x_1%2C+3a+*+x_1%5E2+%2B+2b*x_1+%2B+c+%3D+1%2C+a*x_2%5E3+%2B+b*x_2%5E2+%2B+c*x_2+%2B+d+%3D+1%2C+3a*x_2%5E2+%2B+2b*x_2+%2B+c+%3D+0 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_player_decoding.cpp https://github.com/albertz/music-player/blob/master/ffmpeg_p... SmoothClipCalc::setX)
- omn123 13y agoIt'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 http://en.wikipedia.org/wiki/LU_decomposition
- bd 13y agoJust 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 13y 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.
- mcpherrinm 13y agoI 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 13y agoThat 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.
- exDM69 13y 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. The problem with doing this on WebGL (which is essentially GLES2) is that the internal precision of the pipeline is not required to be a full 32 bit float. There are 10 bit integers and 20 bit floating point numbers and all sorts of funny number formats in the hardware. When most scientific/numeric computation is done in 64 bit double precision, going to less than 32 bits is a problem. Of course it still could be done in WebGL, the problem is that running it on different hardware would yield different results. If this is acceptable (e.g. image processing where bit-accurate results are not required), then why not.
- nanidin 13y agoI'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 13y agobecause 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?
- chc 13y agoNobody's talking about looking at the code — the issue here is redistributing it on a platform outside of the author's control.
- ephemeralgomi 13y agovia reductio ad absurdum, do you also think it's alright to reappropriate swaths of CSS, HTML, and images from other people's web designs?
- WalterSear 13y agoThis isn't reappropriation. It's just putting something in public view in another form of public view, for better analysis.
- niels_olson 13y agoThis is close. Assuming this is all academic, then the error is lack of attribution.
- elliottcarlson 13y agoif a person didn't want his car stolen, why would he leave his car door unlocked? just because it's viewable, does not mean you are granted the rights to do whatever you want with it.
- itry 13y 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?
- bhouston 13y agoVery 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 13y agoSorry 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 13y agoReally not hard at all, actually -- depending on how realistic you'd like it, of course.
- bhouston 13y agoJust 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/waveparticles.pdf http://www.cemyuksel.com/research/waveparticles/waveparticle...
- adamwong246 13y agosheesh, all these great blogs... Mine looks like it was made by a middle schooler.
- nickthemagicman 13y agoThat is really cool. Is that some sort of fluctuating perlin noise?
- nspragmatic 13y 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 http://jsfiddle.net/bYHfh ^ removes the hasWebGLSupport() invocation. Very nice demo, though!
- Achshar 13y agoI 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 13y agoI'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 13y agoAgreed, I get the message, but your link leads to a very cool demo, on Firefox 17.
- pcmonk 13y agoAgreed. Chrome 27 on Linux, and I get that message, but the demo actually runs fine.
- dhimes 13y agoIs there a google chrome extension that allows me to modify the served javascript from the original page?
- deleted 13y ago[deleted]
- meatsock 13y agoexcellent 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
- nawitus 13y agoCrashed my browser (using Firefox 25 on Arch Linux). Maybe it would've worked, but I only waited for 25 seconds.
- dingdingdang 13y agoHonestly 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 13y agoI'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 13y agoIt could even pull weather data for wind speed and direction along with time of day for the suns position.
- kevincennis 13y agoThis 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 13y agoIt's definitely performing better than that on my 2nd gen 13" MBP on Chrome. Could it be struggling with retina?
- kcbanner 13y ago60fps in Chrome on MBP 15"
- deleted 13y ago[deleted]
- nucleardog 13y agoRunning better than that for me in Chrome on the Mid-2010 13" MBP work has me on.
- chc 13y agoI don't know how to check the FPS, but it looks perfectly smooth to me on a 2010-era 15" MBP.
- tbob22 13y ago60fps here (3.4ghz Core 2 Quad/GTX 470/Firefox/fullscreen 1920x1200). CPU usage is 9%, GPU usage is 22%.
- rikkus 13y ago20.1fps, 2008 Macbook unibody, Chrome. Not using much CPU so seems to be doing GPU stuff.
- AterCattus 13y ago60fps (old Intel HD graphics in Linux Mint).
- krelian 13y agoWhere would one start if they wanted to learn the math needed to achieve something like this?
- gaius 13y agoStart with matrices and eigenvectors and take it from there. http://en.wikipedia.org/wiki/Matrix_(mathematics) http://en.wikipedia.org/wiki/Matrix_(mathematics)
- omn123 13y agoI'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-stokes/ 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 13y agoI'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 13y agoAwesome demo, and a great way to turn your laptop into a heater. Still, performed quite well on my 15" retina mbp.
- computer 13y agoThank 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)
- brokenparser 13y agoError on line 36: An ”body” start tag seen but an element of the same type was already open.
- untog 13y agoA great demonstration on why such validation doesn't really matter at all.
- scrdhrt 13y agoReally cool!
- Impossible 13y agoReminds me of this shader toy shader. https://www.shadertoy.com/view/XdsGDB https://www.shadertoy.com/view/XdsGDB
- dualogy 13y agoYeah, 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 13y agoRedundant but I just want to say it: this is well done:)
- colszowka 13y agoHitting 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 13y agoThat's super cool!
- AsymetricCom 13y agoI 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 13y agoI'd venture that the differences these day is that there is no install step and it works on many different systems.
- AsymetricCom 13y 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.
- vectorpush 13y agoSure, 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 13y agoI already have a sandbox, it's called a computer.
- 13y ago
- jheriko 13y agocomputers 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 13y 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.
- jheriko 13y agodon'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 13y ago
- wamatt 13y agoMight 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 13y agoI have the same thing in Win and Linux.
- shobhitverma 13y agoLove it!
- circa 13y agowow this is great!
- prembharath 13y agoI 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_olson 13y agoThat may be the only wave in SoCal today. But can I surf it? :)
- izietto 13y agoVery realistic, with the foam it would be perfect
- blahbl4hblahtoo 13y agoYou know...IE11 does support webgl...just saying. (I don't think it checked...)
- Quiark 13y agoI really like the layout of the controls, it's a mix between infographics & some movie-like GUI and it works pretty well.
- rocLv 13y agowhich browser can display?
- codeplay 13y agoI 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/
- n1ghtmare_ 13y agoWow, this is awesome. After many years of experience in programming this still makes me feel like a total idiot.
- randartie 13y agoI would love to see this code fully commented!
- mahdavi 13y agolooks cool, but it's really slow.
- gulbrandr 13y agoRelevant: http://www.babylonjs.com/Scenes/Worldmonger/index.html http://www.babylonjs.com/Scenes/Worldmonger/index.html Scene with water, made with BabylonJS.
- pattle 13y agoThis is really cool