# Real weather clouds animated on the globe..... did someone try something?

**URL:** <https://community.cesium.com/t/real-weather-clouds-animated-on-the-globe-did-someone-try-something/6268>\
**Category:** CesiumJS\
**Created:** [November 17, 2017, 5:04pm UTC](https://community.cesium.com/t/real-weather-clouds-animated-on-the-globe-did-someone-try-something/6268 "2017-11-17T17:04:47Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Geoneer](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/geoneer/32/2449_2.png) [@Geoneer](https://community.cesium.com/u/Geoneer)\
**Post date:** [November 17, 2017, 5:04pm UTC](https://community.cesium.com/t/real-weather-clouds-animated-on-the-globe-did-someone-try-something/6268/1 "2017-11-17T17:04:47Z")

</div>

**1. A concise explanation of the problem you’re experiencing.**

Well, I want to create real clouds om my application so the user get’s the feeling like it’s in real world. Purpose in the future is to connect the cloud-settings to a real world weather webserver to get the type of weather in the region, and generate the clouds based on the real live & current (expected) weather (forecast).

**2. A minimal code example. If you’ve found a bug, this helps us reproduce and repair it.**

The code I’m thinking about to try : [https://www.clicktorelease.com/blog/how-to-make-clouds-with-css-3d/](https://www.clicktorelease.com/blog/how-to-make-clouds-with-css-3d/)

**3. Context. Why do you need to do this? We might know a better way to accomplish your goal.**

Because I want it 😉

**4. The Cesium version you’re using, your operating system and browser.**

Cesium 1.39. Windows 10 Enterprise. Chrome 64bits. NVidea Geforce.

So If you have idea’s what to use and how, let us know 🙂

---

<div class="post-metadata">

**Author:** ![Geoneer](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/geoneer/32/2449_2.png) [@Geoneer](https://community.cesium.com/u/Geoneer)\
**Post date:** [November 17, 2017, 5:08pm UTC](https://community.cesium.com/t/real-weather-clouds-animated-on-the-globe-did-someone-try-something/6268/2 "2017-11-17T17:08:04Z")

</div>

FYI: [http://www.markmark.net/PDFs/RTCloudsForGames\_HarrisGDC2002.pdf](http://www.markmark.net/PDFs/RTCloudsForGames_HarrisGDC2002.pdf)

---

<div class="post-metadata">

**Author:** ![kamonasu](https://avatars.discourse-cdn.com/v4/letter/k/cdc98d/32.png) [@kamonasu](https://community.cesium.com/u/kamonasu)\
**Post date:** [November 18, 2017, 6:55am UTC](https://community.cesium.com/t/real-weather-clouds-animated-on-the-globe-did-someone-try-something/6268/3 "2017-11-18T06:55:37Z")

</div>

Hi Geoneer

Rain and clouds sample , not so photo realistic , see Pilatus Railway demo

> **[It's Scary What You Can Build with Cesium | cesium.com](https://cesium.com/blog/2017/10/30/its-scary-what-you-can-build-with-cesium/)**
>
> What are you doing with Cesium this Halloween?Our community of developers has taken Cesium places we never could have guessed, from extreme sporting events t...

  
click the 'rain effect' checkbox.

One way to draw clouds in Cesium is to implement vertex and fragment shader.  
see below.

> **[Graphics Tech in Cesium - Renderer Architecture | cesium.com](https://cesium.com/blog/2015/05/15/graphics-tech-in-cesium-architecture/)**
>
> Cesium is built on a custom WebGL engine - the Renderer - that we started developing in March 2011 when the WebGL 1.0 spec was released. I consider this a 4...

  
[https://github.com/AnalyticalGraphicsInc/cesium/wiki/Fabric](https://github.com/AnalyticalGraphicsInc/cesium/wiki/Fabric)

Rendering clouds normaly use 'Perlin noise' algorithm.  
see below  
[http://george-geng.github.io/abovetheclouds.html](http://george-geng.github.io/abovetheclouds.html)

Thanks.

---

<div class="post-metadata">

**Author:** ![sean\_lilley](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/sean_lilley/32/2083_2.png) [@sean\_lilley](https://community.cesium.com/u/sean_lilley)\
**Post date:** [November 21, 2017, 12:23am UTC](https://community.cesium.com/t/real-weather-clouds-animated-on-the-globe-did-someone-try-something/6268/4 "2017-11-21T00:23:07Z")

</div>

There may be some work towards cloud rendering this winter. Keep an eye on [https://github.com/AnalyticalGraphicsInc/cesium/issues/5962](https://github.com/AnalyticalGraphicsInc/cesium/issues/5962)

Real-time weather data is under the “later” category and would be very cool to see.

---

<div class="post-metadata">

**Author:** ![Geoneer](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/geoneer/32/2449_2.png) [@Geoneer](https://community.cesium.com/u/Geoneer)\
**Post date:** [November 30, 2017, 6:25pm UTC](https://community.cesium.com/t/real-weather-clouds-animated-on-the-globe-did-someone-try-something/6268/5 "2017-11-30T18:25:29Z")

</div>

Thanks! I’m checking how to create the clouds when it’s raining. I want to know how the code creates those clouds and trying to make the clouds dependent on the current weather. Also fog inside a valley is one of the requirements I want to create.

Well, let’s go on and study the samples.

---

<div class="post-metadata">

**Author:** ![Geoneer](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/geoneer/32/2449_2.png) [@Geoneer](https://community.cesium.com/u/Geoneer)\
**Post date:** [November 30, 2017, 6:47pm UTC](https://community.cesium.com/t/real-weather-clouds-animated-on-the-globe-did-someone-try-something/6268/6 "2017-11-30T18:47:30Z")

</div>

Great examples here: [https://www.shadertoy.com/](https://www.shadertoy.com/)

---

<div class="post-metadata">

**Author:** ![Geoneer](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/geoneer/32/2449_2.png) [@Geoneer](https://community.cesium.com/u/Geoneer)\
**Post date:** [December 1, 2017, 3:03am UTC](https://community.cesium.com/t/real-weather-clouds-animated-on-the-globe-did-someone-try-something/6268/7 "2017-12-01T03:03:40Z")

</div>

1. I will try to add this to my project : [https://www.shadertoy.com/view/XslGRr](https://www.shadertoy.com/view/XslGRr)

2. If this works well…

3. I will try to create a new class in cesiumjs itself in the scene/clouds.js

4. Hopefully I can create and share a generic class to create volumic clouds in the main cesiumjs base.

5. I will use fog.js as a base to create the clouds.js with the input from point [1.]

So if you all got some idea’s, let me know!

Thanks!
