fix(element): render MSDF text at the true glyph edge (#8935)

* fix(element): render MSDF text at the true glyph edge

A fixed 0.05 bias in the coverage remap placed the edge at sigDist ~0.525
instead of 0.5, eroding every glyph inward; at thin junctions this carved a
hole in the 'f' crossbar and notches in the 'x' crossing. Render at the true
edge (font_sdfIntensity 0 -> 0.5, still fattening with the same slope) and
derive anti-aliasing from the distance-field gradient so edges of any
orientation - including italic diagonals - anti-alias correctly. Drop the
now-unused map(), font_pxrange and font_textureWidth uniforms and _getPxRange().

Fixes #2948

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

* fix(element): flag outdated msdfPS chunk overrides

The coverage change removes the font_pxrange and font_textureWidth uniforms
(the engine no longer sets them), changing the msdfPS chunk contract. Register
msdfPS in chunkVersions so an older user override is flagged by the validator.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

* docs(element): keep msdf shader comments to current behaviour

Drop the historical narrative from the coverage/anti-aliasing comments and
describe only what the code does.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>

Author: willeastcott

src/framework/components/element/text-element.js

@@ -684,8 +684,6 @@ class TextElement {
                 mi.setParameter('material_emissive', this._colorUniform);
                 mi.setParameter('material_opacity', this._color.a);
                 mi.setParameter('font_sdfIntensity', this._font.intensity);
-                mi.setParameter('font_pxrange', this._getPxRange(this._font));
-                mi.setParameter('font_textureWidth', this._font.data.info.maps[i].width);
 
                 mi.setParameter('outline_color', this._outlineColorUniform);
                 mi.setParameter('outline_thickness', this._outlineThicknessScale * this._outlineThickness);
@@ -1414,8 +1412,6 @@ class TextElement {
                 const mi = this._meshInfo[i].meshInstance;
                 if (mi) {
                     mi.setParameter('font_sdfIntensity', this._font.intensity);
-                    mi.setParameter('font_pxrange', this._getPxRange(this._font));
-                    mi.setParameter('font_textureWidth', this._font.data.info.maps[i].width);
                 }
             }
         }
@@ -1439,18 +1435,6 @@ class TextElement {
         }
     }
 
-    _getPxRange(font) {
-        // calculate pxrange from range and scale properties on a character
-        const keys = Object.keys(this._font.data.chars);
-        for (let i = 0; i < keys.length; i++) {
-            const char = this._font.data.chars[keys[i]];
-            if (char.range) {
-                return (char.scale || 1) * char.range;
-            }
-        }
-        return 2; // default
-    }
-
     _getUv(char) {
         const data = this._font.data;
 
@@ -1798,8 +1782,6 @@ class TextElement {
                 const mi = this._meshInfo[i].meshInstance;
                 if (mi) {
                     mi.setParameter('font_sdfIntensity', this._font.intensity);
-                    mi.setParameter('font_pxrange', this._getPxRange(this._font));
-                    mi.setParameter('font_textureWidth', this._font.data.info.maps[i].width);
                     this._setTextureParams(mi, this._font.textures[i]);
                 }
             }

src/scene/shader-lib/glsl/chunks/chunk-validation.js

@@ -57,7 +57,10 @@ const chunkVersions = {
     iridescenceDiffractionPS: '1.65',
     lightmapAddPS: '1.65',
     refractionCubePS: '1.70',
-    refractionDynamicPS: '1.70'
+    refractionDynamicPS: '1.70',
+
+    // text
+    msdfPS: '2.20'
 };
 
 // removed

src/scene/shader-lib/glsl/chunks/common/frag/msdf.js

@@ -5,13 +5,7 @@ float median(float r, float g, float b) {
     return max(min(r, g), min(max(r, g), b));
 }
 
-float map (float min, float max, float v) {
-    return (v - min) / (max - min);
-}
-
 uniform float font_sdfIntensity; // intensity is used to boost the value read from the SDF, 0 is no boost, 1.0 is max boost
-uniform float font_pxrange;      // the number of pixels between inside and outside the font in SDF
-uniform float font_textureWidth; // the width of the texture atlas
 
 #ifndef LIT_MSDF_TEXT_ATTRIBUTE
     uniform vec4 outline_color;
@@ -41,27 +35,15 @@ vec4 applyMsdf(vec4 color) {
     float sigDist = median(tsample.r, tsample.g, tsample.b);
     float sigDistShdw = median(ssample.r, ssample.g, ssample.b);
 
-    // smoothing limit - smaller value makes for sharper but more aliased text, especially on angles
-    // too large value (0.5) creates a dark glow around the letters
-    float smoothingMax = 0.2;
-
-    // smoothing depends on size of texture on screen
-    vec2 w = fwidth(vUv0);
-    float smoothing = clamp(w.x * font_textureWidth / font_pxrange, 0.0, smoothingMax);
-
-    float mapMin = 0.05;
-    float mapMax = clamp(1.0 - font_sdfIntensity, mapMin, 1.0);
+    // coverage threshold (0.5 = glyph edge); font_sdfIntensity fattens the glyph
+    float edge = 0.5 - 0.5 * font_sdfIntensity;
 
-    // remap to a smaller range (used on smaller font sizes)
-    float sigDistInner = map(mapMin, mapMax, sigDist);
-    float sigDistOutline = map(mapMin, mapMax, sigDist + outline_thickness);
-    sigDistShdw = map(mapMin, mapMax, sigDistShdw + outline_thickness);
+    // anti-aliasing width: distance field change per pixel, clamped above zero
+    float aa = max(fwidth(sigDist), 1e-4);
 
-    float center = 0.5;
-    // calculate smoothing and use to generate opacity
-    float inside = smoothstep(center-smoothing, center+smoothing, sigDistInner);
-    float outline = smoothstep(center-smoothing, center+smoothing, sigDistOutline);
-    float shadow = smoothstep(center-smoothing, center+smoothing, sigDistShdw);
+    float inside = clamp((sigDist - edge) / aa + 0.5, 0.0, 1.0);
+    float outline = clamp((sigDist + outline_thickness - edge) / aa + 0.5, 0.0, 1.0);
+    float shadow = clamp((sigDistShdw + outline_thickness - edge) / aa + 0.5, 0.0, 1.0);
 
     vec4 tcolor = (outline > inside) ? outline * vec4(outline_color.a * outline_color.rgb, outline_color.a) : vec4(0.0);
     tcolor = mix(tcolor, color, inside);

src/scene/shader-lib/wgsl/chunks/common/frag/msdf.js

@@ -6,13 +6,7 @@ fn median(r: f32, g: f32, b: f32) -> f32 {
     return max(min(r, g), min(max(r, g), b));
 }
 
-fn map(min: f32, max: f32, v: f32) -> f32 {
-    return (v - min) / (max - min);
-}
-
 uniform font_sdfIntensity: f32; // intensity is used to boost the value read from the SDF, 0 is no boost, 1.0 is max boost
-uniform font_pxrange: f32;      // the number of pixels between inside and outside the font in SDF
-uniform font_textureWidth: f32; // the width of the texture atlas
 
 #ifndef LIT_MSDF_TEXT_ATTRIBUTE
     uniform outline_color: vec4f;
@@ -52,29 +46,17 @@ fn applyMsdf(color_in: vec4f) -> vec4f {
 
     // get the signed distance value
     let sigDist: f32 = median(tsample.r, tsample.g, tsample.b);
-    var sigDistShdw: f32 = median(ssample.r, ssample.g, ssample.b);
-
-    // smoothing limit - smaller value makes for sharper but more aliased text, especially on angles
-    // too large value (0.5) creates a dark glow around the letters
-    let smoothingMax: f32 = 0.2;
-
-    // smoothing depends on size of texture on screen
-    let w: vec2f = abs(dpdx(vUv0)) + abs(dpdy(vUv0));
-    let smoothing: f32 = clamp(w.x * uniform.font_textureWidth / uniform.font_pxrange, 0.0, smoothingMax);
+    let sigDistShdw: f32 = median(ssample.r, ssample.g, ssample.b);
 
-    let mapMin: f32 = 0.05;
-    let mapMax: f32 = clamp(1.0 - uniform.font_sdfIntensity, mapMin, 1.0);
+    // coverage threshold (0.5 = glyph edge); font_sdfIntensity fattens the glyph
+    let edge: f32 = 0.5 - 0.5 * uniform.font_sdfIntensity;
 
-    // remap to a smaller range (used on smaller font sizes)
-    let sigDistInner: f32 = map(mapMin, mapMax, sigDist);
-    let sigDistOutline: f32 = map(mapMin, mapMax, sigDist + outline_thicknessValue);
-    sigDistShdw = map(mapMin, mapMax, sigDistShdw + outline_thicknessValue);
+    // anti-aliasing width: distance field change per pixel, clamped above zero
+    let aa: f32 = max(abs(dpdx(sigDist)) + abs(dpdy(sigDist)), 1e-4);
 
-    let center: f32 = 0.5;
-    // calculate smoothing and use to generate opacity
-    let inside: f32 = smoothstep(center - smoothing, center + smoothing, sigDistInner);
-    let outline: f32 = smoothstep(center - smoothing, center + smoothing, sigDistOutline);
-    let shadow: f32 = smoothstep(center - smoothing, center + smoothing, sigDistShdw);
+    let inside: f32 = clamp((sigDist - edge) / aa + 0.5, 0.0, 1.0);
+    let outline: f32 = clamp((sigDist + outline_thicknessValue - edge) / aa + 0.5, 0.0, 1.0);
+    let shadow: f32 = clamp((sigDistShdw + outline_thicknessValue - edge) / aa + 0.5, 0.0, 1.0);
 
     let tcolor_outline: vec4f = outline * vec4f(outline_colorValue.a * outline_colorValue.rgb, outline_colorValue.a);
     var tcolor: vec4f = select(vec4f(0.0), tcolor_outline, outline > inside);