particle system

CesiumJS
1

Hi,

   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

2

Hi Naman,

Thanks for the interest in contributing.

We have a roadmap for particles:

Particle System Details · CesiumGS/cesium Wiki · GitHub

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

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

3

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/

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?

4

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

5

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

6

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

https://vimeo.com/128644213

  • mga
7

here's an interactive version:

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/

8

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

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

http://cesiumjs.org/2015/05/26/Graphics-Tech-in-Cesium-Stack/

Patrick

9

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
    at applyBlendingColor (http://localhost:8000/js/lib/Cesium/Cesium.js:113251:28)
    at Array.applyBlending (http://localhost:8000/js/lib/Cesium/Cesium.js:113261:13)
    at Function.RenderState.partialApply (http://localhost:8000/js/lib/Cesium/Cesium.js:113434:21)
    at applyRenderState (http://localhost:8000/js/lib/Cesium/Cesium.js:118168:25)
    at beginDraw (http://localhost:8000/js/lib/Cesium/Cesium.js:118259:9)
    at Context.draw (http://localhost:8000/js/lib/Cesium/Cesium.js:118320:9)
    at DrawCommand.execute (http://localhost:8000/js/lib/Cesium/Cesium.js:58635:17)
    at executeCommand (http://localhost:8000/js/lib/Cesium/Cesium.js:143159:21)
    at executeCommands (http://localhost:8000/js/lib/Cesium/Cesium.js:143406:21)
    at render (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

10

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

Patrick

11

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

12

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.
13

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

i dont have that problem with ThreeJS:

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

14

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.

15

perfect!

http://disneycorporation.github.io/pic/cesium.html

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

thanks

16

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

17

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

18

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.

19

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)

20

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