diff --git a/README.md b/README.md index 2e73db8..cffe853 100644 --- a/README.md +++ b/README.md @@ -29,6 +29,7 @@ To render SDF textures, the alpha channel of a pixel should not be interpreted a ``` glsl vec4 pixel = texture(source, uv); + vec4 color = vec4(pixel.rgb, step(0.5, pixel.a)); ``` @@ -38,7 +39,12 @@ This example sets alpha to either `0` or `1`. Edges can also be anti aliased usi const float epsilon = 0.000001; vec4 pixel = texture(source, uv); -float alpha = clamp((pixel.a - 0.5) / max(fwidth(pixel.a) * 0.5, epsilon), 0.0, 1.0); + +float distance = fwidth(pixel.a) * .5; +float lower = .5 - distance; +float upper = .5 + distance; +float alpha = clamp((pixel.a - lower) / (upper - lower), 0., 1.)); + vec4 color = vec4(pixel.rgb, alpha); ``` diff --git a/js/gl/shaderPreview.js b/js/gl/shaderPreview.js index c4871be..10d43de 100644 --- a/js/gl/shaderPreview.js +++ b/js/gl/shaderPreview.js @@ -10,27 +10,31 @@ export class ShaderPreview extends Shader { uniform float aspect; uniform float zoom; uniform sampler2D source; - + in vec2 vUv; - + out vec4 color; - + void main() { const float epsilon = .000001; - + vec2 uv = vec2(vUv.x, 1. - vUv.y); vec2 delta = vec2(uv.x, uv.y / aspect) - center; - + vec4 pixel = texture(source, center + (uv - center) / zoom); - + + float distance = fwidth(pixel.a) * .5; + float lower = .5 - distance; + float upper = .5 + distance; + color = vec4( mix( vec3(0.), pixel.rgb, - clamp((pixel.a - .5) / max(fwidth(pixel.a) * .5, epsilon), 0., 1.)), + clamp((pixel.a - lower) / (upper - lower), 0., 1.)), 1. - clamp((length(delta) - radius) * radiusPixels, 0., 1.)); } - `; + `; #uniformRadius; #uniformRadiusPixels; diff --git a/preview.png b/preview.png index bb4746f..96ffc7a 100644 Binary files a/preview.png and b/preview.png differ