Hacker News new | past | comments | ask | show | jobs | submit login
CSS 3D Clouds (clicktorelease.com)
294 points by pawannitj on Feb 9, 2013 | hide | past | favorite | 44 comments



Great demo and presentation.

This is apparently based on the WebGL clouds demo, which is equally as amazing: http://mrdoob.com/131/Clouds


As 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.


I 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 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


Have some properly-3D WebGL jellyfish to make up for it — http://chrysaora.com/


It impresses me what an effective technique it is!


I'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).


There'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


I remember them from Super Mario 64. They used sprites do give the impression of high-poly spheres: http://i.imgur.com/59T0Kqj.jpg


I 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.


Hmm, 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.


In 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).


til 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.


You nailed it. GPU acceleration was disabled, so I enabled it in about:flags and restarted and it worked.


No issue here; I'm running Chrome 24.0.1312.57 on 64 bit Linux


24.0.1312.69 on 64-bit Arch linux here. It all works super.


Chromium 24.0.1312.56 on Mint w/out an issue.


ATI?


I 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!


How 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.


I dropped PPC a few years ago and nobody has complained. Mind you this is scientific software, but it has a few thousand users around the world.


PPC? It seems that few are even supporting Snow Leopard any more.


I 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.


The N4 is the fastest phone I've ever owned. 4 cores running @ 1.7Ghz + a GPU. Stunning performance.


Amazing demos. Are there any real-world applications using something like this?


Look great but the title "CSS 3D Clouds" is not truthful.


How 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.


I think this is totally bad-ass.


Looks great -- only tweak would be to add proper depth sorting to avoid the "popping" effect (more visible with the darker textures).


If the explosion micheal bay effect happened in real time it would be sick


This is very well done. I especially love the Michael Bay option.


Awesome on chrome on Ubuntu 64-bit, buggy and slow on Firefox.


This is really awesome! Add it to twitter bootstrap for kicks!


It is simply amazing, also the speed is quite good!


It 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?


It's probably because you turned on the "box" setting. To you know, render boxes. It's the bottom setting in the Texture list.


The speed is excellent -- really smooth.


Very slow on Firefox 18.0.2, linux


Works great on my blackberry z10.


it does look pretty good. I m quite amazed such a technique is doable via css


Love the Michael Bay


speed is very good compare to WebGL


WOW


this is seriously cool.


the cloud animation could use a little bit of easing. It looks a bit choppy right now on mouse move.




Consider applying for YC's Spring batch! Applications are open till Feb 11.

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: