diff --git a/src/mol-geo/geometry/text/text.ts b/src/mol-geo/geometry/text/text.ts index c36bea3f282145acbef821440e574c3118389a08..bdc31447af7e4b5fb06ae7ee36060d5deb923b31 100644 --- a/src/mol-geo/geometry/text/text.ts +++ b/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 }), diff --git a/src/mol-gl/shader/text.frag b/src/mol-gl/shader/text.frag index 567ef0fbd75dcf08bf7b08f5c8b44ca83bbcccf7..03c03a606f4d4970d4e8fb3cbdb57516a4a6563b 100644 --- a/src/mol-gl/shader/text.frag +++ b/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; diff --git a/src/tests/browser/render-text.ts b/src/tests/browser/render-text.ts index f0395806d41d24561e12738a0dad393ed4babc34..2411cb9bf1f4d3ed5be9e7cbab2383b50c73a5e9 100644 --- a/src/tests/browser/render-text.ts +++ b/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)