# particle system

**URL:** <https://community.cesium.com/t/particle-system/1513>\
**Category:** CesiumJS\
**Created:** [September 22, 2014, 8:06am UTC](https://community.cesium.com/t/particle-system/1513 "2014-09-22T08:06:26Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![naman22forever](https://avatars.discourse-cdn.com/v4/letter/n/df788c/32.png) [@naman22forever](https://community.cesium.com/u/naman22forever)\
**Post date:** [September 22, 2014, 8:06am UTC](https://community.cesium.com/t/particle-system/1513/1 "2014-09-22T08:06:26Z")

</div>

Hi,

&nbsp;&nbsp;&nbsp;I wish to implement particle system for Cesium. Could someone give a little insight on its status. I have pulled pointGeometry branch. However there a separate branch for particle. Which branch should I start my work with?

Regards,  
Naman

---

<div class="post-metadata">

**Author:** ![patrick](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/patrick/32/2045_2.png) [@patrick](https://community.cesium.com/u/patrick)\
**Post date:** [September 23, 2014, 1:50pm UTC](https://community.cesium.com/t/particle-system/1513/2 "2014-09-23T13:50:44Z")

</div>

Hi Naman,

Thanks for the interest in contributing.

We have a roadmap for particles:

> [Particle System Details · CesiumGS/cesium Wiki · GitHub](https://github.com/AnalyticalGraphicsInc/cesium/wiki/Particle-System-Details)

There is some initial work by Dan on an old branch. The branch may be too out of date now to use as a starting point but could have some useful ideas:

> [https://github.com/AnalyticalGraphicsInc/cesium/compare/particles](https://github.com/AnalyticalGraphicsInc/cesium/compare/particles)

I would not build on the pointGeometry branch. Instead, you could start with the BillboardCollection. Later, we envision custom rendering for a fully GPU-accelerated particle simulation.

Patrick

---

<div class="post-metadata">

**Author:** ![Mauricio\_Giraldo](https://avatars.discourse-cdn.com/v4/letter/m/4af34b/32.png) [@Mauricio\_Giraldo](https://community.cesium.com/u/Mauricio_Giraldo)\
**Post date:** [May 19, 2015, 12:56am UTC](https://community.cesium.com/t/particle-system/1513/3 "2015-05-19T00:56:30Z")

</div>

Did anything come of this? I'd like to implement this ThreeJS-based map in Cesium or similar tile-supporting tech: [http://disneycorporation.github.io/pic/](http://disneycorporation.github.io/pic/)

It's 110k points being plotted in a PointCloud geometry. The color shows how dense an area is (yellow = more dense).

Is this in the finalized BillboardCollection?

---

<div class="post-metadata">

**Author:** ![patrick](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/patrick/32/2045_2.png) [@patrick](https://community.cesium.com/u/patrick)\
**Post date:** [May 19, 2015, 11:06am UTC](https://community.cesium.com/t/particle-system/1513/4 "2015-05-19T11:06:44Z")

</div>

Hi Naman,

For lots of dynamic points, check out the PointPrimitiveCollection, which will be in Cesium 1.10 on June 1. If you want to play with it now, you could pull down the master Cesium branch in github.

Patrick

---

<div class="post-metadata">

**Author:** ![Michael\_Lodge-Paoli1](https://avatars.discourse-cdn.com/v4/letter/m/e47774/32.png) [@Michael\_Lodge-Paoli1](https://community.cesium.com/u/Michael_Lodge-Paoli1)\
**Post date:** [May 26, 2015, 2:15am UTC](https://community.cesium.com/t/particle-system/1513/5 "2015-05-26T02:15:51Z")

</div>

Let us know how that goes for you. I would live to know how the new PointPrimitiveCollections are working for everyone.

---

<div class="post-metadata">

**Author:** ![Mauricio\_Giraldo](https://avatars.discourse-cdn.com/v4/letter/m/4af34b/32.png) [@Mauricio\_Giraldo](https://community.cesium.com/u/Mauricio_Giraldo)\
**Post date:** [May 26, 2015, 2:19pm UTC](https://community.cesium.com/t/particle-system/1513/6 "2015-05-26T14:19:57Z")

</div>

I got a test video here. trying to figure out how to make it standalone/browsable

[https://vimeo.com/128644213](https://vimeo.com/128644213)

- mga

---

<div class="post-metadata">

**Author:** ![Mauricio\_Giraldo](https://avatars.discourse-cdn.com/v4/letter/m/4af34b/32.png) [@Mauricio\_Giraldo](https://community.cesium.com/u/Mauricio_Giraldo)\
**Post date:** [May 27, 2015, 4:57pm UTC](https://community.cesium.com/t/particle-system/1513/7 "2015-05-27T16:57:33Z")

</div>

here's an interactive version:

[http://disneycorporation.github.io/pic/cesium.html](http://disneycorporation.github.io/pic/cesium.html)

is there a way to apply shader blending to those points? something similar to what you can do with ThreeJS here (more points = more yellow):

[http://disneycorporation.github.io/pic/](http://disneycorporation.github.io/pic/)

---

<div class="post-metadata">

**Author:** ![patrick](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/patrick/32/2045_2.png) [@patrick](https://community.cesium.com/u/patrick)\
**Post date:** [May 27, 2015, 10:35pm UTC](https://community.cesium.com/t/particle-system/1513/8 "2015-05-27T22:35:10Z")

</div>

Hi Mauricio,

It is not part of the public Cesium API, but I think all you need to do is change BlendingState.ALPHA\_BLEND to BlendingState.ADDITIVE\_BLEND in PointPrimitiveCollection:

> [https://github.com/AnalyticalGraphicsInc/cesium/blob/master/Source/Scene/PointPrimitiveCollection.js#L823](https://github.com/AnalyticalGraphicsInc/cesium/blob/master/Source/Scene/PointPrimitiveCollection.js#L823)

For more on the low-level graphics engine in Cesium, see:

> [http://cesiumjs.org/2015/05/26/Graphics-Tech-in-Cesium-Stack/](http://cesiumjs.org/2015/05/26/Graphics-Tech-in-Cesium-Stack/)

Patrick

---

<div class="post-metadata">

**Author:** ![Mauricio\_Giraldo](https://avatars.discourse-cdn.com/v4/letter/m/4af34b/32.png) [@Mauricio\_Giraldo](https://community.cesium.com/u/Mauricio_Giraldo)\
**Post date:** [May 27, 2015, 11:04pm UTC](https://community.cesium.com/t/particle-system/1513/9 "2015-05-27T23:04:26Z")

</div>

thanks for the tip

i am getting:

An error occurred while rendering. Rendering has stopped.  
TypeError: Cannot read property 'red' of undefined  
TypeError: Cannot read property 'red' of undefined  
&nbsp;&nbsp;&nbsp;&nbsp;at applyBlendingColor ([http://localhost:8000/js/lib/Cesium/Cesium.js:113251:28](http://localhost:8000/js/lib/Cesium/Cesium.js:113251:28))  
&nbsp;&nbsp;&nbsp;&nbsp;at Array.applyBlending ([http://localhost:8000/js/lib/Cesium/Cesium.js:113261:13](http://localhost:8000/js/lib/Cesium/Cesium.js:113261:13))  
&nbsp;&nbsp;&nbsp;&nbsp;at Function.RenderState.partialApply ([http://localhost:8000/js/lib/Cesium/Cesium.js:113434:21](http://localhost:8000/js/lib/Cesium/Cesium.js:113434:21))  
&nbsp;&nbsp;&nbsp;&nbsp;at applyRenderState ([http://localhost:8000/js/lib/Cesium/Cesium.js:118168:25](http://localhost:8000/js/lib/Cesium/Cesium.js:118168:25))  
&nbsp;&nbsp;&nbsp;&nbsp;at beginDraw ([http://localhost:8000/js/lib/Cesium/Cesium.js:118259:9](http://localhost:8000/js/lib/Cesium/Cesium.js:118259:9))  
&nbsp;&nbsp;&nbsp;&nbsp;at Context.draw ([http://localhost:8000/js/lib/Cesium/Cesium.js:118320:9](http://localhost:8000/js/lib/Cesium/Cesium.js:118320:9))  
&nbsp;&nbsp;&nbsp;&nbsp;at DrawCommand.execute ([http://localhost:8000/js/lib/Cesium/Cesium.js:58635:17](http://localhost:8000/js/lib/Cesium/Cesium.js:58635:17))  
&nbsp;&nbsp;&nbsp;&nbsp;at executeCommand ([http://localhost:8000/js/lib/Cesium/Cesium.js:143159:21](http://localhost:8000/js/lib/Cesium/Cesium.js:143159:21))  
&nbsp;&nbsp;&nbsp;&nbsp;at executeCommands ([http://localhost:8000/js/lib/Cesium/Cesium.js:143406:21](http://localhost:8000/js/lib/Cesium/Cesium.js:143406:21))  
&nbsp;&nbsp;&nbsp;&nbsp;at render ([http://localhost:8000/js/lib/Cesium/Cesium.js:143517:9](http://localhost:8000/js/lib/Cesium/Cesium.js:143517:9))

when trying this:

points.\_rs.blending = Cesium.BlendingState.ADDITIVE\_BLEND;

from the console where points is a Cesium.PointPrimitiveCollection

any ideas?

- mga

---

<div class="post-metadata">

**Author:** ![patrick](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/patrick/32/2045_2.png) [@patrick](https://community.cesium.com/u/patrick)\
**Post date:** [May 27, 2015, 11:15pm UTC](https://community.cesium.com/t/particle-system/1513/10 "2015-05-27T23:15:01Z")

</div>

Render states are immutable so that patch will not work. Try modifying Cesium.js or building Cesium from source, see: [https://github.com/AnalyticalGraphicsInc/cesium/wiki/Contributor%27s-Guide#buildthecode](https://github.com/AnalyticalGraphicsInc/cesium/wiki/Contributor%27s-Guide#buildthecode)

Patrick

---

<div class="post-metadata">

**Author:** ![Mauricio\_Giraldo](https://avatars.discourse-cdn.com/v4/letter/m/4af34b/32.png) [@Mauricio\_Giraldo](https://community.cesium.com/u/Mauricio_Giraldo)\
**Post date:** [May 28, 2015, 4:12am UTC](https://community.cesium.com/t/particle-system/1513/11 "2015-05-28T04:12:46Z")

</div>

got it

i changed Cesium.js to hard code ADDITIVE\_BLEND instead of ALPHA\_BLEND in that line and saw no change... any other places where i need to change the default?

thanks

---

<div class="post-metadata">

**Author:** ![Ed\_Mackey](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/ed_mackey/32/2226_2.png) [@Ed\_Mackey](https://community.cesium.com/u/Ed_Mackey)\
**Post date:** [May 28, 2015, 1:34pm UTC](https://community.cesium.com/t/particle-system/1513/12 "2015-05-28T13:34:14Z")

</div>

No, don’t modify Cesium.js itself, there’s an easy way to do this without any customizations. It’s still unofficial as RenderStates are part of the private (undocumented) API, thus subject to change without notice. But this code works in Cesium 1.9 and the upcoming 1.10. This works because creation of the renderstate is normally delayed until the first update, giving your app a chance to preempt it with a custom RenderState.

var points = scene.primitives.add(new Cesium.PointPrimitiveCollection());  
points.\_rs = scene.context.createRenderState({  
depthTest : {  
enabled : false  
},  
blending : Cesium.BlendingState.ADDITIVE\_BLEND  
});

```
           --Ed.
```

---

<div class="post-metadata">

**Author:** ![Mauricio\_Giraldo](https://avatars.discourse-cdn.com/v4/letter/m/4af34b/32.png) [@Mauricio\_Giraldo](https://community.cesium.com/u/Mauricio_Giraldo)\
**Post date:** [May 28, 2015, 2:00pm UTC](https://community.cesium.com/t/particle-system/1513/13 "2015-05-28T14:00:02Z")

</div>

awesome

this works

however, since i have to set depthtest to false, all points get shown all the time:

[http://disneycorporation.github.io/pic/cesium.html](http://disneycorporation.github.io/pic/cesium.html)

i dont have that problem with ThreeJS:

[http://disneycorporation.github.io/pic/](http://disneycorporation.github.io/pic/)

the blending is also not quite the same with cesium, though… it blends towards white instead of yellow… that is less of an issue than the depthtest, though

---

<div class="post-metadata">

**Author:** ![Ed\_Mackey](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/ed_mackey/32/2226_2.png) [@Ed\_Mackey](https://community.cesium.com/u/Ed_Mackey)\
**Post date:** [May 28, 2015, 5:50pm UTC](https://community.cesium.com/t/particle-system/1513/14 "2015-05-28T17:50:11Z")

</div>

Oh, right. You want the depth test enabled, but you don’t want to write new values into the depth buffer. Try this instead.

points.\_rs = scene.context.createRenderState({  
depthTest : {  
enabled : true  
},  
depthMask : false,  
blending : Cesium.BlendingState.ADDITIVE\_BLEND  
});

–Ed.

---

<div class="post-metadata">

**Author:** ![Mauricio\_Giraldo](https://avatars.discourse-cdn.com/v4/letter/m/4af34b/32.png) [@Mauricio\_Giraldo](https://community.cesium.com/u/Mauricio_Giraldo)\
**Post date:** [May 28, 2015, 5:54pm UTC](https://community.cesium.com/t/particle-system/1513/15 "2015-05-28T17:54:34Z")

</div>

perfect!

[http://disneycorporation.github.io/pic/cesium.html](http://disneycorporation.github.io/pic/cesium.html)

i will keep playing with this… it performs very well… those are 100k points

thanks

---

<div class="post-metadata">

**Author:** ![Michael\_Lodge-Paoli1](https://avatars.discourse-cdn.com/v4/letter/m/e47774/32.png) [@Michael\_Lodge-Paoli1](https://community.cesium.com/u/Michael_Lodge-Paoli1)\
**Post date:** [May 29, 2015, 4:04am UTC](https://community.cesium.com/t/particle-system/1513/16 "2015-05-29T04:04:52Z")

</div>

I feel like there was some great teamwork here. Thanks Ed and Mauricio.

---

<div class="post-metadata">

**Author:** ![Mauricio\_Giraldo](https://avatars.discourse-cdn.com/v4/letter/m/4af34b/32.png) [@Mauricio\_Giraldo](https://community.cesium.com/u/Mauricio_Giraldo)\
**Post date:** [May 29, 2015, 2:13pm UTC](https://community.cesium.com/t/particle-system/1513/17 "2015-05-29T14:13:53Z")

</div>

ian

- are you adding the points as geojson or as pointcollection? pointcollection is optimized for performance

- do you need to see yesterday’s data? is the point of the app to see “right now” or “forever”? you could be adding/removing points as a certain window passes (say, now +/- 1 hour)

- if you need to see “forever” then you’re going to have to summarize the past in some way that you’re not showing the entire million points all the time

i will let you guys know as the project progresses

thanks for the help

---

<div class="post-metadata">

**Author:** ![Mauricio\_Giraldo](https://avatars.discourse-cdn.com/v4/letter/m/4af34b/32.png) [@Mauricio\_Giraldo](https://community.cesium.com/u/Mauricio_Giraldo)\
**Post date:** [September 3, 2015, 8:14pm UTC](https://community.cesium.com/t/particle-system/1513/18 "2015-09-03T20:14:40Z")

</div>

Hello Ed

I noticed this blending code has changed in 1.13. I trying to find the equivalent procedure in the docs but cannot seem to find any examples. The Geometry & Material demo does not include blending.

Any help getting this to work in 1.13 are appreciated.

---

<div class="post-metadata">

**Author:** ![Mauricio\_Giraldo](https://avatars.discourse-cdn.com/v4/letter/m/4af34b/32.png) [@Mauricio\_Giraldo](https://community.cesium.com/u/Mauricio_Giraldo)\
**Post date:** [September 3, 2015, 8:47pm UTC](https://community.cesium.com/t/particle-system/1513/19 "2015-09-03T20:47:36Z")

</div>

ok figured it out

it seems this is still undocumented, the change is:

```
points._rs = new Cesium.RenderState({
  depthTest : {
    enabled : true
  },
  depthMask : false,
  blending : Cesium.BlendingState.ADDITIVE_BLEND
});

```

``

(using new Cesium.RenderState instead of scene.context.createRenderState)

---

<div class="post-metadata">

**Author:** ![patrick](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/patrick/32/2045_2.png) [@patrick](https://community.cesium.com/u/patrick)\
**Post date:** [September 5, 2015, 9:13pm UTC](https://community.cesium.com/t/particle-system/1513/20 "2015-09-05T21:13:00Z")

</div>

Use Cesium.RenderState.fromCache instead of “new Cesium.RenderState.” Also, just a reminder that this is a private API that is always subject to change as you have noticed.

Patrick

[Next page](https://community.cesium.com/t/particle-system/1513.md?page=2)
