Pattern attributes 4-bytes alignment (#9681)

* Align pattern_attributes to 4-bytes boundaries
This was reported as being an issue on failed render tests on AMD graphics cards

* Warn on 4-bytes misalignment
$ yarn run codegen
Warning: The layout StructArrayLayout3ui6 is not aligned to 4-bytes boundaries.
Warning: The layout StructArrayLayout3i6 is not aligned to 4-bytes boundaries.
Warning: The layout StructArrayLayout3ui6 is not aligned to 4-bytes boundaries.
Warning: The layout StructArrayLayout1ui2 is not aligned to 4-bytes boundaries.

* Exclude non-deterministic test from render tests harness
This test is non-deterministic on AMD, slight offset in the pattern. Excluding until root cause can be identified
on this hardware

build/generate-struct-arrays.js

@@ -93,6 +93,8 @@ function createStructArrayLayoutType({members, size, alignment}) {
 
     const key = `${members.map(m => `${m.components}${typeAbbreviations[m.type]}`).join('')}${size}`;
     const className = `StructArrayLayout${key}`;
+    // Layout alignment to 4 bytes boundaries can be an issue on some set of graphics cards. Particularly AMD.
+    if (size % 4 !== 0) { console.warn(`Warning: The layout ${className} is not aligned to 4-bytes boundaries.`); }
     if (!layoutCache[key]) {
         layoutCache[key] = {
             className,

src/data/array_types.js

@@ -149,12 +149,11 @@ register('StructArrayLayout2i4ub8', StructArrayLayout2i4ub8);
 
 /**
  * Implementation of the StructArray layout:
- * [0]: Uint16[8]
- * [16]: Uint8[2]
+ * [0]: Uint16[10]
  *
  * @private
  */
-class StructArrayLayout8ui2ub18 extends StructArray {
+class StructArrayLayout10ui20 extends StructArray {
     uint8: Uint8Array;
     uint16: Uint16Array;
 
@@ -170,8 +169,7 @@ class StructArrayLayout8ui2ub18 extends StructArray {
     }
 
     emplace(i: number, v0: number, v1: number, v2: number, v3: number, v4: number, v5: number, v6: number, v7: number, v8: number, v9: number) {
-        const o2 = i * 9;
-        const o1 = i * 18;
+        const o2 = i * 10;
         this.uint16[o2 + 0] = v0;
         this.uint16[o2 + 1] = v1;
         this.uint16[o2 + 2] = v2;
@@ -180,14 +178,14 @@ class StructArrayLayout8ui2ub18 extends StructArray {
         this.uint16[o2 + 5] = v5;
         this.uint16[o2 + 6] = v6;
         this.uint16[o2 + 7] = v7;
-        this.uint8[o1 + 16] = v8;
-        this.uint8[o1 + 17] = v9;
+        this.uint16[o2 + 8] = v8;
+        this.uint16[o2 + 9] = v9;
         return i;
     }
 }
 
-StructArrayLayout8ui2ub18.prototype.bytesPerElement = 18;
-register('StructArrayLayout8ui2ub18', StructArrayLayout8ui2ub18);
+StructArrayLayout10ui20.prototype.bytesPerElement = 20;
+register('StructArrayLayout10ui20', StructArrayLayout10ui20);
 
 /**
  * Implementation of the StructArray layout:
@@ -1097,7 +1095,7 @@ export {
     StructArrayLayout4i8,
     StructArrayLayout2i4i12,
     StructArrayLayout2i4ub8,
-    StructArrayLayout8ui2ub18,
+    StructArrayLayout10ui20,
     StructArrayLayout4i4ui4i24,
     StructArrayLayout3f12,
     StructArrayLayout1ul4,
@@ -1122,7 +1120,7 @@ export {
     StructArrayLayout2i4i12 as FillExtrusionLayoutArray,
     StructArrayLayout2i4 as HeatmapLayoutArray,
     StructArrayLayout2i4ub8 as LineLayoutArray,
-    StructArrayLayout8ui2ub18 as PatternLayoutArray,
+    StructArrayLayout10ui20 as PatternLayoutArray,
     StructArrayLayout4i4ui4i24 as SymbolLayoutArray,
     StructArrayLayout3f12 as SymbolDynamicLayoutArray,
     StructArrayLayout1ul4 as SymbolOpacityArray,

src/data/bucket/pattern_attributes.js

@@ -5,8 +5,8 @@ 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'},
+    {name: 'a_pixel_ratio_from', components: 1, type: 'Uint16'},
+    {name: 'a_pixel_ratio_to', components: 1, type: 'Uint16'},
 ]);
 
 export default patternAttributes;

test/ignores.json

@@ -25,5 +25,6 @@
   "render-tests/tile-mode/streets-v11": "skip - mapbox-gl-js does not support tile-mode",
   "render-tests/within/paint-line": "https://github.com/mapbox/mapbox-gl-js/issues/7023",
   "render-tests/icon-text-fit/text-variable-anchor-tile-map-mode": "skip - mapbox-gl-js does not support tile-mode",
-  "render-tests/text-variable-anchor/all-anchors-labels-priority-tile-map-mode": "skip - mapbox-gl-js does not support tile-mode"
+  "render-tests/text-variable-anchor/all-anchors-labels-priority-tile-map-mode": "skip - mapbox-gl-js does not support tile-mode",
+  "render-tests/fill-extrusion-pattern/1.5x-on-1x-add-image": "skip - non-deterministic on AMD graphics cards"
 }