# CZML performance

**URL:** <https://community.cesium.com/t/czml-performance/4681>\
**Category:** CesiumJS\
**Created:** [October 11, 2016, 7:43am UTC](https://community.cesium.com/t/czml-performance/4681 "2016-10-11T07:43:18Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![apetreivalentin](https://avatars.discourse-cdn.com/v4/letter/a/6de8d8/32.png) [@apetreivalentin](https://community.cesium.com/u/apetreivalentin)\
**Post date:** [October 11, 2016, 7:43am UTC](https://community.cesium.com/t/czml-performance/4681/1 "2016-10-11T07:43:18Z")

</div>

Hello dev group,

We are trying to show a lot of rectangles with dynamic heights based on different times.

The problem is that the frame rate is around 3-5 which is very poor, compared with simple examples where is around 30fps.

I read some subjects regarding performance improvements, also the one using points, but we really want to have rectangles shown, not points or lines.

With 10-50 rectangles, works fine, but with more than 100 the FPS drops a lot.

Is anything we are missing?

Could we increase the performance somehow?

Here is the code (the complete code in the attachment) :

> var viewer = new Cesium.Viewer(‘cesiumContainer’, {

> scene3DOnly: true,

> imageryProvider : new Cesium.MapboxImageryProvider({

> mapId: ‘mapbox.light’ }),

> baseLayerPicker : false,

> contextOptions: {

> webgl : {

> ```
> alpha : false,
> 
> ```

> ```
> depth : true,
> 
> ```

> ```
> stencil : false,
> 
> ```

> ```
> antialias : false,
> 
> ```

> ```
> premultipliedAlpha : true,
> 
> ```

> ```
> preserveDrawingBuffer : false,
> 
> ```

> ```
> failIfMajorPerformanceCaveat : true
> 
> ```

> },

> allowTextureFilterAnisotropic : false

> }

> }) ;

> 

> 

> viewer.scene.debugShowFramesPerSecond = true;

> viewer.scene.skyBox.show = false;

> viewer.scene.skyBox.destroy();

> viewer.scene.skyBox = undefined;

> viewer.scene.sun.show = false;

> viewer.scene.sun.destroy();

> viewer.scene.sun = undefined;

> viewer.scene.moon.show = false;

> viewer.scene.moon.destroy();

> viewer.scene.moon = undefined;

> viewer.scene.skyAtmosphere.show = false;

> viewer.scene.skyAtmosphere.destroy();

> viewer.scene.skyAtmosphere = undefined;

> viewer.scene.fog.enabled = false;

> viewer.scene.enableLighting = false;

var czml = […];

var dataSource = Cesium.CzmlDataSource.load(czml);

viewer.dataSources.add(dataSource);

Thanks in advance!!!

[CZML\_Test.html](https://community.cesium.com/uploads/short-url/dFdMJWS1fKZTp6uuW66uvW7jmnA.html) (113 KB)

---

<div class="post-metadata">

**Author:** ![hannah](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/hannah/32/4509_2.png) [@hannah](https://community.cesium.com/u/hannah)\
**Post date:** [October 11, 2016, 2:56pm UTC](https://community.cesium.com/t/czml-performance/4681/2 "2016-10-11T14:56:25Z")

</div>

Hello,

I don’t think using dynamic rectangles is the best approach here. I would recommend switching to polylines instead. They are much simpler to draw since you need it to update every frame.

That’s what Alex and Ed did for the 3D demo they put together a few years ago: [http://cesiumjs.org/demos/d3.html](http://cesiumjs.org/demos/d3.html)

If you really did want to stick with rectangles, you could try upping the granularity or using a more simple linear interpolation. You could also try switching to a box geometry instead, that should be a little faster.

Best,

Hannah

---

<div class="post-metadata">

**Author:** ![apetreivalentin](https://avatars.discourse-cdn.com/v4/letter/a/6de8d8/32.png) [@apetreivalentin](https://community.cesium.com/u/apetreivalentin)\
**Post date:** [October 12, 2016, 6:31am UTC](https://community.cesium.com/t/czml-performance/4681/3 "2016-10-12T06:31:31Z")

</div>

Thank you Hannah for your reply,

Much appreciated!

We will follow your suggestions (box geometry / granularity) to check the performance.

We will update this post with results after testing.

Regards,