7 ms·
CSS 3D Clouds
- mmastrac 14y agoGreat demo and presentation. This is apparently based on the WebGL clouds demo, which is equally as amazing: http://mrdoob.com/131/Clouds http://mrdoob.com/131/Clouds
- endianswap 14y agoI'm impressed that not only did this run on my Android phone in the stock browser, but that it was relatively smooth (hitching infrequently but for probably 300ms when it did).
- mistercow 14y agoThere's a reason that this technique (prerendered sprites on camera-facing billboards) has been used for so many years, and continues to be used to this day. When you have an effect too intensive to be rendered in real time, prerendered billboards are a workaround that can often yield impressive results. Clouds and other pseudo-particle effects are a really common place to see them these days, but I remember first being aware of them used for the Mumbo Tokens[1] in Banjo Kazooie on the N64. [1] http://banjokazooie.wikia.com/wiki/Mumbo_Token http://banjokazooie.wikia.com/wiki/Mumbo_Token
- sovok 14y agoI remember them from Super Mario 64. They used sprites do give the impression of high-poly spheres: http://i.imgur.com/59T0Kqj.jpg http://i.imgur.com/59T0Kqj.jpg
- United857 14y agoLooks great -- only tweak would be to add proper depth sorting to avoid the "popping" effect (more visible with the darker textures).
- rwanghacker 14y agoIf the explosion micheal bay effect happened in real time it would be sick
- rolleiflex 14y agoI remember seeing this a year ago. It's awesome how smooth it has become— last time I checked, it was choppy on my machine whereas now it's butter smooth. Browsers are sure improving rapidly these days.
- rasur 14y agoI was expecting it to be a complete horror-show on my G5 mac, but it was actually really smooth (once it had settled down of course..). Really nice work. Well done!
- zapdrive 14y agoHow many G5 (or other PowerPC based Macs) are still out there, you think? I am working on an App, and debating whether to go through all the trouble to make it compatible with PPC architecture for the first release.
- camus 14y agothe cloud animation could use a little bit of easing. It looks a bit choppy right now on mouse move.
- zopticity 14y agoThis is really awesome! Add it to twitter bootstrap for kicks!
- blowski 14y agoAmazing demos. Are there any real-world applications using something like this?
- Johnyma22 14y agoLook great but the title "CSS 3D Clouds" is not truthful.
- mistercow 14y agoHow do you figure? The point is that the 3D is achieved using CSS instead of WebGL. It's not pure CSS, but it's CSS where it counts.
- johnjlocke 14y agoI think this is totally bad-ass.
- mistercow 14y agoAs beautiful as this is, it still saddens me that the best we have for efficient cloud effects is drifting camera-facing billboards displaying pre-rendered poofs.
- sprobertson 14y agoIt impresses me what an effective technique it is!
- daenz 14y agoI recently read a paper: Volumetric Clouds and Mega Particles[1]. Here's a demo of it in action: http://www.youtube.com/watch?v=3QqD26SXWDc http://www.youtube.com/watch?v=3QqD26SXWDc It looks to be somewhat better than billboards and cheap as well, though it does have some drawbacks. [1] http://www.inframez.com/events_volclouds_slide18.htm http://www.inframez.com/events_volclouds_slide18.htm
- nwh 14y agoHave some properly-3D WebGL jellyfish to make up for it — http://chrysaora.com/ http://chrysaora.com/
- compilercreator 14y agoWorks great on my blackberry z10.
- PhilipA 14y agoIt is simply amazing, also the speed is quite good!
- jpinkerton88 14y agoLove the Michael Bay
- shmageggy 14y agoHmm, on Chrome 24.0.1312.69 on 64 bit Linux the depth effect is missing. When rotated, it looks like a picture of a cloud painted on an invisible wall. No problem in Firefox.
- samkline 14y agoNo issue here; I'm running Chrome 24.0.1312.57 on 64 bit Linux
- exch 14y ago24.0.1312.69 on 64-bit Arch linux here. It all works super.
- kingfishr 14y agoATI?
- nrlucas 14y agoChromium 24.0.1312.56 on Mint w/out an issue.
- nilliams 14y agoIn Chrome type about:gpu in your URL bar, might give you some clues. (Then check out about:flags to see if there are any relevant options you can change).
- mwill 14y agotil of about:gpu, if you haven't seen it, and you're using chrome, take a quick look. Some of the problems listed for my machine have the relevant issue number next to them. Granted some of them are behind a 403 for me, but it's still an interesting reporting page to me.
- shmageggy 14y agoYou nailed it. GPU acceleration was disabled, so I enabled it in about:flags and restarted and it worked.
- jstalin 14y agoAwesome on chrome on Ubuntu 64-bit, buggy and slow on Firefox.
- drstewart 14y agoThe speed is excellent -- really smooth.
- iwaffles 14y agoThis is very well done. I especially love the Michael Bay option.
- webbruce 14y agoWOW
- chii 14y agoit does look pretty good. I m quite amazed such a technique is doable via css
- chewxy 14y agoI like how Michael Bay was an option. Also very surprised it works so well on my Nexus 4. Touch screen rotation is a bit weird tho, but wow.. no lag.
- kordless 14y agoThe N4 is the fastest phone I've ever owned. 4 cores running @ 1.7Ghz + a GPU. Stunning performance.
- alexsb92 14y agoIt seems that if I get all the options to "a lot" I get at least one or two clouds replaced by a white box icon. I imagine it's not loading them properly?
- HeyItsJames 14y agoIt's probably because you turned on the "box" setting. To you know, render boxes. It's the bottom setting in the Texture list.
- darkstalker 14y agoVery slow on Firefox 18.0.2, linux
- omnitj 14y agospeed is very good compare to WebGL
- yeonhoyoon 14y agothis is seriously cool.