Scatterplot layer: smooth edges prop (visgl#6081)

harisbal · Aug 10, 2021 · afa5eec · afa5eec
1 parent 62c579b
commit afa5eec
Show file tree

Hide file tree

Showing 7 changed files with 20 additions and 2 deletions.
diff --git a/docs/api-reference/layers/geojson-layer.md b/docs/api-reference/layers/geojson-layer.md
@@ -272,6 +272,7 @@ The following props are forwarded to a `ScatterplotLayer` if `pointType` is `'ci
 | `pointRadiusScale` | `1` | [radiusScale](/docs/api-reference/layers/scatterplot-layer.md#radiusscale) |
 | `pointRadiusMinPixels` | `0` | [radiusMinPixels](/docs/api-reference/layers/scatterplot-layer.md#radiusminpixels) |
 | `pointRadiusMaxPixels` | `Number.MAX_SAFE_INTEGER` | [radiusMaxPixels](/docs/api-reference/layers/scatterplot-layer.md#radiusmaxpixels) |
+| `pointAntialiasing` | `true` | [antialiasing](/docs/api-reference/layers/scatterplot-layer.md#antialiasing) |
 
 
 ### pointType:icon Options

diff --git a/docs/api-reference/layers/scatterplot-layer.md b/docs/api-reference/layers/scatterplot-layer.md
@@ -142,6 +142,12 @@ The maximum line width in pixels. This prop can be used to prevent the path from
 
 If `true`, rendered circles always face the camera. If `false` circles face up (i.e. are parallel with the ground plane).
 
+##### `antialiasing` (Boolean, optional)
+
+- Default: `true`
+
+If `true`, circles are rendered with smoothed edges. If `false`, circles are rendered with rough edges. Antialiasing can cause artifacts on edges of overlapping circles. Also, antialiasing isn't supported in FirstPersonView. 
+
 ### Data Accessors
 
 ##### `getPosition` ([Function](/docs/developer-guide/using-layers.md#accessors), optional) ![transition-enabled](https://img.shields.io/badge/transition-enabled-green.svg?style=flat-square")

diff --git a/modules/layers/src/geojson-layer/sub-layer-map.js b/modules/layers/src/geojson-layer/sub-layer-map.js
@@ -19,6 +19,7 @@ export const POINT_LAYER = {
       pointRadiusMinPixels: 'radiusMinPixels',
       pointRadiusScale: 'radiusScale',
       pointRadiusUnits: 'radiusUnits',
+      pointAntialiasing: 'antialiasing',
 
       getFillColor: 'getFillColor',
       getLineColor: 'getLineColor',

diff --git a/modules/layers/src/scatterplot-layer/scatterplot-layer-fragment.glsl.js b/modules/layers/src/scatterplot-layer/scatterplot-layer-fragment.glsl.js
@@ -25,6 +25,7 @@ precision highp float;
 
 uniform bool filled;
 uniform float stroked;
+uniform bool antialiasing;
 
 varying vec4 vFillColor;
 varying vec4 vLineColor;
@@ -36,14 +37,19 @@ void main(void) {
   geometry.uv = unitPosition;
 
   float distToCenter = length(unitPosition) * outerRadiusPixels;
-  float inCircle = smoothedge(distToCenter, outerRadiusPixels);
+  float inCircle = antialiasing ? 
+    smoothedge(distToCenter, outerRadiusPixels) : 
+    step(distToCenter, outerRadiusPixels);
 
   if (inCircle == 0.0) {
     discard;
   }
 
   if (stroked > 0.5) {
-    float isLine = smoothedge(innerUnitRadius * outerRadiusPixels, distToCenter);
+    float isLine = antialiasing ? 
+      smoothedge(innerUnitRadius * outerRadiusPixels, distToCenter) :
+      step(innerUnitRadius * outerRadiusPixels, distToCenter);
+
     if (filled) {
       gl_FragColor = mix(vFillColor, vLineColor, isLine);
     } else {

diff --git a/modules/layers/src/scatterplot-layer/scatterplot-layer.js b/modules/layers/src/scatterplot-layer/scatterplot-layer.js
@@ -41,6 +41,7 @@ const defaultProps = {
   stroked: false,
   filled: true,
   billboard: false,
+  antialiasing: true,
 
   getPosition: {type: 'accessor', value: x => x.position},
   getRadius: {type: 'accessor', value: 1},
@@ -119,6 +120,7 @@ export default class ScatterplotLayer extends Layer {
       stroked,
       filled,
       billboard,
+      antialiasing,
       lineWidthUnits,
       lineWidthScale,
       lineWidthMinPixels,
@@ -134,6 +136,7 @@ export default class ScatterplotLayer extends Layer {
         stroked: stroked ? 1 : 0,
         filled,
         billboard,
+        antialiasing,
         radiusScale: radiusScale * pointRadiusMultiplier,
         radiusMinPixels,
         radiusMaxPixels,

diff --git a/test/render/golden-images/scatterplot-lnglat-billboard.png b/test/render/golden-images/scatterplot-lnglat-billboard.png
diff --git a/test/render/test-cases/core-layers.js b/test/render/test-cases/core-layers.js
@@ -90,6 +90,7 @@ export default [
         getFillColor: d => [255, 128, 0],
         getRadius: d => d.SPACES,
         billboard: true,
+        antialiasing: false,
         radiusScale: 30,
         radiusMinPixels: 1,
         radiusMaxPixels: 30