6 ms·
WebGL Water Simulation
- T_S_ 15y agoVery nice. I would like to see somebody do a cannonball now.
- nmeyer 15y agoYou can get close by turning on gravity by pressing 'G', then dragging the ball into the air and dropping it. Unfortunately can't get it to splash since it's just a height-field simulation.
- rvanniekerk 15y agoI have to say, the most impressive part about this is the fact that my macbook doesn't even rev up like a jet engine like it would if I was..say...watching a flash video. Awesome.
- makmanalp 15y agoOh, the joys of running a task that is suitable for a GPU ... on a GPU!
- ch0wn 15y agoAlso, the demo uses requestAnimationFrame and thus rendering is paused if the tab is in the background.
- acgourley 15y agoruns at 1 FPS on my older gen MBP
- nitrogen 15y agoMaybe you have a graphics driver that's been black listed, so you're falling back to software? Try Googling for steps to override the WebGL driver blacklist in Firefox and Chrome (probably a command-line flag, about:flags, or about:config setting).
- nkassis 15y agostart chrome with --ignore-gpu-blacklist WARNING: could crash your machine ;p
- conradev 15y agoMy new i7 MBA starts revving up when I open that in Safari.
- culturestate 15y agoMine as well. 8GB RAM and SSD.
- listic 15y agoBecause Apple returned to back to Intel from the "real" 3D chips in latest Airs?
- culturestate 15y agoAh, ignore that, I misread the poster above me. I'm on an i7 MBP, not an MBA.
- conradev 15y agoYeah, I think so. I see ~30% CPU usage from it.
- chaosmachine 15y agoDon't forget to press "G".
- aculver 15y agoWow. That needs to be enabled by default.
- hmottestad 15y agoI guess this is going to be the next race for browser compatibility. So far I've tried Firefox, Safari and Chrome all on OS X Lion, I'm hoping a newer version of Chrome will work, if not I guess this is all still mostly academics.
- celoyd 15y agoI’m on Lion and vanilla Chrome works for me. Safari also works if I turn on the Develop menu (in the Advanced tab of the preferences) and use it to turn on WebGL.
- hmottestad 15y agoYep, newest version of chrome does work. Which is also the only browser that does. It uses about 40% of a i5 dual core cpu in the Macbook Pro 15" mid 2010.
- dhimes 15y agoGot the latest stable for ubuntu 32 bit and it doesn't work.
- demetris 15y agoNot all combinations of hardware and drivers work yet. See: http://www.khronos.org/webgl/wiki/BlacklistsAndWhitelists http://www.khronos.org/webgl/wiki/BlacklistsAndWhitelists
- chc 15y agoI'm on a relatively ancient non-unibody MBP with a Penryn Core 2 Duo, 512 MB GeForce 8600M GT and Snow Leopard and it works on vanilla Chrome for me as well. And it uses 30%–40% here too — interesting since the i5 benches a lot better.
- joelhaasnoot 15y agoDoesn't seem to work here however on the Dev branch (15.0.849.0). Not that that's surprising: random stuff breaks regularly, and there's no way to go back...
- vmind 15y agoAnd here I am trying to get a bunch of 2d lines rendering quickly in a 2d canvas for some charts. So strange to me that something 'simple' like drawing 20,000 lines chugs along at ~20fps and a water simulation with caustics is there running at 30fps just fine. Goes to show how much you gain from a GPU if you're using it for something it's designed to do.
- modeless 15y agoWebGL would draw your 20,000 lines much faster. It's not just for 3D; charting would be a perfectly reasonable use for WebGL.
- vmind 15y agoUnfortunately it's a lot of smaller charts and they're embedded in an SVG based diagram interface as foreignObjects, which doesn't support a WebGL context (in Chrome at least). I'd love to play with WebGL, but not usable for this task. Writing the whole interface in a WebGL canvas could be really fun, but far too much work for an MVP, and would kind of mess with making it work on iPad etc.
- AshleysBrain 15y agoAt this rate, you'd get an awful lot of people who can't see your chart if you did it in WebGL!
- hiker 15y agoI agree for mobile web apps. For PC, tell them to switch away from IE. If you're making high-end graphics, your users need a high-end browser.
- andrewljohnson 15y agoGetting lots of 2D lines to render on a chart fast is fairl;y easy with Google Maps and KML. It uses Douglas Peuker simplification.
- benmccann 15y agoThis didn't work for me in Chrome 14 or FireFox 5. What the hell browser does this work in?
- joeyespo 15y agoSame here. Anybody have a YouTube demo we can all watch?
- AshleysBrain 15y agoSeconding a call for a YouTube video. On Chrome 13, Windows 7, with a nVidia GeForce Go 7600 with the latest driver and OpenGL 2.1.2, and I get the error: Vertex shader sampler count exceeds MAX_VERTEX_TEXTURE_IMAGE_UNITS (0). You might laugh at my hardware, but from my own OpenGL work I know the majority of users out there have crappy old chips or god-awful Intel graphics chips which the vendors can't be bothered to support any more with decent drivers that support the latest OpenGL features. Most people don't surf with a gaming grade GPU. If WebGL is this fussy about hardware, it could severely limit its uptake.
- palish 15y agoHardware compatibility is the least of WebGL's problems. Right now there's essentially zero chance of WebGL powering any modern graphics engine. It unfortunately seems doomed to a life of "hey-look-at-my-cool-effect". (Which is neat, don't get me wrong. But it will never reach Doom 3 quality, and that's a tragedy IMO.) Example: WebGL doesn't even support compressed textures. The spec actually mandates "We will not support compressed textures, and this is by design". Facepalm...
- AshleysBrain 15y agoThe least of WebGL's problems? Failing to run at all with no fallback isn't a big problem? :P Why is texture compression so badly necessary? Aren't downloaded PNG or JPEG files that you upload to the GPU uncompressed "good enough"? I don't think anyone's asking for COD5 to be in WebGL.
- eraemaajaervi 15y agoI'm getting the "This demo requires OES_texture_float extension" error. Strangely, in the conformance test (https://cvs.khronos.org/svn/repos/registry/trunk/public/webgl/sdk/tests/webgl-conformance-tests.html https://cvs.khronos.org/svn/repos/registry/trunk/public/webg...) OES_texture_float passes without error. using latest chromium dev build on latest ubuntu 32bit. same error in firefox 5.
- dman 15y agoWhich graphics card?
- eraemaajaervi 15y agointegrated Intel GMA X4500 it's not a super expensive card, but also not really old. lspci gives me VGA compatible controller: Intel Corporation Mobile 4 Series Chipset Integrated Graphics Controller (rev 07) (prog-if 00 [VGA controller])
- Vivtek 15y agoWaves don't reflect off the sphere - they just pass right through it. Mind-bogglingly beautifully, of course.
- Andrex 15y agoDoesn't work for me on Chrome 13 (Stable) or 15 (Canary) on Windows 7. Both throw up an "implicit truncation of vector type" error.
- hacketyhack 15y agoI'm running Chrome "13.0.782.112 m" on Windows 7 and it's working just fine.
- Andrex 15y agoAh, in that case it might be my GPU: ATI Radeon X1550
- dagw 15y agoWorks just fine for me with Chrome 13 and Windows 7
- jamesaguilar 15y agoSomething really interesting happens if you move the ball to the surface, let the water become calm, then move the ball horizontally along the surface.
- gcb 15y agowow. this logged me off my X session on ubuntu 10.10 stable and chrome 13.0.782.112
- talicni_tom 15y agoAnd they call it stable?
- vimalg2 15y agoSurface tension seems to be modeled too. Try violently lifting the ball out of placid water. The water 'sticks' to the ball for a while.
- AndrewMoffat 15y agothat's just the initial surface disturbance. it starts at the center of where the sphere breaches the water and has an amplitude. the disturbance radiates outward from that center, but there's no "sticking" to other meshes happening
- vimalg2 15y agoI knew there was something not entirely right with my statement. Thanks for pointing out what.
- AndrewMoffat 15y agothis is the algorithm that governs the surface waves. it's remarkably simple and well suited to the parallel computing that shaders can offer: http://freespace.virgin.net/hugo.elias/graphics/x_water.htm http://freespace.virgin.net/hugo.elias/graphics/x_water.htm
- dendory 15y agoAnother HN item that can only been seen by those using Google Chrome. When will it stop? Are we really so dumb and foolish to go right back to the "Works only in IE6" days? WHY is it that because it's Chrome and not IE6, that makes it alright?
- doctoboggan 15y agoIt works in Safari as well. You have to enable webgl in the developer menu first though
- agildehaus 15y agoChrome isn't the only browser that works: - Safari 5.1 (released with Lion) works if you enable WebGL in the developer menu. - Firefox 6.0 works with this demo. 5.0 tells me a feature is missing. - Opera's WebGL preview build fails in the exact same way as Firefox 5.0, which indicates to me that a newer build might work. WebGL is an emerging standard supported by FOUR major browser vendors (Google, Apple, Opera, Mozilla). Microsoft is the only one not currently adopting. It's a continuation of them doing their own thing without a care about inter-operability. Silverlight 5 implements GPU-accelerated 3D so Microsoft likely considers WebGL to be a competing product.
- barrkel 15y agoMicrosoft considers the security implications of open-ended access (relatively) to be insecure, and the crashes other users are reporting on this article right here prove them right, for now. GPU drivers have never before been considered attack surfaces requiring hardening against malicious attackers. Stand by for the first major attack using this vector.
- jxcole 15y agoWhen I bought my computer I didn't think graphics were important. Now I wish I had spent some money on a good graphics card. I might have to buy one so I can develop stuff like this. For those who are interested, if you have a laptop with an intel based graphics card, you are probably using something called Mesa. After researching for a long time, Mesa is some sort of a graphics driver that works on Linux. Apparently, if you have Mesa 7.10+ and Firefox 6 webgl works, though I haven't figured out how to upgrade Mesa. The default on Ubuntu 10.04 is 7.4 or something like that. Apparently, Mesa is pretty buggy and can crash a lot. If anyone has more info about this subject, I would appreciate it.
- oomkiller 15y agoMesa is a software 3D driver. It uses the CPU instead of your GPU. I've never had an intel igp on Linux, but it should probably be using intel drivers for 3d, not Mesa.
- thristian 15y agoMesa was originally a pure-software implementation of OpenGL (with the trademarks filed off), but since it was the only complete, open-source GL stack, a lot of open-source hardware drivers re-use parts of it, including the official Intel graphics drivers. To the grandparent poster: Like any system component, the best way to upgrade Mesa is to upgrade your OS. Sadly, the latest version of Ubuntu is 11.04, which comes with Mesa 7.10.2, and Firefox blacklists every version of Mesa before 7.10.3, so you'll probably have to wait for 11.10 (or just force-enable webgl).
- oomkiller 15y agoThanks for the extra info. I wasn't aware that hardware drivers used it, I just remember back in the day Mesa meant no Soldier of Fortune demo and Beryl :)
- kpozin 15y agoWarning: this demo crashed my integrated graphics driver about 15 seconds in. YMMV.
- mtogo 15y agoHrm, the site says that latest versions of both Firefox (Stable & Aurora) and Opera, and Chromium 6 don't support WebGL. Is there any browser this is supposed to work in?
- istvanp 15y agoIt works in Aurora [1] but the FPS is really much lower than what I get in Chrome where it's completely smooth. [1] http://www.mozilla.com/en-US/firefox/channel/ http://www.mozilla.com/en-US/firefox/channel/ Edit: I have version 13 of Chrome and version 7.0a2 (2011-08-10) of Aurora.
- tom9729 15y agoWorks great in Chrome 13 on mac.
- becomevocal 15y agoEventually we'll want more from our standard, flat websites. WebGL is part of that. Not every site of course, but with the inevitable increases in processing power that come in the future so will our desire to be inventive with it. Keep in mind we're entering a post-PC era. Our mobile and tablets already include (a bit) of GPU acceleration for certain CSS transitions. This is where WebGL will shine, in my opinion.
- fuzzythinker 15y agoDon't forget to check out all his other impressive works! http://madebyevan.com/ http://madebyevan.com/
- ajross 15y agoDoesn't work on Intel graphics (at least under linux with F15-era drivers). "This demo requires OES_texture_float extension." Float textures are pretty bleeding edge even for fancy GPUs.