fix: new implementation of Geometry.padGPUBufferAlignment to eliminate errors caused by inconsistent type with wgsl attributes

Author: fuzhenn

packages/gl/src/reshader/Geometry.ts

@@ -96,16 +96,24 @@ export default class Geometry {
         const ctor = array.constructor as any;
         const itemSize = array.length / vertexCount;
         const bytesPerElement = itemBytes / itemSize;
-        // 无法对齐时，itemSize 一定是1或者3，补位成2或者4就能对齐了
-
-        const newItemSize = ensureAlignment(itemSize, bytesPerElement);
-        const newArray = new ctor(newItemSize * vertexCount);
-        for (let i = 0; i < vertexCount; i++) {
-            for (let ii = 0; ii < itemSize; ii++) {
-                newArray[i * newItemSize + ii] = array[i * itemSize + ii];
+        // 无法对齐时，itemSize 一定是1,2,3，不可能是4
+        if (itemSize === 3) {
+            // itemSize 为 3时，补位为 4，wgsl中需要相应修改类型声明
+            const newItemSize = ensureAlignment(itemSize, bytesPerElement);
+            const newArray = new ctor(newItemSize * vertexCount);
+            for (let i = 0; i < vertexCount; i++) {
+                for (let ii = 0; ii < itemSize; ii++) {
+                    newArray[i * newItemSize + ii] = array[i * itemSize + ii];
+                }
             }
+            return newArray;
+        } else {
+            // itemSize 为 1或2时，提升数组的类型，不影响wgsl中的类型声明
+            const newCtor = getPadArrayCtor(ctor, itemSize);
+            const newArray = new newCtor(itemSize * vertexCount);
+            newArray.set(array);
+            return newArray;
         }
-        return newArray;
     }
 
     data: Record<string, AttributeData>
@@ -1316,3 +1324,25 @@ function ensureAlignment(itemSize: number, bytesPerElement: number): any {
     return itemSize + (4 - (itemBytes % 4)) / bytesPerElement;
 }
 
+// itemSize 只可能是1，2
+function getPadArrayCtor(ctor, itemSize): any {
+    if (ctor === Uint8Array || ctor === Uint8ClampedArray) {
+        if (itemSize === 1) {
+            return Uint32Array;
+        } else {
+            return Uint16Array;
+        }
+    } else if (ctor === Int8Array) {
+        if (itemSize === 1) {
+            return Int32Array;
+        } else {
+            return Int16Array;
+        }
+    } else if (ctor === Uint16Array) {
+        return Uint32Array;
+    } else if (ctor === Int16Array) {
+        return Int32Array;
+    } else {
+        throw new Error('sth unexpected in getPadArrayCtor');
+    }
+}

packages/gl/src/reshader/pbr/wgsl/standard_vert.wgsl

@@ -35,7 +35,7 @@ struct VertexInput {
     #endif
 
     #ifdef HAS_OPACITY
-        @location($i) aOpacity: vec4u,
+        @location($i) aOpacity: u32,
     #endif
 
     #if HAS_COLOR0
@@ -278,7 +278,7 @@ fn main(input: VertexInput) -> VertexOutput {
         #endif
 
         #ifdef HAS_OPACITY
-            output.vOpacity = f32(input.aOpacity[0]) / 255.0;
+            output.vOpacity = f32(input.aOpacity) / 255.0;
         #else
             output.vOpacity = 1.0;
         #endif

packages/vt/src/layer/plugins/painters/wgsl/line_vert.wgsl

@@ -279,12 +279,13 @@ fn main(input: VertexInput) -> VertexOutput {
     #endif
 
     #if HAS_PATTERN || HAS_DASHARRAY || HAS_GRADIENT
+        let aLinesofar = f32(input.aLinesofar);
         #ifdef HAS_GRADIENT
-            output.vLinesofar = input.aLinesofar / MAX_LINE_DISTANCE;
+            output.vLinesofar = aLinesofar / MAX_LINE_DISTANCE;
             output.vGradIndex = f32(input.aGradIndex);
         #else
             // /resScale * tileRatio 是为了把像素宽度转换为瓦片内的值域(即tile extent 8192或4096)
-            let linesofar = input.aLinesofar - halfwidth * input.aExtrude.z / EXTRUDE_SCALE / resScale * uniforms.tileRatio;
+            let linesofar = aLinesofar - halfwidth * f32(input.aExtrude.z) / EXTRUDE_SCALE / resScale * uniforms.tileRatio;
             output.vLinesofar = linesofar / uniforms.tileRatio * resScale;
         #endif
     #endif

packages/vt/src/layer/plugins/painters/wgsl/marker_vert.wgsl

@@ -62,10 +62,10 @@ struct VertexInput {
     @location($i) aDxDy: vec4i,
 #endif
 #ifdef HAS_MARKER_WIDTH
-    @location($i) aMarkerWidth: vec2u,
+    @location($i) aMarkerWidth: u32,
 #endif
 #ifdef HAS_MARKER_HEIGHT
-    @location($i) aMarkerHeight: vec2u,
+    @location($i) aMarkerHeight: u32,
 #endif
 #if HAS_MARKER_PITCH_ALIGN || HAS_TEXT_PITCH_ALIGN
     @location($i) aPitchAlign: vec2u,
@@ -142,13 +142,13 @@ fn main(vertexInput: VertexInput) -> VertexOutput {
 #endif
 
 #ifdef HAS_MARKER_WIDTH
-    var myMarkerWidth = f32(vertexInput.aMarkerWidth[0]);
+    var myMarkerWidth = f32(vertexInput.aMarkerWidth);
 #else
     var myMarkerWidth = uniforms.markerWidth;
 #endif
 
 #ifdef HAS_MARKER_HEIGHT
-    var myMarkerHeight = f32(vertexInput.aMarkerHeight[0]);
+    var myMarkerHeight = f32(vertexInput.aMarkerHeight);
 #else
     var myMarkerHeight = uniforms.markerHeight;
 #endif

packages/vt/src/layer/plugins/painters/wgsl/text_line_vert.wgsl

@@ -42,7 +42,7 @@ struct VertexInput {
     @location($i) aOffset: vec2i,
 #endif
 #ifdef ENABLE_COLLISION
-    @location($i) aOpacity: vec4u,
+    @location($i) aOpacity: u32,
 #endif
 #ifdef HAS_OPACITY
     @location($i) aColorOpacity: u32,
@@ -57,7 +57,7 @@ struct VertexInput {
     @location($i) aTextDy: i32,
 #endif
 #ifdef HAS_PITCH_ALIGN
-    @location($i) aPitchAlign: vec2u,
+    @location($i) aPitchAlign: u32,
 #endif
 #ifdef HAS_TEXT_FILL
     @location($i) aTextFill: vec4u,
@@ -177,7 +177,7 @@ fn main(input: VertexInput) -> VertexOutput {
     output.vTexCoord = texCoord / uniforms.glyphTexSize;
     output.vTextSize = myTextSize;
 #ifdef ENABLE_COLLISION
-    output.vOpacity = f32(input.aOpacity[0]) / 255.0;
+    output.vOpacity = f32(input.aOpacity) / 255.0;
 #else
     output.vOpacity = 1.0;
 #endif

packages/vt/src/layer/plugins/painters/wgsl/text_vert.wgsl

@@ -40,7 +40,7 @@ struct VertexInput {
 #endif
     @location($i) aShape: vec4i,
 #ifdef ENABLE_COLLISION
-    @location($i) aOpacity: vec4u,
+    @location($i) aOpacity: u32,
 #endif
 #ifdef HAS_OPACITY
     @location($i) aColorOpacity: u32,
@@ -216,7 +216,7 @@ fn main(input: VertexInput) -> VertexOutput {
 
     output.vTextSize = myTextSize;
 #ifdef ENABLE_COLLISION
-    output.vOpacity = f32(input.aOpacity[0]) / 255.0;
+    output.vOpacity = f32(input.aOpacity) / 255.0;
 #else
     output.vOpacity = 1.0;
 #endif