Smooth edges in scatterplot (#4021)

visgl · Jan 31, 2020 · 5bc1ecc · 5bc1ecc
1 parent 851909b
commit 5bc1ecc
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 7 deletions.
diff --git a/modules/core/src/shaderlib/misc/geometry.js b/modules/core/src/shaderlib/misc/geometry.js
@@ -30,9 +30,15 @@ struct VertexGeometry {
 `;
 
 const fs = `
+#define SMOOTH_EDGE_RADIUS 0.5
+
 struct FragmentGeometry {
   vec2 uv;
 } geometry;
+
+float smoothedge(float edge, float x) {
+  return smoothstep(edge - SMOOTH_EDGE_RADIUS, edge + SMOOTH_EDGE_RADIUS, x);
+}
 `;
 
 export default {name: 'geometry', vs, fs};
diff --git a/modules/layers/src/scatterplot-layer/scatterplot-layer-fragment.glsl.js b/modules/layers/src/scatterplot-layer/scatterplot-layer-fragment.glsl.js
@@ -24,28 +24,41 @@ export default `\
 precision highp float;
 
 uniform bool filled;
+uniform float stroked;
 
 varying vec4 vFillColor;
 varying vec4 vLineColor;
 varying vec2 unitPosition;
 varying float innerUnitRadius;
+varying float outerRadiusPixels;
 
 void main(void) {
   geometry.uv = unitPosition;
 
-  float distToCenter = length(unitPosition);
+  float distToCenter = length(unitPosition) * outerRadiusPixels;
+  float inCircle = smoothedge(distToCenter, outerRadiusPixels);
 
-  if (distToCenter > 1.0) {
+  if (inCircle == 0.0) {
     discard;
-  } 
-  if (distToCenter > innerUnitRadius) {
-    gl_FragColor = vLineColor;
+  }
+
+  if (stroked > 0.5) {
+    float isLine = smoothedge(innerUnitRadius * outerRadiusPixels, distToCenter);
+    if (filled) {
+      gl_FragColor = mix(vFillColor, vLineColor, isLine);
+    } else {
+      if (isLine == 0.0) {
+        discard;
+      }
+      gl_FragColor = vec4(vLineColor.rgb, vLineColor.a * isLine);
+    }
   } else if (filled) {
     gl_FragColor = vFillColor;
   } else {
     discard;
   }
 
+  gl_FragColor.a *= inCircle;
   DECKGL_FILTER_COLOR(gl_FragColor, geometry);
 }
 `;
diff --git a/modules/layers/src/scatterplot-layer/scatterplot-layer-vertex.glsl.js b/modules/layers/src/scatterplot-layer/scatterplot-layer-vertex.glsl.js
@@ -45,12 +45,13 @@ varying vec4 vFillColor;
 varying vec4 vLineColor;
 varying vec2 unitPosition;
 varying float innerUnitRadius;
+varying float outerRadiusPixels;
 
 void main(void) {
   geometry.worldPosition = instancePositions;
 
   // Multiply out radius and clamp to limits
-  float outerRadiusPixels = clamp(
+  outerRadiusPixels = clamp(
     project_size_to_pixel(radiusScale * instanceRadius),
     radiusMinPixels, radiusMaxPixels
   );

diff --git a/test/modules/core/lib/pick-layers.spec.js b/test/modules/core/lib/pick-layers.spec.js
@@ -410,7 +410,7 @@ const TEST_CASES = [
             height: 400
           },
           results: {
-            count: 33
+            count: 34
           }
         },
         {

diff --git a/test/render/golden-images/post-process-effects.png b/test/render/golden-images/post-process-effects.png
diff --git a/test/render/golden-images/scatterplot-lnglat.png b/test/render/golden-images/scatterplot-lnglat.png