Fix pattern attributes vertex layout (#9482)

* Fix vertex layout attribute offset when used with DDS The vertex layout offset for patternAttributes is overriden to be 0, this is incorrect as each component of this layout require a specific offset to be set to appropriately bind the buffers when calling vertexAttribPointer * Fix flow * Cleanup unused param * Add render tests for data driven styling coverage * EOL
mapbox · Mar 31, 2020 · 2faf0ab · 2faf0ab
1 parent 8131815
commit 2faf0ab
Show file tree

Hide file tree

Showing 5 changed files with 105 additions and 14 deletions.
diff --git a/src/data/bucket/pattern_attributes.js b/src/data/bucket/pattern_attributes.js
@@ -1,10 +1,12 @@
 // @flow
 import {createLayout} from '../../util/struct_array';
 
-export default createLayout([
+const patternAttributes = createLayout([
     // [tl.x, tl.y, br.x, br.y]
     {name: 'a_pattern_from', components: 4, type: 'Uint16'},
     {name: 'a_pattern_to', components: 4, type: 'Uint16'},
     {name: 'a_pixel_ratio_from', components: 1, type: 'Uint8'},
     {name: 'a_pixel_ratio_to', components: 1, type: 'Uint8'},
 ]);
+
+export default patternAttributes;
diff --git a/src/data/program_configuration.js b/src/data/program_configuration.js
@@ -7,7 +7,7 @@ import {register} from '../util/web_worker_transfer';
 import {PossiblyEvaluatedPropertyValue} from '../style/properties';
 import {StructArrayLayout1f4, StructArrayLayout2f8, StructArrayLayout4f16, PatternLayoutArray} from './array_types';
 import {clamp} from '../util/util';
-
+import patternAttributes from './bucket/pattern_attributes';
 import EvaluationParameters from '../style/evaluation_parameters';
 import FeaturePositionMap from './feature_position_map';
 import {
@@ -312,20 +312,13 @@ class CrossFadedCompositeBinder implements AttributeBinder {
     zoomOutPaintVertexBuffer: ?VertexBuffer;
     paintVertexAttributes: Array<StructArrayMember>;
 
-    constructor(expression: CompositeExpression, names: Array<string>, type: string, useIntegerZoom: boolean, zoom: number, PaintVertexArray: Class<StructArray>, layerId: string) {
+    constructor(expression: CompositeExpression, type: string, useIntegerZoom: boolean, zoom: number, PaintVertexArray: Class<StructArray>, layerId: string) {
         this.expression = expression;
         this.type = type;
         this.useIntegerZoom = useIntegerZoom;
         this.zoom = zoom;
         this.layerId = layerId;
 
-        this.paintVertexAttributes = names.map((name) => ({
-            name: `a_${name}`,
-            type: 'Uint16',
-            components: 4,
-            offset: 0
-        }));
-
         this.zoomInPaintVertexArray = new PaintVertexArray();
         this.zoomOutPaintVertexArray = new PaintVertexArray();
     }
@@ -371,8 +364,8 @@ class CrossFadedCompositeBinder implements AttributeBinder {
 
     upload(context: Context) {
         if (this.zoomInPaintVertexArray && this.zoomInPaintVertexArray.arrayBuffer && this.zoomOutPaintVertexArray && this.zoomOutPaintVertexArray.arrayBuffer) {
-            this.zoomInPaintVertexBuffer = context.createVertexBuffer(this.zoomInPaintVertexArray, this.paintVertexAttributes, this.expression.isStateDependent);
-            this.zoomOutPaintVertexBuffer = context.createVertexBuffer(this.zoomOutPaintVertexArray, this.paintVertexAttributes, this.expression.isStateDependent);
+            this.zoomInPaintVertexBuffer = context.createVertexBuffer(this.zoomInPaintVertexArray, patternAttributes.members, this.expression.isStateDependent);
+            this.zoomOutPaintVertexBuffer = context.createVertexBuffer(this.zoomOutPaintVertexArray, patternAttributes.members, this.expression.isStateDependent);
         }
     }
 
@@ -438,7 +431,7 @@ export default class ProgramConfiguration {
             } else if (expression.kind === 'source' || isCrossFaded) {
                 const StructArrayLayout = layoutType(property, type, 'source');
                 this.binders[property] = isCrossFaded ?
-                    new CrossFadedCompositeBinder(expression, names, type, useIntegerZoom, zoom, StructArrayLayout, layer.id) :
+                    new CrossFadedCompositeBinder(expression, type, useIntegerZoom, zoom, StructArrayLayout, layer.id) :
                     new SourceExpressionBinder(expression, names, type, StructArrayLayout);
                 keys.push(`/a_${property}`);
 

diff --git a/src/render/draw_fill_extrusion.js b/src/render/draw_fill_extrusion.js
@@ -68,7 +68,6 @@ function drawExtrusionTiles(painter, source, layer, coords, depthMode, stencilMo
             tile.imageAtlasTexture.bind(gl.LINEAR, gl.CLAMP_TO_EDGE);
             programConfiguration.updatePaintBuffers(crossfade);
         }
-
         const constantPattern = patternProperty.constantOr(null);
         if (constantPattern && tile.imageAtlas) {
             const atlas = tile.imageAtlas;

diff --git a/...gration/render-tests/fill-extrusion-pattern/2x-on-1x-add-image-dds/expected.png b/...gration/render-tests/fill-extrusion-pattern/2x-on-1x-add-image-dds/expected.png
diff --git a/...tegration/render-tests/fill-extrusion-pattern/2x-on-1x-add-image-dds/style.json b/...tegration/render-tests/fill-extrusion-pattern/2x-on-1x-add-image-dds/style.json
@@ -0,0 +1,97 @@
+{
+  "version": 8,
+  "metadata": {
+    "test": {
+      "height": 256,
+      "width": 256,
+      "pixelRatio": 1,
+      "operations": [
+        [
+          "wait"
+        ],
+        [
+          "addImage",
+          "pattern",
+          "./image/marker.png",
+          {
+            "pixelRatio": 2
+          }
+        ],
+        [
+          "wait"
+        ],
+        [
+          "addSource",
+          "geojson",
+          {
+            "type": "geojson",
+            "data": {
+              "type": "FeatureCollection",
+              "features": [
+                {
+                  "type": "Feature",
+                  "properties": {
+                    "height": 10
+                  },
+                  "geometry": {
+                    "type": "Polygon",
+                    "coordinates": [
+                      [
+                        [
+                          -0.0001,
+                          -0.0001
+                        ],
+                        [
+                          -0.0001,
+                          0.0001
+                        ],
+                        [
+                          0.0001,
+                          0.0001
+                        ],
+                        [
+                          0.0001,
+                          -0.0001
+                        ],
+                        [
+                          -0.0001,
+                          -0.0001
+                        ]
+                      ]
+                    ]
+                  }
+                }
+              ]
+            }
+          }
+        ],
+        [
+          "wait"
+        ],
+        [
+          "addLayer",
+          {
+            "id": "extrusion",
+            "type": "fill-extrusion",
+            "source": "geojson",
+            "paint": {
+              "fill-extrusion-pattern": {
+                "property": "height",
+                "type": "interval",
+                "stops": [[0, "pattern"]] 
+              },
+              "fill-extrusion-height": 10
+            }
+          }
+        ],
+        [
+          "wait"
+        ]
+      ]
+    }
+  },
+  "pitch": 60,
+  "zoom": 19,
+  "sources": {},
+  "layers": []
+}