Merge branch 'master' of github.com:jobtalle/SDFMaker

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.
+This example interpolates alpha from `0` to `1` using standard derivatives, creating smooth anti aliased edges.

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;