Polylines not as smooth after upgrade to 1.8

I just upgraded my Cesium library to 1.8 today, and I noticed that my lines no longer look smooth. I’ve attached a screenshot that shows a couple of them. Does anyone else have this issue? I’m stuck on Firefox 31 at the moment, in case that matters :slight_smile:

Just checked this on the latest Firefox (37.0.1) and it looks the same, it’s no longer smooth.

Can you post a small Sandcastle example that you feel shows the problem. I just compared 1.6 and 1.8 and see no differences. What version of Cesium are you updating from?

What OS are you on?

Are you using the latest video card drivers?

This is definitely a problem on our side, though I’m still not quite sure what might be causing it. Are there any differences between the 1.8 available for download and the online Sandcastle demo? When I use my locally downloaded sandcastle or basic viewer, I can reproduce the issue, but it does not happen on the online sandcastle (using the same computer and same browser). I also realized that it only happens when one of the shapes I’m drawing has the custom Wallpaper fill - if I remove that fill, the rest of the shapes look smooth again on my local Viewer. If I switch back to 1.7, the problem also goes away completely, and all lines look good even with the Wallpaper fill. I’m hoping that the online Sandcastle has some updates to it that the standard 1.8 version doesn’t have, in which case I won’t worry about it and I’ll just grab the next available version when it comes out. Either way, it’s definitely our problem.

The hosted version of Sandcastle is identical to the official release (except for the AGI logo). Can you try running in private browsing mode and see if the problem still happens locally (or just clear your browser cache)? One possibility is that you have older cached version of some Cesium files showing up in your browser. Can you also try Chrome to see if it has a similar problem?

We had cleared our caches, ran in private mode (on both Firefox and Chrome) and also pointed a browser to it on a machine that had never pointed to any Cesium apps before to be absolutely sure there was no caching issue. Both Firefox and Chrome had the issue on all machines tried. We also downloaded the Cesium 1.8 code multiple times in case something had gone wrong there, but it was still the same. I will post a Sandcastle example tomorrow morning using the exact code we’re using, but it looks perfectly fine on the online Sandcastle so that probably won’t help :slight_smile: Reverting back to 1.7 fixes it on all browsers we tried, but we need 1.8 for some of the improvements made to zooming to entity groups.

That is very odd. If you can post that example I’ll run it on a couple of machines locally and see what happens.

Here’s a sandcastle example containing a couple of shapes that show the issue on mine. I dropped this code directly into the HelloWorld.html that comes with the Cesium build to keep it simple, and I can see the issue there. I’ve attached a couple of screenshots as well, one showing what these shapes look like on mine, and the other is how it looks in the online sandcastle. On mine, if I zoom in far enough, the issue seems to go away, it’s more visible when zoomed out. Thank you for helping me look into this!

//Call this once at application startup
Cesium.Material._materialCache.addMaterial(‘Wallpaper’, {
fabric : {
type : ‘Wallpaper’,
uniforms : {
image : Cesium.Material.DefaultImageId,
anchor : new Cesium.Cartesian2(0, 0)
},
components : {
diffuse : ‘texture2D(image, fract((gl_FragCoord.xy - anchor.xy) / vec2(imageDimensions.xy))).rgb’,
alpha : ‘texture2D(image, fract((gl_FragCoord.xy - anchor.xy) / vec2(imageDimensions.xy))).a’
}
},
translucent : false
});

//Create an instance and assign to anything that has a material property.
//scene - the scene
//image - the image (I think both a url or Image object are supported)
//anchor - A Cartesian3 that is the most southern and westard point of the geometry
var WallPaperMaterialProperty = function(scene, image, anchor) {
this._scene = scene;
this._image = image;
this._anchor = anchor;
this.definitionChanged = new Cesium.Event();
this.isConstant = true;
};

WallPaperMaterialProperty.prototype.getType = function(time) {
return ‘Wallpaper’;
};

WallPaperMaterialProperty.prototype.getValue = function(time, result) {
if (!Cesium.defined(result)) {
result = {
image : undefined,
anchor : undefined
};
}
result.image = this._image;
result.anchor = Cesium.SceneTransforms.wgs84ToDrawingBufferCoordinates(this._scene, this._anchor, result.anchor);
if(Cesium.defined(result.anchor)){
result.anchor.x = Math.floor(result.anchor.x);
result.anchor.y = Math.floor(result.anchor.y);
} else {
result.anchor = new Cesium.Cartesian2(0, 0);
}
return result;
};

WallPaperMaterialProperty.prototype.equals = function(other) {
return this === other || //
(other instanceof WallPaperMaterialProperty && //
this._image === other._image);
};

//Here’s a working example.
var viewer = new Cesium.Viewer(‘cesiumContainer’);

var entity = viewer.entities.add({
polygon : {
hierarchy : Cesium.Cartesian3.fromDegreesArray([-115.0, 37.0,
-115.0, 32.0,
-107.0, 33.0,
-102.0, 31.0,
-102.0, 35.0]),
material : new WallPaperMaterialProperty(viewer.scene, ‘…/images/checkerboard.png’, Cesium.Cartesian3.fromDegrees(-115.0, 31))
}
});

viewer.entities.add({
        polyline : {
            positions : Cesium.Cartesian3.fromDegreesArray([-104.31681938906439, 44.56003382092275, -100.74021235226051, 43.3195895122168, -103.17230513728714, 40.76066207610786, -107.17810501850751, 42.90031887132705, -106.6058478926189, 46.47076865944845, -102.02779088550992, 46.766496485558704]),
            material : Cesium.Color.fromBytes(0, 255, 255, 255),
            show: true
        }
    });

viewer.entities.add({
        rectangle : {
            coordinates : Cesium.Rectangle.fromDegrees(-119, 44, -112, 47),
            outline : true,
            fill: false,
            outlineColor : Cesium.Color.fromBytes(0, 255, 255, 255)
        }
    });

Unfortunately, I can’t replicate what you’re seeing, and looking at 1.7.1 versus 1.8, I also couldn’t find anything that might have caused any sort of visual change. There are some fairly significant changes in the works regarding rendering, so it’s possible that any issues you are seeing will be addressed soon enough. I’m sorry I don’t have any more concrete answers.

Thank you for checking on your end! We’ll wait for more updates and see if it’s still happening.

Hello Matt! We’ve upgraded to 1.10 (we had 1.9 as well), and the issue persists for us on both versions. Now, however, the online Sandcastle also has the issue, and it happens even without using the custom wallpaper. Here is the code I pasted into Sandcastle:

viewer.entities.add({
polyline : {
positions : Cesium.Cartesian3.fromDegreesArray([-104.31681938906439, 44.56003382092275, -100.74021235226051, 43.3195895122168, -103.17230513728714, 40.76066207610786, -107.17810501850751, 42.90031887132705, -106.6058478926189, 46.47076865944845, -102.02779088550992, 46.766496485558704]),
material : Cesium.Color.fromBytes(0, 255, 255, 255),
show: true
}
});

viewer.entities.add({
        rectangle : {
            coordinates : Cesium.Rectangle.fromDegrees(-119, 44, -112, 47),
            outline : true,
            fill: false,
            outlineColor : Cesium.Color.fromBytes(0, 255, 255, 255)
        }
    });

I tried this on Chrome version “43.0.2357.81 m” and Firefox version 37.0.1 on multiple computers, caches cleared, etc. The same graphics still look fine when I use Cesium version 1.7.1 on the same machines and browsers that have the issue with later versions. I’ve attached some screenshots to show both firefox and chrome with the current online sandcastle.

Are you by any chance able to see what we see using the latest Sandcastle?

Thank you!

If you add the below extra entity, do you see any change to the lines? I’m starting to think this is related to the way Cesium handles antialiasing.

viewer.entities.add({

rectangle : {

coordinates : Cesium.Rectangle.fromDegrees(-118, 45, -113, 45.5),

fill: true,

material : Cesium.Color.WHITE.withAlpha(0.5)

}

});

Dan, are there any variable values they can send us to determine if they aren’t getting any sort of FXAA pass on their machine?

I do still see the problem with that entity, though it’s harder to see when there’s world imagery in the background. I managed to catch it while I was resizing the page and the colors momentarily flickered to black and white, and it became easier to see. Both of those images are attached (from the online sandcastle). I tried this same entity in my 1.7.1 instance and it looked perfect.

whiterect_sandcastle.png

Not trying to bump the thread, I just wanted to note that I just tried this at home as well (I’d been mainly trying it at work with multiple different PCs) on a MacBook Air (with the latest Firefox) and I see the issue there as well.

Are you seeing this issue still in 1.10?

Di, I asked Dan to take a look at your issue when he has a chance. He’s trying to get polygons on terrain done for 1.11, so I can’t guarantee he’ll get to it soon, but I would like to get to the bottom of it and I have a feeling it’s somewhere in the renderer outside my are of expertise.

Sorry to reply to my own post, but I finally wrote up an issue for us to properly track this: https://github.com/AnalyticalGraphicsInc/cesium/issues/2800 I can definitely reproduce this on my primary dev machine now.

Thank you!