CSS3D Clouds

https://spite.github.io/CSS3DClouds/

by thunderbong • 3 years ago

169 14 3 years ago

spite.github.io

armchairhacker• 3 years ago

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

latchkey• 3 years ago

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)

throwaway0665• 3 years ago

both sites are owned by the original author "spite"

robinson7d• 3 years ago

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

yieldcrv• 3 years ago

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

bsenftner• 3 years ago

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

nnevatie• 3 years ago

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

onion2k• 3 years ago

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

kaptainscarlet• 3 years ago

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

modeless• 3 years ago

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

esquevin• 3 years ago

From the author of threejs, an awesome webgl library:

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

rcarmo• 3 years ago

I giggled at the “Michael Bay” setting :)

swiftcoder• 3 years ago

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.

thomastjeffery• 3 years ago

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?

CSS3D Clouds

Related Stories