Added new numSegments prop in ArcLayer (#8055)

CONTRIBUTING.md

@@ -78,7 +78,7 @@ deck.gl development is governed by the vis.gl Technical Steering Committee (TSC)
 
 Maintainers of deck.gl have commit access to this GitHub repository, and take part in the decision making process.
 
-If you are interested in becoming a maintainer, read the [governance guidelines](https://github.com/visgl/tsc/tree/master/developer-process/governance.md).
+If you are interested in becoming a maintainer, read the [governance guidelines](https://github.com/visgl/tsc/blob/master/governance.md).
 
 The vis.gl TSC meets monthly and publishes meeting notes via a [mailing list](https://lists.uc.foundation/g/visgl).
 This mailing list can also be utilized to reach out to the TSC.

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

@@ -85,6 +85,12 @@ Inherits from all [Base Layer](../core/layer.md) properties.
 
 If `true`, create the arc along the shortest path on the earth surface. This option is only effective with data in the `LNGLAT` coordinate system.
 
+##### `numSegments` (Number, optional) {#numSegments}
+
+* Default: `50`
+
+The number of segments used to draw each arc. This prop can be used to make arcs smooth when using `greatCircle` with long paths.
+
 ##### `widthUnits` (String, optional) {#widthunits}
 
 * Default: `'pixels'`

docs/api-reference/test-utils/snapshot-test-runner.md

@@ -124,7 +124,7 @@ Whether the test is being run in headless mode. In headless mode, Chromium uses
 
 ## Image Diff Options
 
-The test renderer and each test case may choose to override the default image diffing options. The following options from [captureAndDiffScreen](https://uber-web.github.io/probe.gl/docs/api-reference/test-utils/browser-test-driver#browsertestdriver_captureanddiffscreenoptions--object) are supported:
+The test renderer and each test case may choose to override the default image diffing options. The following options from [captureAndDiffScreen](https://github.com/uber-web/probe.gl/blob/master/docs/modules/test-utils/browser-test-driver.md#browsertestdriver_captureanddiffscreenoptions--object) are supported:
 
 * `tolerance`
 * `threshold`

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

@@ -52,6 +52,7 @@ const defaultProps: DefaultProps<ArcLayerProps> = {
   getTilt: {type: 'accessor', value: 0},
 
   greatCircle: false,
+  numSegments: {type: 'number', value: 50, min: 1},
 
   widthUnits: 'pixels',
   widthScale: {type: 'number', value: 1, min: 0},
@@ -71,6 +72,12 @@ type _ArcLayerProps<DataT> = {
    */
   greatCircle?: boolean;
 
+  /**
+   * The number of segments used to draw each arc.
+   * @default 50
+   */
+  numSegments?: number;
+
   /**
    * The units of the line width, one of `'meters'`, `'common'`, and `'pixels'`
    * @default 'pixels'
@@ -224,8 +231,12 @@ export default class ArcLayer<DataT = any, ExtraPropsT extends {} = {}> extends
 
   updateState(opts: UpdateParameters<this>): void {
     super.updateState(opts);
+    const {props, oldProps, changeFlags} = opts;
     // Re-generate model if geometry changed
-    if (opts.changeFlags.extensionsChanged) {
+    if (
+      changeFlags.extensionsChanged ||
+      (changeFlags.propsChanged && props.numSegments !== oldProps.numSegments)
+    ) {
       const {gl} = this.context;
       this.state.model?.delete();
       this.state.model = this._getModel(gl);
@@ -251,22 +262,22 @@ export default class ArcLayer<DataT = any, ExtraPropsT extends {} = {}> extends
   }
 
   protected _getModel(gl: WebGLRenderingContext): Model {
+    const {id, numSegments} = this.props;
     let positions: number[] = [];
-    const NUM_SEGMENTS = 50;
     /*
      *  (0, -1)-------------_(1, -1)
      *       |          _,-"  |
      *       o      _,-"      o
      *       |  _,-"          |
      *   (0, 1)"-------------(1, 1)
      */
-    for (let i = 0; i < NUM_SEGMENTS; i++) {
+    for (let i = 0; i < numSegments; i++) {
       positions = positions.concat([i, 1, 0, i, -1, 0]);
     }
 
     const model = new Model(gl, {
       ...this.getShaders(),
-      id: this.props.id,
+      id,
       geometry: new Geometry({
         drawMode: GL.TRIANGLE_STRIP,
         attributes: {
@@ -276,7 +287,7 @@ export default class ArcLayer<DataT = any, ExtraPropsT extends {} = {}> extends
       isInstanced: true
     });
 
-    model.setUniforms({numSegments: NUM_SEGMENTS});
+    model.setUniforms({numSegments});
 
     return model;
   }

test/render/test-cases/arc-layer.js

@@ -209,5 +209,30 @@ export default [
       })
     ],
     goldenImage: './test/render/golden-images/great-circle.png'
+  },
+  {
+    name: 'great-circle-modified-segments',
+    viewState: {
+      latitude: 0,
+      longitude: 0,
+      zoom: 0,
+      pitch: 0,
+      bearing: 0
+    },
+    layers: [
+      new ArcLayer({
+        id: 'great-circle-modified-segments',
+        data: [{source: [64, 17], target: [-112, 7]}],
+        getWidth: 5,
+        getHeight: 0,
+        greatCircle: true,
+        numSegments: 150,
+        getSourcePosition: d => d.source,
+        getTargetPosition: d => d.target,
+        getSourceColor: [64, 255, 0],
+        getTargetColor: [0, 128, 200]
+      })
+    ],
+    goldenImage: './test/render/golden-images/great-circle-modified-segments.png'
   }
 ];