Data aggregation

CesiumJS
1

Hi everyone,

I am rendering lots of points (circles) using Point Primitive Collection (https://cesiumjs.org/Cesium/Build/Documentation/PointPrimitiveCollection.html).

Their color/material is defined by a value coming from the backend.

Q: Is there any way to define how they aggregate? I mean, when many circles overlap, define what color should be rendered in the intersections.

Thank you!

2

I know you can manage layers. But this is one layer, with many points.

What would be best is some declarative styling, like

. if (aggregated_value > 5) color = white.

I don’t see any way of doing something like that.

3

I don’t know of a way to do this with the current Cesium API. It sounds like a great use case with styling vector data, and maybe something we could take a look at with Vector Tile styling. I’ll bump the issue with this suggestion.

Thanks,

Gabby

4

Hi, thanks for your answer!

Okay, a pity but well… I was thinking of using blendEquation and blendFunction in the scene where I add primtiives, so at least I can determine how points blend.

How would I do this?

I am trying this, but changing the blendEquation or Functions doesn’t seem to change rendering.

var viewer = new Cesium.Viewer(‘cesiumContainer’);

viewer.scene.BlendEquation = Cesium.BlendEquation.ADD;

viewer.scene.BlendFunction = Cesium.BlendFunction.ONE;

var pointPrimitives = viewer.scene.primitives.add(new Cesium.PointPrimitiveCollection());

var counter = 40;

for (var i = -counter; i < counter; i++) {

for (var j = -counter; j < counter; j++) {

pointPrimitives.add({

position: Cesium.Cartesian3.fromDegrees(-55 + i * i * i / 10000, -33 + j * j * j / 10000),

color: Cesium.Color.fromRandom({

red: 0.7,

alpha: 0.99

}),

pixelSize: 50

});

}

}

5

You’ll need to define a new material. To get started, take a look at the Materials example, and depending on how you want them to blend, you may need to write a shader.

Thanks,

Gabby

6

I have a similar issue. I have a bunch of circles, and if they overlap the alpha levels increase until the terrain is hidden and it looks ugly. I'd like it to appear as if the circles merge together seamlessly with the pixels keeping the constant low alpha level.

The materials example has not enlightened me as of yet. I tried to make a custom appearance with a renderState blending solution but it did not seem to respond.

var viewer = new Cesium.Viewer('cesiumContainer');
var scene = viewer.scene;

var appearance = new Cesium.PerInstanceColorAppearance({
    flat: true,
    renderState: {
        blending: {
            enabled: true,
            equationRgb: Cesium.BlendEquation.MIN,
            equationAlpha: Cesium.BlendEquation.MIN,
            functionSourceRgb: Cesium.BlendFunction.ONE,
            functionSourceAlpha: Cesium.BlendFunction.ONE,
            functionDestinationRgb: Cesium.BlendFunction.ZERO,
            functionDestinationAlpha: Cesium.BlendFunction.ZERO
        }
    },

});

// Two rectangles in a primitive, each with a different color
var instance = new Cesium.GeometryInstance({
  geometry : new Cesium.RectangleGeometry({
    rectangle : Cesium.Rectangle.fromDegrees(0.0, 20.0, 10.0, 50.0)
  }),
  attributes : {
    color : Cesium.ColorGeometryInstanceAttribute.fromColor(new Cesium.Color(1.0, 0.0, 0.0, 0.5))
  }
});

var anotherInstance = new Cesium.GeometryInstance({
  geometry : new Cesium.RectangleGeometry({
    rectangle : Cesium.Rectangle.fromDegrees(0.0, 40.0, 10.0, 50.0)
  }),
  attributes : {
    color : Cesium.ColorGeometryInstanceAttribute.fromColor(new Cesium.Color(0.0, 0.0, 1.0, 0.5))
  }
});

var rectanglePrimitive = scene.primitives.add(new Cesium.Primitive({
  geometryInstances : [instance, anotherInstance],
  appearance : appearance
}));

Any direction or example would be very helpful.

7

Couple of things you might want to try: disabling order independent transparency and setting translucent to false, as Sean describes here:

https://groups.google.com/d/msg/cesium-dev/19fJKV1GlYI/A2lGRKNCBQAJ

If you get it work, please post back here with what worked!