feat(layers): add getPixelOffset prop to ScatterplotLayer

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

@@ -297,6 +297,15 @@ The width of the outline of each object, in units specified by `lineWidthUnits`
 * If a function is provided, it is called on each object to retrieve its outline width.
 * If not provided, it falls back to `strokeWidth`.
 
+#### `getPixelOffset` ([Accessor<number[2]>](../../developer-guide/using-layers.md#accessors), optional) ![transition-enabled](https://img.shields.io/badge/transition-enabled-green.svg?style=flat-square") {#getpixeloffset}
+
+* Default: `[0, 0]`
+
+Screen space offset relative to the `coordinates` in pixel unit.
+
+* If an array is provided, it is used as the offset for all objects.
+* If a function is provided, it is called on each object to retrieve its offset.
+
 ## Source
 
 [modules/layers/src/scatterplot-layer](https://github.com/visgl/deck.gl/tree/master/modules/layers/src/scatterplot-layer)

modules/layers/src/scatterplot-layer/scatterplot-layer-vertex.glsl.ts

@@ -15,6 +15,7 @@ in float instanceLineWidths;
 in vec4 instanceFillColors;
 in vec4 instanceLineColors;
 in vec3 instancePickingColors;
+in vec2 instancePixelOffset;
 
 out vec4 vFillColor;
 out vec4 vLineColor;
@@ -54,10 +55,12 @@ void main(void) {
     gl_Position = project_position_to_clipspace(instancePositions, instancePositions64Low, vec3(0.0), geometry.position);
     DECKGL_FILTER_GL_POSITION(gl_Position, geometry);
     vec3 offset = edgePadding * positions * outerRadiusPixels;
+    offset.xy += instancePixelOffset;
     DECKGL_FILTER_SIZE(offset, geometry);
     gl_Position.xy += project_pixel_size_to_clipspace(offset.xy);
   } else {
     vec3 offset = edgePadding * positions * project_pixel_size(outerRadiusPixels);
+    offset.xy += project_pixel_size(instancePixelOffset);
     DECKGL_FILTER_SIZE(offset, geometry);
     gl_Position = project_position_to_clipspace(instancePositions, instancePositions64Low, offset, geometry.position);
     DECKGL_FILTER_GL_POSITION(gl_Position, geometry);

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

@@ -116,6 +116,11 @@ type _ScatterplotLayerProps<DataT> = {
    * @default 1
    */
   getLineWidth?: Accessor<DataT, number>;
+  /**
+   * Pixel offset accessor, [x, y] in pixels.
+   * @default [0, 0]
+   */
+  getPixelOffset?: Accessor<DataT, Readonly<[number, number]>>;
   /**
    * @deprecated Use `getLineWidth` instead
    */
@@ -151,6 +156,7 @@ const defaultProps: DefaultProps<ScatterplotLayerProps> = {
   getFillColor: {type: 'accessor', value: DEFAULT_COLOR},
   getLineColor: {type: 'accessor', value: DEFAULT_COLOR},
   getLineWidth: {type: 'accessor', value: 1},
+  getPixelOffset: {type: 'accessor', value: [0, 0]},
 
   // deprecated
   strokeWidth: {deprecatedFor: 'getLineWidth'},
@@ -212,6 +218,11 @@ export default class ScatterplotLayer<DataT = any, ExtraPropsT extends {} = {}>
         transition: true,
         accessor: 'getLineWidth',
         defaultValue: 1
+      },
+      instancePixelOffset: {
+        size: 2,
+        transition: true,
+        accessor: 'getPixelOffset'
       }
     });
   }

modules/layers/src/scatterplot-layer/scatterplot-layer.wgsl.ts

@@ -28,14 +28,16 @@ struct ConstantAttributeUniforms {
  instanceFillColors: vec4<f32>,
  instanceLineColors: vec4<f32>,
  instancePickingColors: vec3<f32>,
+ instancePixelOffset: vec2<f32>,
 
  instancePositionsConstant: i32,
  instancePositions64LowConstant: i32,
  instanceRadiusConstant: i32,
  instanceLineWidthsConstant: i32,
  instanceFillColorsConstant: i32,
  instanceLineColorsConstant: i32,
- instancePickingColorsConstant: i32
+ instancePickingColorsConstant: i32,
+ instancePixelOffsetConstant: i32
 };
 
 @group(0) @binding(0) var<uniform> scatterplot: ScatterplotUniforms;
@@ -47,7 +49,8 @@ struct ConstantAttributes {
   instanceLineWidths: f32,
   instanceFillColors: vec4<f32>,
   instanceLineColors: vec4<f32>,
-  instancePickingColors: vec3<f32>
+  instancePickingColors: vec3<f32>,
+  instancePixelOffset: vec2<f32>
 };
 
 const constants = ConstantAttributes(
@@ -57,7 +60,8 @@ const constants = ConstantAttributes(
   0.0,
   vec4<f32>(0.0, 0.0, 0.0, 1.0),
   vec4<f32>(0.0, 0.0, 0.0, 1.0),
-  vec3<f32>(0.0)
+  vec3<f32>(0.0),
+  vec2<f32>(0.0)
 );
 
 struct Attributes {
@@ -71,6 +75,7 @@ struct Attributes {
   @location(5) instanceFillColors: vec4<f32>,
   @location(6) instanceLineColors: vec4<f32>,
   @location(7) instancePickingColors: vec3<f32>,
+  @location(8) instancePixelOffset: vec2<f32>
 };
 
 struct Varyings {
@@ -127,13 +132,14 @@ fn vertexMain(attributes: Attributes) -> Varyings {
   if (scatterplot.billboard != 0) {
     varyings.position = project_position_to_clipspace(attributes.instancePositions, attributes.instancePositions64Low, vec3<f32>(0.0)); // TODO , geometry.position);
     // DECKGL_FILTER_GL_POSITION(varyings.position, geometry);
-    let offset = attributes.positions; // * edgePadding * varyings.outerRadiusPixels;
+    var offset = edgePadding * attributes.positions * varyings.outerRadiusPixels;
+    offset = vec3<f32>(offset.xy + attributes.instancePixelOffset, offset.z);
     // DECKGL_FILTER_SIZE(offset, geometry);
     let clipPixels = project_pixel_size_to_clipspace(offset.xy);
-    varyings.position.x = clipPixels.x;
-    varyings.position.y = clipPixels.y;
+    varyings.position = vec4<f32>(varyings.position.x + clipPixels.x, varyings.position.y + clipPixels.y, varyings.position.z, varyings.position.w);
   } else {
-    let offset = edgePadding * attributes.positions * project_pixel_size_float(varyings.outerRadiusPixels);
+    var offset = edgePadding * attributes.positions * project_pixel_size_float(varyings.outerRadiusPixels);
+    offset = vec3<f32>(offset.xy + project_pixel_size_vec2(attributes.instancePixelOffset), offset.z);
     // DECKGL_FILTER_SIZE(offset, geometry);
     varyings.position = project_position_to_clipspace(attributes.instancePositions, attributes.instancePositions64Low, offset); // TODO , geometry.position);
     // DECKGL_FILTER_GL_POSITION(varyings.position, geometry);