Labels with oblique or italic fonts look incorrect

[hpinkos]

Reported on the forum: https://groups.google.com/forum/?hl=en#!topic/cesium-dev/GnWLZbIhKMk

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

viewer.entities.add({
    position : Cesium.Cartesian3.fromDegrees(-75.1641667, 39.9522222),
    label : {
        text : 'Philadelphia',
        font : 'oblique 24pt Arial'
    }
});

viewer.entities.add({
    position : Cesium.Cartesian3.fromDegrees(-75.1641667, 32),
    label : {
        text : 'Philadelphia',
        font : 'italic 24pt Arial'
    }
});

[mramato]

I believe this is fixed by #2549, but I haven't tried it.

[mramato]

This is actually another manifestation of #2130 and will be fixed when that bug is addressed

[emackey]

@mramato actually, I think this is a separate bug. I have some sample code I've been playing with that pushes back the fringes of billboards into the Z buffer, which does fix 2130 but sadly is not compatible with translucent labels in their current implementation. We should chat offline about that sometime.

That said, this issue appears different, as it is not fixed with the same technique. My guess is that the slanted glyphs are actually sticking out past the right-hand edge of their allotment in the texture atlas, and getting cropped. As such I would expect your font-kerning branch to fix this by rendering all the glyphs together. But the low-alpha z-buffered translucency thing is not the problem here.

[mramato]

@emackey to clarify, I think the font-kerning branch and #2130 together are what will address this issue.

Also, while it's good you might have an alternative solution for the transparency issue, I will point out that a surprising number of browser/device combos do not support frag depth (IE11, iOS, many android devices), so anything requiring it is not an ideal solution for something as common as billboard transparency.

[emackey]

@mramato Yeah, I may have mis-remembered what font-kerning was actually doing, is each glyph still a separate billboard in the atlas? If so this bug stands: I think the individual slanted glyphs are getting cropped, not z-buffered out of existence here.

[emackey]

For example, there should be no Z buffer issue with a single lone letter:

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

viewer.entities.add({
    position : Cesium.Cartesian3.fromDegrees(-75.1641667, 39.9522222),
    label : {
        text : 'd',
        font : 'oblique 24pt Arial'
    }
});

viewer.entities.add({
    position : Cesium.Cartesian3.fromDegrees(-75.1641667, 32),
    label : {
        text : 'd',
        font : 'italic 24pt Arial'
    }
});

This has got to be cropping, not Z-buffering.

[mramato]

Yes, each label is a separate glyph (which is absolutely required for performance/memory), but the code that generates the glyphs was fixed to properly take width into account. That being said, it's totally possible that oblique letters still cause problems so additional changes to the font-keming branch might be needed (in addition to the transparency fix to support proper kerning).

[GatorScott]

The problem with italic (and bold) text is that measureText does not apply font-style and font-weight to the text being measured. There also is a problem computing the width of the character.

[GatorScott]

I've been unable to figure out how to get my changes into a pull request, so they are attached.

Issue-3782.zip

[pjcozzi]

Contacted @GatorScott offline about getting help opening a PR.