feat(layers): Simplify ArcLayer (#8859)

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

@@ -22,7 +22,6 @@ export default `\
 #version 300 es
 #define SHADER_NAME arc-layer-vertex-shader
 
-in vec3 positions;
 in vec4 instanceSourceColors;
 in vec4 instanceTargetColors;
 in vec3 instanceSourcePositions;
@@ -137,7 +136,15 @@ void main(void) {
   geometry.worldPosition = instanceSourcePositions;
   geometry.worldPositionAlt = instanceTargetPositions;
 
-  float segmentIndex = positions.x;
+  /*
+  *  --(i, -1)-----------_(i+1, -1)--
+  *       |          _,-"  |
+  *       o      _,-"      o
+  *       |  _,-"          |
+  *  --(i, 1)"-------------(i+1, 1)--
+  */
+  float segmentIndex = float(gl_VertexID / 2);
+  float segmentSide = mod(float(gl_VertexID), 2.) == 0. ? -1. : 1.;
   float segmentRatio = getSegmentRatio(segmentIndex);
   float prevSegmentRatio = getSegmentRatio(max(0.0, segmentIndex - 1.0));
   float nextSegmentRatio = getSegmentRatio(min(numSegments - 1.0, segmentIndex + 1.0));
@@ -147,7 +154,7 @@ void main(void) {
   float indexDir = mix(-1.0, 1.0, step(segmentIndex, 0.0));
   isValid = 1.0;
 
-  uv = vec2(segmentRatio, positions.y);
+  uv = vec2(segmentRatio, segmentSide);
   geometry.uv = uv;
   geometry.pickingColor = instancePickingColors;
 
@@ -244,7 +251,7 @@ void main(void) {
 
   // extrude
   vec3 offset = vec3(
-    getExtrusionOffset((next.xy - curr.xy) * indexDir, positions.y, widthPixels),
+    getExtrusionOffset((next.xy - curr.xy) * indexDir, segmentSide, widthPixels),
     0.0);
   DECKGL_FILTER_SIZE(offset, geometry);
   DECKGL_FILTER_GL_POSITION(curr, geometry);

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

@@ -34,7 +34,6 @@ import {
   DefaultProps
 } from '@deck.gl/core';
 
-import {Geometry} from '@luma.gl/engine';
 import {Model} from '@luma.gl/engine';
 
 import vs from './arc-layer-vertex.glsl';
@@ -227,63 +226,49 @@ export default class ArcLayer<DataT = any, ExtraPropsT extends {} = {}> extends
     /* eslint-enable max-len */
   }
 
-  updateState(opts: UpdateParameters<this>): void {
-    super.updateState(opts);
-    const {props, oldProps, changeFlags} = opts;
-    // Re-generate model if geometry changed
-    if (changeFlags.extensionsChanged || props.numSegments !== oldProps.numSegments) {
+  updateState(params: UpdateParameters<this>): void {
+    super.updateState(params);
+
+    if (params.changeFlags.extensionsChanged) {
       this.state.model?.destroy();
       this.state.model = this._getModel();
       this.getAttributeManager()!.invalidateAll();
     }
   }
 
   draw({uniforms}) {
-    const {widthUnits, widthScale, widthMinPixels, widthMaxPixels, greatCircle, wrapLongitude} =
-      this.props;
+    const {
+      widthUnits,
+      widthScale,
+      widthMinPixels,
+      widthMaxPixels,
+      greatCircle,
+      wrapLongitude,
+      numSegments
+    } = this.props;
     const model = this.state.model!;
 
     model.setUniforms(uniforms);
     model.setUniforms({
+      numSegments,
       greatCircle,
       widthUnits: UNIT[widthUnits],
       widthScale,
       widthMinPixels,
       widthMaxPixels,
       useShortestPath: wrapLongitude
     });
+    model.setVertexCount(numSegments * 2);
     model.draw(this.context.renderPass);
   }
 
   protected _getModel(): Model {
-    const {numSegments} = this.props;
-    let positions: number[] = [];
-    /*
-     *  (0, -1)-------------_(1, -1)
-     *       |          _,-"  |
-     *       o      _,-"      o
-     *       |  _,-"          |
-     *   (0, 1)"-------------(1, 1)
-     */
-    for (let i = 0; i < numSegments; i++) {
-      positions = positions.concat([i, 1, 0, i, -1, 0]);
-    }
-
-    const model = new Model(this.context.device, {
+    return new Model(this.context.device, {
       ...this.getShaders(),
       id: this.props.id,
       bufferLayout: this.getAttributeManager()!.getBufferLayouts(),
-      geometry: new Geometry({
-        topology: 'triangle-strip',
-        attributes: {
-          positions: {size: 3, value: new Float32Array(positions)}
-        }
-      }),
+      topology: 'triangle-strip',
       isInstanced: true
     });
-
-    model.setUniforms({numSegments});
-
-    return model;
   }
 }