Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

pinBuilder puts low-alpha values inside the pin #5097

Closed
emackey opened this issue Mar 13, 2017 · 2 comments · Fixed by #5099
Closed

pinBuilder puts low-alpha values inside the pin #5097

emackey opened this issue Mar 13, 2017 · 2 comments · Fixed by #5099

Comments

@emackey
Copy link
Contributor

emackey commented Mar 13, 2017

Noticed in #5066.

Our pinBuilder helper produces pins that can have low-alpha "fringes" on the interior of the pin. For example, here's the Maki shopping cart on a pin, shown alongside a greyscale version of its alpha map:

testmakiicon testmakiicon_alpha

Here's a question mark on a pin, alongside its alpha map:

testquestionicon testquestionicon_alpha

In the alpha map images above, the white pin body should NOT have any black pixels floating around in it. Both of them do, although the shopping cart one is much more subtle, the question mark one is more obvious.

I've tested as far back as Cesium 1.20 and the pinBuilder appears to have this problem even back then. It wasn't much of an issue until now, with the billboard blending fixes coming in, the low alpha values are actually leaking other billboards through them.

The inset image written onto the pin should of course use the alpha values for proper blending, but it should use those values to blend against the pin's background color, not against a transparent background. The resulting pixels should always have exactly the pin background's opacity.

@emackey
Copy link
Contributor Author

emackey commented Mar 13, 2017

Reproduce steps:

  1. Load Sandcastle Hello World and add these lines:
var pinBuilder = new Cesium.PinBuilder();
window.foo = pinBuilder.fromText('?', Cesium.Color.STEELBLUE, 48).toDataURL();
  1. Click "open in new window" (on Sandcastle toolbar) and wait for the globe to appear.
  2. Hit F12 and on the JS console type: copy(foo). This will return undefined.
  3. Open a new tab and hit "Paste & Go".
  4. Right-click on the image and hit "Save image as...".
  5. Examine the image in a paint program (I've been using Gimp) that can inspect the alpha channel.

@mramato
Copy link
Contributor

mramato commented Mar 13, 2017

@emackey this is probably a one line change in PinBuilder's drawIcon function. I assume we are putting the canvas in an incorrect compositing mode or something. Might be a super easy fix if you want to take a look.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants