Billboard prop for Scatterplot layer (visgl#5956)

harisbal · Jul 12, 2021 · f3b2aab · f3b2aab
1 parent 01d819d
commit f3b2aab
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 3 deletions.
diff --git a/docs/api-reference/layers/scatterplot-layer.md b/docs/api-reference/layers/scatterplot-layer.md
@@ -136,6 +136,11 @@ The minimum line width in pixels. This prop can be used to prevent the stroke fr
 
 The maximum line width in pixels. This prop can be used to prevent the path from getting too thick when zoomed in.
 
+##### `billboard` (Boolean, optional)
+
+- Default: `false`
+
+If `true`, rendered circles always face the camera. If `false` circles face up (i.e. are parallel with the ground plane).
 
 ### Data Accessors
 

diff --git a/modules/layers/src/scatterplot-layer/scatterplot-layer-vertex.glsl.js b/modules/layers/src/scatterplot-layer/scatterplot-layer-vertex.glsl.js
@@ -40,6 +40,7 @@ uniform float lineWidthMinPixels;
 uniform float lineWidthMaxPixels;
 uniform float stroked;
 uniform bool filled;
+uniform bool billboard;
 
 varying vec4 vFillColor;
 varying vec4 vLineColor;
@@ -72,9 +73,17 @@ void main(void) {
 
   innerUnitRadius = 1.0 - stroked * lineWidthPixels / outerRadiusPixels;
   
-  vec3 offset = positions * project_pixel_size(outerRadiusPixels);
-  DECKGL_FILTER_SIZE(offset, geometry);
-  gl_Position = project_position_to_clipspace(instancePositions, instancePositions64Low, offset, geometry.position);
+  if (billboard) {
+    gl_Position = project_position_to_clipspace(instancePositions, instancePositions64Low, vec3(0.0), geometry.position);
+    vec3 offset = positions * outerRadiusPixels;
+    DECKGL_FILTER_SIZE(offset, geometry);
+    gl_Position.xy += project_pixel_size_to_clipspace(offset.xy);
+  } else {
+    vec3 offset = positions * project_pixel_size(outerRadiusPixels);
+    DECKGL_FILTER_SIZE(offset, geometry);
+    gl_Position = project_position_to_clipspace(instancePositions, instancePositions64Low, offset, geometry.position);
+  }
+
   DECKGL_FILTER_GL_POSITION(gl_Position, geometry);
 
   // Apply opacity to instance color, or return instance picking color

diff --git a/modules/layers/src/scatterplot-layer/scatterplot-layer.js b/modules/layers/src/scatterplot-layer/scatterplot-layer.js
@@ -40,6 +40,7 @@ const defaultProps = {
 
   stroked: false,
   filled: true,
+  billboard: false,
 
   getPosition: {type: 'accessor', value: x => x.position},
   getRadius: {type: 'accessor', value: 1},
@@ -117,6 +118,7 @@ export default class ScatterplotLayer extends Layer {
       radiusMaxPixels,
       stroked,
       filled,
+      billboard,
       lineWidthUnits,
       lineWidthScale,
       lineWidthMinPixels,
@@ -131,6 +133,7 @@ export default class ScatterplotLayer extends Layer {
       .setUniforms({
         stroked: stroked ? 1 : 0,
         filled,
+        billboard,
         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
@@ -73,6 +73,30 @@ export default [
     ],
     goldenImage: './test/render/golden-images/scatterplot-lnglat.png'
   },
+  {
+    name: 'scatterplot-lnglat-billboard',
+    viewState: {
+      latitude: 37.751537058389985,
+      longitude: -122.42694203247012,
+      zoom: 11.5,
+      pitch: 45,
+      bearing: 0
+    },
+    layers: [
+      new ScatterplotLayer({
+        id: 'scatterplot-lnglat-billboard',
+        data: dataSamples.points,
+        getPosition: d => d.COORDINATES,
+        getFillColor: d => [255, 128, 0],
+        getRadius: d => d.SPACES,
+        billboard: true,
+        radiusScale: 30,
+        radiusMinPixels: 1,
+        radiusMaxPixels: 30
+      })
+    ],
+    goldenImage: './test/render/golden-images/scatterplot-lnglat-billboard.png'
+  },
   {
     name: 'line-lnglat',
     viewState: {