Add billboard option

docs/layers/icon-layer.md

@@ -212,6 +212,12 @@ The maximum size in pixels.
 
 Whether the layer should be rendered in high-precision 64-bit mode. Note that since deck.gl v6.1, the default 32-bit projection uses a hybrid mode that matches 64-bit precision with significantly better performance.
 
+##### `billboard` (Boolean, optional)
+
+- Default: `true`
+
+If on, the text always faces camera. Otherwise the text faces up (z)
+
 ### Data Accessors
 
 ##### `getIcon` ([Function](/docs/developer-guide/using-layers.md#accessors), optional)

docs/layers/text-layer.md

@@ -114,6 +114,12 @@ The maximum size in pixels.
 
 Whether the layer should be rendered in high-precision 64-bit mode. Note that since deck.gl v6.1, the default 32-bit projection uses a hybrid mode that matches 64-bit precision with significantly better performance.
 
+##### `billboard` (Boolean, optional)
+
+- Default: `true`
+
+If on, the text always faces camera. Otherwise the text faces up (z).
+
 ##### `fontFamily` (String, optional)
 
 * Default: `'Monaco, monospace'`

modules/layers/src/icon-layer/icon-layer-vertex.glsl.js

@@ -37,6 +37,7 @@ uniform float sizeScale;
 uniform vec2 iconsTextureDim;
 uniform float sizeMinPixels;
 uniform float sizeMaxPixels;
+uniform bool billboard;
 
 varying float vColorMode;
 varying vec4 vColor;
@@ -66,10 +67,18 @@ void main(void) {
   // scale and rotate vertex in "pixel" value and convert back to fraction in clipspace
   vec2 pixelOffset = positions / 2.0 * iconSize + instanceOffsets;
   pixelOffset = rotate_by_angle(pixelOffset, instanceAngles) * instanceScale;
-  pixelOffset.y *= -1.0;
 
-  gl_Position = project_position_to_clipspace(instancePositions, instancePositions64xyLow, vec3(0.0));
-  gl_Position += project_pixel_to_clipspace(pixelOffset);
+  vec3 offset;
+  gl_Position = vec4(0.0);
+  if (billboard)  {
+    pixelOffset.y *= -1.0;
+    offset = vec3(0.0);
+    gl_Position += project_pixel_to_clipspace(pixelOffset);
+  } else {
+    offset = vec3(pixelOffset.xy, 0.0);
+  }
+
+  gl_Position += project_position_to_clipspace(instancePositions, instancePositions64xyLow, offset); 
 
   vTextureCoords = mix(
     instanceIconFrames.xy,

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

@@ -56,6 +56,7 @@ const defaultProps = {
   iconMapping: {type: 'object', value: {}, async: true},
   sizeScale: {type: 'number', value: 1, min: 0},
   fp64: false,
+  billboard: true,
   sizeUnits: 'pixels',
   sizeMinPixels: {type: 'number', min: 0, value: 0}, //  min point radius in pixels
   sizeMaxPixels: {type: 'number', min: 0, value: Number.MAX_SAFE_INTEGER}, // max point radius in pixels
@@ -174,7 +175,7 @@ export default class IconLayer extends Layer {
   /* eslint-enable max-statements, complexity */
 
   draw({uniforms}) {
-    const {sizeScale, sizeMinPixels, sizeMaxPixels, sizeUnits} = this.props;
+    const {sizeScale, sizeMinPixels, sizeMaxPixels, sizeUnits, billboard} = this.props;
     const {iconManager} = this.state;
     const {viewport} = this.context;
 
@@ -187,7 +188,8 @@ export default class IconLayer extends Layer {
           sizeScale:
             sizeScale * (sizeUnits === 'pixels' ? viewport.distanceScales.metersPerPixel[2] : 1),
           sizeMinPixels,
-          sizeMaxPixels
+          sizeMaxPixels,
+          billboard
         })
       );
     }

modules/layers/src/text-layer/multi-icon-layer/multi-icon-layer-vertex.glsl.js

@@ -42,6 +42,7 @@ uniform float sizeMaxPixels;
 uniform vec2 iconsTextureDim;
 uniform float gamma;
 uniform float opacity;
+uniform bool billboard;
 
 varying float vColorMode;
 varying vec4 vColor;
@@ -73,10 +74,18 @@ void main(void) {
 
   pixelOffset = rotate_by_angle(pixelOffset, instanceAngles) * instanceScale;
   pixelOffset += instancePixelOffset;
-  pixelOffset.y *= -1.0;
-
-  gl_Position = project_position_to_clipspace(instancePositions, instancePositions64xyLow, vec3(0.0));
-  gl_Position += project_pixel_to_clipspace(pixelOffset);
+  
+  vec3 offset;
+  gl_Position = vec4(0.0);
+  if (billboard)  {
+    pixelOffset.y *= -1.0;
+    offset = vec3(0.0);
+    gl_Position += project_pixel_to_clipspace(pixelOffset);
+  } else {
+    offset = vec3(pixelOffset.xy, 0.0);
+  }
+
+  gl_Position += project_position_to_clipspace(instancePositions, instancePositions64xyLow, offset); 
 
   vTextureCoords = mix(
     instanceIconFrames.xy,

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

@@ -57,6 +57,7 @@ const FONT_SETTINGS_PROPS = ['fontSize', 'buffer', 'sdf', 'radius', 'cutoff'];
 
 const defaultProps = {
   fp64: false,
+  billboard: true,
   sizeScale: 1,
   sizeUnits: 'pixels',
   sizeMinPixels: 0,
@@ -247,6 +248,7 @@ export default class TextLayer extends CompositeLayer {
       getAlignmentBaseline,
       getPixelOffset,
       fp64,
+      billboard,
       sdf,
       sizeScale,
       sizeUnits,
@@ -272,6 +274,7 @@ export default class TextLayer extends CompositeLayer {
         getAnchorY: this.getAnchorYFromAlignmentBaseline(getAlignmentBaseline),
         getPixelOffset: this._getAccessor(getPixelOffset),
         fp64,
+        billboard,
         sizeScale: sizeScale * scale,
         sizeUnits,
         sizeMinPixels: sizeMinPixels * scale,

test/render/test-cases.js

@@ -508,6 +508,40 @@ export const TEST_CASES = [
     },
     goldenImage: './test/render/golden-images/icon-lnglat.png'
   },
+  {
+    name: 'icon-lnglat-facing-up',
+    viewState: {
+      latitude: 37.751537058389985,
+      longitude: -122.42694203247012,
+      zoom: 11.5,
+      pitch: 0,
+      bearing: 0
+    },
+    // rendering times
+    renderingTimes: 2,
+    layers: [
+      new IconLayer({
+        id: 'icon-lnglat',
+        data: dataSamples.points,
+        iconAtlas: ICON_ATLAS,
+        billboard: false,
+        iconMapping: dataSamples.iconAtlas,
+        sizeScale: 12,
+        getPosition: d => d.COORDINATES,
+        getColor: d => [64, 64, 72],
+        getIcon: d => (d.PLACEMENT === 'SW' ? 'marker' : 'marker-warning'),
+        getSize: d => (d.RACKS > 2 ? 2 : 1),
+        opacity: 0.8,
+        pickable: true
+      })
+    ],
+    onAfterRender: ({layers, done}) => {
+      if (layers[0].state.iconManager.getTexture()) {
+        done();
+      }
+    },
+    goldenImage: './test/render/golden-images/icon-lnglat-facing-up.png'
+  },
   {
     name: 'icon-lnglat-64',
     viewState: {