Write StyleLayer2 Class

[lucaswoj]

StyleLayer2 will take on the following responsibilities

• mapping a stylesheet to the set of buffer attributes needed to draw a layer
• mapping a set of features to the set of buffers needed to draw a layer

Here's a pretotype definition of the CircleStyleLayer class:

var CircleStyleLayer = createStyleLayer2Type({

    name: 'circle',

    uniforms: {
        color: {
            value: function() {
                return this.getStyleValue('circle-color');
            }
            components: 4
        },
        size: {
            value: function() {
                return this.getStyleValue('circle-radius');
            }
        },
        blur: {
            value: function() {
                return this.getStyleValue('circle-blur');
            }
        }
    },

    attributes: {
        pos: {
            components: 2,
            type: StyleLayer2.AttributeType.SHORT,
            value: function(x, y, extrudeX, extrudeY) {
                return [
                    (x * 2) + ((extrudeX + 1) / 2),
                    (y * 2) + ((extrudeY + 1) / 2)
                ];
            }
        }
    },

    iterator: function(pushElement, pushVertex) {

        var EXTENT = 4096;

        for (var i = 0; i < this.features.length; i++) {
            var geometries = this.features[i].loadGeometry()[0];
            for (var j = 0; j < geometries.length; j++) {

                var x = geometries[j].x;
                var y = geometries[j].y;

                // Do not include points that are outside the tile boundaries.
                if (x < 0 || x >= EXTENT || y < 0 || y >= EXTENT) continue;

                // this geometry will be of the Point type, and we'll derive
                // two triangles from it.
                //
                // ┌─────────┐
                // │ 3     2 │
                // │         │
                // │ 0     1 │
                // └─────────┘

                var indicies = [
                    pushVertex(x, y, -1, -1),
                    pushVertex(x, y, 1, -1),
                    pushVertex(x, y, 1, 1),
                    pushVertex(x, y, -1, 1)
                ];

                pushElement(indicies[0], indicies[1], indicies[2]);
                pushElement(indicies[0], indicies[3], indicies[2]);
            }
        }
    }

});

[lucaswoj]

To get from here to data-driven styling, we add a isFeatureDependent function to each attribute's configuration object and enable / disable vertex attrib arrays based on its value.

color: {
    isFeatureDependant: function() {
        return this.isStyleValueFeatureDependent('circle-color')
    }
    value: function(x, y, extrudeX, extrudeY, properties) {
        return this.getStyleValue('circle-color', properties);
    }
}

[lucaswoj]

I am still trying to decide if these features should get glommed onto the StyleLayer class or if we should create a another class.

Thoughts @jfirebaugh @mourner @tmcw @ansis?

[lucaswoj]

Buffer2 is an ephemeral data-containing object that is destructively transferred from the worker thread to the main thread.

StyleLayer2 will be a a persistent stateless configuration-containing structure that can be identically instantiated in both the main thread and the worker thread.

[lucaswoj]

The only big ❓ is how we do transitions on data-driven properties. I think, in the short term, we don't do transitions on data-driven properties.

[jfirebaugh]

I think we're going to want to have what you have sketched above together with the style property calculation logic that's currently in StyleLayer. So I lean towards "glomming".

I definitely think having concrete Layer subtypes for each layer type is a win. I think eventually each of the draw functions (drawLine, drawCircle, etc.) becomes a method on its corresponding layer type.

[lucaswoj]

This is vaguely related to #1620 but not so relevant that I think we should keep it open.