fix buffer's location and padding of uniform values

Author: fuzhenn

packages/reshader.gl/src/Geometry.ts

@@ -1083,10 +1083,20 @@ export default class Geometry {
     }
 
     getBufferDescriptor(vertexInfo) {
+        const attrInfos = [];
+        for (const p in vertexInfo) {
+            const info = vertexInfo[p];
+            attrInfos[info.location] = info;
+        }
         const data = this.data;
         const bufferDesc = [];
         const bufferMapping = {};
-        for (const p in data) {
+        // bufferDesc的顺序需要和wgsl中的location对应
+        for (let i = 0; i < attrInfos.length; i++) {
+            if (!attrInfos[i]) {
+                continue;
+            }
+            const p = attrInfos[i].geoAttrName;
             const attr = data[p];
             if (!attr) {
                 continue;
@@ -1098,7 +1108,6 @@ export default class Geometry {
             }
             const accessorName = attr.accessorName;
             const byteStride = attr.byteStride;
-            let stridePadding = 0;
             if (byteStride && accessorName) {
                 // a GLTF accessor style attribute
                 const format = getFormatFromGLTFAccessor(attr.componentType, attr.itemSize);
@@ -1121,11 +1130,11 @@ export default class Geometry {
                         ]
                     }
                     bufferMapping[accessorName] = desc;
-                    bufferDesc.push(desc);
+                    bufferDesc[i] = desc;
                 }
             } else {
                 const desc = getAttrBufferDescriptor(attr, info);
-                bufferDesc.push(desc);
+                bufferDesc[i] = desc;
             }
         }
         return bufferDesc;

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

@@ -238,21 +238,25 @@ fn main(input: VertexInput) -> VertexOutput {
         #endif
 
         #if HAS_TANGENT || HAS_NORMAL
-            let positionNormalMatrix = mat3x3f(localPositionMatrix[0].xyz, localPositionMatrix[1].xyz, localPositionMatrix[2].xyz);
+            let positionNormalMatrix = mat3x3f(
+                localPositionMatrix[0].xyz,
+                localPositionMatrix[1].xyz,
+                localPositionMatrix[2].xyz
+            );
             let normalMatrix = uniforms.modelNormalMatrix * positionNormalMatrix;
             #if HAS_TANGENT
                 let tangentFrame = toTangentFrameWithTangent(input.aTangent);
                 Normal = tangentFrame.n;
                 let t = tangentFrame.t;
                 output.vModelTangent = vec4f(normalMatrix * t, input.aTangent.w);
             #else
-                Normal = decode_getNormal(input.aNormal.xyz);
+                Normal = decode_getNormal(vec3f(input.aNormal.xyz));
             #endif
             let localNormal = Normal;
             output.vModelNormal = normalMatrix * localNormal;
         #else
-            Normal = vec3f(0.0);
-            output.vModelNormal = vec3f(0.0);
+            Normal = vec3f(0);
+            output.vModelNormal = vec3f(0);
         #endif
 
         #if HAS_TANGENT

packages/reshader.gl/src/webgpu/DynamicBuffer.ts

@@ -44,27 +44,37 @@ export default class DynamicBuffer {
                     }
                     const offset = dynamicOffset + member.offset;
                     const size = member.size;
-                    this._fillValue(storage, offset, size, value);
+                    this._fillValue(member.type, storage, offset, size, value);
                 }
                 dynamicOffset += roundUp(mapping[i].size, bufferAlignment);
             } else if (uniform.resourceType === ResourceType.Uniform) {
                 dynamicOffsets.addItem({ binding: uniform.binding, offset: dynamicOffset });
                 const value = uniformValues[uniform.name];
                 const size = isFunction(uniform.size) ? uniform.size() : uniform.size;
-                this._fillValue(storage, dynamicOffset, size, value);
+                this._fillValue(uniform.type, storage, dynamicOffset, size, value);
                 dynamicOffset += roundUp(size, bufferAlignment);
             }
         }
 
         // console.log(debugInfo.join());
     }
 
-    _fillValue(buffer, offset, size, value) {
+    _fillValue(type, buffer, offset, size, value) {
         // we always use f32 in WGSL
         const view = new Float32Array(buffer, offset, size / 4);
         if (isArray(value)) {
+            const padding = isPadding(type);
+            // 需要padding的类型参考:
+            // https://github.com/greggman/webgpu-utils/blob/dev/src/wgsl-types.ts
+            // wgsl 1.0中只会隔3个字节，pad一个字节
             for (let i = 0; i < value.length; i++) {
-                view[i] = value[i];
+                if (padding) {
+                    const col = Math.floor(i / 3);
+                    const row = i % 3;
+                    view[col * 4 + row] = value[i];
+                } else {
+                    view[i] = value[i];
+                }
             }
         } else {
             view[0] = value;
@@ -76,3 +86,18 @@ export default class DynamicBuffer {
         delete this.allocation;
     }
 }
+
+const PADDING_TYPES = {
+    mat2x3f: { pad: [3, 1] },
+    mat2x3h: { pad: [3, 1] },
+    mat3x3f: { pad: [3, 1] },
+    mat3x3h: { pad: [3, 1] },
+    mat4x3f: { pad: [3, 1] },
+    mat4x3h: { pad: [3, 1] },
+    mat3x4f: { pad: [3, 1] },
+    mat3x4h: { pad: [3, 1] },
+};
+
+function isPadding(type) {
+    return PADDING_TYPES[type.name];
+}

packages/vt/src/packer/pack/util/array.js

@@ -38,7 +38,8 @@ export function getIndexArrayType(max) {
 
 export function getPosArrayType(max) {
     max = Math.abs(max);
-    if (max < 128) return Int8Array;
+    // webgpu中会因为Type不同生成新的command，所以取消Int8Array
+    // if (max < 128) return Int8Array;
     if (max < 65536 / 2) return Int16Array;
     // https://stackoverflow.com/questions/3793838/which-is-the-first-integer-that-an-ieee-754-float-is-incapable-of-representing-e
     if (max < Math.pow(2, 24)) return Float32Array;
@@ -47,7 +48,8 @@ export function getPosArrayType(max) {
 }
 
 export function getUnsignedArrayType(max) {
-    if (max < 256) return Uint8Array;
+    // webgpu中会因为Type不同生成新的shader，所以取消Uint8Array
+    // if (max < 256) return Uint8Array;
     if (max < 65536) return Uint16Array;
     return Float32Array;
 }