Labels using primitives in chrome 45 with font under 24px

[bmckilligan]

the following example in chrome 45 will not display labels properly, the first character, or "1" characters are not shown, bumping the font from 16px to 24px resolves the issue

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

var labels = scene.primitives.add(new Cesium.LabelCollection({ scene: scene }));

var cesiumLabel = labels.add({
show: true ,
position: Cesium.Cartesian3.fromDegrees(-75.1641667, 39.9522222, 100) ,
text: '1234 Philadephia 1234' ,
font: "16px Helvetica "
});

[mramato]

Thanks, this definitely looks like a bug. Do you know if this happened in Chrome 44?

[bmckilligan]

forgot to add, things work fine in firefox, worked fine in chrome 44

playing around with different strings, it appears that whatever the first character is, all instances of that character are removed from the string

"PPPP Philadephia 1234 ABC" will render " hiladephia 1234 ABC"

[mramato]

Thanks, knowing it worked in 44 should make this easy to isolate.

[denverpierce]

Can confirm this in chrome 45. It will also label the first lowercase letter, but not uppercase.

[bmckilligan]

using the labe "abc Philadephia 1234" at 28px renders " bc Phil dephi 1234" at 30px its fine.

what a weird bug

[mramato]

I did an initial triage on this and the canvas elements are being created properly for each letter, so the problem is definitely on the WebGL side. It manifests in older releases of Cesium too (I tried 1.12), which points to it most likely being a Chrome bug. Next step is to try it without ANGLE and see if that's the problem.

[mramato]

Okay, it's not ANGLE and happens under OpenGL as well. I postulate the problem is actually related to adding tiny billboards to BillboardCollection when the first billboard is tiny, it is no longer showing up. (for those of you that don't know, labels are just implemented in terms of billboards where each billboard is a letter)

@pjcozzi @lilleyse or @bagnell can one of you take a look at this to try and figure out what's going on here?

Here's the code to reproduce this at the billboard primitive level. I'm not even sure the p makes it into the texture atlas texture, but the canvas definitely gets drawn correctly.

var viewer = new Cesium.Viewer('cesiumContainer');
var scene = viewer.scene;
var camera = viewer.scene.camera;
camera.lookAt(Cesium.Cartesian3.fromDegrees(100.5382368,13.8, 50000),
              Cesium.Cartesian3.fromDegrees(100.5382368,13.7242002, 0), Cesium.Cartesian3.UNIT_Z);
var labels = scene.primitives.add(new Cesium.BillboardCollection());
labels.add({
    position : Cesium.Cartesian3.fromDegrees(100.545624,13.743179),
    image  : Cesium.writeTextToCanvas('p', { font: '14px Helvetica' })
});
labels.add({
    position : Cesium.Cartesian3.fromDegrees(100.545624,13.743179),
    image  : Cesium.writeTextToCanvas('h', { font: '14px Helvetica' }),
    pixelOffset : new Cesium.Cartesian2(0, 5)
});

[pjcozzi]

@bagnell can you please look at this?

[pjcozzi]

@bmckilligan @denverpierce if you need a fix now, use the branch in #3011, but it is still being tweaked.

[pjcozzi]

Thanks again for the info, @bmckilligan and @denverpierce.

The fix is in master and will ship in Cesium 1.14 on October 1.