Webgl / implement support for custom attributes in webgl buffers

Only numerical attributes can be pushed in webgl buffers.

src/ol/renderer/webgl/Layer.js

@@ -76,7 +76,8 @@ class WebGLLayerRenderer extends LayerRenderer {
  * @param {import("../../format/GeoJSON").GeoJSONFeature} geojsonFeature Feature in geojson format, coordinates
  * expressed in EPSG:4326.
  * @param {Array<string>} [opt_attributes] Custom attributes. An array of properties which will be read from the
- * feature and pushed in the buffer in the given order.
+ * feature and pushed in the buffer in the given order. Note: attributes can only be numerical! Any other type or
+ * NaN will result in `0` being pushed in the buffer.
  */
 export function pushFeatureInBuffer(vertexBuffer, indexBuffer, geojsonFeature, opt_attributes) {
   if (!geojsonFeature.geometry) {
@@ -89,6 +90,8 @@ export function pushFeatureInBuffer(vertexBuffer, indexBuffer, geojsonFeature, o
   }
 }
 
+const tmpArray_ = [];
+
 /**
  * Pushes a quad (two triangles) based on a point geometry
  * @param vertexBuffer
@@ -116,12 +119,26 @@ function pushPointGeomInBuffer_(vertexBuffer, indexBuffer, geojsonFeature, opt_a
   const alpha = color[3];
   const baseIndex = vertexBuffer.getArray().length / stride;
 
-  vertexBuffer.getArray().push(
+  // read custom numerical attributes on the feature
-    x, y, -size / 2, -size / 2, u0, v0, opacity, rotateWithView, red, green, blue, alpha,
+  const customAttributeValues = tmpArray_;
-    x, y, +size / 2, -size / 2, u1, v0, opacity, rotateWithView, red, green, blue, alpha,
+  customAttributeValues.length = opt_attributes ? opt_attributes.length : 0;
-    x, y, +size / 2, +size / 2, u1, v1, opacity, rotateWithView, red, green, blue, alpha,
+  for (let i = 0; i < customAttributeValues.length; i++) {
-    x, y, -size / 2, +size / 2, u0, v1, opacity, rotateWithView, red, green, blue, alpha
+    customAttributeValues[i] = parseFloat(geojsonFeature.properties[opt_attributes[i]]) || 0;
-  );
+  }
+
+  // push vertices for each of the four quad corners (first standard then custom attributes)
+  vertexBuffer.getArray().push(x, y, -size / 2, -size / 2, u0, v0, opacity, rotateWithView, red, green, blue, alpha);
+  Array.prototype.push.apply(vertexBuffer.getArray(), customAttributeValues);
+
+  vertexBuffer.getArray().push(x, y, +size / 2, -size / 2, u1, v0, opacity, rotateWithView, red, green, blue, alpha);
+  Array.prototype.push.apply(vertexBuffer.getArray(), customAttributeValues);
+
+  vertexBuffer.getArray().push(x, y, +size / 2, +size / 2, u1, v1, opacity, rotateWithView, red, green, blue, alpha);
+  Array.prototype.push.apply(vertexBuffer.getArray(), customAttributeValues);
+
+  vertexBuffer.getArray().push(x, y, -size / 2, +size / 2, u0, v1, opacity, rotateWithView, red, green, blue, alpha);
+  Array.prototype.push.apply(vertexBuffer.getArray(), customAttributeValues);
+
   indexBuffer.getArray().push(
     baseIndex, baseIndex + 1, baseIndex + 3,
     baseIndex + 1, baseIndex + 2, baseIndex + 3

test/spec/ol/renderer/webgl/layer.test.js

@@ -107,6 +107,32 @@ describe('ol.renderer.webgl.Layer', function() {
       expect(indexBuffer.getArray()[10]).to.eql(6);
       expect(indexBuffer.getArray()[11]).to.eql(7);
     });
+
+    it('correctly adds custom attributes', function() {
+      const feature = {
+        type: "Feature",
+        id: "AFG",
+        properties: {
+          color: [0.5, 1, 0.2, 0.7],
+          custom: 4,
+          customString: '5',
+          custom2: 12.4,
+          customString2: 'abc'
+        },
+        geometry: {
+          type: "Point",
+          coordinates: [ -75, 47 ]
+        }
+      };
+      const attributePerVertex = 16;
+      pushFeatureInBuffer(vertexBuffer, indexBuffer, feature, ['custom', 'custom2', 'customString', 'customString2']);
+      expect(vertexBuffer.getArray().length).to.eql(attributePerVertex * 4);
+      expect(indexBuffer.getArray().length).to.eql(6);
+      expect(vertexBuffer.getArray()[12]).to.eql(4);
+      expect(vertexBuffer.getArray()[13]).to.eql(12.4);
+      expect(vertexBuffer.getArray()[14]).to.eql(5);
+      expect(vertexBuffer.getArray()[15]).to.eql(0);
+    });
   });
 
   describe('getBlankTexture', function() {