@multiplekex/shallot 0.2.2 → 0.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@multiplekex/shallot",
-    "version": "0.2.2",
+    "version": "0.2.4",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",

package/src/extras/text/index.ts

@@ -28,7 +28,7 @@ import { Transform } from "../../standard/transforms";
 const MAX_GLYPHS = 50000;
 const GLYPH_FLOATS = 16;
 const SDF_SIZE = 96;
-const SDF_EXPONENT = 6;
+const SDF_EXPONENT = 9;
 const fontUrls: string[] = [];
 const loadedFonts: (Font | null)[] = [];
 
@@ -498,20 +498,40 @@ struct FragmentOutput {
     @location(1) mask: f32,
 }
 
+const SDF_EXPONENT: f32 = 9.0;
+
+fn sdfToSignedDistance(sdfValue: f32, maxDimension: f32) -> f32 {
+    let alpha = select(sdfValue, 1.0 - sdfValue, sdfValue > 0.5);
+    let absDist = (1.0 - pow(2.0 * alpha, 1.0 / SDF_EXPONENT)) * maxDimension;
+    return absDist * select(1.0, -1.0, sdfValue > 0.5);
+}
+
 @fragment
 fn fs(input: VertexOutput) -> FragmentOutput {
     let sdfValue = textureSample(atlasTexture, atlasSampler, input.uv).r;
 
-    let aaWidth = fwidth(sdfValue) * 0.707;
-    let alpha = smoothstep(0.5 - aaWidth, 0.5 + aaWidth, sdfValue);
+    // Decode SDF to signed distance (negative = inside, positive = outside)
+    let maxDimension = max(input.glyphDimensions.x, input.glyphDimensions.y);
+    let signedDist = sdfToSignedDistance(sdfValue, maxDimension);
+
+    // Screen-space AA distance from UV derivatives
+    let aaDist = length(fwidth(input.localUV * input.glyphDimensions)) * 0.5;
+
+    // Smoothstep with adaptive band
+    let alpha = smoothstep(aaDist, -aaDist, signedDist);
+
+    // Dilate mask by FXAA span (8 pixels) to prevent edge bleeding
+    let fxaaSpan = aaDist * 8.0;
+    let inMaskRegion = signedDist < fxaaSpan;
 
-    if alpha < 0.01 {
+    // Only discard if outside both visible region and mask region
+    if alpha < 0.01 && !inMaskRegion {
         discard;
     }
 
     var out: FragmentOutput;
     out.color = vec4(input.color.rgb, input.color.a * alpha);
-    out.mask = select(0.0, 1.0, alpha > 0.01);
+    out.mask = select(0.0, 1.0, inMaskRegion);
     return out;
 }
 `;