Use shader attributes for solid polygon layer (visgl#2703)

#### Background
Use `shaderAttributes` to replace SolidPolygonLayer attribute hijacking in `updateAttributes`. 

#### Change List
- Use new `shaderAttributes` instead of creating new attributes in `updateAttributes`. The `updateAttributes` override is is still necessary to switch to instance drawing for the sides.
- Update vertex shader module for SolidPolygonLayer to inject source code instead of branching. Was necessary to prevent the topModel from trying to access attributes it doesn't use.

Author: tsherif

modules/layers/src/solid-polygon-layer/solid-polygon-layer-vertex.glsl.js

@@ -25,14 +25,17 @@ attribute vec2 vertexPositions;
 attribute float vertexValid;
 attribute vec3 positions;
 attribute vec2 positions64xyLow;
+
+#ifdef IS_SIDE_VERTEX
 attribute vec3 nextPositions;
 attribute vec2 nextPositions64xyLow;
+#endif
+
 attribute float elevations;
 attribute vec4 fillColors;
 attribute vec4 lineColors;
 attribute vec3 pickingColors;
 
-uniform bool isSideVertex;
 uniform bool extruded;
 uniform bool isWireframe;
 uniform float elevationScale;
@@ -47,30 +50,31 @@ void main(void) {
   vec3 normal;
   vec4 colors = isWireframe ? lineColors : fillColors;
 
-  if (isSideVertex) {
-    pos = mix(positions, nextPositions, vertexPositions.x);
-    pos64xyLow = mix(positions64xyLow, nextPositions64xyLow, vertexPositions.x);
-    isValid = vertexValid;
-  } else {
-    pos = positions;
-    pos64xyLow = positions64xyLow;
-    isValid = 1.0;
-  }
+#ifdef IS_SIDE_VERTEX
+  pos = mix(positions, nextPositions, vertexPositions.x);
+  pos64xyLow = mix(positions64xyLow, nextPositions64xyLow, vertexPositions.x);
+  isValid = vertexValid;
+#else
+  pos = positions;
+  pos64xyLow = positions64xyLow;
+  isValid = 1.0;
+#endif
+
   if (extruded) {
     pos.z += elevations * vertexPositions.y;
   }
   pos.z *= elevationScale;
 
   vec4 position_worldspace;
   gl_Position = project_position_to_clipspace(pos, pos64xyLow, vec3(0.), position_worldspace);
-  
+
   if (extruded) {
-    if (isSideVertex) {
-      normal = vec3(positions.y - nextPositions.y, nextPositions.x - positions.x, 0.0);
-      normal = project_normal(normal);
-    } else {
-      normal = vec3(0.0, 0.0, 1.0);
-    }
+#ifdef IS_SIDE_VERTEX
+    normal = vec3(positions.y - nextPositions.y, nextPositions.x - positions.x, 0.0);
+    normal = project_normal(normal);
+#else
+    normal = vec3(0.0, 0.0, 1.0);
+#endif
 
     vec3 lightColor = lighting_getLightColor(colors.rgb, project_uCameraPosition, position_worldspace.xyz, normal);
     vColor = vec4(lightColor, colors.a * opacity) / 255.0;

modules/layers/src/solid-polygon-layer/solid-polygon-layer.js

@@ -60,9 +60,16 @@ const ATTRIBUTE_TRANSITION = {
 };
 
 export default class SolidPolygonLayer extends Layer {
-  getShaders() {
+  getShaders(isSide) {
     const projectModule = this.use64bitProjection() ? 'project64' : 'project32';
-    return {vs, fs, modules: [projectModule, 'lighting', 'picking']};
+    return {
+      vs,
+      fs,
+      modules: [projectModule, 'lighting', 'picking'],
+      defines: {
+        IS_SIDE_VERTEX: isSide
+      }
+    };
   }
 
   initializeState() {
@@ -87,9 +94,29 @@ export default class SolidPolygonLayer extends Layer {
         transition: ATTRIBUTE_TRANSITION,
         accessor: 'getPolygon',
         update: this.calculatePositions,
-        noAlloc
+        shaderAttributes: {
+          positions: {
+            size: 3
+          },
+          nextPositions: {
+            size: 3,
+            offset: 12
+          }
+        }
+      },
+      positions64xyLow: {
+        size: 2,
+        update: this.calculatePositionsLow,
+        shaderAttributes: {
+          positions64xyLow: {
+            size: 2
+          },
+          nextPositions64xyLow: {
+            size: 2,
+            offset: 8
+          }
+        }
       },
-      positions64xyLow: {size: 2, update: this.calculatePositionsLow, noAlloc},
       vertexValid: {
         size: 1,
         type: GL.UNSIGNED_BYTE,
@@ -228,20 +255,6 @@ export default class SolidPolygonLayer extends Layer {
           });
         }
       }
-      if (newAttributes.positions) {
-        newAttributes.nextPositions = Object.assign(
-          {},
-          newAttributes.positions,
-          {id: 'nextPositions', offset: 12} // 1 vertex * 3 floats * 4 bits
-        );
-      }
-      if (newAttributes.positions64xyLow) {
-        newAttributes.nextPositions64xyLow = Object.assign(
-          {},
-          newAttributes.positions64xyLow,
-          {id: 'nextPositions64xyLow', offset: 8} // 1 vertex * 2 floats * 4 bits
-        );
-      }
       sideModel.setAttributes(newAttributes);
     }
   }
@@ -255,14 +268,12 @@ export default class SolidPolygonLayer extends Layer {
     if (filled) {
       topModel = new Model(
         gl,
-        Object.assign({}, this.getShaders(), {
+        Object.assign({}, this.getShaders(false), {
           id: `${id}-top`,
           geometry: new Geometry({
             drawMode: GL.TRIANGLES,
             attributes: {
-              vertexPositions: {size: 2, constant: true, value: new Float32Array([0, 1])},
-              nextPositions: {size: 3, constant: true, value: new Float32Array(3)},
-              nextPositions64xyLow: {size: 2, constant: true, value: new Float32Array(2)}
+              vertexPositions: {size: 2, constant: true, value: new Float32Array([0, 1])}
             }
           }),
           uniforms: {
@@ -278,7 +289,7 @@ export default class SolidPolygonLayer extends Layer {
     if (extruded) {
       sideModel = new Model(
         gl,
-        Object.assign({}, this.getShaders(), {
+        Object.assign({}, this.getShaders(true), {
           id: `${id}-side`,
           geometry: new Geometry({
             drawMode: GL.LINES,