12 ms·
WebGL Water
- ntaso 13y agoThis is incredible. Only nitpick: If you dump the ball slowly, it gets a weird water spike on top of it and the water surface looks like some gel, not like water. If you pull it out, the ball should be wet. That'd be awesome :D
- j79 13y agoIn addition to the water spike, I think the lack of a "splash" when the water hits the surface makes it feel off. I wonder how feasible it is to get this part of the fluid mechanics right, without the whole thing just crashing and burning or all janked up...
- xk0der 13y agoAmazing! Given this is (at least) two years old: http://www.reddit.com/r/gaming/comments/jjqlc/webgl_water_demo_wicked_raytracing_reflections/ http://www.reddit.com/r/gaming/comments/jjqlc/webgl_water_de...
- 109876 13y agoShould this work on mobile? I'm not having any luck on my iPhone 5.
- yzmtf2008 13y agoWebGL is not supported by any mobile browser yet (http://caniuse.com/webgl http://caniuse.com/webgl) (edit: it seems that Blackberry Browser and Opera Mobile support WebGL. My bad, but it is not possible to use these browsers on iOS)
- pcwalton 13y agoFirefox for Android and Chrome for Android support it, according to that table (unless your driver is blacklisted).
- SnowProblem 13y agoRumors are IE on Windows Phone 8.1 will too. [1] [1] http://www.zdnet.com/windows-phone-8-1-the-latest-on-whats-on-the-leaked-feature-list-7000026208/ http://www.zdnet.com/windows-phone-8-1-the-latest-on-whats-o...
- kbrosnan 13y agoCanIuse is incorrect. Firefox on Android has supported it for years. Chrome added support recently. That being said it is easy to OOM mobile browsers with textures.
- abdulqabiz 13y agoDoesn't work for me in Mobile Safari or Chrome on iOS.
- yzmtf2008 13y agoChrome in iOS is just using UIWebView to render the webpage, so it is still Mobile Safari, only with the services provided by Google.
- 650REDHAIR 13y agoBlackberry has been pretty active in the WebGL community. I was actually surprised and impressed with the performance the first time I saw a demo on the Playbook!
- pyalot2 13y agoIf you can read caniuse's table, you'll see that WebGL's actually supported on mobiles. You can get a more quantitative view from http://webglstats.com/ http://webglstats.com/ if you'd like.
- CmonDev 13y agoWebGL is a browser-specific technology - just like NaCl.
- frik 13y agoWebGL works in all browsers on desktop and on most smartphones/tablets - except on iOS platform (Safari, Chrome) as Apple has disabled the support [1]. I wish Apple would activate WebGL on iOS... [1] http://en.wikipedia.org/wiki/WebGL http://en.wikipedia.org/wiki/WebGL
- yzmtf2008 13y agoThis is really cool, I didn't expect it to be running smoothly (at least not laggy) on the embedded graphic card of i7 640M ;P
- higherpurpose 13y agoIt ran fine on my Intel HD 3000, which I think is ~3x slower than your card.
- thrill 13y agoMy aging Samsung Series 9 has that also, and it worked remarkably well on it.
- k-mcgrady 13y agoNot working for me in Safari 7.0.1 - just says loading. Edit: Tips below on enabling WebGL fixed it.
- acomjean 13y agoWorking in Safari 5.1.10. Make sure "enable web gl" is checked off in the "Develop" drop down menu
- double051 13y agoApple still doesn't have WebGL turned on by default in Safari. You can turn it on by showing the 'Develop' menu (Preferences -> Advanced -> Show Develop menu), and checking the 'Enable WebGL' option inside. Should start working after a refresh.
- TazeTSchnitzel 13y agoStill just as cool years on.
- petercooper 13y agoI had to look up the first time this hit HN and it was #1 for the day on HN 919 days ago! :-) Quite a few comments too: https://news.ycombinator.com/item?id=2884141 https://news.ycombinator.com/item?id=2884141
- mnml_ 13y agoOld but still cool
- nobodysfool 13y agoAnd now it's offline, looks like we used up all his money.
- rdtsc 13y agoWhat is the future of WebGL? I have seen cool demos but is this the way forward. So one has a game to develop or a complicated visualization, is it worth investing time in learning WebGL or try to use Canvas directly.
- petercooper 13y agoWebGL is essentially a specialized OpenGL-ES based context of canvas. HTML5 canvas in its usual context is only for 2D. You can render 3D on it but you'll essentially be creating your own software rendering engine from scratch.
- rdtsc 13y agoSo then my question is what is the future of WebGL? I could see canvas extended to have 3D operations. Like say draw point takes 3 coordinates now. I can see a third party library that does 3D but projects it down to 2D and uses regular 2D commands on the canvas, or I see supporting WebGL interface and writing OpenGL style code.
- etherealG 13y agoI think the suggestions of using a lib to get higher level stuff are good ones. For simple enough stuff, d3, or more complex whole game engines are available.
- _greim_ 13y ago> I could see canvas extended to have 3D operations. Like say draw point takes 3 coordinates now. I think that's the role WebGL essentially fulfills. It was just done in a way that uses OpenGL instead of reinventing the wheel, since a 3D rendering engine is a non-trivial thing to build. In other words, you can do either: var ctx = myCanvas.getContext('2d'); // ctx has the 2d api var ctx = myCanvas.getContext('webgl'); // ctx has the webgl 3d api > I can see a third party library that does 3D but projects it down to 2D and uses regular 2D commands on the canvas. I think it would be a lot slower. Either way there's a 3D rendering engine. Embedding the engine natively and having GPU speedups is a dominating factor. > or I see supporting WebGL interface and writing OpenGL style code. See first point above.
- jztein 13y agoCan anybody explain how this works? And since this is old, what is state-of-the-art today?
- constexpr 13y agoAuthor here. The water effect is a simple 2D heightfield simulation, which is explained pretty well at http://www.matthiasmueller.info/talks/GDC2008.pdf http://www.matthiasmueller.info/talks/GDC2008.pdf. It essentially just moves each vertex toward the average height of its neighbors, which turns out to propagate waves that look like water ripples. The caustics are also pretty simple. Basically you take your heightfield mesh that represents the water surface and project each vertex independently along the ray refracted from the light through that vertex (using the vertex normal) and onto the pool floor. So you now have a mesh that is completely on the pool floor and contains lots of tiny triangles. To render caustics, just make triangles that got smaller brighter and ones that got bigger dimmer. I think I used the ratio of the projected area to the original resting area. The reflection and refraction raytracing is all hard-coded for the geometry in the scene, which makes it really easy. It's just a simple sphere and box intersection test. The "ambient occlusion" is done by making parts of the objects darker when they get near each other. State of the art for real-time water uses a full 3D volumetric representation for the water like in this paper: http://www.matthiasmueller.info/publications/tallcells.pdf http://www.matthiasmueller.info/publications/tallcells.pdf. This lets you get waves that can fold over themselves like real waves. I haven't seen any other realtime methods that have caustics as good as the ones in my demo though.
- Florin_Andrei 13y ago> It essentially just moves each vertex toward the average height of its neighbors, which turns out to propagate waves that look like water ripples. If you look at the equations that govern the liquid surface, the assumptions that this model is based on are not that bad. Reality is a bit more complex, but the average-of-neighbors seems like a good start. Pretty simple too, which is always good computationally. > The reflection and refraction raytracing is all hard-coded for the geometry in the scene, which makes it really easy. Which reminds me... Back in the days of 386 CPUs, I did a real-time 3D ray-tracer that drew a few spheres rotating around each other, with a fixed light source, and correct illumination depending on incidence angle at any point on the spheres. All on a 30 MHz 386 CPU, nothing pre-rendered, no assembly code, no GPU, running at high frame rate. Bricks where shat when people saw it. The reality was that the math was highly optimized for that specific scene. I massaged the equations until I worked out of them all the expensive functions. No sin() or cos(). I think the worst thing I had was a sqrt(), and even that was used sparingly. > The "ambient occlusion" is done by making parts of the objects darker when they get near each other. You're basically modelling Le Sage's theory of gravitation, with surface illumination representing "pressure" from the "corpuscles". http://en.wikipedia.org/wiki/Le_Sage%27s_theory_of_gravitation http://en.wikipedia.org/wiki/Le_Sage%27s_theory_of_gravitati...
- 72deluxe 13y agoOpenGL shaders are wonderful. The compute shaders in OpenGL 4.3 (?) onwards look to be useful; not sure what for, but useful nonetheless! Let's all bully Apple into supporting something over OpenGL 4.1.
- TazeTSchnitzel 13y agoDon't need 3.3 necessarily, if they implement it as an extension.
- danteembermage 13y agoI tried to dig into the source to see, but can anyone tell what algorithm they are using to propagate the ripples? Normally this would be a Finite Difference Time Domain http://en.wikipedia.org/wiki/Finite-difference_time-domain_method http://en.wikipedia.org/wiki/Finite-difference_time-domain_m... but I'm wondering if they didn't just use growing circles and a sine wave.
- jarrett 13y agoSimple OpenGL question: Can the refractions/caustics be computed entirely in the shaders? Or do you have to do some of the processing in the CPU* and pass the results back to the shaders? All the shaders I've seen are "local," in the sense that they only have access to the interpolated vertex data for their polygon, plus whatever uniforms have been set. It seems to me that things like caustics would require non-local information. Is that non-local information passed via a uniform? If so, I wonder what the data format of that uniform is. * I know that shaders aren't guaranteed to execute on the GPU, depending on the OpenGL implementation. But for simplicity let's just assume they do.
- ajross 13y agoThe last caustics implementation I looked at (not this one) did the refraction stuff per-pixel in shaders based on a CPU-computed mesh deformation. The more general answer to your question is that in fragment shaders, you can get "non-locality" via texture lookups inside the shader code.
- jarrett 13y ago> you can get "non-locality" via texture lookups inside the shader code. So you define a way to encode arbitrary non-local data as texture data, correct? That is, you're hacking textures as a store for arbitrary data instead of the image data that textures were originally designed to store?
- ramidarigaz 13y agoYep, exactly. There are a number of techniques that take advantage of this. Most notable are bump mapping and normal mapping.
- constexpr 13y agoAuthor here. The caustics in this demo are computed entirely on the GPU and are approximated with a mesh. The shader for the caustics needs the ratio of the projected area to the original area for each triangle to compute the brightness. You're right that a vertex shader can't access whole triangles (you usually use a geometry shader for that, which WebGL doesn't have) but you can still get the ratio of the triangle areas in this case by using the screen-space derivative functions dFdx() and dFdy() in the fragment shader. Reflections and refractions can also be done in entirely in the fragment shader for simple scenes like this one with standard raytracing intersection tests.
- nichochar 13y agoSo awesome
- JonnieCache 13y agoYou can pull the sphere up out of the water and make big waves. Fun stuff.
- double051 13y agoSome people are mentioning that this doesn't work on iOS, and that's because Apple doesn't have WebGL available in mobile versions of Safari. But it is. This post by Nathan de Vries [0] shows how you can hack the UIWebView to enable WebGL contexts in your iOS apps. You have to get a little more creative these days (the compiler has gotten stricter about private types and functions), but all it takes is something like this: -(void)setWebGLEnabled:(BOOL)enableWebGL forWebView:(UIWebView *)uiWebView { id webDocumentView = [uiWebView performSelector:@selector(_browserView)]; id backingWebView = [webDocumentView performSelector:@selector(webView)]; [backingWebView performSelector:@selector(_setWebGLEnabled:) withObject:[NSNumber numberWithBool:enableWebGL]]; } It should go without saying that code like this will not make it into the app store. [0] http://atnan.com/blog/2011/11/03/enabling-and-using-webgl-on-ios http://atnan.com/blog/2011/11/03/enabling-and-using-webgl-on...
- q3k 13y agoWhy the hell would Apple disable WebGL by default, if they went through the trouble of somehow getting it working in the first place..? Incredible.
- kcbanner 13y agoProbably security concerns. Graphics drivers have not been audited for security in the past because they were not accessible via the web.
- gisenberg 13y agoWebGL is enabled for ads published through iAd, but disabled for anything else.
- Florin_Andrei 13y agoWow. That's disgusting.
- untog 13y ago
- dubcanada 13y agoSome of the interfacing with the sphere is a little off, like if you drag it in and out of the water rapidly it does nothing. And if you slowly drag it out, the water clings to it a little too long. But besides that it is very nice.
- designium 13y agoThat's amazing!
- scott_karana 13y agoThe title should be updated to reflect that this is from 2011: all the more impressive! (http://www.youtube.com/watch?v=R0O_9bp3EKQ http://www.youtube.com/watch?v=R0O_9bp3EKQ)
- agumonkey 13y agothanks for this link, my gpu-less 2006 laptop had no chance to run the demo by itself (the video is almost borderline laggy ..)
- constexpr 13y agoAuthor here. I've done much more awesome stuff with WebGL since I made this demo but it's for my startup and is not public yet. We're actually looking for a backend engineer with graphics experience at the moment. Send me an email at evan@figma.com if you're interested.
- networked 13y agoI really liked your demo and I'd like to see what your WebGL startup will do. Is http://figma.com/ http://figma.com/ the right place to sign up to be notified when it launches? Edit: You might want to add some more visual feedback (e.g., blanking the email input field or hiding it) when you enter your email successfully on the front page of figma.com. I had to launch Firebug to make sure it accepted my email with a 200 OK because that check mark icon appearing briefly while the email field's contents stayed the same seemed suspiciously like a silent request failure.
- Justin_Time 13y agoEvan and his startup are doing some incredible things. I highly encourage experts in computer graphics to chat with him.
- frik 13y agoIt would be great if Apple would activate WebGL on iOS! Officially only available through iAd on iOS 4.2 and higher, for all devices except for 2nd Gen iPod Touch or iPhone 3G and earlier. However, there is a tweak for jailbroken devices to enable functionality for Mobile Safari and all other WebKit browsers. http://en.wikipedia.org/wiki/WebGL http://en.wikipedia.org/wiki/WebGL Today, even Microsoft supports WebGL with IE 11, so hopefully Apple activates it with iOS8...
- pavlov 13y agoIf you'd asked me three years ago, I never would have guessed it would turn out like this. We have Internet Explorer supporting WebGL on ARM-based Windows tablets manufactured by Microsoft itself, yet the iPad still lacks WebGL. It's like bizarro world. One gets the impression that Apple feels WebGL is perhaps too much power in a cross-platform package. If you need to do 3D-accelerated GUIs or games on iOS today, you build an Objective-C app for the App Store because there's no other way to access those APIs. Is Apple protecting their lock-in?
- grinich 13y agoThe bigger thing is the payments infrastructure. There's no easy way to monetize a WebGL game.
- MarkHarmon 13y agoNot true. You could have an online WebGL game that requires an account and dynamic server provided data to run. The account would cost money. EDIT: Added last sentence.
- teraflop 13y agoTo elaborate: there's no easy way for Apple to monetize a WebGL game.
- grinich 13y agoCompared to using Store Kit, this is super complicated to build and manage. The App Store also provides marketing, which is huge. Where is the public listing of WebGL games that you can quickly browse and start playing?
- davexunit 13y agoReally cool! Is there a better place to store GLSL shaders than in string literals?
- pheelicks 13y agoI load them in as separate files. See here for details: http://www.pheelicks.com/2014/02/working-better-with-glsl-source-files/ http://www.pheelicks.com/2014/02/working-better-with-glsl-so...
- Yuioup 13y agoOldie but goodie.
- aceperry 13y agoThis is just _awesome_.
- Jeremy1026 13y agoThe level of awesome is through the roof on this one. Well done.
- Jeremy1026 13y agoThe level of awesome is through the roof on this one. Well done.
- elwell 13y agoThis is what HN is for! Not articles about Steve Jobs threatening Palm execs. Also, don't forget to press 'g'.
- jebblue 13y agoVery nice, I don't have the talent to do stuff like this, really amazing to see incredible 3D work and fun being done in the browser.
- trekky1700 13y agoIt's amazing the performance difference with WebGL on Chrome vs Firefox. It lagged to like 5-10 fps with Chrome, but am getting 60+ it seems with Firefox.
- MWil 13y agowhat's an easy way to show fps in Firefox?
- wildpeaks 13y agoIs it the same version as the one from 2011 or was it updated recently ? Because it's a [very cool but] old demo, yet it's popping up in every feed in the past days.
- namelezz 13y agoThis should be called "WebGL Water Surface" moving the ball under the water or hitting the ball against the wall has no affects on the water.
- jheriko 13y agoseen a lot of these, but this is actually interesting for a change... not just a copy of something we did 15 years ago on ancient hardware. the simulation using renderbuffers and float textures is cool - although the method used is ancient unexciting technology (see the water effect in winamp avs which uses the same trick in software 15 years ago) it makes sense from the webdev perspective of 'javascript is damned slow' - infact probably far too slow to do even attempt to do this CPU side. the caustics are much more interesting though - firstly because i didn't know the trick already or re-invent it during my career or even know about the OpenGL ES extension that makes it practical (which is very very old on Desktop and very generally useful). its always cool to see some raytracing logic applied with some cleverness applied to get some more mileage out of it at real time...
- axilmar 13y agoIt's so nice you immediately want to go pool diving.