diff --git a/README.md b/README.md index 531c946..a452f11 100644 --- a/README.md +++ b/README.md @@ -33,17 +33,16 @@ 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)); ``` This example sets alpha to either `0` or `1`. Edges can also be anti aliased using the following GLSL snippet: ``` glsl -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); -vec4 color = vec4(pixel.rgb, alpha); + +vec4 color = vec4(pixel.rgb, clamp((pixel.a - 0.5) * 2.0 / fwidth(pixel.a), 0., 1.))); ``` -This example interpolates alpha from `0` to `1`, creating smooth anti aliased edges. \ No newline at end of file +This example interpolates alpha from `0` to `1` using standard derivatives, creating smooth anti aliased edges. \ No newline at end of file diff --git a/js/gl/shaderPreview.js b/js/gl/shaderPreview.js index c4871be..532e593 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 - .5) * 2. / fwidth(pixel.a), 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