Improve how points with small radii or stroke widths are rendered.

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Change Log
 
+## Unreleased
+
+### Improvements
+- Points with small radii or thin strokes are rendered better (#1021)
+
 ## Version 0.19.6
 
 ### Features

src/webgl/pointFeature.js

@@ -349,10 +349,12 @@ var webgl_pointFeature = function (arg) {
       }
       s_updateStyleFromArray(key, styleArray, false);
     });
-    if (m_this.visible() && needsRefresh) {
-      m_this.draw();
-    } else if (needsRender) {
-      m_this.renderer()._render();
+    if (refresh) {
+      if (m_this.visible() && needsRefresh) {
+        m_this.draw();
+      } else if (needsRender) {
+        m_this.renderer()._render();
+      }
     }
     return m_this;
   };

src/webgl/pointFeaturePoly.frag

@@ -23,24 +23,26 @@ void main () {
     discard;
   // If there is no stroke, the fill region should transition to nothing
   if (strokeVar == 0.0) {
-    strokeColor = vec4 (fillColorVar.rgb, 0.0);
+    strokeColor = vec4(fillColorVar.rgb, 0.0);
     endStep = 1.0;
   } else {
     strokeColor = strokeColorVar;
     endStep = radiusVar / (radiusVar + strokeWidthVar);
   }
   // Likewise, if there is no fill, the stroke should transition to nothing
   if (fillVar == 0.0)
-    fillColor = vec4 (strokeColor.rgb, 0.0);
+    fillColor = vec4(strokeColor.rgb, 0.0);
   else
     fillColor = fillColorVar;
-  // Distance to antialias over
-  float antialiasDist = 3.0 / (2.0 * radiusVar);
+  // Distance to antialias over.  First number is in pixels
+  float antialiasDist = 1.5 / (radiusVar + strokeWidthVar);
   if (rad < endStep) {
-    float step = smoothstep (endStep - antialiasDist, endStep, rad);
-    gl_FragColor = mix (fillColor, strokeColor, step);
+    float step = smoothstep(max(0.0, endStep - antialiasDist), endStep, rad);
+    vec4 color = mix(fillColor, strokeColor, step);
+    float step2 = smoothstep(max(0.0, 1.0 - antialiasDist), 1.0, rad);
+    gl_FragColor = mix(color, vec4(color.rgb, 0.0), step2);
   } else {
-    float step = smoothstep (1.0 - antialiasDist, 1.0, rad);
-    gl_FragColor = mix (strokeColor, vec4 (strokeColor.rgb, 0.0), step);
+    float step = smoothstep(max(0.0, 1.0 - antialiasDist), 1.0, rad);
+    gl_FragColor = mix(strokeColor, vec4(strokeColor.rgb, 0.0), step);
   }
 }

src/webgl/pointFeatureSprite.frag

@@ -18,29 +18,31 @@ void main () {
   // No stroke or fill implies nothing to draw
   if (fillVar == 0.0 && strokeVar == 0.0)
     discard;
-  float rad = 2.0 * length (gl_PointCoord - vec2(0.5));  // distinct for sprite
+  float rad = 2.0 * length(gl_PointCoord - vec2(0.5));  // distinct for sprite
   if (rad > 1.0)
     discard;
   // If there is no stroke, the fill region should transition to nothing
   if (strokeVar == 0.0) {
-    strokeColor = vec4 (fillColorVar.rgb, 0.0);
+    strokeColor = vec4(fillColorVar.rgb, 0.0);
     endStep = 1.0;
   } else {
     strokeColor = strokeColorVar;
     endStep = radiusVar / (radiusVar + strokeWidthVar);
   }
   // Likewise, if there is no fill, the stroke should transition to nothing
   if (fillVar == 0.0)
-    fillColor = vec4 (strokeColor.rgb, 0.0);
+    fillColor = vec4(strokeColor.rgb, 0.0);
   else
     fillColor = fillColorVar;
-  // Distance to antialias over
-  float antialiasDist = 3.0 / (2.0 * radiusVar);
+  // Distance to antialias over.  First number is in pixels
+  float antialiasDist = 1.5 / (radiusVar + strokeWidthVar);
   if (rad < endStep) {
-    float step = smoothstep (endStep - antialiasDist, endStep, rad);
-    gl_FragColor = mix (fillColor, strokeColor, step);
+    float step = smoothstep(max(0.0, endStep - antialiasDist), endStep, rad);
+    vec4 color = mix(fillColor, strokeColor, step);
+    float step2 = smoothstep(max(0.0, 1.0 - antialiasDist), 1.0, rad);
+    gl_FragColor = mix(color, vec4(color.rgb, 0.0), step2);
   } else {
-    float step = smoothstep (1.0 - antialiasDist, 1.0, rad);
-    gl_FragColor = mix (strokeColor, vec4 (strokeColor.rgb, 0.0), step);
+    float step = smoothstep(max(0.0, 1.0 - antialiasDist), 1.0, rad);
+    gl_FragColor = mix(strokeColor, vec4(strokeColor.rgb, 0.0), step);
   }
 }