@luma.gl/engine 9.0.0-alpha.30 → 9.0.0-alpha.31

package/dist/dist.dev.js

@@ -12,8 +12,8 @@ var __exports__ = (() => {
   var __hasOwnProp = Object.prototype.hasOwnProperty;
   var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
   var __export = (target, all) => {
-    for (var name in all)
-      __defProp(target, name, { get: all[name], enumerable: true });
+    for (var name2 in all)
+      __defProp(target, name2, { get: all[name2], enumerable: true });
   };
   var __copyProps = (to, from, except, desc) => {
     if (from && typeof from === "object" || typeof from === "function") {
@@ -423,7 +423,7 @@ var __exports__ = (() => {
     for (const key of propNames) {
       const value = object[key];
       if (typeof value === "function") {
-        if (!predefined.find((name) => key === name)) {
+        if (!predefined.find((name2) => key === name2)) {
           object[key] = value.bind(obj);
         }
       }
@@ -812,7 +812,7 @@ var __exports__ = (() => {
 
   // ../../node_modules/@probe.gl/stats/dist/lib/stat.js
   var Stat = class {
-    constructor(name, type) {
+    constructor(name2, type) {
       this.name = void 0;
       this.type = void 0;
       this.sampleSize = 1;
@@ -827,7 +827,7 @@ var __exports__ = (() => {
       this._samples = 0;
       this._startTime = 0;
       this._timerPending = false;
-      this.name = name;
+      this.name = name2;
       this.type = type;
       this.reset();
     }
@@ -932,10 +932,10 @@ var __exports__ = (() => {
       this._initializeStats(options.stats);
       Object.seal(this);
     }
-    get(name) {
+    get(name2) {
       let type = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : "count";
       return this._getOrCreate({
-        name,
+        name: name2,
         type
       });
     }
@@ -971,17 +971,17 @@ var __exports__ = (() => {
     }
     _getOrCreate(stat) {
       const {
-        name,
+        name: name2,
         type
       } = stat;
-      let result = this.stats[name];
+      let result = this.stats[name2];
       if (!result) {
         if (stat instanceof Stat) {
           result = stat;
         } else {
-          result = new Stat(name, type);
+          result = new Stat(name2, type);
         }
-        this.stats[name] = result;
+        this.stats[name2] = result;
       }
       return result;
     }
@@ -990,16 +990,16 @@ var __exports__ = (() => {
   // ../core/src/lib/utils/stats-manager.ts
   var StatsManager = class {
     stats = /* @__PURE__ */ new Map();
-    getStats(name) {
-      return this.get(name);
+    getStats(name2) {
+      return this.get(name2);
     }
-    get(name) {
-      if (!this.stats.has(name)) {
-        this.stats.set(name, new Stats({
-          id: name
+    get(name2) {
+      if (!this.stats.has(name2)) {
+        this.stats.set(name2, new Stats({
+          id: name2
         }));
       }
-      return this.stats.get(name);
+      return this.stats.get(name2);
     }
   };
   var lumaStats = new StatsManager();
@@ -1048,11 +1048,6 @@ var __exports__ = (() => {
   }
 
   // ../core/src/adapter/resources/resource.ts
-  var DEFAULT_RESOURCE_PROPS = {
-    id: "undefined",
-    handle: void 0,
-    userData: void 0
-  };
   var Resource = class {
     /** props.id, for debugging. */
     userData = {};
@@ -1137,34 +1132,38 @@ var __exports__ = (() => {
     /** Called by .destroy() to track object destruction. Subclass must call if overriding destroy() */
     removeStats() {
       const stats = this._device.statsManager.getStats("Resource Counts");
-      const name = this[Symbol.toStringTag];
-      stats.get(`${name}s Active`).decrementCount();
+      const name2 = this[Symbol.toStringTag];
+      stats.get(`${name2}s Active`).decrementCount();
     }
     /** Called by subclass to track memory allocations */
-    trackAllocatedMemory(bytes, name = this[Symbol.toStringTag]) {
+    trackAllocatedMemory(bytes, name2 = this[Symbol.toStringTag]) {
       const stats = this._device.statsManager.getStats("Resource Counts");
       stats.get("GPU Memory").addCount(bytes);
-      stats.get(`${name} Memory`).addCount(bytes);
+      stats.get(`${name2} Memory`).addCount(bytes);
       this.allocatedBytes = bytes;
     }
     /** Called by subclass to track memory deallocations */
-    trackDeallocatedMemory(name = this[Symbol.toStringTag]) {
+    trackDeallocatedMemory(name2 = this[Symbol.toStringTag]) {
       const stats = this._device.statsManager.getStats("Resource Counts");
       stats.get("GPU Memory").subtractCount(this.allocatedBytes);
-      stats.get(`${name} Memory`).subtractCount(this.allocatedBytes);
+      stats.get(`${name2} Memory`).subtractCount(this.allocatedBytes);
       this.allocatedBytes = 0;
     }
     /** Called by resource constructor to track object creation */
     addStats() {
       const stats = this._device.statsManager.getStats("Resource Counts");
-      const name = this[Symbol.toStringTag];
+      const name2 = this[Symbol.toStringTag];
       stats.get("Resources Created").incrementCount();
-      stats.get(`${name}s Created`).incrementCount();
-      stats.get(`${name}s Active`).incrementCount();
+      stats.get(`${name2}s Created`).incrementCount();
+      stats.get(`${name2}s Active`).incrementCount();
     }
   };
   /** Default properties for resource */
-  __publicField(Resource, "defaultProps", DEFAULT_RESOURCE_PROPS);
+  __publicField(Resource, "defaultProps", {
+    id: "undefined",
+    handle: void 0,
+    userData: void 0
+  });
   function selectivelyMerge(props, defaultProps) {
     const mergedProps = {
       ...defaultProps
@@ -1178,16 +1177,6 @@ var __exports__ = (() => {
   }
 
   // ../core/src/adapter/resources/buffer.ts
-  var DEFAULT_BUFFER_PROPS = {
-    ...DEFAULT_RESOURCE_PROPS,
-    usage: 0,
-    // Buffer.COPY_DST | Buffer.COPY_SRC
-    byteLength: 0,
-    byteOffset: 0,
-    data: null,
-    indexType: "uint16",
-    mappedAtCreation: false
-  };
   var _Buffer = class extends Resource {
     get [Symbol.toStringTag]() {
       return "Buffer";
@@ -1204,7 +1193,7 @@ var __exports__ = (() => {
           deducedProps.indexType = "uint16";
         }
       }
-      super(device, deducedProps, DEFAULT_BUFFER_PROPS);
+      super(device, deducedProps, _Buffer.defaultProps);
     }
     write(data, byteOffset) {
       throw new Error("not implemented");
@@ -1262,6 +1251,16 @@ var __exports__ = (() => {
     // abstract unmap(): void;
   };
   var Buffer2 = _Buffer;
+  __publicField(Buffer2, "defaultProps", {
+    ...Resource.defaultProps,
+    usage: 0,
+    // Buffer.COPY_DST | Buffer.COPY_SRC
+    byteLength: 0,
+    byteOffset: 0,
+    data: null,
+    indexType: "uint16",
+    mappedAtCreation: false
+  });
   // Usage Flags
   __publicField(Buffer2, "MAP_READ", 1);
   __publicField(Buffer2, "MAP_WRITE", 2);
@@ -1311,8 +1310,14 @@ var __exports__ = (() => {
       };
       this.id = this.props.id || uid(this[Symbol.toStringTag].toLowerCase());
     }
+    /** id of this device, primarily for debugging */
+    /** stats */
     statsManager = lumaStats;
+    /** A copy of the device props  */
+    /** Available for the application to store data on the device */
     userData = {};
+    /** Used by other luma.gl modules to store data on the device */
+    _lumaData = {};
     // Capabilities
     /** Information about the device (vendor, versions etc) */
     /** Optional capability discovery */
@@ -1717,25 +1722,7 @@ var __exports__ = (() => {
   }
 
   // ../core/src/adapter/resources/texture.ts
-  var DEFAULT_TEXTURE_PROPS = {
-    ...DEFAULT_RESOURCE_PROPS,
-    data: null,
-    dimension: "2d",
-    format: "rgba8unorm",
-    width: void 0,
-    height: void 0,
-    depth: 1,
-    mipmaps: true,
-    sampler: {},
-    // type: undefined,
-    compressed: false,
-    // mipLevels: 1,
-    usage: 0,
-    mipLevels: void 0,
-    samples: void 0,
-    type: void 0
-  };
-  var Texture = class extends Resource {
+  var _Texture = class extends Resource {
     get [Symbol.toStringTag]() {
       return "Texture";
     }
@@ -1745,7 +1732,7 @@ var __exports__ = (() => {
     /** height in pixels of this texture */
     /** depth of this texture */
     /** Default sampler for this texture */
-    constructor(device, props, defaultProps = DEFAULT_TEXTURE_PROPS) {
+    constructor(device, props, defaultProps = _Texture.defaultProps) {
       super(device, props, defaultProps);
       this.dimension = this.props.dimension;
       this.format = this.props.format;
@@ -1754,6 +1741,26 @@ var __exports__ = (() => {
       this.depth = this.props.depth;
     }
   };
+  var Texture = _Texture;
+  __publicField(Texture, "defaultProps", {
+    ...Resource.defaultProps,
+    data: null,
+    dimension: "2d",
+    format: "rgba8unorm",
+    width: void 0,
+    height: void 0,
+    depth: 1,
+    mipmaps: true,
+    sampler: {},
+    // type: undefined,
+    compressed: false,
+    // mipLevels: 1,
+    usage: 0,
+    // usage: GPUTextureUsage.COPY_DST
+    mipLevels: void 0,
+    samples: void 0,
+    type: void 0
+  });
   __publicField(Texture, "COPY_SRC", 1);
   __publicField(Texture, "COPY_DST", 2);
   __publicField(Texture, "TEXTURE_BINDING", 4);
@@ -1761,28 +1768,38 @@ var __exports__ = (() => {
   __publicField(Texture, "RENDER_ATTACHMENT", 16);
 
   // ../core/src/adapter/resources/shader.ts
-  var DEFAULT_SHADER_PROPS = {
-    ...DEFAULT_RESOURCE_PROPS,
-    stage: "vertex",
-    source: "",
-    sourceMap: null,
-    language: "glsl",
-    shaderType: 0
-  };
-  var Shader = class extends Resource {
+  var _Shader = class extends Resource {
     get [Symbol.toStringTag]() {
       return "Shader";
     }
     constructor(device, props) {
-      super(device, props, DEFAULT_SHADER_PROPS);
+      super(device, props, _Shader.defaultProps);
       this.stage = this.props.stage;
       this.source = this.props.source;
     }
   };
+  var Shader = _Shader;
+  __publicField(Shader, "defaultProps", {
+    ...Resource.defaultProps,
+    stage: "vertex",
+    source: "",
+    sourceMap: null,
+    language: "glsl",
+    shaderType: 0
+  });
 
   // ../core/src/adapter/resources/sampler.ts
-  var DEFAULT_SAMPLER_PROPS = {
-    ...DEFAULT_RESOURCE_PROPS,
+  var _Sampler = class extends Resource {
+    get [Symbol.toStringTag]() {
+      return "Sampler";
+    }
+    constructor(device, props) {
+      super(device, props, _Sampler.defaultProps);
+    }
+  };
+  var Sampler = _Sampler;
+  __publicField(Sampler, "defaultProps", {
+    ...Resource.defaultProps,
     type: "color-sampler",
     addressModeU: "clamp-to-edge",
     addressModeV: "clamp-to-edge",
@@ -1795,27 +1812,10 @@ var __exports__ = (() => {
     // Per WebGPU spec
     compare: "less-equal",
     maxAnisotropy: 1
-  };
-  var Sampler = class extends Resource {
-    get [Symbol.toStringTag]() {
-      return "Sampler";
-    }
-    constructor(device, props) {
-      super(device, props, DEFAULT_SAMPLER_PROPS);
-    }
-  };
+  });
 
   // ../core/src/adapter/resources/framebuffer.ts
-  var DEFAULT_FRAMEBUFFER_PROPS = {
-    ...DEFAULT_RESOURCE_PROPS,
-    width: 1,
-    height: 1,
-    colorAttachments: [],
-    // ['rgba8unorm-unsized'],
-    depthStencilAttachment: null
-    // 'depth24plus-stencil8'
-  };
-  var Framebuffer = class extends Resource {
+  var _Framebuffer = class extends Resource {
     get [Symbol.toStringTag]() {
       return "Framebuffer";
     }
@@ -1826,7 +1826,7 @@ var __exports__ = (() => {
     /** Depth-stencil attachment, if provided */
     depthStencilAttachment = null;
     constructor(device, props = {}) {
-      super(device, props, DEFAULT_FRAMEBUFFER_PROPS);
+      super(device, props, _Framebuffer.defaultProps);
       this.width = this.props.width;
       this.height = this.props.height;
     }
@@ -1992,10 +1992,36 @@ var __exports__ = (() => {
     }
     */
   };
+  var Framebuffer = _Framebuffer;
+  __publicField(Framebuffer, "defaultProps", {
+    ...Resource.defaultProps,
+    width: 1,
+    height: 1,
+    colorAttachments: [],
+    // ['rgba8unorm-unsized'],
+    depthStencilAttachment: null
+    // 'depth24plus-stencil8'
+  });
 
   // ../core/src/adapter/resources/render-pipeline.ts
-  var DEFAULT_RENDER_PIPELINE_PROPS = {
-    ...DEFAULT_RESOURCE_PROPS,
+  var _RenderPipeline = class extends Resource {
+    get [Symbol.toStringTag]() {
+      return "RenderPipeline";
+    }
+    hash = "";
+    constructor(device, props) {
+      super(device, props, _RenderPipeline.defaultProps);
+    }
+    /** Set attributes (stored on pipeline and set before each call) */
+    /** Set attributes (stored on pipeline and set before each call) */
+    /** Set constant attributes (WebGL only) */
+    /** Set bindings (stored on pipeline and set before each call) */
+    /** Uniforms (only supported on WebGL devices. Reset before each call to enable pipeline sharing) */
+    /** Draw call */
+  };
+  var RenderPipeline = _RenderPipeline;
+  __publicField(RenderPipeline, "defaultProps", {
+    ...Resource.defaultProps,
     vs: null,
     vsEntryPoint: "",
     // main
@@ -2004,36 +2030,17 @@ var __exports__ = (() => {
     fsEntryPoint: "",
     // main
     fsConstants: {},
-    layout: null,
-    // {attributes: [], bindings: []},
+    shaderLayout: null,
+    bufferLayout: [],
     topology: "triangle-list",
-    // targets:
     parameters: {},
-    bufferMap: [],
     vertexCount: 0,
     instanceCount: 0,
     indices: null,
     attributes: {},
     bindings: {},
     uniforms: {}
-  };
-  var RenderPipeline = class extends Resource {
-    get [Symbol.toStringTag]() {
-      return "RenderPipeline";
-    }
-    hash = "";
-    constructor(device, props) {
-      super(device, props, DEFAULT_RENDER_PIPELINE_PROPS);
-    }
-  };
-  /** Set attributes (stored on pipeline and set before each call) */
-  /** Set attributes (stored on pipeline and set before each call) */
-  /** Set constant attributes (WebGL only) */
-  /** Set bindings (stored on pipeline and set before each call) */
-  /** Uniforms (only supported on WebGL devices. Reset before each call to enable pipeline sharing) */
-  /** Draw call */
-  /** Private "export" for Model class */
-  __publicField(RenderPipeline, "_DEFAULT_PROPS", DEFAULT_RENDER_PIPELINE_PROPS);
+  });
 
   // ../core/src/adapter/resources/render-pass.ts
   var _RenderPass = class extends Resource {
@@ -2093,15 +2100,12 @@ var __exports__ = (() => {
   });
 
   // ../core/src/adapter/resources/command-encoder.ts
-  var DEFAULT_COMMAND_ENCODER_PROPS = {
-    ...DEFAULT_RESOURCE_PROPS
-  };
-  var CommandEncoder = class extends Resource {
+  var _CommandEncoder = class extends Resource {
     get [Symbol.toStringTag]() {
       return "CommandEncoder";
     }
-    constructor(props) {
-      super(props, DEFAULT_COMMAND_ENCODER_PROPS);
+    constructor(device, props) {
+      super(device, props, _CommandEncoder.defaultProps);
     }
     // TODO - return the CommandBuffer?
     // beginRenderPass(GPURenderPassDescriptor descriptor): GPURenderPassEncoder;
@@ -2122,19 +2126,25 @@ var __exports__ = (() => {
     //   destinationOffset?: number;
     // }): void;
   };
+  var CommandEncoder = _CommandEncoder;
+  __publicField(CommandEncoder, "defaultProps", {
+    ...Resource.defaultProps,
+    measureExecutionTime: void 0
+  });
 
   // ../core/src/adapter/resources/command-buffer.ts
-  var DEFAULT_COMMAND_ENCODER_PROPS2 = {
-    ...DEFAULT_RESOURCE_PROPS
-  };
-  var CommandBuffer = class extends Resource {
+  var _CommandBuffer = class extends Resource {
     get [Symbol.toStringTag]() {
       return "CommandBuffer";
     }
     constructor(props) {
-      super(props, DEFAULT_COMMAND_ENCODER_PROPS2);
+      super(props, _CommandBuffer.defaultProps);
     }
   };
+  var CommandBuffer = _CommandBuffer;
+  __publicField(CommandBuffer, "defaultProps", {
+    ...Resource.defaultProps
+  });
 
   // ../core/src/lib/utils/assert.ts
   function assert2(condition, message2) {
@@ -2143,7 +2153,7 @@ var __exports__ = (() => {
     }
   }
 
-  // ../core/src/adapter/utils/decode-data-type.ts
+  // ../core/src/adapter/type-utils/decode-data-type.ts
   function decodeVertexType(type) {
     const dataType = TYPE_MAP[type];
     const bytes = getDataTypeBytes(dataType);
@@ -2187,7 +2197,7 @@ var __exports__ = (() => {
     sint32: 4
   };
 
-  // ../core/src/adapter/utils/decode-vertex-format.ts
+  // ../core/src/adapter/type-utils/decode-vertex-format.ts
   function decodeVertexFormat(format) {
     let webglOnly;
     if (format.endsWith("-webgl")) {
@@ -2212,7 +2222,7 @@ var __exports__ = (() => {
     return result;
   }
 
-  // ../core/src/adapter/utils/decode-texture-format.ts
+  // ../core/src/adapter/type-utils/decode-texture-format.ts
   var REGEX = /^(rg?b?a?)([0-9]*)([a-z]*)(-srgb)?(-webgl|-unsized)?$/;
   function decodeTextureFormat(format) {
     const matches = REGEX.exec(format);
@@ -2318,6 +2328,68 @@ var __exports__ = (() => {
     };
   }
 
+  // ../core/src/adapter/type-utils/decode-attribute-type.ts
+  function decodeShaderAttributeType(attributeType) {
+    const [dataType, components] = TYPE_INFO[attributeType];
+    const integer = dataType === "i32" || dataType === "u32";
+    const signed = dataType !== "u32";
+    const byteLength = TYPE_SIZES2[dataType] * components;
+    const defaultVertexFormat = getCompatibleVertexFormat(dataType, components);
+    return {
+      dataType,
+      components,
+      defaultVertexFormat,
+      byteLength,
+      integer,
+      signed
+    };
+  }
+  function getCompatibleVertexFormat(dataType, components) {
+    let vertexType;
+    switch (dataType) {
+      case "f32":
+        vertexType = "float32";
+        break;
+      case "i32":
+        vertexType = "sint32";
+        break;
+      case "u32":
+        vertexType = "uint32";
+        break;
+      case "f16":
+        return components <= 2 ? "float16x2" : "float16x4";
+    }
+    if (components === 1) {
+      return vertexType;
+    }
+    return `${vertexType}x${components}`;
+  }
+  var TYPE_INFO = {
+    f32: ["f32", 1],
+    "vec2<f32>": ["f32", 2],
+    "vec3<f32>": ["f32", 3],
+    "vec4<f32>": ["f32", 4],
+    f16: ["f16", 1],
+    "vec2<f16>": ["f16", 2],
+    "vec3<f16>": ["f16", 3],
+    "vec4<f16>": ["f16", 4],
+    i32: ["i32", 1],
+    "vec2<i32>": ["i32", 2],
+    "vec3<i32>": ["i32", 3],
+    "vec4<i32>": ["i32", 4],
+    u32: ["u32", 1],
+    "vec2<u32>": ["u32", 2],
+    "vec3<u32>": ["u32", 3],
+    "vec4<u32>": ["u32", 4]
+  };
+  var TYPE_SIZES2 = {
+    f32: 4,
+    f16: 2,
+    i32: 4,
+    u32: 4
+    // 'bool-webgl': 4,  
+  };
+
   // ../core/src/lib/compiler-log/format-compiler-log.ts
   function formatCompilerLog(shaderLog, source, options) {
     const lines = source.split(/\r?\n/);
@@ -2358,6 +2430,102 @@ var __exports__ = (() => {
     return result + string;
   }
 
+  // ../core/src/adapter/attribute-utils/get-attribute-from-layouts.ts
+  function getAttributeInfosFromLayouts(shaderLayout, bufferLayout) {
+    const attributeInfos = {};
+    for (const attribute of shaderLayout.attributes) {
+      attributeInfos[attribute.name] = getAttributeInfoFromLayouts(shaderLayout, bufferLayout, attribute.name);
+    }
+    return attributeInfos;
+  }
+  function getAttributeInfoFromLayouts(shaderLayout, bufferLayout, name2) {
+    const shaderDeclaration = getAttributeFromShaderLayout(shaderLayout, name2);
+    const bufferMapping = getAttributeFromBufferLayout(bufferLayout, name2);
+    if (!shaderDeclaration) {
+      return null;
+    }
+    const attributeTypeInfo = decodeShaderAttributeType(shaderDeclaration.type);
+    const vertexFormat = bufferMapping?.vertexFormat || attributeTypeInfo.defaultVertexFormat;
+    const vertexFormatInfo = decodeVertexFormat(vertexFormat);
+    return {
+      name: name2,
+      bufferName: bufferMapping?.name || name2,
+      location: shaderDeclaration.location,
+      shaderType: shaderDeclaration.type,
+      shaderDataType: attributeTypeInfo.dataType,
+      shaderComponents: attributeTypeInfo.components,
+      vertexFormat,
+      bufferDataType: vertexFormatInfo.type,
+      bufferComponents: vertexFormatInfo.components,
+      // normalized is a property of the buffer's vertex format
+      normalized: vertexFormatInfo.normalized,
+      // integer is a property of the shader declaration
+      integer: attributeTypeInfo.integer,
+      stepMode: bufferMapping?.stepMode || shaderDeclaration.stepMode,
+      byteOffset: bufferMapping?.byteOffset || 0,
+      byteStride: bufferMapping?.byteStride || 0
+    };
+  }
+  function getAttributeFromShaderLayout(shaderLayout, name2) {
+    const attribute = shaderLayout.attributes.find((attr) => attr.name === name2);
+    if (!attribute) {
+      log.warn(`shader layout attribute "${name2}" not present in shader`);
+    }
+    return attribute || null;
+  }
+  function getAttributeFromBufferLayout(bufferLayout, name2) {
+    for (const bufferMapping of bufferLayout) {
+      if (bufferMapping.name === name2) {
+        return {
+          name: bufferMapping.name,
+          bufferName: name2,
+          vertexFormat: bufferMapping.format,
+          byteOffset: bufferMapping.byteOffset || 0,
+          byteStride: bufferMapping.byteStride || 0
+        };
+      }
+      let nextByteOffset = bufferMapping.byteOffset || 0;
+      let byteStride = 0;
+      for (const interleavedMapping of bufferMapping.attributes || []) {
+        const info = decodeVertexFormat(interleavedMapping.format);
+        byteStride += info.byteLength;
+      }
+      for (const interleavedMapping of bufferMapping.attributes || []) {
+        const byteOffset = nextByteOffset;
+        nextByteOffset += interleavedMapping?.byteStrideOffset || decodeVertexFormat(interleavedMapping.format).byteLength;
+        if (interleavedMapping.name === name2) {
+          return {
+            name: bufferMapping.name,
+            bufferName: name2,
+            vertexFormat: interleavedMapping.format,
+            byteOffset,
+            byteStride: bufferMapping.byteStride || byteStride
+          };
+        }
+      }
+    }
+    log.warn(`layout for attribute "${name2}" not present in buffer layout`);
+    return null;
+  }
+  function mergeShaderLayout(baseLayout, overrideLayout) {
+    const mergedLayout = {
+      ...baseLayout,
+      attributes: baseLayout.attributes.map((attribute) => ({
+        ...attribute
+      }))
+    };
+    for (const attribute of overrideLayout?.attributes || []) {
+      const baseAttribute = mergedLayout.attributes.find((attr) => attr.name === attribute.name);
+      if (!baseAttribute) {
+        log.warn(`shader layout attribute ${attribute.name} not present in shader`);
+      } else {
+        baseAttribute.type = attribute.type || baseAttribute.type;
+        baseAttribute.stepMode = attribute.stepMode || baseAttribute.stepMode;
+      }
+    }
+    return mergedLayout;
+  }
+
   // ../core/src/lib/utils/cast.ts
   function cast(value) {
     return value;
@@ -2918,8 +3086,8 @@ var __exports__ = (() => {
   }
   function getAttributeBuffersFromGeometry(device, geometry) {
     const buffers = {};
-    for (const [name, attribute] of Object.entries(geometry.attributes)) {
-      const remappedName = mapAttributeName(name);
+    for (const [name2, attribute] of Object.entries(geometry.attributes)) {
+      const remappedName = mapAttributeName(name2);
       if (attribute?.constant) {
         throw new Error("constant attributes not supported");
       } else {
@@ -2932,8 +3100,8 @@ var __exports__ = (() => {
     }
     return buffers;
   }
-  function mapAttributeName(name) {
-    return GLTF_TO_LUMA_ATTRIBUTE_MAP[name] || name;
+  function mapAttributeName(name2) {
+    return GLTF_TO_LUMA_ATTRIBUTE_MAP[name2] || name2;
   }
 
   // ../shadertools/src/lib/glsl-utils/highlight.ts
@@ -2963,8 +3131,8 @@ var __exports__ = (() => {
   };
   function makePropValidators(propTypes) {
     const propValidators = {};
-    for (const [name, propType] of Object.entries(propTypes)) {
-      propValidators[name] = makePropValidator(propType);
+    for (const [name2, propType] of Object.entries(propTypes)) {
+      propValidators[name2] = makePropValidator(propType);
     }
     return propValidators;
   }
@@ -3045,7 +3213,7 @@ var __exports__ = (() => {
     }
     constructor(props) {
       const {
-        name,
+        name: name2,
         vs,
         fs,
         dependencies = [],
@@ -3055,8 +3223,8 @@ var __exports__ = (() => {
         defines = {},
         inject = {}
       } = props;
-      assert3(typeof name === "string");
-      this.name = name;
+      assert3(typeof name2 === "string");
+      this.name = name2;
       this.vs = vs;
       this.fs = fs;
       this.getModuleUniforms = getUniforms;
@@ -3172,7 +3340,7 @@ ${moduleSource}// END MODULE_${this.name}
       moduleMap,
       moduleDepth
     });
-    return Object.keys(moduleDepth).sort((a, b) => moduleDepth[b] - moduleDepth[a]).map((name) => moduleMap[name]);
+    return Object.keys(moduleDepth).sort((a, b) => moduleDepth[b] - moduleDepth[a]).map((name2) => moduleMap[name2]);
   }
   function getDependencyGraph(options) {
     const {
@@ -3571,9 +3739,9 @@ ${isVertex ? "" : FRAGMENT_SHADER_PROLOGUE}
       const match = /^(v|f)s:(#)?([\w-]+)$/.exec(key);
       if (match) {
         const hash = match[2];
-        const name = match[3];
+        const name2 = match[3];
         if (hash) {
-          if (name === "decl") {
+          if (name2 === "decl") {
             declInjections[key] = [injection];
           } else {
             mainInjections[key] = [injection];
@@ -3595,8 +3763,8 @@ ${isVertex ? "" : FRAGMENT_SHADER_PROLOGUE}
       for (const key in injections) {
         const match = /^(v|f)s:#([\w-]+)$/.exec(key);
         if (match) {
-          const name = match[2];
-          const injectionType = name === "decl" ? declInjections : mainInjections;
+          const name2 = match[2];
+          const injectionType = name2 === "decl" ? declInjections : mainInjections;
           injectionType[key] = injectionType[key] || [];
           injectionType[key].push(injections[key]);
         } else {
@@ -3700,11 +3868,11 @@ ${isVertex ? "" : FRAGMENT_SHADER_PROLOGUE}
       }
       hook = hook.trim();
       const [stage, signature] = hook.split(":");
-      const name = hook.replace(/\(.+/, "");
+      const name2 = hook.replace(/\(.+/, "");
       if (stage !== "vs" && stage !== "fs") {
         throw new Error(stage);
       }
-      result[stage][name] = Object.assign(opts, {
+      result[stage][name2] = Object.assign(opts, {
         signature
       });
     });
@@ -5690,7 +5858,7 @@ void main() {
     defines: {},
     inject: {},
     transpileToGLSL100: false,
-    layout: null,
+    shaderLayout: null,
     varyings: [],
     bufferMode: 35981,
     // // varyings/bufferMode for xform feedback, 0x8c8d: SEPARATE_ATTRIBS
@@ -5848,16 +6016,16 @@ void main() {
       let count = 0;
       for (let i = 0, len = this._defaultModules.length; i < len; ++i) {
         const module = this._defaultModules[i];
-        const name = module.name;
+        const name2 = module.name;
         modules[count++] = module;
-        seen[name] = true;
+        seen[name2] = true;
       }
       for (let i = 0, len = appModules.length; i < len; ++i) {
         const module = appModules[i];
-        const name = module.name;
-        if (!seen[name]) {
+        const name2 = module.name;
+        if (!seen[name2]) {
           modules[count++] = module;
-          seen[name] = true;
+          seen[name2] = true;
         }
       }
       modules.length = count;
@@ -5867,7 +6035,7 @@ void main() {
 
   // src/model/model.ts
   var DEFAULT_MODEL_PROPS = {
-    ...RenderPipeline._DEFAULT_PROPS,
+    ...RenderPipeline.defaultProps,
     vs: null,
     fs: null,
     id: "unnamed",
@@ -5877,7 +6045,9 @@ void main() {
     modules: [],
     moduleSettings: {},
     geometry: null,
-    pipelineFactory: void 0
+    pipelineFactory: void 0,
+    vertexCount: 0,
+    instanceCount: 0
   };
   var Model = class {
     fs = null;
@@ -5928,7 +6098,7 @@ void main() {
         topology: this.topology,
         defines: props.defines,
         parameters: props.parameters,
-        layout: props.layout
+        shaderLayout: props.shaderLayout
       });
       this.pipeline = pipeline;
       this._getModuleUniforms = getUniforms;
@@ -6974,12 +7144,12 @@ void main() {
       return list;
     };
     const original_getExtension = gl.getExtension;
-    gl.getExtension = function getExtension(name) {
-      const ext = original_getExtension.call(this, name);
+    gl.getExtension = function getExtension(name2) {
+      const ext = original_getExtension.call(this, name2);
       if (ext) {
         return ext;
       }
-      if (name !== "OES_vertex_array_object") {
+      if (name2 !== "OES_vertex_array_object") {
         return null;
       }
       if (!gl.__OESVertexArrayObject) {
@@ -8166,6 +8336,37 @@ void main() {
     return isMSIE || isTrident;
   }
 
+  // ../webgl/src/adapter/converters/vertex-formats.ts
+  function getGLFromVertexType(dataType) {
+    switch (dataType) {
+      case "uint8":
+        return GL.UNSIGNED_BYTE;
+      case "sint8":
+        return GL.BYTE;
+      case "unorm8":
+        return GL.UNSIGNED_BYTE;
+      case "snorm8":
+        return GL.BYTE;
+      case "uint16":
+        return GL.UNSIGNED_SHORT;
+      case "sint16":
+        return GL.SHORT;
+      case "unorm16":
+        return GL.UNSIGNED_SHORT;
+      case "snorm16":
+        return GL.SHORT;
+      case "uint32":
+        return GL.UNSIGNED_INT;
+      case "sint32":
+        return GL.INT;
+      case "float16":
+        return GL.HALF_FLOAT;
+      case "float32":
+        return GL.FLOAT;
+    }
+    throw new Error(String(dataType));
+  }
+
   // ../webgl/src/adapter/converters/texture-formats.ts
   var texture_compression_bc = "texture-compression-bc";
   var texture_compression_astc = "texture-compression-astc";
@@ -8947,7 +9148,7 @@ void main() {
     [GL.LUMINANCE]: 1,
     [GL.LUMINANCE_ALPHA]: 2
   };
-  var TYPE_SIZES2 = {
+  var TYPE_SIZES3 = {
     [GL.FLOAT]: 4,
     [GL.UNSIGNED_INT]: 4,
     [GL.INT]: 4,
@@ -9031,7 +9232,8 @@ void main() {
     return {
       format: webglFormat,
       dataFormat: getWebGLPixelDataFormat(decoded.format, decoded.integer, decoded.normalized, webglFormat),
-      type: getWebGLDataType(decoded.dataType),
+      // depth formats don't have a type
+      type: decoded.dataType ? getGLFromVertexType(decoded.dataType) : GL.UNSIGNED_BYTE,
       // @ts-expect-error
       compressed: decoded.compressed
     };
@@ -9070,7 +9272,7 @@ void main() {
     const format = convertGLToTextureFormat(formatOrGL);
     const params = getWebGLTextureParameters(format, isWebGL23);
     const channels = DATA_FORMAT_CHANNELS[params.dataFormat] || 4;
-    const channelSize = TYPE_SIZES2[params.type] || 1;
+    const channelSize = TYPE_SIZES3[params.type] || 1;
     return channels * channelSize;
   }
   function getWebGLPixelDataFormat(dataFormat, integer, normalized, format) {
@@ -9090,28 +9292,6 @@ void main() {
         return GL.RGBA;
     }
   }
-  function getWebGLDataType(dataType) {
-    switch (dataType) {
-      case "uint8":
-        return GL.UNSIGNED_BYTE;
-      case "sint8":
-        return GL.BYTE;
-      case "uint16":
-        return GL.UNSIGNED_SHORT;
-      case "sint16":
-        return GL.SHORT;
-      case "uint32":
-        return GL.UNSIGNED_INT;
-      case "sint32":
-        return GL.INT;
-      case "float16":
-        return GL.HALF_FLOAT;
-      case "float32":
-        return GL.FLOAT;
-      default:
-        return GL.UNSIGNED_BYTE;
-    }
-  }
 
   // ../webgl/src/adapter/device-helpers/device-features.ts
   function getDeviceFeatures(gl) {
@@ -10547,17 +10727,17 @@ void main(void) {}`;
   }
 
   // ../webgl/src/adapter/objects/constants-to-keys.ts
-  function getKeyValue(gl, name) {
-    if (typeof name !== "string") {
-      return name;
+  function getKeyValue(gl, name2) {
+    if (typeof name2 !== "string") {
+      return name2;
     }
-    const number = Number(name);
+    const number = Number(name2);
     if (!isNaN(number)) {
       return number;
     }
-    name = name.replace(/^.*\./, "");
-    const value = gl[name];
-    assert2(value !== void 0, `Accessing undefined constant GL.${name}`);
+    name2 = name2.replace(/^.*\./, "");
+    const value = gl[name2];
+    assert2(value !== void 0, `Accessing undefined constant GL.${name2}`);
     return value;
   }
 
@@ -11984,7 +12164,7 @@ ${formattedLog}`)();
     // });
   };
 
-  // ../webgl/src/adapter/helpers/uniforms.ts
+  // ../webgl/src/adapter/helpers/decode-webgl-types.ts
   function isSamplerUniform(type) {
     return SAMPLER_TYPES.includes(type);
   }
@@ -12002,10 +12182,11 @@ ${formattedLog}`)();
     [GL.UNSIGNED_INT_VEC2]: [GL.UNSIGNED_INT, 2, "uvec2", "vec2<u32>", "uint32x2"],
     [GL.UNSIGNED_INT_VEC3]: [GL.UNSIGNED_INT, 3, "uvec3", "vec3<u32>", "uint32x3"],
     [GL.UNSIGNED_INT_VEC4]: [GL.UNSIGNED_INT, 4, "uvec4", "vec4<u32>", "uint32x4"],
-    [GL.BOOL]: [GL.FLOAT, 1, "bool", "f32", "float32x2"],
-    [GL.BOOL_VEC2]: [GL.FLOAT, 2, "bvec2", "vec2<f32>"],
-    [GL.BOOL_VEC3]: [GL.FLOAT, 3, "bvec3", "vec3<f32>"],
-    [GL.BOOL_VEC4]: [GL.FLOAT, 4, "bvec4", "vec4<f32>"],
+    [GL.BOOL]: [GL.FLOAT, 1, "bool", "f32", "float32"],
+    [GL.BOOL_VEC2]: [GL.FLOAT, 2, "bvec2", "vec2<f32>", "float32x2"],
+    [GL.BOOL_VEC3]: [GL.FLOAT, 3, "bvec3", "vec3<f32>", "float32x3"],
+    [GL.BOOL_VEC4]: [GL.FLOAT, 4, "bvec4", "vec4<f32>", "float32x4"],
+    // TODO - are sizes/components below correct?
     [GL.FLOAT_MAT2]: [GL.FLOAT, 8, "mat2", "mat2x2<f32>"],
     // 4
     [GL.FLOAT_MAT2x3]: [GL.FLOAT, 8, "mat2x3", "mat2x3<f32>"],
@@ -12025,8 +12206,8 @@ ${formattedLog}`)();
     [GL.FLOAT_MAT4]: [GL.FLOAT, 16, "mat4", "mat4x4<f32>"]
     // 16
   };
-  function decodeUniformType(uniformType) {
-    const typeAndSize = COMPOSITE_GL_TYPES[uniformType];
+  function decodeGLUniformType(glUniformType) {
+    const typeAndSize = COMPOSITE_GL_TYPES[glUniformType];
     if (!typeAndSize) {
       throw new Error("uniform");
     }
@@ -12037,68 +12218,27 @@ ${formattedLog}`)();
       glType
     };
   }
-  function decodeAttributeType(attributeType) {
-    const typeAndSize = COMPOSITE_GL_TYPES[attributeType];
+  function decodeGLAttributeType(glAttributeType) {
+    const typeAndSize = COMPOSITE_GL_TYPES[glAttributeType];
     if (!typeAndSize) {
       throw new Error("attribute");
     }
-    const [glType, components, , , format] = typeAndSize;
+    const [, components, , shaderType, vertexFormat] = typeAndSize;
+    const attributeType = shaderType;
     return {
-      format,
-      components,
-      glType
+      attributeType,
+      vertexFormat,
+      components
     };
   }
 
-  // ../webgl/src/adapter/converters/vertex-formats.ts
-  function getVertexFormat(type, components) {
-    const base = getDataFormat(type);
-    switch (components) {
-      case 1:
-        return base;
-      case 2:
-        return `${base}x2`;
-      case 3:
-        return `${base}x3`;
-      case 4:
-        return `${base}x4`;
-      default:
-        throw new Error(String(components));
-    }
-  }
-  function getDataFormat(type) {
-    switch (type) {
-      case GL.INT:
-        return "sint32";
-      case GL.UNSIGNED_INT:
-        return "uint32";
-      case GL.FLOAT:
-        return "float32";
-      default:
-        throw new Error(String(type));
-    }
-  }
-
   // ../webgl/src/adapter/helpers/get-shader-layout.ts
   function getShaderLayout(gl, program) {
     const shaderLayout = {
       attributes: [],
       bindings: []
     };
-    const attributes = readAttributeBindings(gl, program);
-    for (const attribute of attributes) {
-      const size = Math.min(attribute.accessor.size, 4);
-      const format = (
-        // attribute.accessor.format ||
-        getVertexFormat(attribute.accessor.type || GL.FLOAT, size)
-      );
-      shaderLayout.attributes.push({
-        name: attribute.name,
-        location: attribute.location,
-        format,
-        stepMode: attribute.accessor.divisor === 1 ? "instance" : "vertex"
-      });
-    }
+    shaderLayout.attributes = readAttributeDeclarations(gl, program);
     const uniformBlocks = readUniformBlocks(gl, program);
     for (const uniformBlock of uniformBlocks) {
       const uniforms2 = uniformBlock.uniforms.map((uniform) => ({
@@ -12145,58 +12285,7 @@ ${formattedLog}`)();
     }
     return shaderLayout;
   }
-  function mergeShaderLayout(baseLayout, overrideLayout) {
-    const mergedLayout = {
-      ...baseLayout,
-      attributes: baseLayout.attributes.map((attribute) => ({
-        ...attribute
-      }))
-    };
-    for (const attribute of overrideLayout?.attributes || []) {
-      const baseAttribute = mergedLayout.attributes.find((attr) => attr.name === attribute.name);
-      if (!baseAttribute) {
-        log.warn(`shader layout attribute ${attribute.name} not present in shader`);
-      } else {
-        baseAttribute.format = attribute.format || baseAttribute.format;
-        baseAttribute.stepMode = attribute.stepMode || baseAttribute.stepMode;
-      }
-    }
-    return mergedLayout;
-  }
-  function mergeBufferMap(baseLayout, bufferMap) {
-    const mergedLayout = {
-      ...baseLayout,
-      attributes: baseLayout.attributes.map((attribute) => ({
-        ...attribute
-      }))
-    };
-    for (const bufferMapping of bufferMap) {
-      switch (bufferMapping.type) {
-        case "interleave":
-          for (const attributeOverride of bufferMapping.attributes) {
-            overrideShaderLayoutAttribute(mergedLayout, attributeOverride);
-          }
-          break;
-        default:
-          overrideShaderLayoutAttribute(mergedLayout, bufferMapping);
-      }
-    }
-    return mergedLayout;
-  }
-  function overrideShaderLayoutAttribute(layout, attributeOverride) {
-    const attribute = getAttributeFromLayout(layout, attributeOverride.name);
-    if (attribute && attributeOverride.format) {
-      attribute.format = attributeOverride.format;
-    }
-  }
-  function getAttributeFromLayout(shaderLayout, name) {
-    const attribute = shaderLayout.attributes.find((attr) => attr.name === name);
-    if (!attribute) {
-      log.warn(`shader layout attribute "${name}" not present in shader`);
-    }
-    return attribute || null;
-  }
-  function readAttributeBindings(gl, program) {
+  function readAttributeDeclarations(gl, program) {
     const attributes = [];
     const count = gl.getProgramParameter(program, gl.ACTIVE_ATTRIBUTES);
     for (let index = 0; index < count; index++) {
@@ -12205,29 +12294,23 @@ ${formattedLog}`)();
         throw new Error("activeInfo");
       }
       const {
-        name,
-        type: compositeType,
-        size
+        name: name2,
+        type: compositeType
+        /* , size*/
       } = activeInfo;
-      const location = gl.getAttribLocation(program, name);
+      const location = gl.getAttribLocation(program, name2);
       if (location >= 0) {
         const {
-          glType,
-          components
-        } = decodeAttributeType(compositeType);
-        const accessor = {
-          type: glType,
-          size: size * components
-        };
-        if (/instance/i.test(name)) {
-          accessor.divisor = 1;
-        }
-        const attributeInfo = {
+          attributeType
+        } = decodeGLAttributeType(compositeType);
+        const stepMode = /instance/i.test(name2) ? "instance" : "vertex";
+        attributes.push({
+          name: name2,
           location,
-          name,
-          accessor: new Accessor(accessor)
-        };
-        attributes.push(attributeInfo);
+          stepMode,
+          type: attributeType
+          // size - for arrays, size is the number of elements in the array
+        });
       }
     }
     attributes.sort((a, b) => a.location - b.location);
@@ -12246,21 +12329,21 @@ ${formattedLog}`)();
         throw new Error("activeInfo");
       }
       const {
-        name,
+        name: name2,
         type: compositeType,
         size
       } = activeInfo;
       const {
         glType,
         components
-      } = decodeUniformType(compositeType);
+      } = decodeGLUniformType(compositeType);
       const accessor = new Accessor({
         type: glType,
         size: size * components
       });
       const varying = {
         location,
-        name,
+        name: name2,
         accessor
       };
       varyings.push(varying);
@@ -12282,14 +12365,14 @@ ${formattedLog}`)();
         type
       } = activeInfo;
       const {
-        name,
+        name: name2,
         isArray: isArray3
       } = parseUniformName(rawName);
-      let webglLocation = gl.getUniformLocation(program, name);
+      let webglLocation = gl.getUniformLocation(program, name2);
       const uniformInfo = {
         // WebGL locations are uniquely typed but just numbers
         location: webglLocation,
-        name,
+        name: name2,
         size,
         type,
         isArray: isArray3
@@ -12297,7 +12380,7 @@ ${formattedLog}`)();
       uniforms.push(uniformInfo);
       if (uniformInfo.size > 1) {
         for (let j = 0; j < uniformInfo.size; j++) {
-          const elementName = `${name}[${j}]`;
+          const elementName = `${name2}[${j}]`;
           webglLocation = gl.getUniformLocation(program, elementName);
           const arrayElementUniformInfo = {
             ...uniformInfo,
@@ -12340,7 +12423,7 @@ ${formattedLog}`)();
         }
         blockInfo.uniforms.push({
           name: activeInfo.name,
-          format: decodeUniformType(uniformType[i]).format,
+          format: decodeGLUniformType(uniformType[i]).format,
           type: uniformType[i],
           arrayLength: uniformArrayLength[i],
           byteOffset: uniformOffset[i],
@@ -12382,18 +12465,18 @@ ${formattedLog}`)();
       sampleType
     };
   }
-  function parseUniformName(name) {
-    if (name[name.length - 1] !== "]") {
+  function parseUniformName(name2) {
+    if (name2[name2.length - 1] !== "]") {
       return {
-        name,
+        name: name2,
         length: 1,
         isArray: false
       };
     }
     const UNIFORM_NAME_REGEXP = /([^[]*)(\[[0-9]+\])?/;
-    const matches = UNIFORM_NAME_REGEXP.exec(name);
+    const matches = UNIFORM_NAME_REGEXP.exec(name2);
     if (!matches || matches.length < 2) {
-      throw new Error(`Failed to parse GLSL uniform name ${name}`);
+      throw new Error(`Failed to parse GLSL uniform name ${name2}`);
     }
     return {
       name: matches[1],
@@ -12684,8 +12767,8 @@ ${formattedLog}`)();
     /** Handle to underlying WebGL program */
     /** vertex shader */
     /** fragment shader */
-    /** The merged layout */
     /** The layout extracted from shader by WebGL introspection APIs */
+    /** The merged layout */
     /** Buffer map describing buffer interleaving etc */
     /** Uniforms set on this model */
     uniforms = {};
@@ -12722,9 +12805,8 @@ ${formattedLog}`)();
       }
       this._compileAndLink();
       this.introspectedLayout = getShaderLayout(this.device.gl, this.handle);
-      this.layout = mergeShaderLayout(this.introspectedLayout, props.layout);
-      this.bufferMap = props.bufferMap || [];
-      this.layout = mergeBufferMap(this.layout, this.bufferMap);
+      this.shaderLayout = mergeShaderLayout(this.introspectedLayout, props.shaderLayout);
+      this.bufferLayout = props.bufferLayout || [];
       this.vertexArrayObject = new WEBGLVertexArrayObject(this.device);
     }
     destroy() {
@@ -12739,70 +12821,75 @@ ${formattedLog}`)();
       this._indexBuffer = webglBuffer;
     }
     /** @todo needed for portable model */
-    setAttributes(attributes) {
-      for (const [name, buffer] of Object.entries(attributes)) {
-        const webglBuffer = cast(buffer);
-        const attribute = getAttributeLayout(this.layout, name);
-        if (!attribute) {
-          log.warn(`Ignoring buffer supplied for unknown attribute "${name}" in pipeline "${this.id}" (buffer "${buffer.id}")`)();
-          continue;
+    setAttributes(buffers) {
+      const attributeInfos = getAttributeInfosFromLayouts(this.shaderLayout, this.bufferLayout);
+      for (const [bufferName, buffer] of Object.entries(buffers)) {
+        let set = false;
+        for (const attributeInfo of Object.values(attributeInfos)) {
+          if (attributeInfo.bufferName !== bufferName) {
+            continue;
+          }
+          const webglBuffer = cast(buffer);
+          const glType = getGLFromVertexType(attributeInfo.bufferDataType);
+          log.log(1, {
+            setAttribute: attributeInfo.name,
+            toBuffer: bufferName,
+            size: attributeInfo.bufferComponents,
+            type: glType,
+            stride: attributeInfo.byteStride,
+            offset: attributeInfo.byteOffset,
+            normalized: attributeInfo.normalized,
+            // it is the shader attribute declaration, not the vertex memory format,
+            // that determines if the data in the buffer will be treated as integers.
+            // /
+            // Also note that WebGL supports assigning non-normalized integer data to floating point attributes,
+            // but as far as we can tell, WebGPU does not.
+            integer: attributeInfo.integer,
+            divisor: attributeInfo.stepMode === "instance" ? 1 : 0
+          })();
+          this.vertexArrayObject.setBuffer(attributeInfo.location, webglBuffer, {
+            size: attributeInfo.bufferComponents,
+            type: glType,
+            stride: attributeInfo.byteStride,
+            offset: attributeInfo.byteOffset,
+            normalized: attributeInfo.normalized,
+            // it is the shader attribute declaration, not the vertex memory format,
+            // that determines if the data in the buffer will be treated as integers.
+            // /
+            // Also note that WebGL supports assigning non-normalized integer data to floating point attributes,
+            // but as far as we can tell, WebGPU does not.
+            integer: attributeInfo.integer,
+            divisor: attributeInfo.stepMode === "instance" ? 1 : 0
+          });
+          set = true;
+        }
+        if (!set) {
+          log.warn(`setAttributes(): Ignoring (buffer "${buffer.id}" for unknown attribute "${name}" in pipeline "${this.id}"`)();
         }
-        const decoded = decodeVertexFormat(attribute.format);
-        const {
-          type: typeString,
-          components: size,
-          byteLength: stride,
-          normalized
-          /* , integer*/
-        } = decoded;
-        const divisor = attribute.stepMode === "instance" ? 1 : 0;
-        const type = getWebGLDataType(typeString);
-        this.vertexArrayObject.setBuffer(attribute.location, webglBuffer, {
-          size,
-          type,
-          stride,
-          offset: 0,
-          normalized,
-          // it is the shader attribute declaration, not the vertex memory format, 
-          // that determines if the data in the buffer will be treated as integers.
-          // /
-          // Also note that WebGL supports assigning non-normalized integer data to floating point attributes,
-          // but as far as we can tell, WebGPU does not.
-          integer: false,
-          divisor
-        });
       }
     }
     /**
      * Constant attributes are only supported in WebGL, not in WebGPU
      * Any attribute that is disabled in the current vertex array object
      * is read from the context's global constant value for that attribute location.
-     * @param attributes 
+     * @param attributes
      */
     setConstantAttributes(attributes) {
-      for (const [name, value] of Object.entries(attributes)) {
-        const attribute = getAttributeLayout(this.layout, name);
-        if (!attribute) {
-          log.warn(`Ignoring constant value supplied for unknown attribute "${name}" in pipeline "${this.id}"`)();
-          continue;
-        }
-        this.vertexArrayObject.setConstant(attribute.location, value);
-      }
       Object.assign(this.constantAttributes, attributes);
     }
-    /** 
+    /**
      * Bindings include: textures, samplers and uniform buffers
-     * @todo needed for portable model 
+     * @todo needed for portable model
      */
     setBindings(bindings) {
-      for (const [name, value] of Object.entries(bindings)) {
-        const binding = this.layout.bindings.find((binding2) => binding2.name === name);
+      for (const [name2, value] of Object.entries(bindings)) {
+        const binding = this.shaderLayout.bindings.find((binding2) => binding2.name === name2);
         if (!binding) {
-          log.warn(`Unknown binding ${name} in render pipeline ${this.id}`)();
+          log.warn(`Unknown binding ${name2} in render pipeline ${this.id}`)();
           continue;
         }
         if (!value) {
-          log.warn(`Unsetting binding ${name} in render pipeline ${this.id}`)();
+          log.warn(`Unsetting binding ${name2} in render pipeline ${this.id}`)();
         }
         switch (binding.type) {
           case "uniform":
@@ -12816,12 +12903,12 @@ ${formattedLog}`)();
             }
             break;
           case "sampler":
-            log.warn(`Ignoring sampler ${name}`)();
+            log.warn(`Ignoring sampler ${name2}`)();
             break;
           default:
             throw new Error(binding.type);
         }
-        this.bindings[name] = value;
+        this.bindings[name2] = value;
       }
     }
     setUniforms(uniforms) {
@@ -12842,7 +12929,7 @@ ${formattedLog}`)();
         // firstInstance,
         // baseVertex
       } = options;
-      const drawMode = getDrawMode(this.props.topology);
+      const drawMode = getGLDrawMode(this.props.topology);
       const isIndexed = Boolean(this._indexBuffer);
       const indexType = this._indexBuffer?.glIndexType;
       const isInstanced = Number(options.instanceCount) > 0;
@@ -12928,7 +13015,24 @@ ${formattedLog}`)();
       }
       return texturesRenderable;
     }
-    /** Apply any bindings */
+    /**
+     * Constant attributes need to be reset before every draw call
+     * Any attribute that is disabled in the current vertex array object
+     * is read from the context's global constant value for that attribute location.
+     * @note Constant attributes are only supported in WebGL, not in WebGPU
+     */
+    _applyConstantAttributes() {
+      const attributeInfos = getAttributeInfosFromLayouts(this.shaderLayout, this.bufferLayout);
+      for (const [name2, value] of Object.entries(this.constantAttributes)) {
+        const attributeInfo = attributeInfos[name2];
+        if (!attributeInfo) {
+          log.warn(`Ignoring constant value supplied for unknown attribute "${name2}" in pipeline "${this.id}"`)();
+          continue;
+        }
+        this.vertexArrayObject.setConstant(attributeInfo.location, value);
+      }
+    }
+    /** Apply any bindings (before each draw call) */
     _applyBindings() {
       this.device.gl.useProgram(this.handle);
       const {
@@ -12939,7 +13043,7 @@ ${formattedLog}`)();
       }
       let textureUnit = 0;
       let uniformBufferIndex = 0;
-      for (const binding of this.layout.bindings) {
+      for (const binding of this.shaderLayout.bindings) {
         const value = this.bindings[binding.name];
         if (!value) {
           throw new Error(`No value for binding ${binding.name} in ${this.id}`);
@@ -12947,11 +13051,11 @@ ${formattedLog}`)();
         switch (binding.type) {
           case "uniform":
             const {
-              name
+              name: name2
             } = binding;
-            const location = gl2.getUniformBlockIndex(this.handle, name);
+            const location = gl2.getUniformBlockIndex(this.handle, name2);
             if (location === GL.INVALID_INDEX) {
-              throw new Error(`Invalid uniform block name ${name}`);
+              throw new Error(`Invalid uniform block name ${name2}`);
             }
             gl2.uniformBlockBinding(this.handle, uniformBufferIndex, location);
             if (value instanceof WEBGLBuffer) {
@@ -12978,37 +13082,26 @@ ${formattedLog}`)();
         }
       }
     }
+    /**
+     * Due to program sharing, uniforms need to be reset before every draw call
+     * (though caching will avoid redundant WebGL calls)
+     */
     _applyUniforms() {
-      for (const uniformLayout of this.layout.uniforms || []) {
+      for (const uniformLayout of this.shaderLayout.uniforms || []) {
         const {
-          name,
+          name: name2,
           location,
           type,
           textureUnit
         } = uniformLayout;
-        const value = this.uniforms[name] ?? textureUnit;
+        const value = this.uniforms[name2] ?? textureUnit;
         if (value !== void 0) {
           setUniform(this.device.gl, location, type, value);
         }
       }
     }
-    /**
-     * Constant attributes are only supported in WebGL, not in WebGPU
-     * Any attribute that is disabled in the current vertex array object
-     * is read from the context's global constant value for that attribute location.
-     */
-    _applyConstantAttributes() {
-      for (const [name, value] of Object.entries(this.constantAttributes)) {
-        const attribute = getAttributeLayout(this.layout, name);
-        if (!attribute) {
-          log.warn(`Ignoring constant value supplied for unknown attribute "${name}" in pipeline "${this.id}"`)();
-          continue;
-        }
-        this.vertexArrayObject.setConstant(attribute.location, value);
-      }
-    }
   };
-  function getDrawMode(topology) {
+  function getGLDrawMode(topology) {
     switch (topology) {
       case "point-list":
         return GL.POINTS;
@@ -13048,9 +13141,6 @@ ${formattedLog}`)();
         throw new Error(topology);
     }
   }
-  function getAttributeLayout(layout, name) {
-    return layout.attributes.find((binding) => binding.name === name) || null;
-  }
 
   // ../webgl/src/adapter/resources/webgl-command-buffer.ts
   function cast2(value) {
@@ -13251,7 +13341,7 @@ ${formattedLog}`)();
   // ../webgl/src/adapter/resources/webgl-command-encoder.ts
   var WEBGLCommandEncoder = class extends CommandEncoder {
     constructor(device, props) {
-      super(props);
+      super(device, props);
       this.device = device;
       this.commandBuffer = new WEBGLCommandBuffer(device);
     }