diff --git a/README.md b/README.md index 2e73db8..531c946 100644 --- a/README.md +++ b/README.md @@ -23,6 +23,10 @@ The quality of the output SDF can be previewed by hovering the cursor over the l The tool uses [UPNG.js](https://github.com/photopea/UPNG.js/) to produce output .PNG images, since not all browsers can produce .PNG images with colorized transparent pixels natively. In many cases, transparent pixels will become black, losing their color. This causes problems with mipmapping, since the black color blends into the neighboring pixels when downscaling to lower mipmap levels. This tool sets the color of transparent pixels to the color of the nearest opaque pixel and uses UPNG.js generate the output image, preventing the issue. +This image shows the difference between colorized transparent pixels (left) and black transparent pixels (right): + +![Mipmapping](mipmapdemo.png) + ## Rendering SDF edges in GLSL To render SDF textures, the alpha channel of a pixel should not be interpreted as the transparency of that pixel, but rather as the distance to the edge of the image, where `0.5` is exactly on the edge. The following GLSL snippet outputs transparent pixels whenever they are outside the shape: diff --git a/mipmapdemo.png b/mipmapdemo.png new file mode 100644 index 0000000..570b6e0 Binary files /dev/null and b/mipmapdemo.png differ