Cesium Earth entity path quality

Question

I have developed an application, using the Cesium Earth library.

The problem is, the drawn line (entity path) has very low quality, it's not smooth. How to make it better?

  viewer = new Cesium.Viewer('cesiumContainer', {
    imageryProvider: false,
    shadows:true,
    skyAtmosphere: false,
    geocoder: false,
    shouldAnimate:true,
    clockViewModel: new Cesium.ClockViewModel(clock),
    imageryProviderViewModels: imageryViewModels,
    requestRenderMode : true
  });

entity[i] = viewer.entities.add({              
            path:{
               leadTime:leadTime,
               trailTime:trailTime,
               width:1.5,
               material: color,
               resolution:10
            }
});

satellite[id].position.setInterpolationOptions({
         interpolationDegree : 10,
         interpolationAlgorithm : Cesium.HermitePolynomialApproximation 
});

It looks like the colors are kind of dark, maybe try yellow or cyan or brighter colors? Are there additional quality problems besides the dark colors? — emackey, Aug 30 '18 at 13:52
@emackey Yes, the problem is the lines are not smooth. Looks like, I have to increase the amount of pixels? — Leeloo, Aug 30 '18 at 17:16
Could be a duplicate of https://stackoverflow.com/questions/4261090/html5-canvas-and-anti-aliasing — Chris Cousins, Aug 30 '18 at 17:26
@ChrisCousins Anyway, I need the solution for Cesium library — Leeloo, Aug 30 '18 at 17:35
Can you post the code where you instantiate your Cesium Earth scene? — Chris Cousins, Aug 30 '18 at 17:37

score 0 · Answer 1 · answered Aug 30 '18 at 17:54

0

Look into adding an anti-aliasing pass to your view, and possibly making the dimensions of your container div double what they actually are on the screen (scale it to half size with CSS). I have a similar scene, but it's in three.js, here: https://ccnmtl.github.io/astro-interactives/sun-motion-simulator/ source code is here: https://github.com/ccnmtl/astro-interactives/blob/master/sun-motion-simulator/src/HorizonView.jsx

answered Aug 30 '18 at 17:54

nnyby

4,748
10
49
105

But there is now antialias:true option in Cesium, as you did – Leeloo Aug 30 '18 at 18:12
I've found the `antialias` option in WebGL to be unreliable. As documented in three.js, it only works in Chrome, not Firefox. But on my system (Chrome/Linux) I don't see that it has any effect on the view, in three.js, pixi.js, or, I'm guessing, Cesium. – nnyby Aug 30 '18 at 18:14
What do you suggest then? – Leeloo Aug 30 '18 at 18:14
I'm suggesting a combination of approaches described in my answer: make the view's dimensions double what they are on the screen, and add an anti-aliasing shader pass (I'm using FXAA). – nnyby Aug 30 '18 at 18:15
1

FXAA is built into Cesium, it's `viewer.scene.postProcessStages.fxaa.enabled` and it's `true` by default. – emackey Aug 30 '18 at 18:48
1

@emackey If it's enabled by default, why the lines aren't smoth? – Leeloo Aug 30 '18 at 19:08
@Leeloo I'm not sure. Can you edit your question to include how the viewer is constructed? What kind of graphics card are you using on the client? – emackey Aug 30 '18 at 21:00
@emackey Updated. The graphics card is Intel HD Graphics 620 – Leeloo Aug 30 '18 at 21:04
From searching online it looks like this chip may be [intended for low power consumption](https://www.notebookcheck.net/Intel-HD-Graphics-620.172256.0.html) rather than performance, so you may want to try the same code on a stronger machine, such as one with an NVIDIA or AMD graphics chip. – emackey Aug 31 '18 at 14:07

Cesium Earth entity path quality

1 Answers1