

CSS 3D Clouds - pawannitj
http://www.clicktorelease.com/code/css3dclouds/

======
mmastrac
Great demo and presentation.

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

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

~~~
daenz
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>

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

~~~
mistercow
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>

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

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

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

~~~
nilliams
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).

~~~
mwill
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.

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

~~~
zapdrive
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.

~~~
nrlucas
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.

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

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

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

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

~~~
mistercow
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.

~~~
johnjlocke
I think this is totally bad-ass.

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

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

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

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

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

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

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

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

------
drstewart
The speed is excellent -- really smooth.

------
darkstalker
Very slow on Firefox 18.0.2, linux

------
compilercreator
Works great on my blackberry z10.

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

------
jpinkerton88
Love the Michael Bay

------
omnitj
speed is very good compare to WebGL

------
yeonhoyoon
this is seriously cool.

------
webbruce
WOW

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

