CSS3D Clouds | Hacker News Reader

CSS3D Clouds

spite.github.io

169 pointsthunderbong14 comments

Previously... from 2012!

CSS 3D Clouds https://news.ycombinator.com/item?id=5193053 (February 9, 2013 — 294 points, 44 comments)

CSS 3D Clouds https://news.ycombinator.com/item?id=3744761 (March 23, 2012 — 17 points, 1 comments)

What a throwback. Somebody asking whether another used ATI graphics. Another person asking whether they should support PPC Macs.

It's just slowly rotating billboards with cloud textures. Effective, but more of an animation illusion than anything approaching any type of cloud simulation.

both sites are owned by the original author "spite"

the web was such a mess back then trying to evolve to where we are today, so many great techniques got lost in the process

Since this is a collection of 2D sprites in 3D space, we could call it "2.5D".

The rotation of the sprites really breaks the effect, though. Then again, having them still would probably be worse. What if the rotation for each sprite was random?

Works surprisingly well for the plain white cloud case, I guess that's the only one where additive blending works correctly. The other all have pretty glaring z-sorting issues. Still, impressive in plain CSS.

Apart from the obvious z-popping, looks quite good.

It might be possible to reduce that effect by applying a mix-blend-mode to the layers.

I giggled at the “Michael Bay” setting :)

These look like watercolor. You can tell they're not realistic but they have a nice design on their own.

Slightly disappointed when I saw the png files in the repo as I was hoping to see some cool Math function to generate the clouds

If you want cool math generating clouds on the web your best bet is WebGL:

https://www.shadertoy.com/view/XslGRr

https://www.shadertoy.com/view/3l23Rh

From the author of threejs, an awesome webgl library:

https://mrdoob.com/#/131/clouds

Reply on news.ycombinator.com