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

Use gl.pixelStorei to premultiply alphas on icons and images in SpriteAtlas #4644

Merged
merged 3 commits into from
Apr 26, 2017

Conversation

asheemmamoowala
Copy link
Contributor

@asheemmamoowala asheemmamoowala commented Apr 26, 2017

This closes #4534

Images and Icons added to the SpriteAtlas need to premultiply the alpha channel in the image data to improve alpha blending. This is now done using WebGLs built-in flag for unpacking image data in textures

benchmark master 5ceec40 4534-gl-premultiply-alpha 5ceec40
map-load 127 ms 112 ms
style-load 80 ms 78 ms
buffer 1,191 ms 1,167 ms
fps 60 fps 60 fps
frame-duration 4.8 ms, 0% > 16ms 4.9 ms, 0% > 16ms
query-point 1.62 ms 1.77 ms
query-box 86.04 ms 84.22 ms
geojson-setdata-small 7 ms 6 ms
geojson-setdata-large 171 ms 188 ms

Launch Checklist

  • briefly describe the changes in this PR
  • write tests for all new functionality
  • document any changes to public APIs
  • post benchmark scores
  • manually test the debug page

@@ -61,6 +61,8 @@ class SpriteAtlas extends Evented {

if (ArrayBuffer.isView(pixels)) {
pixels = new Uint32Array(pixels.buffer);
} else if (pixels.data) { //Support ImageData correctly
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Any particular reason to add this? We don't document Map#addImage as accepting ImageData.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You're right, it isn't documented. I was thrown off by the error message at Line 67 below

Copy link
Member

@mourner mourner left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

@@ -221,6 +221,7 @@ class SpriteAtlas extends Evented {
gl.bindTexture(gl.TEXTURE_2D, this.texture);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

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

Successfully merging this pull request may close these issues.

Rendering error when a transparent image is added via Map#addImage
4 participants