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

package/dist/dist.dev.js

@@ -1181,6 +1181,8 @@ var __exports__ = (() => {
     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 = {
@@ -1194,6 +1196,8 @@ var __exports__ = (() => {
         }
       }
       super(device, deducedProps, _Buffer.defaultProps);
+      this.usage = props.usage || 0;
+      this.indexType = deducedProps.indexType;
     }
     write(data, byteOffset) {
       throw new Error("not implemented");
@@ -2016,7 +2020,11 @@ var __exports__ = (() => {
     /** 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) */
+    /** 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;
@@ -2648,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);
@@ -3064,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 [name2, attribute] of Object.entries(geometry.attributes)) {
-      const remappedName = mapAttributeName(name2);
-      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(name2) {
-    return GLTF_TO_LUMA_ATTRIBUTE_MAP[name2] || name2;
-  }
-
   // ../shadertools/src/lib/glsl-utils/highlight.ts
   var glsl2 = (x) => `${x}`;
 
@@ -3326,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);
@@ -3370,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":
@@ -3505,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
@@ -3647,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}
@@ -3879,6 +3888,91 @@ ${isVertex ? "" : FRAGMENT_SHADER_PROLOGUE}
     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 {
@@ -5850,87 +5944,151 @@ void main() {
     return result;
   }
 
-  // src/lib/pipeline-factory.ts
-  var DEFAULT_RENDER_PIPELINE_OPTIONS = {
-    vs: "",
-    fs: "",
-    modules: [],
-    defines: {},
-    inject: {},
-    transpileToGLSL100: false,
-    shaderLayout: 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;
@@ -5938,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) {
@@ -6009,116 +6132,110 @@ 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 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;
+  };
+  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.defaultProps,
-    vs: null,
-    fs: null,
-    id: "unnamed",
-    handle: void 0,
-    userData: {},
-    defines: {},
-    modules: [],
-    moduleSettings: {},
-    geometry: null,
-    pipelineFactory: void 0,
-    vertexCount: 0,
-    instanceCount: 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");
-      }
-      this.vs = getShaderSource(this.device, props.vs);
-      if (props.fs) {
-        this.fs = getShaderSource(this.device, props.fs);
-      }
-      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";
-      }
-      this.pipelineFactory = props.pipelineFactory || PipelineFactory.getDefaultPipelineFactory(this.device);
       const {
-        pipeline,
+        vs,
+        fs,
         getUniforms
-      } = this.pipelineFactory.createRenderPipeline({
-        ...props,
-        vs: this.vs,
-        fs: this.fs,
-        topology: this.topology,
-        defines: props.defines,
-        parameters: props.parameters,
-        shaderLayout: props.shaderLayout
-      });
-      this.pipeline = pipeline;
+      } = buildShaders(device, this.props);
+      this.vs = vs;
+      this.fs = fs;
       this._getModuleUniforms = getUniforms;
-      if (props.geometry) {
-        this._setGeometry(props.geometry);
+      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);
       }
-      this.setUniforms(this._getModuleUniforms());
-      this.setProps(props);
-    }
-    destroy() {
-      this.pipelineFactory.release(this.pipeline);
-    }
-    draw(renderPass) {
-      this.pipeline.draw({
-        renderPass,
-        vertexCount: this.vertexCount,
-        instanceCount: this.instanceCount
-      });
-    }
-    setProps(props) {
       if (props.indices) {
         this.setIndexBuffer(props.indices);
       }
@@ -6134,59 +6251,195 @@ void main() {
       if (props.moduleSettings) {
         this.updateModuleSettings(props.moduleSettings);
       }
+      this.setUniforms(this._getModuleUniforms());
+      Object.seal(this);
     }
-    updateModuleSettings(props) {
+    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
+      });
+    }
+    // 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");
+        }
+      }
+    }
+    /** 
+     * 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");
+        }
+      }
+    }
+    /**
+     * 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");
+        }
+      }
+    }
+    // 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
@@ -12488,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: