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

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,20 +1177,12 @@ 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";
     }
+    /** The usage with which this buffer was created */
+    /** For index buffers, whether indices are 16 or 32 bit */
     /** Length of buffer in bytes */
     constructor(device, props) {
       const deducedProps = {
@@ -1204,7 +1195,9 @@ var __exports__ = (() => {
           deducedProps.indexType = "uint16";
         }
       }
-      super(device, deducedProps, DEFAULT_BUFFER_PROPS);
+      super(device, deducedProps, _Buffer.defaultProps);
+      this.usage = props.usage || 0;
+      this.indexType = deducedProps.indexType;
     }
     write(data, byteOffset) {
       throw new Error("not implemented");
@@ -1262,6 +1255,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 +1314,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 +1726,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 +1736,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 +1745,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 +1772,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 +1816,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 +1830,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 +1996,40 @@ 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 
+     * @deprecated Only supported on WebGL devices.
+     * @note textures, samplers and uniform buffers should be set via `setBindings()`, these are not considered uniforms.
+     * @note In WebGL uniforms have a performance penalty, they are reset before each call to enable pipeline sharing. 
+     */
+    /** Draw call */
+  };
+  var RenderPipeline = _RenderPipeline;
+  __publicField(RenderPipeline, "defaultProps", {
+    ...Resource.defaultProps,
     vs: null,
     vsEntryPoint: "",
     // main
@@ -2004,36 +2038,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 +2108,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 +2134,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 +2161,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 +2205,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 +2230,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 +2336,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 +2438,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;
@@ -2480,6 +2656,47 @@ var __exports__ = (() => {
     return options.target;
   }
 
+  // ../core/src/lib/utils/deep-equal.ts
+  function deepEqual(a, b, depth) {
+    if (a === b) {
+      return true;
+    }
+    if (!depth || !a || !b) {
+      return false;
+    }
+    if (Array.isArray(a)) {
+      if (!Array.isArray(b) || a.length !== b.length) {
+        return false;
+      }
+      for (let i = 0; i < a.length; i++) {
+        if (!deepEqual(a[i], b[i], depth - 1)) {
+          return false;
+        }
+      }
+      return true;
+    }
+    if (Array.isArray(b)) {
+      return false;
+    }
+    if (typeof a === "object" && typeof b === "object") {
+      const aKeys = Object.keys(a);
+      const bKeys = Object.keys(b);
+      if (aKeys.length !== bKeys.length) {
+        return false;
+      }
+      for (const key of aKeys) {
+        if (!b.hasOwnProperty(key)) {
+          return false;
+        }
+        if (!deepEqual(a[key], b[key], depth - 1)) {
+          return false;
+        }
+      }
+      return true;
+    }
+    return false;
+  }
+
   // ../core/src/lib/request-animation-frame.ts
   function requestAnimationFrame(callback) {
     return typeof window !== "undefined" && window.requestAnimationFrame ? window.requestAnimationFrame(callback) : setTimeout(callback, 1e3 / 60);
@@ -2896,46 +3113,6 @@ var __exports__ = (() => {
     return animationLoop;
   }
 
-  // src/model/model-utils.ts
-  var GLTF_TO_LUMA_ATTRIBUTE_MAP = {
-    POSITION: "positions",
-    NORMAL: "normals",
-    COLOR_0: "colors",
-    TEXCOORD_0: "texCoords",
-    TEXCOORD_1: "texCoords1",
-    TEXCOORD_2: "texCoords2"
-  };
-  function getIndexBufferFromGeometry(device, geometry) {
-    if (!geometry.indices) {
-      return void 0;
-    }
-    const data = geometry.indices.value || geometry.indices;
-    assert2(data instanceof Uint16Array || data instanceof Uint32Array, 'attribute array for "indices" must be of integer type');
-    return device.createBuffer({
-      usage: Buffer2.INDEX,
-      data
-    });
-  }
-  function getAttributeBuffersFromGeometry(device, geometry) {
-    const buffers = {};
-    for (const [name, attribute] of Object.entries(geometry.attributes)) {
-      const remappedName = mapAttributeName(name);
-      if (attribute?.constant) {
-        throw new Error("constant attributes not supported");
-      } else {
-        const typedArray = attribute?.value;
-        buffers[remappedName] = device.createBuffer({
-          data: typedArray,
-          id: `${remappedName}-buffer`
-        });
-      }
-    }
-    return buffers;
-  }
-  function mapAttributeName(name) {
-    return GLTF_TO_LUMA_ATTRIBUTE_MAP[name] || name;
-  }
-
   // ../shadertools/src/lib/glsl-utils/highlight.ts
   var glsl2 = (x) => `${x}`;
 
@@ -2963,8 +3140,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 +3222,7 @@ var __exports__ = (() => {
     }
     constructor(props) {
       const {
-        name,
+        name: name2,
         vs,
         fs,
         dependencies = [],
@@ -3055,8 +3232,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;
@@ -3158,7 +3335,7 @@ ${moduleSource}// END MODULE_${this.name}
     return result;
   }
 
-  // ../shadertools/src/lib/shader-assembler/resolve-modules.ts
+  // ../shadertools/src/lib/shader-assembly/resolve-modules.ts
   function resolveModules(modules) {
     const instances = ShaderModuleInstance.instantiateModules(modules);
     return getShaderDependencies(instances);
@@ -3172,7 +3349,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 {
@@ -3202,7 +3379,7 @@ ${moduleSource}// END MODULE_${this.name}
     }
   }
 
-  // ../shadertools/src/lib/shader-assembler/platform-defines.ts
+  // ../shadertools/src/lib/shader-assembly/platform-defines.ts
   function getPlatformShaderDefines(platformInfo) {
     switch (platformInfo?.gpu.toLowerCase()) {
       case "apple":
@@ -3337,7 +3514,7 @@ ${moduleSource}// END MODULE_${this.name}
 #endif
 `;
 
-  // ../shadertools/src/lib/shader-assembler/inject-shader.ts
+  // ../shadertools/src/lib/shader-assembly/inject-shader.ts
   var MODULE_INJECTORS = {
     vs: MODULE_INJECTORS_VS,
     fs: MODULE_INJECTORS_FS
@@ -3479,7 +3656,7 @@ ${match}`).replace(new RegExp(`\\b${ES100_FRAGMENT_OUTPUT_NAME}\\b`, "g"), outpu
     return new RegExp(`\\b${qualifier}[ \\t]+(\\w+[ \\t]+\\w+(\\[\\w+\\])?;)`, "g");
   }
 
-  // ../shadertools/src/lib/shader-assembler/assemble-shaders.ts
+  // ../shadertools/src/lib/shader-assembly/assemble-shaders.ts
   var INJECT_SHADER_DECLARATIONS = `
 
 ${DECLARATION_INJECT_MARKER}
@@ -3571,9 +3748,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 +3772,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,17 +3877,102 @@ ${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
       });
     });
     return result;
   }
 
+  // ../shadertools/src/lib/shader-assembler.ts
+  var ShaderAssembler = class {
+    /** Default ShaderAssembler instance */
+    /** Hook functions */
+    _hookFunctions = [];
+    /** Shader modules */
+    _defaultModules = [];
+    /**
+     * A default shader assembler instance - the natural place to register default modules and hooks
+     * @returns 
+     */
+    static getDefaultShaderAssembler() {
+      ShaderAssembler.defaultShaderAssembler = ShaderAssembler.defaultShaderAssembler || new ShaderAssembler();
+      return ShaderAssembler.defaultShaderAssembler;
+    }
+    /** 
+     * Add a default module that does not have to be provided with every call to assembleShaders() 
+     */
+    addDefaultModule(module) {
+      if (!this._defaultModules.find((m) => m.name === (typeof module === "string" ? module : module.name))) {
+        this._defaultModules.push(module);
+      }
+    }
+    /** 
+     * Remove a default module
+     */
+    removeDefaultModule(module) {
+      const moduleName = typeof module === "string" ? module : module.name;
+      this._defaultModules = this._defaultModules.filter((m) => m.name !== moduleName);
+    }
+    /**
+     * Register a shader hook
+     * @param hook 
+     * @param opts 
+     */
+    addShaderHook(hook, opts) {
+      if (opts) {
+        hook = Object.assign(opts, {
+          hook
+        });
+      }
+      this._hookFunctions.push(hook);
+    }
+    /**
+     * Assemble a pair of shaders into a single shader program
+     * @param platformInfo 
+     * @param props 
+     * @returns 
+     */
+    assembleShaders(platformInfo, props) {
+      const modules = this._getModuleList(props.modules);
+      const hookFunctions = this._hookFunctions;
+      const assembled = assembleShaders(platformInfo, {
+        ...props,
+        modules,
+        hookFunctions
+      });
+      return assembled;
+    }
+    /** 
+     * Dedupe and combine with default modules 
+     */
+    _getModuleList(appModules = []) {
+      const modules = new Array(this._defaultModules.length + appModules.length);
+      const seen = {};
+      let count = 0;
+      for (let i = 0, len = this._defaultModules.length; i < len; ++i) {
+        const module = this._defaultModules[i];
+        const name2 = module.name;
+        modules[count++] = module;
+        seen[name2] = true;
+      }
+      for (let i = 0, len = appModules.length; i < len; ++i) {
+        const module = appModules[i];
+        const name2 = module.name;
+        if (!seen[name2]) {
+          modules[count++] = module;
+          seen[name2] = true;
+        }
+      }
+      modules.length = count;
+      return modules;
+    }
+  };
+
   // ../shadertools/src/lib/glsl-utils/get-shader-info.ts
   function getShaderInfo(source, defaultName) {
     return {
@@ -5682,87 +5944,151 @@ void main() {
     return result;
   }
 
-  // src/lib/pipeline-factory.ts
-  var DEFAULT_RENDER_PIPELINE_OPTIONS = {
-    vs: "",
-    fs: "",
-    modules: [],
-    defines: {},
-    inject: {},
-    transpileToGLSL100: false,
-    layout: null,
-    varyings: [],
-    bufferMode: 35981,
-    // // varyings/bufferMode for xform feedback, 0x8c8d: SEPARATE_ATTRIBS
-    topology: "triangle-list",
-    parameters: {}
+  // src/geometry/gpu-geometry.ts
+  var GPUGeometry = class {
+    userData = {};
+    /** Determines how vertices are read from the 'vertex' attributes */
+    bufferLayout = [];
+    constructor(props) {
+      this.id = props.id || uid("geometry");
+      this.topology = props.topology;
+      this.indices = props.indices || null;
+      this.attributes = props.attributes;
+      this.vertexCount = props.vertexCount || this._calculateVertexCount(this.attributes.positions);
+      this.bufferLayout = props.bufferLayout || [];
+      if (!this.bufferLayout.find((layout) => layout.name === "positions")) {
+        this.bufferLayout.push({
+          name: "positions",
+          format: "float32x3"
+        });
+      }
+      if (!this.bufferLayout.find((layout) => layout.name === "normals")) {
+        this.bufferLayout.push({
+          name: "normals",
+          format: "float32x3"
+        });
+      }
+      if (!this.bufferLayout.find((layout) => layout.name === "texCoords")) {
+        this.bufferLayout.push({
+          name: "texCoords",
+          format: "float32x2"
+        });
+      }
+      if (!this.bufferLayout.find((layout) => layout.name === "colors")) {
+        this.bufferLayout.push({
+          name: "colors",
+          format: "float32x3"
+        });
+      }
+      if (this.indices) {
+        assert2(this.indices.usage === Buffer2.INDEX);
+      }
+    }
+    destroy() {
+      this.indices.destroy();
+      this.attributes.positions.destroy();
+      this.attributes.normals.destroy();
+      this.attributes.texCoords.destroy();
+      this.attributes.colors?.destroy();
+    }
+    getVertexCount() {
+      return this.vertexCount;
+    }
+    getAttributes() {
+      return this.attributes;
+    }
+    getIndexes() {
+      return this.indices;
+    }
+    _calculateVertexCount(positions) {
+      const vertexCount = positions.byteLength / 12;
+      return vertexCount;
+    }
   };
-  var PipelineFactory = class {
-    stateHash = 0;
-    // Used to change hashing if hooks are modified
+  function makeGPUGeometry(device, geometry) {
+    if (geometry instanceof GPUGeometry) {
+      return geometry;
+    }
+    const indices = getIndexBufferFromGeometry(device, geometry);
+    const attributes = getAttributeBuffersFromGeometry(device, geometry);
+    return new GPUGeometry({
+      topology: geometry.topology,
+      vertexCount: geometry.vertexCount,
+      indices,
+      attributes
+    });
+  }
+  function getIndexBufferFromGeometry(device, geometry) {
+    if (!geometry.indices) {
+      return void 0;
+    }
+    const data = geometry.indices.value || geometry.indices;
+    assert2(data instanceof Uint16Array || data instanceof Uint32Array, 'attribute array for "indices" must be of integer type');
+    return device.createBuffer({
+      usage: Buffer2.INDEX,
+      data
+    });
+  }
+  function getAttributeBuffersFromGeometry(device, geometry) {
+    const positions = geometry.attributes.positions || geometry.attributes.POSITION;
+    const normals = geometry.attributes.normals || geometry.attributes.NORMAL;
+    const texCoords = geometry.attributes.texCoords || geometry.attributes.TEXCOORD_0;
+    const buffers = {
+      positions: device.createBuffer({
+        data: positions.value,
+        id: "positions-buffer"
+      }),
+      normals: device.createBuffer({
+        data: normals.value,
+        id: "normals-buffer"
+      }),
+      texCoords: device.createBuffer({
+        data: texCoords.value,
+        id: "texCoords-buffer"
+      })
+    };
+    return buffers;
+  }
+
+  // src/lib/pipeline-factory.ts
+  var _PipelineFactory = class {
     _hashCounter = 0;
     _hashes = {};
     _useCounts = {};
     _pipelineCache = {};
-    _getUniforms = {};
-    _hookFunctions = [];
-    _defaultModules = [];
-    // private readonly _registeredModules = {}; // TODO: Remove? This isn't used anywhere in luma.gl
     static getDefaultPipelineFactory(device) {
-      device.defaultPipelineFactory = device.defaultPipelineFactory || new PipelineFactory(device);
-      return device.defaultPipelineFactory;
+      device._lumaData.defaultPipelineFactory = device._lumaData.defaultPipelineFactory || new _PipelineFactory(device);
+      return device._lumaData.defaultPipelineFactory;
     }
     constructor(device) {
       this.device = device;
     }
-    addDefaultModule(module) {
-      if (!this._defaultModules.find((m) => m.name === (typeof module === "string" ? module : module.name))) {
-        this._defaultModules.push(module);
-      }
-      this.stateHash++;
-    }
-    removeDefaultModule(module) {
-      const moduleName = typeof module === "string" ? module : module.name;
-      this._defaultModules = this._defaultModules.filter((m) => m.name !== moduleName);
-      this.stateHash++;
-    }
-    addShaderHook(hook, opts) {
-      if (opts) {
-        hook = Object.assign(opts, {
-          hook
-        });
-      }
-      this._hookFunctions.push(hook);
-      this.stateHash++;
-    }
     createRenderPipeline(options) {
       const props = {
-        ...DEFAULT_RENDER_PIPELINE_OPTIONS,
+        ..._PipelineFactory.defaultProps,
         ...options
       };
-      const modules = this._getModuleList(props.modules);
       const hash = this._hashRenderPipeline({
-        ...props,
-        modules
+        ...props
       });
       if (!this._pipelineCache[hash]) {
-        const {
-          pipeline,
-          getUniforms
-        } = this._createRenderPipeline({
+        const pipeline = this.device.createRenderPipeline({
           ...props,
-          modules
+          vs: this.device.createShader({
+            stage: "vertex",
+            source: props.vs
+          }),
+          fs: props.fs ? this.device.createShader({
+            stage: "fragment",
+            source: props.fs
+          }) : null
         });
         pipeline.hash = hash;
         this._pipelineCache[hash] = pipeline;
-        this._getUniforms[hash] = getUniforms || ((x) => ({}));
         this._useCounts[hash] = 0;
       }
       this._useCounts[hash]++;
-      return {
-        pipeline: this._pipelineCache[hash],
-        getUniforms: this._getUniforms[hash]
-      };
+      return this._pipelineCache[hash];
     }
     release(pipeline) {
       const hash = pipeline.hash;
@@ -5770,70 +6096,35 @@ void main() {
       if (this._useCounts[hash] === 0) {
         this._pipelineCache[hash].destroy();
         delete this._pipelineCache[hash];
-        delete this._getUniforms[hash];
         delete this._useCounts[hash];
       }
     }
-    getUniforms(pipeline) {
-      return this._getUniforms[pipeline.hash] || null;
-    }
     // PRIVATE
     _createRenderPipeline(props) {
-      const platformInfo = {
-        gpu: this.device.info.gpu,
-        features: this.device.features
-      };
       if (!props.fs) {
         throw new Error("fs");
       }
-      const assembled = assembleShaders(platformInfo, {
-        ...props,
-        fs: props.fs,
-        hookFunctions: this._hookFunctions
-      });
       const pipeline = this.device.createRenderPipeline({
         ...props,
         vs: this.device.createShader({
           stage: "vertex",
-          source: assembled.vs
+          source: props.vs
         }),
-        fs: assembled.fs ? this.device.createShader({
+        fs: props.fs ? this.device.createShader({
           stage: "fragment",
-          source: assembled.fs
+          source: props.fs
         }) : null
       });
-      return {
-        pipeline,
-        getUniforms: assembled.getUniforms
-      };
+      return pipeline;
     }
     /** Calculate a hash based on all the inputs for a render pipeline */
     _hashRenderPipeline(props) {
-      const {
-        modules = [],
-        varyings = [],
-        defines = {},
-        inject = {},
-        parameters = {}
-      } = props;
       const vsHash = this._getHash(props.vs);
       const fsHash = props.fs ? this._getHash(props.fs) : 0;
-      const moduleHashes = modules.map((m) => this._getHash(typeof m === "string" ? m : m.name)).sort();
-      const varyingHashes = varyings.map((v) => this._getHash(v));
-      const defineKeys = Object.keys(defines).sort();
-      const injectKeys = Object.keys(inject).sort();
-      const defineHashes = [];
-      const injectHashes = [];
-      for (const key of defineKeys) {
-        defineHashes.push(this._getHash(key));
-        defineHashes.push(this._getHash(String(defines[key])));
-      }
-      for (const key of injectKeys) {
-        injectHashes.push(this._getHash(key));
-        injectHashes.push(this._getHash(inject[key]));
-      }
-      const parameterHash = JSON.stringify(parameters);
-      return `${vsHash}/${fsHash}D${defineHashes.join("/")}M${moduleHashes.join("/")}I${injectHashes.join("/")}V${varyingHashes.join("/")}H${this.stateHash}B${props.bufferMode}${props.transpileToGLSL100 ? "T" : ""}P${parameterHash}`;
+      const parameterHash = this._getHash(JSON.stringify(props.parameters));
+      const bufferLayoutHash = this._getHash(JSON.stringify(props.bufferLayout));
+      const varyingHash = "-";
+      return `${vsHash}/${fsHash}V${varyingHash}T${props.topology}P${parameterHash}BL${bufferLayoutHash}}`;
     }
     _getHash(key) {
       if (this._hashes[key] === void 0) {
@@ -5841,182 +6132,314 @@ void main() {
       }
       return this._hashes[key];
     }
-    // Dedupe and combine with default modules
-    _getModuleList(appModules = []) {
-      const modules = new Array(this._defaultModules.length + appModules.length);
-      const seen = {};
-      let count = 0;
-      for (let i = 0, len = this._defaultModules.length; i < len; ++i) {
-        const module = this._defaultModules[i];
-        const name = module.name;
-        modules[count++] = module;
-        seen[name] = true;
-      }
-      for (let i = 0, len = appModules.length; i < len; ++i) {
-        const module = appModules[i];
-        const name = module.name;
-        if (!seen[name]) {
-          modules[count++] = module;
-          seen[name] = true;
+  };
+  var PipelineFactory = _PipelineFactory;
+  __publicField(PipelineFactory, "defaultProps", {
+    ...RenderPipeline.defaultProps,
+    vs: void 0,
+    fs: void 0
+  });
+
+  // src/model/model-shaders.ts
+  function buildShaders(device, props) {
+    if (!props.vs) {
+      throw new Error("no vertex shader");
+    }
+    const vs = getShaderSource(device, props.vs);
+    let fs;
+    if (props.fs) {
+      fs = getShaderSource(device, props.fs);
+    }
+    const platformInfo = {
+      type: device.info.type,
+      gpu: device.info.gpu,
+      features: device.features
+    };
+    return props.shaderAssembler.assembleShaders(platformInfo, {
+      ...props,
+      fs,
+      vs
+    });
+  }
+  function getShaderSource(device, shader) {
+    if (typeof shader === "string") {
+      return shader;
+    }
+    switch (device.info.type) {
+      case "webgpu":
+        if (shader?.wgsl) {
+          return shader.wgsl;
         }
-      }
-      modules.length = count;
-      return modules;
+        throw new Error("WebGPU does not support GLSL shaders");
+      default:
+        if (shader?.glsl) {
+          return shader.glsl;
+        }
+        throw new Error("WebGL does not support WGSL shaders");
     }
-  };
+  }
 
   // src/model/model.ts
-  var DEFAULT_MODEL_PROPS = {
-    ...RenderPipeline._DEFAULT_PROPS,
-    vs: null,
-    fs: null,
-    id: "unnamed",
-    handle: void 0,
-    userData: {},
-    defines: {},
-    modules: [],
-    moduleSettings: {},
-    geometry: null,
-    pipelineFactory: void 0
-  };
-  var Model = class {
-    fs = null;
-    /** The underlying GPU "program". @note May be recreated if parameters change */
+  var _Model = class {
     userData = {};
-    // readonly props: Required<ModelProps>;
+    // Fixed properties (change can trigger pipeline rebuild)
+    /** The render pipeline GPU parameters, depth testing etc */
+    /** The primitive topology */
+    /** Buffer layout */
+    // Dynamic properties
     /** Vertex count */
     /** instance count */
     instanceCount = 0;
+    /** Index buffer */
+    indices = null;
     /** Buffer-valued attributes */
     bufferAttributes = {};
     /** Constant-valued attributes */
     constantAttributes = {};
     /** Bindings (textures, samplers, uniform buffers) */
     bindings = {};
-    /** Uniforms */
+    /** Sets uniforms @deprecated Use uniform buffers and setBindings() for portability*/
     uniforms = {};
+    /** The underlying GPU "program". @note May be recreated if parameters change */
+    _pipelineNeedsUpdate = "newly created";
     constructor(device, props) {
-      props = {
-        ...DEFAULT_MODEL_PROPS,
+      this.props = {
+        ..._Model.defaultProps,
         ...props
       };
-      this.id = props.id;
+      props = this.props;
+      this.id = props.id || uid("model");
       this.device = device;
       Object.assign(this.userData, props.userData);
-      if (!props.vs) {
-        throw new Error("no vertex shader");
+      const {
+        vs,
+        fs,
+        getUniforms
+      } = buildShaders(device, this.props);
+      this.vs = vs;
+      this.fs = fs;
+      this._getModuleUniforms = getUniforms;
+      this.vertexCount = this.props.vertexCount;
+      this.instanceCount = this.props.instanceCount;
+      this.topology = this.props.topology;
+      this.bufferLayout = this.props.bufferLayout;
+      this.parameters = this.props.parameters;
+      const gpuGeometry = props.geometry && makeGPUGeometry(device, props.geometry);
+      if (gpuGeometry) {
+        this.setGeometry(gpuGeometry);
+      }
+      this.pipelineFactory = props.pipelineFactory || PipelineFactory.getDefaultPipelineFactory(this.device);
+      this.pipeline = this._updatePipeline();
+      if (props.vertexCount) {
+        this.setVertexCount(props.vertexCount);
+      }
+      if (props.instanceCount) {
+        this.setInstanceCount(props.instanceCount);
+      }
+      if (props.indices) {
+        this.setIndexBuffer(props.indices);
       }
-      this.vs = getShaderSource(this.device, props.vs);
-      if (props.fs) {
-        this.fs = getShaderSource(this.device, props.fs);
+      if (props.attributes) {
+        this.setAttributes(props.attributes);
       }
-      this.vertexCount = props.vertexCount;
-      this.instanceCount = props.instanceCount;
-      this.topology = props.topology;
-      if (props.geometry) {
-        this.vertexCount = props.geometry.vertexCount;
-        this.topology = props.geometry.topology || "triangle-list";
+      if (props.bindings) {
+        this.setBindings(props.bindings);
       }
-      this.pipelineFactory = props.pipelineFactory || PipelineFactory.getDefaultPipelineFactory(this.device);
-      const {
-        pipeline,
-        getUniforms
-      } = this.pipelineFactory.createRenderPipeline({
-        ...props,
-        vs: this.vs,
-        fs: this.fs,
-        topology: this.topology,
-        defines: props.defines,
-        parameters: props.parameters,
-        layout: props.layout
-      });
-      this.pipeline = pipeline;
-      this._getModuleUniforms = getUniforms;
-      if (props.geometry) {
-        this._setGeometry(props.geometry);
+      if (props.uniforms) {
+        this.setUniforms(props.uniforms);
+      }
+      if (props.moduleSettings) {
+        this.updateModuleSettings(props.moduleSettings);
       }
       this.setUniforms(this._getModuleUniforms());
-      this.setProps(props);
+      Object.seal(this);
     }
     destroy() {
       this.pipelineFactory.release(this.pipeline);
     }
+    // Draw call
     draw(renderPass) {
+      this.pipeline = this._updatePipeline();
+      this.pipeline.setIndexBuffer(this.indices);
+      this.pipeline.setAttributes(this.bufferAttributes);
+      this.pipeline.setConstantAttributes(this.constantAttributes);
+      this.pipeline.setBindings(this.bindings);
+      this.pipeline.setUniforms(this.uniforms);
       this.pipeline.draw({
         renderPass,
         vertexCount: this.vertexCount,
         instanceCount: this.instanceCount
       });
     }
-    setProps(props) {
-      if (props.indices) {
-        this.setIndexBuffer(props.indices);
-      }
-      if (props.attributes) {
-        this.setAttributes(props.attributes);
-      }
-      if (props.bindings) {
-        this.setBindings(props.bindings);
+    // Update fixed fields (can trigger pipeline rebuild)
+    /** 
+     * Updates the optional geometry
+     * @note Can trigger a pipeline rebuild / pipeline cache fetch on WebGPU
+     */
+    setGeometry(geometry) {
+      this.setTopology(geometry.topology || "triangle-list");
+      this.bufferLayout = mergeBufferLayouts(this.bufferLayout, geometry.bufferLayout);
+      this.vertexCount = geometry.vertexCount;
+      this.setAttributes(geometry.attributes);
+      this.setIndexBuffer(geometry.indices);
+    }
+    /** 
+     * Updates the primitive topology ('triangle-list', 'triangle-strip' etc). 
+     * @note Triggers a pipeline rebuild / pipeline cache fetch on WebGPU
+     */
+    setTopology(topology) {
+      if (topology !== this.topology) {
+        this.topology = topology;
+        if (this.device.info.type === "webgpu") {
+          this._setPipelineNeedsUpdate("topology");
+        }
       }
-      if (props.uniforms) {
-        this.setUniforms(props.uniforms);
+    }
+    /** 
+     * Updates the buffer layout. 
+     * @note Triggers a pipeline rebuild / pipeline cache fetch on WebGPU
+     */
+    setBufferLayout(bufferLayout) {
+      if (bufferLayout !== this.bufferLayout) {
+        this.bufferLayout = bufferLayout;
+        if (this.device.info.type === "webgpu") {
+          this._setPipelineNeedsUpdate("bufferLayout");
+        }
       }
-      if (props.moduleSettings) {
-        this.updateModuleSettings(props.moduleSettings);
+    }
+    /**
+     * Set GPU parameters.
+     * @note Can trigger a pipeline rebuild / pipeline cache fetch.
+     * @param parameters
+     */
+    setParameters(parameters) {
+      if (!deepEqual(parameters, this.parameters, 2)) {
+        this.parameters = parameters;
+        if (this.device.info.type === "webgpu") {
+          this._setPipelineNeedsUpdate("parameters");
+        }
       }
     }
-    updateModuleSettings(props) {
+    // Update dynamic fields
+    /**
+     * Updates the vertex count (used in draw calls)
+     * @note Any attributes with stepMode=vertex need to be at least this big
+     */
+    setVertexCount(vertexCount) {
+      this.vertexCount = vertexCount;
+    }
+    /**
+     * Updates the instance count (used in draw calls)
+     * @note Any attributes with stepMode=instance need to be at least this big
+     */
+    setInstanceCount(instanceCount) {
+      this.instanceCount = instanceCount;
+    }
+    /**
+     * Updates shader module settings (which results in uniforms being set)
+     */
+    setShaderModuleProps(props) {
       const uniforms = this._getModuleUniforms(props);
-      this.setUniforms(uniforms);
+      Object.assign(this.uniforms, uniforms);
+    }
+    /**
+     * @deprecated Updates shader module settings (which results in uniforms being set)
+     */
+    updateModuleSettings(props) {
+      this.setShaderModuleProps(props);
     }
+    /**
+     * Sets the index buffer
+     * @todo - how to unset it if we change geometry?
+     */
     setIndexBuffer(indices) {
-      this.pipeline.setIndexBuffer(indices);
+      this.indices = indices;
     }
+    /**
+     * Sets attributes (buffers)
+     * @note Overrides any attributes previously set with the same name
+     */
     setAttributes(bufferAttributes) {
       if (bufferAttributes.indices) {
         log.warn(`Model:${this.id} setAttributes() - indices should be set using setIndexBuffer()`);
       }
-      this.pipeline.setAttributes(bufferAttributes);
       Object.assign(this.bufferAttributes, bufferAttributes);
     }
+    /**
+     * Sets constant attributes
+     * @note Overrides any attributes previously set with the same name
+     * @param constantAttributes
+     */
     setConstantAttributes(constantAttributes) {
-      this.pipeline.setConstantAttributes(constantAttributes);
       Object.assign(this.constantAttributes, constantAttributes);
     }
-    /** Set the bindings */
+    /**
+     * Sets bindings (textures, samplers, uniform buffers)
+     */
     setBindings(bindings) {
-      this.pipeline.setBindings(bindings);
       Object.assign(this.bindings, bindings);
     }
+    /**
+     * Sets individual uniforms
+     * @deprecated WebGL only, use uniform buffers for portability
+     * @param uniforms
+     * @returns self for chaining
+     */
     setUniforms(uniforms) {
       this.pipeline.setUniforms(uniforms);
       Object.assign(this.uniforms, uniforms);
     }
-    _setGeometry(geometry) {
-      const geometryBuffers = getAttributeBuffersFromGeometry(this.device, geometry);
-      this.setAttributes(geometryBuffers);
-      const indexBuffer = getIndexBufferFromGeometry(this.device, geometry);
-      if (indexBuffer) {
-        this.setIndexBuffer(indexBuffer);
+    _setPipelineNeedsUpdate(reason) {
+      this._pipelineNeedsUpdate = this._pipelineNeedsUpdate || reason;
+    }
+    _updatePipeline() {
+      if (this._pipelineNeedsUpdate) {
+        log.log(1, `Model ${this.id}: Recreating pipeline because "${this._pipelineNeedsUpdate}".`)();
+        this._pipelineNeedsUpdate = false;
+        this.pipeline = this.device.createRenderPipeline({
+          ...this.props,
+          bufferLayout: this.bufferLayout,
+          topology: this.topology,
+          parameters: this.parameters,
+          vs: this.device.createShader({
+            stage: "vertex",
+            source: this.vs
+          }),
+          fs: this.fs ? this.device.createShader({
+            stage: "fragment",
+            source: this.fs
+          }) : null
+        });
       }
+      return this.pipeline;
     }
   };
-  function getShaderSource(device, shader) {
-    if (typeof shader === "string") {
-      return shader;
-    }
-    switch (device.info.type) {
-      case "webgpu":
-        if (shader?.wgsl) {
-          return shader.wgsl;
-        }
-        throw new Error("WebGPU does not support GLSL shaders");
-      default:
-        if (shader?.glsl) {
-          return shader.glsl;
-        }
-        throw new Error("WebGL does not support WGSL shaders");
+  var Model = _Model;
+  __publicField(Model, "defaultProps", {
+    ...RenderPipeline.defaultProps,
+    vs: null,
+    fs: null,
+    id: "unnamed",
+    handle: void 0,
+    userData: {},
+    defines: {},
+    modules: [],
+    moduleSettings: {},
+    geometry: null,
+    pipelineFactory: void 0,
+    shaderAssembler: ShaderAssembler.getDefaultShaderAssembler()
+  });
+  function mergeBufferLayouts(layouts1, layouts2) {
+    const layouts = [...layouts1];
+    for (const attribute of layouts2) {
+      const index = layouts.findIndex((attribute2) => attribute2.name === attribute.name);
+      if (index < 0) {
+        layouts.push(attribute);
+      } else {
+        layouts[index] = attribute;
+      }
     }
+    return layouts;
   }
 
   // ../constants/src/constants-enum.ts
@@ -6974,12 +7397,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 +8589,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 +9401,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 +9485,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 +9525,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 +9545,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 +10980,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 +12417,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 +12435,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 +12459,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 +12471,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 +12538,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 +12547,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 +12582,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 +12618,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 +12633,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 +12676,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 +12718,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],
@@ -12405,34 +12741,34 @@ ${formattedLog}`)();
   // ../webgl/src/adapter/helpers/set-uniform.ts
   function setUniform(gl, location, type, value) {
     const gl2 = gl;
-    if (typeof value === "number") {
-      switch (type) {
-        case GL.SAMPLER_2D:
-        case GL.SAMPLER_CUBE:
-        case GL.SAMPLER_3D:
-        case GL.SAMPLER_2D_SHADOW:
-        case GL.SAMPLER_2D_ARRAY:
-        case GL.SAMPLER_2D_ARRAY_SHADOW:
-        case GL.SAMPLER_CUBE_SHADOW:
-        case GL.INT_SAMPLER_2D:
-        case GL.INT_SAMPLER_3D:
-        case GL.INT_SAMPLER_CUBE:
-        case GL.INT_SAMPLER_2D_ARRAY:
-        case GL.UNSIGNED_INT_SAMPLER_2D:
-        case GL.UNSIGNED_INT_SAMPLER_3D:
-        case GL.UNSIGNED_INT_SAMPLER_CUBE:
-        case GL.UNSIGNED_INT_SAMPLER_2D_ARRAY:
-          return gl.uniform1i(location, value);
-      }
-    }
-    if (value === true) {
-      value = 1;
-    }
-    if (value === false) {
-      value = 0;
-    }
-    const arrayValue = typeof value === "number" ? [value] : value;
+    let uniformValue = value;
+    if (uniformValue === true) {
+      uniformValue = 1;
+    }
+    if (uniformValue === false) {
+      uniformValue = 0;
+    }
+    const arrayValue = typeof uniformValue === "number" ? [uniformValue] : uniformValue;
     switch (type) {
+      case GL.SAMPLER_2D:
+      case GL.SAMPLER_CUBE:
+      case GL.SAMPLER_3D:
+      case GL.SAMPLER_2D_SHADOW:
+      case GL.SAMPLER_2D_ARRAY:
+      case GL.SAMPLER_2D_ARRAY_SHADOW:
+      case GL.SAMPLER_CUBE_SHADOW:
+      case GL.INT_SAMPLER_2D:
+      case GL.INT_SAMPLER_3D:
+      case GL.INT_SAMPLER_CUBE:
+      case GL.INT_SAMPLER_2D_ARRAY:
+      case GL.UNSIGNED_INT_SAMPLER_2D:
+      case GL.UNSIGNED_INT_SAMPLER_3D:
+      case GL.UNSIGNED_INT_SAMPLER_CUBE:
+      case GL.UNSIGNED_INT_SAMPLER_2D_ARRAY:
+        if (typeof value !== "number") {
+          throw new Error("samplers must be set to integers");
+        }
+        return gl.uniform1i(location, value);
       case GL.FLOAT:
         return gl.uniform1fv(location, arrayValue);
       case GL.FLOAT_VEC2:
@@ -12684,8 +13020,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 +13058,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 +13074,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 +13156,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 +13182,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 +13268,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 +13296,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 +13304,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 +13335,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 +13394,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 +13594,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);
     }