# Sunlight Analysis in CesiumJS

**URL:** <https://community.cesium.com/t/sunlight-analysis-in-cesiumjs/27574>\
**Category:** CesiumJS\
**Created:** [October 24, 2023, 11:05am UTC](https://community.cesium.com/t/sunlight-analysis-in-cesiumjs/27574 "2023-10-24T11:05:42Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![wangqiuyan](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/wangqiuyan/32/3476_2.png) [@wangqiuyan](https://community.cesium.com/u/wangqiuyan)\
**Post date:** [October 24, 2023, 11:05am UTC](https://community.cesium.com/t/sunlight-analysis-in-cesiumjs/27574/1 "2023-10-24T11:05:42Z")

</div>

Hello, I want to share happiness of successfully finding out the way to realize sunlight analysis in CesiumJS, through custom offscreen render, I learned a lot in the process. The result is below:

 ![image](https://global.discourse-cdn.com/cesium/original/3X/6/f/6fa7f722d8a199b3089b80ad68ff25b438b2ef7b.jpeg)

use different color to show different sunlight coverage in a specific location, that blue is low coverage of sunlight, while red is the opposite, high coverage rate. And the date and time range could be self define. default is in 2023-12-22 from 6:am to 6:pm

show with pionts and polygon geometry, when in polygon geometry, the height could change:

 ![image](https://global.discourse-cdn.com/cesium/original/3X/e/6/e6ee04235a7ebe27afbad27e6cf456c5ba12fcd5.jpeg)

And we also could click one point to get the sunlight coverage percentage value of the specific place in the time range:

 ![image](https://global.discourse-cdn.com/cesium/original/3X/a/8/a88462a79aefa739403e787dfa25f9882f9996a2.jpeg)

It is so interesting to look into the code of CesiumJS.

---

<div class="post-metadata">

**Author:** ![Gabby\_Getz](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/gabby_getz/32/7838_2.png) [@Gabby\_Getz](https://community.cesium.com/u/Gabby_Getz)\
**Post date:** [October 24, 2023, 9:01pm UTC](https://community.cesium.com/t/sunlight-analysis-in-cesiumjs/27574/2 "2023-10-24T21:01:11Z")

</div>

This looks awesome!

Would you be interested in sharing this through our social media?

---

<div class="post-metadata">

**Author:** ![wangqiuyan](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/wangqiuyan/32/3476_2.png) [@wangqiuyan](https://community.cesium.com/u/wangqiuyan)\
**Post date:** [October 25, 2023, 12:43am UTC](https://community.cesium.com/t/sunlight-analysis-in-cesiumjs/27574/4 "2023-10-25T00:43:06Z")

</div>

Sure, cool, what can I do to share this through your social media?

---

<div class="post-metadata">

**Author:** ![liuling1210](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/liuling1210/32/19986_2.png) [@liuling1210](https://community.cesium.com/u/liuling1210)\
**Post date:** [October 25, 2023, 7:15am UTC](https://community.cesium.com/t/sunlight-analysis-in-cesiumjs/27574/5 "2023-10-25T07:15:56Z")

</div>

Can you tell me how it was made? I am very curious about this

---

<div class="post-metadata">

**Author:** ![wangqiuyan](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/wangqiuyan/32/3476_2.png) [@wangqiuyan](https://community.cesium.com/u/wangqiuyan)\
**Post date:** [October 25, 2023, 8:56am UTC](https://community.cesium.com/t/sunlight-analysis-in-cesiumjs/27574/6 "2023-10-25T08:56:26Z")

</div>

It is complex, because we need to get the offscreen render texture and compute coordinate of fragment to compare the depth, then get a specific val to flag whethere a specific location place been in the sunlight, finally to accumulate the vals to get the percentage rate.

---

<div class="post-metadata">

**Author:** ![liuling1210](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/liuling1210/32/19986_2.png) [@liuling1210](https://community.cesium.com/u/liuling1210)\
**Post date:** [October 26, 2023, 1:41am UTC](https://community.cesium.com/t/sunlight-analysis-in-cesiumjs/27574/7 "2023-10-26T01:41:29Z")

</div>

can you write a Sandcastle example for it?

---

<div class="post-metadata">

**Author:** ![wangqiuyan](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/wangqiuyan/32/3476_2.png) [@wangqiuyan](https://community.cesium.com/u/wangqiuyan)\
**Post date:** [October 26, 2023, 8:04am UTC](https://community.cesium.com/t/sunlight-analysis-in-cesiumjs/27574/8 "2023-10-26T08:04:10Z")

</div>

unfortunately, I can’t provide total code due to the complex of code, I recommend using thought below:

1. divide the total time range to several timespan
2. get every timespan’s midtime depth texture
3. in the fragment, compute the gl\_position in each virtual camera, get the depth
4. in the fragment, compare depth value in 3# and 2#, then you will get if it is in the sunlight in each timespan.
5. in the fragment, accumulate the compare result in 4#, and set the color of the fragment based on the accumulate result.

---

<div class="post-metadata">

**Author:** ![liuling1210](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/liuling1210/32/19986_2.png) [@liuling1210](https://community.cesium.com/u/liuling1210)\
**Post date:** [October 26, 2023, 12:02pm UTC](https://community.cesium.com/t/sunlight-analysis-in-cesiumjs/27574/9 "2023-10-26T12:02:02Z")

</div>

Thank you very much for your idea. I’ll give it a try. Looking forward to seeing your sharing soon

---

<div class="post-metadata">

**Author:** ![SAYEOR](https://avatars.discourse-cdn.com/v4/letter/s/ce73a5/32.png) [@SAYEOR](https://community.cesium.com/u/SAYEOR)\
**Post date:** [October 29, 2023, 2:22pm UTC](https://community.cesium.com/t/sunlight-analysis-in-cesiumjs/27574/10 "2023-10-29T14:22:56Z")

</div>

> [@wangqiuyan](#):
>
> It is so interesting to look into the code of CesiumJS.

This is really cool. Would it be convenient for you to establish a repository in GitHub? I believe many people will be involved.

---

<div class="post-metadata">

**Author:** ![WShihan](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/wshihan/32/27014_2.png) [@WShihan](https://community.cesium.com/u/WShihan)\
**Post date:** [December 12, 2024, 8:47am UTC](https://community.cesium.com/t/sunlight-analysis-in-cesiumjs/27574/11 "2024-12-12T08:47:31Z")

</div>

Could you share some code snippets? I’ve been trying to achieve this effect for several days and haven’t found the right way yet.

---

<div class="post-metadata">

**Author:** ![wangqiuyan](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/wangqiuyan/32/3476_2.png) [@wangqiuyan](https://community.cesium.com/u/wangqiuyan)\
**Post date:** [December 13, 2024, 1:23am UTC](https://community.cesium.com/t/sunlight-analysis-in-cesiumjs/27574/12 "2024-12-13T01:23:15Z")

</div>

OK, maybe I should consider to put the organized code on the Git, then reply on this page.
