Simplify data-driven paint attributes implementation

js/data/array_group.js

@@ -48,11 +48,10 @@ class ArrayGroup {
         for (const layer of layers) {
             const programConfiguration = ProgramConfiguration.createDynamic(
                 programInterface.paintAttributes || [], layer, zoom);
-            const PaintVertexArrayType = programConfiguration.paintVertexArrayType();
             this.layerData[layer.id] = {
                 layer: layer,
                 programConfiguration: programConfiguration,
-                paintVertexArray: new PaintVertexArrayType()
+                paintVertexArray: new programConfiguration.PaintVertexArray()
             };
         }
 

js/data/bucket/circle_bucket.js

@@ -7,53 +7,17 @@ const loadGeometry = require('../load_geometry');
 const EXTENT = require('../extent');
 
 const circleInterface = {
-    layoutVertexArrayType: createVertexArrayType([{
-        name: 'a_pos',
-        components: 2,
-        type: 'Int16'
-    }]),
+    layoutVertexArrayType: createVertexArrayType([
+        {name: 'a_pos', components: 2, type: 'Int16'}
+    ]),
     elementArrayType: createElementArrayType(),
 
-    paintAttributes: [{
-        name: 'a_color',
-        components: 4,
-        type: 'Uint8',
-        getValue: (layer, globalProperties, featureProperties) => {
-            return layer.getPaintValue("circle-color", globalProperties, featureProperties);
-        },
-        multiplier: 255,
-        paintProperty: 'circle-color'
-    }, {
-        name: 'a_radius',
-        components: 1,
-        type: 'Uint16',
-        isLayerConstant: false,
-        getValue: (layer, globalProperties, featureProperties) => {
-            return [layer.getPaintValue("circle-radius", globalProperties, featureProperties)];
-        },
-        multiplier: 10,
-        paintProperty: 'circle-radius'
-    }, {
-        name: 'a_blur',
-        components: 1,
-        type: 'Uint16',
-        isLayerConstant: false,
-        getValue: (layer, globalProperties, featureProperties) => {
-            return [layer.getPaintValue("circle-blur", globalProperties, featureProperties)];
-        },
-        multiplier: 10,
-        paintProperty: 'circle-blur'
-    }, {
-        name: 'a_opacity',
-        components: 1,
-        type: 'Uint16',
-        isLayerConstant: false,
-        getValue: (layer, globalProperties, featureProperties) => {
-            return [layer.getPaintValue("circle-opacity", globalProperties, featureProperties)];
-        },
-        multiplier: 255,
-        paintProperty: 'circle-opacity'
-    }]
+    paintAttributes: [
+        {property: 'circle-color',   type: 'Uint8'},
+        {property: 'circle-radius',  type: 'Uint16', multiplier: 10},
+        {property: 'circle-blur',    type: 'Uint16', multiplier: 10},
+        {property: 'circle-opacity', type: 'Uint8',  multiplier: 255}
+    ]
 };
 
 function addCircleVertex(layoutVertexArray, x, y, extrudeX, extrudeY) {

js/data/bucket/fill_bucket.js

@@ -10,42 +10,17 @@ const assert = require('assert');
 const EARCUT_MAX_RINGS = 500;
 
 const fillInterface = {
-    layoutVertexArrayType: createVertexArrayType([{
-        name: 'a_pos',
-        components: 2,
-        type: 'Int16'
-    }]),
+    layoutVertexArrayType: createVertexArrayType([
+        {name: 'a_pos', components: 2, type: 'Int16'}
+    ]),
     elementArrayType: createElementArrayType(3),
     elementArrayType2: createElementArrayType(2),
 
-    paintAttributes: [{
-        name: 'a_color',
-        components: 4,
-        type: 'Uint8',
-        getValue: (layer, globalProperties, featureProperties) => {
-            return layer.getPaintValue("fill-color", globalProperties, featureProperties);
-        },
-        multiplier: 255,
-        paintProperty: 'fill-color'
-    }, {
-        name: 'a_outline_color',
-        components: 4,
-        type: 'Uint8',
-        getValue: (layer, globalProperties, featureProperties) => {
-            return layer.getPaintValue("fill-outline-color", globalProperties, featureProperties);
-        },
-        multiplier: 255,
-        paintProperty: 'fill-outline-color'
-    }, {
-        name: 'a_opacity',
-        components: 1,
-        type: 'Uint8',
-        getValue: (layer, globalProperties, featureProperties) => {
-            return [layer.getPaintValue("fill-opacity", globalProperties, featureProperties)];
-        },
-        multiplier: 255,
-        paintProperty: 'fill-opacity'
-    }]
+    paintAttributes: [
+        {property: 'fill-color',         type: 'Uint8'},
+        {property: 'fill-outline-color', type: 'Uint8'},
+        {property: 'fill-opacity',       type: 'Uint8', multiplier: 255}
+    ]
 };
 
 class FillBucket extends Bucket {

js/data/bucket/fill_extrusion_bucket.js

@@ -11,51 +11,18 @@ const assert = require('assert');
 const EARCUT_MAX_RINGS = 500;
 
 const fillExtrusionInterface = {
-    layoutVertexArrayType: createVertexArrayType([{
-        name: 'a_pos',
-        components: 2,
-        type: 'Int16'
-    }, {
-        name: 'a_normal',
-        components: 3,
-        type: 'Int16'
-    }, {
-        name: 'a_edgedistance',
-        components: 1,
-        type: 'Int16'
-    }]),
+    layoutVertexArrayType: createVertexArrayType([
+        {name: 'a_pos',          components: 2, type: 'Int16'},
+        {name: 'a_normal',       components: 3, type: 'Int16'},
+        {name: 'a_edgedistance', components: 1, type: 'Int16'}
+    ]),
     elementArrayType: createElementArrayType(3),
 
-    paintAttributes: [{
-        name: 'a_base',
-        components: 1,
-        type: 'Uint16',
-        getValue: (layer, globalProperties, featureProperties) => {
-            return [Math.max(layer.getPaintValue("fill-extrusion-base", globalProperties, featureProperties), 0)];
-        },
-        multiplier: 1,
-        paintProperty: 'fill-extrusion-base'
-    }, {
-        name: 'a_height',
-        components: 1,
-        type: 'Uint16',
-        getValue: (layer, globalProperties, featureProperties) => {
-            return [Math.max(layer.getPaintValue("fill-extrusion-height", globalProperties, featureProperties), 0)];
-        },
-        multiplier: 1,
-        paintProperty: 'fill-extrusion-height'
-    }, {
-        name: 'a_color',
-        components: 4,
-        type: 'Uint8',
-        getValue: (layer, globalProperties, featureProperties) => {
-            const color = layer.getPaintValue("fill-extrusion-color", globalProperties, featureProperties);
-            color[3] = 1.0;
-            return color;
-        },
-        multiplier: 255,
-        paintProperty: 'fill-extrusion-color'
-    }]
+    paintAttributes: [
+        {property: 'fill-extrusion-base',   type: 'Uint16'},
+        {property: 'fill-extrusion-height', type: 'Uint16'},
+        {property: 'fill-extrusion-color',  type: 'Uint8'}
+    ]
 };
 
 const FACTOR = Math.pow(2, 13);

js/data/bucket/line_bucket.js

@@ -40,25 +40,13 @@ const LINE_DISTANCE_SCALE = 1 / 2;
 const MAX_LINE_DISTANCE = Math.pow(2, LINE_DISTANCE_BUFFER_BITS - 1) / LINE_DISTANCE_SCALE;
 
 const lineInterface = {
-    layoutVertexArrayType: createVertexArrayType([{
-        name: 'a_pos',
-        components: 2,
-        type: 'Int16'
-    }, {
-        name: 'a_data',
-        components: 4,
-        type: 'Uint8'
-    }]),
-    paintAttributes: [{
-        name: 'a_color',
-        components: 4,
-        type: 'Uint8',
-        getValue: (layer, globalProperties, featureProperties) => {
-            return layer.getPaintValue("line-color", globalProperties, featureProperties);
-        },
-        multiplier: 255,
-        paintProperty: 'line-color'
-    }],
+    layoutVertexArrayType: createVertexArrayType([
+        {name: 'a_pos',  components: 2, type: 'Int16'},
+        {name: 'a_data', components: 4, type: 'Uint8'}
+    ]),
+    paintAttributes: [
+        {property: 'line-color', type: 'Uint8'}
+    ],
     elementArrayType: createElementArrayType()
 };
 

js/data/bucket/symbol_bucket.js

@@ -27,23 +27,12 @@ const getIconQuads = Quads.getIconQuads;
 
 const elementArrayType = createElementArrayType();
 
-const layoutVertexArrayType = createVertexArrayType([{
-    name: 'a_pos',
-    components: 2,
-    type: 'Int16'
-}, {
-    name: 'a_offset',
-    components: 2,
-    type: 'Int16'
-}, {
-    name: 'a_texture_pos',
-    components: 2,
-    type: 'Uint16'
-}, {
-    name: 'a_data',
-    components: 4,
-    type: 'Uint8'
-}]);
+const layoutVertexArrayType = createVertexArrayType([
+    {name: 'a_pos',         components: 2, type: 'Int16'},
+    {name: 'a_offset',      components: 2, type: 'Int16'},
+    {name: 'a_texture_pos', components: 2, type: 'Uint16'},
+    {name: 'a_data',        components: 4, type: 'Uint8'}
+]);
 
 const symbolInterfaces = {
     glyph: {
@@ -55,19 +44,11 @@ const symbolInterfaces = {
         elementArrayType: elementArrayType
     },
     collisionBox: {
-        layoutVertexArrayType: createVertexArrayType([{
-            name: 'a_pos',
-            components: 2,
-            type: 'Int16'
-        }, {
-            name: 'a_extrude',
-            components: 2,
-            type: 'Int16'
-        }, {
-            name: 'a_data',
-            components: 2,
-            type: 'Uint8'
-        }]),
+        layoutVertexArrayType: createVertexArrayType([
+            {name: 'a_pos',     components: 2, type: 'Int16'},
+            {name: 'a_extrude', components: 2, type: 'Int16'},
+            {name: 'a_data',    components: 2, type: 'Uint8'}
+        ]),
         elementArrayType: createElementArrayType(2)
     }
 };