better text border rendering

src/mol-geo/geometry/text/text.ts

@@ -74,7 +74,7 @@ export namespace Text {
         ...FontAtlasParams,
         sizeFactor: PD.Numeric(1, { min: 0, max: 10, step: 0.1 }),
 
-        borderWidth: PD.Numeric(0, { min: 0, max: 1, step: 0.01 }),
+        borderWidth: PD.Numeric(0, { min: 0, max: 0.5, step: 0.01 }),
         borderColor: PD.Color(ColorNames.grey),
         offsetX: PD.Numeric(0, { min: 0, max: 10, step: 0.1 }),
         offsetY: PD.Numeric(0, { min: 0, max: 10, step: 0.1 }),

src/mol-gl/shader/text.frag

@@ -32,17 +32,11 @@ void main(){
     if (vTexCoord.x > 1.0) {
         gl_FragColor = vec4(uBackgroundColor, uBackgroundOpacity);
     } else {
-        // TODO nicer border
-
         // retrieve signed distance
         float sdf = texture2D(tFont, vTexCoord).a + uBorderWidth;
 
         // perform adaptive anti-aliasing of the edges
-        float w = clamp(
-            smoothness * (abs(dFdx(vTexCoord.x)) + abs(dFdy(vTexCoord.y))),
-            0.0,
-            0.5
-        );
+        float w = clamp(smoothness * (abs(dFdx(vTexCoord.x)) + abs(dFdy(vTexCoord.y))), 0.0, 0.5);
         float a = smoothstep(0.5 - w, 0.5 + w, sdf);
 
         // gamma correction for linear attenuation
@@ -51,8 +45,10 @@ void main(){
         if (a < 0.5) discard;
         material.a *= a;
 
-        if (uBorderWidth > 0.0 && sdf < (0.5 + uBorderWidth)) {
-            material.xyz = uBorderColor;
+        // add border
+        float t = 0.5 + uBorderWidth;
+        if (uBorderWidth > 0.0 && sdf < t) {
+            material.xyz = mix(uBorderColor, material.xyz, smoothstep(t - w, t, sdf));
         }
 
         gl_FragColor = material;

src/tests/browser/render-text.ts

@@ -33,8 +33,8 @@ function textRepr() {
         ...PD.getDefaultValues(Text.Params),
         attachment: 'middle-center',
         fontSize: 96,
-        fontWeight: 'bold',
-        background: true
+        fontWeight: 'normal',
+        borderWidth: 0.3
     }
 
     const textBuilder = TextBuilder.create(props, 1, 1)