Scatterplot layer: smooth edges prop

docs/api-reference/layers/scatterplot-layer.md

@@ -142,6 +142,13 @@ 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).
 
+##### `smoothEdges` (Boolean, optional)
+
+- Default: `true`
+
+If `true`, circles are rendered with smoothed edges.
+
+
 ### 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")

modules/layers/src/geojson-layer/sub-layer-map.js

@@ -10,6 +10,7 @@ export const POINT_LAYER = {
     props: {
       filled: 'filled',
       stroked: 'stroked',
+      smoothEdges: 'smoothEdges',
 
       lineWidthMaxPixels: 'lineWidthMaxPixels',
       lineWidthMinPixels: 'lineWidthMinPixels',

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 smoothEdges;
 
 varying vec4 vFillColor;
 varying vec4 vLineColor;
@@ -36,7 +37,9 @@ void main(void) {
   geometry.uv = unitPosition;
 
   float distToCenter = length(unitPosition) * outerRadiusPixels;
-  float inCircle = smoothedge(distToCenter, outerRadiusPixels);
+  float inCircle = smoothEdges ? 
+    smoothedge(distToCenter, outerRadiusPixels) : 
+    distToCenter < outerRadiusPixels ? 1.0 : 0.0;
 
   if (inCircle == 0.0) {
     discard;

modules/layers/src/scatterplot-layer/scatterplot-layer.js

@@ -41,6 +41,7 @@ const defaultProps = {
   stroked: false,
   filled: true,
   billboard: false,
+  smoothEdges: 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,
+      smoothEdges,
       lineWidthUnits,
       lineWidthScale,
       lineWidthMinPixels,
@@ -134,6 +136,7 @@ export default class ScatterplotLayer extends Layer {
         stroked: stroked ? 1 : 0,
         filled,
         billboard,
+        smoothEdges,
         radiusScale: radiusScale * pointRadiusMultiplier,
         radiusMinPixels,
         radiusMaxPixels,

test/render/test-cases/core-layers.js

@@ -90,6 +90,7 @@ export default [
         getFillColor: d => [255, 128, 0],
         getRadius: d => d.SPACES,
         billboard: true,
+        smoothEdges: false,
         radiusScale: 30,
         radiusMinPixels: 1,
         radiusMaxPixels: 30