From e709b1bfa50c78cfabd73b10428a91f2e2b3e869 Mon Sep 17 00:00:00 2001
From: Alexander Rose <alex.rose@rcsb.org>
Date: Wed, 16 Jan 2019 15:46:53 -0800
Subject: [PATCH] better text border rendering
---
src/mol-geo/geometry/text/text.ts | 2 +-
src/mol-gl/shader/text.frag | 14 +++++---------
src/tests/browser/render-text.ts | 4 ++--
3 files changed, 8 insertions(+), 12 deletions(-)
diff --git a/src/mol-geo/geometry/text/text.ts b/src/mol-geo/geometry/text/text.ts
index c36bea3f2..bdc31447a 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 567ef0fbd..03c03a606 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 f0395806d..2411cb9bf 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)
--
GitLab