ris-framework 0.1.0-dev.9 → 0.2.0-dev.11

package/dist/index.js

@@ -1,5 +1,4 @@
-import { container } from "tsyringe";
-import { vec4, vec3, mat4, vec2 } from "gl-matrix";
+import { vec4, vec3, mat4, vec2, quat } from "gl-matrix";
 var RenderingBackend = /* @__PURE__ */ ((RenderingBackend2) => {
   RenderingBackend2[RenderingBackend2["DEFAULT"] = 0] = "DEFAULT";
   RenderingBackend2[RenderingBackend2["WEB_GPU"] = 1] = "WEB_GPU";
@@ -284,6 +283,13 @@ class Color {
    */
   lerp(a2, b2, t2, o2) {
   }
+  /**
+   * Copy self and return new instance with same values.
+   * @return Color
+   * */
+  copy() {
+    return new Color(this.r, this.g, this.b, this.a);
+  }
 }
 class TextureDescriptor {
   /**
@@ -953,6 +959,142 @@ var GeometryFormat = /* @__PURE__ */ ((GeometryFormat2) => {
   GeometryFormat2[GeometryFormat2["POS3_TEXTURECOORDS2"] = 4] = "POS3_TEXTURECOORDS2";
   return GeometryFormat2;
 })(GeometryFormat || {});
+class BaseGeometry {
+  /**
+   * Initializes a new instance of the BaseGeometry class.
+   * @param positions The optional positions of the geometry.
+   * @param indices The optional indices of the geometry.
+   * @param normals The optional normals of the geometry.
+   * @param textureCoords The optional texture coordinates of the geometry.
+   * @param colors The optional colors of the geometry.
+   */
+  constructor(positions, indices, normals, textureCoords, colors) {
+    this.positions = positions;
+    this.indices = indices;
+    this.normals = normals;
+    this.textureCoords = textureCoords;
+    this.colors = colors;
+    if (this.indices && this.indices.length > 0) {
+      this.vertexCount = this.indices.length / 3;
+    } else if (this.positions && this.positions.length > 0) {
+      this.vertexCount = this.positions.length / 3;
+    }
+  }
+  /** @inheritdoc */
+  vertexCount = 0;
+  /** @inheritdoc */
+  positions;
+  /** @inheritdoc */
+  positionsFormat = VertexFormat.FLOAT_32X3;
+  /** @inheritdoc */
+  colors;
+  /** @inheritdoc */
+  colorFormat = VertexFormat.FLOAT_32X4;
+  /** @inheritdoc */
+  textureCoords;
+  /** @inheritdoc */
+  textureFormat = VertexFormat.FLOAT_32X2;
+  /** @inheritdoc */
+  normals;
+  /** @inheritdoc */
+  normalsFormat = VertexFormat.FLOAT_32X3;
+  /** The indices of geometry. */
+  indices;
+  /**
+   * Pushes vertex data from source format to destination format.
+   * @param index The index of the vertex to push.
+   * @param source The source vertex data.
+   * @param sourceFormat The vertex format of the source vertex data.
+   * @param destination The destination array to push the vertex data to.
+   * @param destinationFormat The vertex format of the destination vertex data.
+   */
+  pushFormat(index, source, sourceFormat, destination, destinationFormat) {
+    let _0 = 0;
+    let _1 = 0;
+    let _2 = 0;
+    let _3 = 0;
+    if (sourceFormat == VertexFormat.FLOAT_32) {
+      _0 = source[index];
+    } else if (sourceFormat == VertexFormat.FLOAT_32X2) {
+      _0 = source[index * 2];
+      _1 = source[index * 2 + 1];
+    } else if (sourceFormat == VertexFormat.FLOAT_32X3) {
+      _0 = source[index * 3];
+      _1 = source[index * 3 + 1];
+      _2 = source[index * 3 + 2];
+    } else if (sourceFormat == VertexFormat.FLOAT_32X4) {
+      _0 = source[index * 4];
+      _1 = source[index * 4 + 1];
+      _2 = source[index * 4 + 2];
+      _3 = source[index * 4 + 3];
+    }
+    destination.push(_0);
+    if (destinationFormat >= VertexFormat.FLOAT_32X2) {
+      destination.push(_1);
+    }
+    if (destinationFormat >= VertexFormat.FLOAT_32X3) {
+      destination.push(_2);
+    }
+    if (destinationFormat >= VertexFormat.FLOAT_32X4) {
+      destination.push(_3);
+    }
+  }
+  /**
+   * Converts the geometry data to interleaved vertex data based on the specified geometry format.
+   * @param format The geometry format to convert the geometry data to.
+   * @returns The interleaved vertex data as an array of numbers.
+   */
+  toInterleaved(format) {
+    let interleavedData = [];
+    switch (format) {
+      case GeometryFormat.POS3_COLOR4: {
+        let count = this.positions.length / 3;
+        for (let i2 = 0; i2 < count; i2++) {
+          this.pushFormat(i2, this.positions, VertexFormat.FLOAT_32X3, interleavedData, VertexFormat.FLOAT_32X3);
+          this.pushFormat(i2, this.colors, VertexFormat.FLOAT_32X4, interleavedData, VertexFormat.FLOAT_32X4);
+        }
+        break;
+      }
+      case GeometryFormat.POS3_TEXTURECOORDS2: {
+        let count = this.positions.length / 3;
+        for (let i2 = 0; i2 < count; i2++) {
+          this.pushFormat(i2, this.positions, VertexFormat.FLOAT_32X3, interleavedData, VertexFormat.FLOAT_32X3);
+          this.pushFormat(i2, this.textureCoords, VertexFormat.FLOAT_32X2, interleavedData, VertexFormat.FLOAT_32X2);
+        }
+        break;
+      }
+      case GeometryFormat.POS3_COLOR4_TEXTURECOORDS2: {
+        let count = this.positions.length / 3;
+        for (let i2 = 0; i2 < count; i2++) {
+          this.pushFormat(i2, this.positions, VertexFormat.FLOAT_32X3, interleavedData, VertexFormat.FLOAT_32X3);
+          this.pushFormat(i2, this.colors, VertexFormat.FLOAT_32X4, interleavedData, VertexFormat.FLOAT_32X4);
+          this.pushFormat(i2, this.textureCoords, VertexFormat.FLOAT_32X2, interleavedData, VertexFormat.FLOAT_32X2);
+        }
+        break;
+      }
+      case GeometryFormat.POS3_COLOR4_TEXTURECOORDS2_NORMAL3: {
+        let count = this.positions.length / 3;
+        for (let i2 = 0; i2 < count; i2++) {
+          this.pushFormat(i2, this.positions, VertexFormat.FLOAT_32X3, interleavedData, VertexFormat.FLOAT_32X3);
+          this.pushFormat(i2, this.colors, VertexFormat.FLOAT_32X4, interleavedData, VertexFormat.FLOAT_32X4);
+          this.pushFormat(i2, this.textureCoords, VertexFormat.FLOAT_32X2, interleavedData, VertexFormat.FLOAT_32X2);
+          this.pushFormat(i2, this.normals, VertexFormat.FLOAT_32X3, interleavedData, VertexFormat.FLOAT_32X3);
+        }
+        break;
+      }
+      case GeometryFormat.POS3_COLOR4_TEXTURECOORDS2_ALIGNED: {
+        let count = this.positions.length / 3;
+        for (let i2 = 0; i2 < count; i2++) {
+          this.pushFormat(i2, this.positions, VertexFormat.FLOAT_32X3, interleavedData, VertexFormat.FLOAT_32X4);
+          this.pushFormat(i2, this.colors, VertexFormat.FLOAT_32X4, interleavedData, VertexFormat.FLOAT_32X4);
+          this.pushFormat(i2, this.textureCoords, VertexFormat.FLOAT_32X2, interleavedData, VertexFormat.FLOAT_32X4);
+        }
+        break;
+      }
+    }
+    return interleavedData;
+  }
+}
 var LoadAction = /* @__PURE__ */ ((LoadAction2) => {
   LoadAction2[LoadAction2["CLEAR"] = 0] = "CLEAR";
   LoadAction2[LoadAction2["LOAD"] = 1] = "LOAD";
@@ -1398,19 +1540,30 @@ class PerspectiveCamera {
   _viewBuffer = null;
   _projectionBuffer = null;
   /**
-   * The constructor.
+   * The constructor. Call `initialize()` before use (the camera factory does).
    * @param framework The framework.
-   * @param fov The field of view in radians.
-   * @param aspectRatio The aspect ratio.
-   * @param nearPlane The near plane.
-   * @param farPlane The far plane.
+   * @param descriptor The optional descriptor; omitted fields use the defaults documented on {@link PerspectiveCameraDescriptor}.
+   *                   `fov` is in degrees; {@link fieldOfView} holds it in radians. Vectors are copied.
+   * @param scene The optional scene; the camera assigns itself as `scene.camera`.
    */
-  constructor(framework, fov, aspectRatio, nearPlane, farPlane) {
+  constructor(framework, descriptor, scene) {
     this._framework = framework;
-    this.fieldOfView = fov;
-    this.aspectRatio = aspectRatio;
-    this.nearPlane = nearPlane;
-    this.farPlane = farPlane;
+    this.fieldOfView = MathHelper.toRadians(descriptor?.fov ?? 60);
+    this.aspectRatio = descriptor?.aspectRatio ?? 1;
+    this.nearPlane = descriptor?.near ?? 0.01;
+    this.farPlane = descriptor?.far ?? 100;
+    if (descriptor?.eye) {
+      vec3.copy(this.eye, descriptor.eye);
+    }
+    if (descriptor?.target) {
+      vec3.copy(this.target, descriptor.target);
+    }
+    if (descriptor?.up) {
+      vec3.copy(this.up, descriptor.up);
+    }
+    if (scene) {
+      scene.add(this);
+    }
     this._updateMatrices();
   }
   /**
@@ -1505,11 +1658,18 @@ class PerspectiveCamera {
    */
   initialize() {
     const bufferUsage = BufferUsage.UNIFORM | BufferUsage.COPY_DST;
-    this._positionBuffer = this._framework.bufferFactory.createUniformBuffer(this.eye, bufferUsage);
+    this._positionBuffer = this._framework.bufferFactory.createUniformBuffer(this._worldEye(), bufferUsage);
     this._projectionViewBuffer = this._framework.bufferFactory.createUniformBuffer(this.projectionViewMatrix, bufferUsage);
     this._projectionBuffer = this._framework.bufferFactory.createUniformBuffer(this.projectionMatrix, bufferUsage);
     this._viewBuffer = this._framework.bufferFactory.createUniformBuffer(this.viewMatrix, bufferUsage);
   }
+  /**
+   * The eye in world space, as used by the view matrix: z is flipped for the right-handed look-at.
+   * This is what {@link positionBuffer} holds, std140 `vec3` (padded to 16 bytes).
+   */
+  _worldEye() {
+    return [this.eye[0], this.eye[1], -this.eye[2], 0];
+  }
   /**
    * Updates the camera matrices.
    */
@@ -1528,7 +1688,7 @@ class PerspectiveCamera {
   }
   /** @inheritDoc */
   updateBuffers() {
-    this._positionBuffer.update(this.eye);
+    this._positionBuffer.update(this._worldEye());
     this._projectionBuffer.update(this.projectionMatrix);
     this._viewBuffer.update(this.viewMatrix);
     this._projectionViewBuffer.update(this.projectionViewMatrix);
@@ -2192,6 +2352,9 @@ class OrthographicCamera {
   _projectionBuffer = null;
   _viewBuffer = null;
   _projectionViewBuffer = null;
+  _positionBuffer = null;
+  /** std140 vec3 world-space eye, padded to 4 floats. */
+  _positionData = [0, 0, 0, 0];
   /**
    *
    * @param framework
@@ -2210,7 +2373,7 @@ class OrthographicCamera {
     this._bottom = bottom;
     this._near = near;
     this._far = far;
-    this._eye = vec3.fromValues(0, 0, -1);
+    this._eye = vec3.fromValues(0, 0, 1);
     this._target = vec3.fromValues(0, 0, 0);
     this._zSpaceLength = 2;
     this._updateMatrices();
@@ -2316,6 +2479,17 @@ class OrthographicCamera {
   get viewBuffer() {
     return this._viewBuffer;
   }
+  /** @inheritDoc */
+  get positionBuffer() {
+    return this._positionBuffer;
+  }
+  /** Writes the world-space eye into the std140 position data (no z flip: the look-at uses the eye as is). */
+  _updatePositionData() {
+    this._positionData[0] = this._eye[0];
+    this._positionData[1] = this._eye[1];
+    this._positionData[2] = this._eye[2];
+    return this._positionData;
+  }
   /**
    * Updates the camera matrices.
    */
@@ -2341,6 +2515,11 @@ class OrthographicCamera {
       BufferUsage.UNIFORM,
       "OrthographicCamera.projectionViewBuffer"
     );
+    this._positionBuffer = this._framework.bufferFactory.createUniformBuffer(
+      this._updatePositionData(),
+      BufferUsage.UNIFORM,
+      "OrthographicCamera.positionBuffer"
+    );
   }
   /** @inheritDoc */
   updateBuffers() {
@@ -2348,6 +2527,7 @@ class OrthographicCamera {
     this.projectionBuffer.update(this.projectionMatrix);
     this.viewBuffer.update(this.viewMatrix);
     this.projectionViewBuffer.update(this.projectionViewMatrix);
+    this.positionBuffer.update(this._updatePositionData());
   }
   /** @inheritDoc */
   update(_2) {
@@ -2361,6 +2541,7 @@ class OrthographicCamera {
     this.projectionBuffer.dispose();
     this.projectionViewBuffer.dispose();
     this.viewBuffer.dispose();
+    this.positionBuffer.dispose();
   }
 }
 class CameraFactory {
@@ -2391,12 +2572,11 @@ class CameraFactory {
   }
   /** @inheritDoc */
   createOrbitCamera(fov = 60, aspectRatio = 1, near = 0.01, far = 100) {
-    return new OrbitCamera(this.createPerspectiveCamera(fov, aspectRatio, near, far), this._framework.input);
+    return new OrbitCamera(this.createPerspectiveCamera({ fov, aspectRatio, near, far }), this._framework.input);
   }
   /** @inheritDoc */
-  createPerspectiveCamera(fov = 60, aspectRatio = 1, near = 0.01, far = 100) {
-    fov = MathHelper.toRadians(fov);
-    const camera = new PerspectiveCamera(this._framework, fov, aspectRatio, near, far);
+  createPerspectiveCamera(descriptor, scene) {
+    const camera = new PerspectiveCamera(this._framework, descriptor, scene);
     camera.initialize();
     return camera;
   }
@@ -2534,6 +2714,268 @@ class ImageLoader {
     );
   }
 }
+class ObjMaterialDefinition {
+  /**
+   * The constructor.
+   * @param name The material name from `newmtl`.
+   */
+  constructor(name) {
+    this.name = name;
+  }
+  name;
+  /** Ambient colour (`Ka`). */
+  ambientColor;
+  /** Diffuse colour (`Kd`). */
+  diffuseColor;
+  /** Specular colour (`Ks`). */
+  specularColor;
+  /** Emissive colour (`Ke`). */
+  emissiveColor;
+  /** Specular exponent (`Ns`). */
+  specularExponent;
+  /** Opacity, from `d`, or `1 - Tr` when only `Tr` is given. */
+  opacity;
+  /** Optical density / index of refraction (`Ni`). */
+  opticalDensity;
+  /** Illumination model (`illum`). */
+  illuminationModel;
+  /**
+   * Texture maps by statement name, e.g. `map_Kd`, `map_Ks`, `map_Bump`, `bump`, `disp`, `decal`, `refl`.
+   * The value is the file name (last token); map options such as `-bm 1` are kept in {@link mapOptions}.
+   */
+  maps = {};
+  /** Options written before the file name of a map statement, e.g. `{ map_Bump: "-bm 0.5" }`. */
+  mapOptions = {};
+}
+function tokens(line) {
+  return line.trim().split(/\s+/);
+}
+function readColor(parts) {
+  if (parts.length < 2 || isNaN(parseFloat(parts[1]))) {
+    return void 0;
+  }
+  const r3 = parseFloat(parts[1]);
+  const g2 = parts.length > 2 ? parseFloat(parts[2]) : r3;
+  const b2 = parts.length > 3 ? parseFloat(parts[3]) : r3;
+  return [r3, g2, b2];
+}
+class ObjLoader {
+  /**
+   * Parses .mtl text.
+   * @param text The .mtl contents.
+   * @returns The material definitions, in file order.
+   */
+  parseMtl(text) {
+    const materials = [];
+    let current;
+    for (const rawLine of text.split(/\r?\n/)) {
+      const line = rawLine.trim();
+      if (line.length == 0 || line.startsWith("#")) {
+        continue;
+      }
+      const parts = tokens(line);
+      const keyword = parts[0];
+      if (keyword == "newmtl") {
+        current = new ObjMaterialDefinition(line.substring(keyword.length).trim());
+        materials.push(current);
+        continue;
+      }
+      if (!current) {
+        continue;
+      }
+      switch (keyword) {
+        case "Ka":
+          current.ambientColor = readColor(parts);
+          break;
+        case "Kd":
+          current.diffuseColor = readColor(parts);
+          break;
+        case "Ks":
+          current.specularColor = readColor(parts);
+          break;
+        case "Ke":
+          current.emissiveColor = readColor(parts);
+          break;
+        case "Ns":
+          current.specularExponent = parseFloat(parts[1]);
+          break;
+        case "Ni":
+          current.opticalDensity = parseFloat(parts[1]);
+          break;
+        case "illum":
+          current.illuminationModel = parseInt(parts[1]);
+          break;
+        case "d":
+          current.opacity = parseFloat(parts[parts.length - 1]);
+          break;
+        case "Tr":
+          if (current.opacity === void 0) {
+            current.opacity = 1 - parseFloat(parts[1]);
+          }
+          break;
+        default:
+          if (keyword.startsWith("map_") || keyword == "bump" || keyword == "disp" || keyword == "decal" || keyword == "refl" || keyword == "norm") {
+            if (parts.length >= 2) {
+              current.maps[keyword] = parts[parts.length - 1];
+              if (parts.length > 2) {
+                current.mapOptions[keyword] = parts.slice(1, -1).join(" ");
+              }
+            }
+          }
+          break;
+      }
+    }
+    return materials;
+  }
+  /**
+   * Parses .obj text.
+   * @param text The .obj contents.
+   * @param materials Material definitions to use for `usemtl`, e.g. from {@link parseMtl}. Default none.
+   * @returns The geometry, materials and raw data.
+   */
+  fromText(text, materials = []) {
+    const rawPositions = [];
+    const rawTextureCoords = [];
+    const rawNormals = [];
+    const faceIndices = [];
+    const materialLibraries = [];
+    const materialRanges = [];
+    const positions = [];
+    const textureCoords = [];
+    const normals = [];
+    const colors = [];
+    const indices = [];
+    const vertexLookup = /* @__PURE__ */ new Map();
+    const materialsByName = new Map(materials.map((m2) => [m2.name, m2]));
+    let materialName;
+    let rangeStart = 0;
+    const closeRange = () => {
+      if (indices.length > rangeStart) {
+        materialRanges.push({ materialName, indexStart: rangeStart, indexCount: indices.length - rangeStart });
+      }
+      rangeStart = indices.length;
+    };
+    const resolve = (value, count) => {
+      if (value === void 0 || value.length == 0) {
+        return -1;
+      }
+      const index = parseInt(value);
+      return index < 0 ? count + index : index - 1;
+    };
+    const addCorner = (p2, t2, n2) => {
+      faceIndices.push(p2, t2, n2);
+      const key = `${p2}/${t2}/${n2}/${materialName ?? ""}`;
+      let vertex = vertexLookup.get(key);
+      if (vertex === void 0) {
+        vertex = positions.length / 3;
+        vertexLookup.set(key, vertex);
+        positions.push(rawPositions[p2 * 3], rawPositions[p2 * 3 + 1], rawPositions[p2 * 3 + 2]);
+        textureCoords.push(t2 >= 0 ? rawTextureCoords[t2 * 2] : 0, t2 >= 0 ? rawTextureCoords[t2 * 2 + 1] : 0);
+        normals.push(n2 >= 0 ? rawNormals[n2 * 3] : 0, n2 >= 0 ? rawNormals[n2 * 3 + 1] : 0, n2 >= 0 ? rawNormals[n2 * 3 + 2] : 0);
+        const material = materialName !== void 0 ? materialsByName.get(materialName) : void 0;
+        const kd = material?.diffuseColor ?? [1, 1, 1];
+        colors.push(kd[0], kd[1], kd[2], material?.opacity ?? 1);
+      }
+      indices.push(vertex);
+    };
+    for (const rawLine of text.split(/\r?\n/)) {
+      const line = rawLine.trim();
+      if (line.length == 0 || line.startsWith("#")) {
+        continue;
+      }
+      const parts = tokens(line);
+      switch (parts[0]) {
+        case "v":
+          rawPositions.push(parseFloat(parts[1]), parseFloat(parts[2]), parseFloat(parts[3]));
+          break;
+        case "vt":
+          rawTextureCoords.push(parseFloat(parts[1]), parts.length > 2 ? parseFloat(parts[2]) : 0);
+          break;
+        case "vn":
+          rawNormals.push(parseFloat(parts[1]), parseFloat(parts[2]), parseFloat(parts[3]));
+          break;
+        case "f": {
+          const corners = parts.slice(1).map((corner) => {
+            const [p2, t2, n2] = corner.split("/");
+            return [
+              resolve(p2, rawPositions.length / 3),
+              resolve(t2, rawTextureCoords.length / 2),
+              resolve(n2, rawNormals.length / 3)
+            ];
+          });
+          for (let i2 = 1; i2 + 1 < corners.length; i2++) {
+            addCorner(corners[0][0], corners[0][1], corners[0][2]);
+            addCorner(corners[i2][0], corners[i2][1], corners[i2][2]);
+            addCorner(corners[i2 + 1][0], corners[i2 + 1][1], corners[i2 + 1][2]);
+          }
+          break;
+        }
+        case "mtllib":
+          materialLibraries.push(...parts.slice(1));
+          break;
+        case "usemtl":
+          closeRange();
+          materialName = line.substring(parts[0].length).trim();
+          break;
+      }
+    }
+    closeRange();
+    if (positions.length == 0) {
+      throw new Error("Invalid obj file.");
+    }
+    return {
+      geometry: {
+        positions,
+        textureCoords,
+        normals,
+        colors,
+        indices,
+        vertexCount: positions.length / 3,
+        materialRanges
+      },
+      materials,
+      materialLibraries,
+      raw: { positions: rawPositions, textureCoords: rawTextureCoords, normals: rawNormals, faceIndices }
+    };
+  }
+  /**
+   * Loads an .obj file and the .mtl files it references with `mtllib`.
+   * A missing or failing .mtl is skipped (logged as a warning); the model still loads with white vertex colours.
+   * @param filePath The .obj URL.
+   * @param options Optional: how to resolve `mtllib` names, or skip materials.
+   * @returns The geometry, materials and raw data.
+   */
+  async loadAsync(filePath, options) {
+    const response = await fetch(filePath);
+    if (!response.ok) {
+      throw new Error(`Failed to load OBJ '${filePath}': ${response.status} ${response.statusText}`);
+    }
+    const text = await response.text();
+    const materials = [];
+    const libraries = options?.ignoreMaterials ? [] : text.split(/\r?\n/).map((line) => tokens(line)).filter((parts) => parts[0] == "mtllib").flatMap((parts) => parts.slice(1));
+    const opaqueUrl = /^(data|blob):/i.test(filePath);
+    for (const library of libraries) {
+      try {
+        let mtlUrl;
+        if (options?.resolveMaterialUrl) {
+          mtlUrl = options.resolveMaterialUrl(library);
+        } else if (opaqueUrl) {
+          throw new Error("the OBJ was loaded from a data: or blob: URL (e.g. a bundler-inlined asset), so the name cannot be resolved; pass options.resolveMaterialUrl");
+        } else {
+          mtlUrl = filePath.substring(0, filePath.lastIndexOf("/") + 1) + library;
+        }
+        const mtlResponse = await fetch(mtlUrl);
+        if (!mtlResponse.ok) {
+          throw new Error(`${mtlResponse.status} ${mtlResponse.statusText}`);
+        }
+        materials.push(...this.parseMtl(await mtlResponse.text()));
+      } catch (error) {
+        console.warn(`ObjLoader: could not load material library '${library}'.`, error);
+      }
+    }
+    return this.fromText(text, materials);
+  }
+}
 class WindowBounds {
   /**
    * Creates window bounds with the given width and height.
@@ -2557,6 +2999,8 @@ class GeometryUtilities {
     switch (geometryFormat) {
       case GeometryFormat.POS3_COLOR4_TEXTURECOORDS2:
         return (3 + 4 + 2) * Float32Array.BYTES_PER_ELEMENT;
+      case GeometryFormat.POS3_COLOR4_TEXTURECOORDS2_NORMAL3:
+        return (3 + 4 + 2 + 3) * Float32Array.BYTES_PER_ELEMENT;
       default:
         throw new Error("Unknown geometryFormat");
     }
@@ -2580,8 +3024,88 @@ class MeshParameters {
    */
   colors;
 }
+class SubMesh {
+  /**
+   * The constructor.
+   * @param parent The mesh that owns the buffers.
+   * @param material The material of this submesh.
+   * @param indexStart The first index of the range.
+   * @param indexCount The number of indices in the range.
+   */
+  constructor(parent, material, indexStart, indexCount) {
+    this.parent = parent;
+    this.material = material;
+    this.indexStart = indexStart;
+    this.indexCount = indexCount;
+  }
+  parent;
+  material;
+  indexStart;
+  indexCount;
+  /** The parent's vertex buffer. */
+  get vertexBuffer() {
+    return this.parent.vertexBuffer;
+  }
+  /** The parent's index buffer. */
+  get indexBuffer() {
+    return this.parent.indexBuffer;
+  }
+  /** The parent's position; setting it sets the parent's. */
+  get position() {
+    return this.parent.position;
+  }
+  set position(value) {
+    this.parent.position = value;
+  }
+  /** The parent's rotation; setting it sets the parent's. */
+  get rotation() {
+    return this.parent.rotation;
+  }
+  set rotation(value) {
+    this.parent.rotation = value;
+  }
+  /** The parent's scale; setting it sets the parent's. */
+  get scale() {
+    return this.parent.scale;
+  }
+  set scale(value) {
+    this.parent.scale = value;
+  }
+  /** The parent's model matrix. */
+  get modelMatrix() {
+    return this.parent.modelMatrix;
+  }
+  /** The parent's model buffer. */
+  get modelBuffer() {
+    return this.parent.modelBuffer;
+  }
+  /** Draws this submesh with its material, using the parent's transform (model buffer). */
+  render() {
+    this.parent.__assignModelBuffer(this.material);
+    this.material.beforeRender();
+    this.material.renderMesh(this);
+  }
+  /** Does nothing: the buffers belong to the parent and the material to the caller. */
+  dispose() {
+  }
+}
 class Mesh {
+  /**
+   * The constructor.
+   * @param _framework The framework.
+   * @param scene The scene. The mesh adds itself to it and removes itself on dispose.
+   *              `null` only for internal meshes drawn outside a scene (e.g. the sprite batch).
+   * @param _material The material. Optional for a mesh that only holds submeshes.
+   */
+  constructor(_framework, scene, _material) {
+    this._framework = _framework;
+    this.scene = scene;
+    this._material = _material;
+    scene?.add(this);
+  }
   _framework;
+  scene;
+  _material;
   _bufferUsage = BufferUsage.VERTEX;
   _state = State.CREATED;
   _vertexData;
@@ -2592,12 +3116,95 @@ class Mesh {
   _normals;
   _vertexBuffer;
   _indexBuffer;
+  _subMeshes = [];
+  _modelMatrix = mat4.create();
+  _rotationQuat = quat.create();
+  // Cached copies to detect in-place edits; NaN forces the first computation.
+  _lastPosition = vec3.fromValues(NaN, NaN, NaN);
+  _lastRotation = vec3.create();
+  _lastScale = vec3.create();
+  _modelBuffer;
+  /** The matrix last uploaded to the model buffer. */
+  _uploadedMatrix = mat4.create();
+  /** @inheritDoc */
+  position = vec3.create();
+  /** @inheritDoc */
+  rotation = vec3.create();
+  /** @inheritDoc */
+  scale = vec3.fromValues(1, 1, 1);
+  /** @inheritDoc */
+  get modelMatrix() {
+    if (!vec3.exactEquals(this._lastPosition, this.position) || !vec3.exactEquals(this._lastRotation, this.rotation) || !vec3.exactEquals(this._lastScale, this.scale)) {
+      vec3.copy(this._lastPosition, this.position);
+      vec3.copy(this._lastRotation, this.rotation);
+      vec3.copy(this._lastScale, this.scale);
+      const q = quat.identity(this._rotationQuat);
+      quat.rotateY(q, q, this.rotation[1]);
+      quat.rotateX(q, q, this.rotation[0]);
+      quat.rotateZ(q, q, this.rotation[2]);
+      mat4.fromRotationTranslationScale(this._modelMatrix, q, this.position, this.scale);
+    }
+    return this._modelMatrix;
+  }
+  /** @inheritDoc Created on first access and disposed with the mesh. */
+  get modelBuffer() {
+    if (!this._modelBuffer) {
+      mat4.copy(this._uploadedMatrix, this.modelMatrix);
+      this._modelBuffer = this._framework.bufferFactory.createUniformBuffer(
+        this._uploadedMatrix,
+        BufferUsage.UNIFORM | BufferUsage.COPY_DST,
+        "Mesh.modelBuffer"
+      );
+    }
+    return this._modelBuffer;
+  }
+  /** Uploads the model matrix when the transform changed since the last upload. */
+  _updateModelBuffer() {
+    const buffer = this.modelBuffer;
+    const matrix = this.modelMatrix;
+    if (!mat4.exactEquals(this._uploadedMatrix, matrix)) {
+      mat4.copy(this._uploadedMatrix, matrix);
+      buffer.update(this._uploadedMatrix);
+    }
+    return buffer;
+  }
   /**
-   * The constructor.
-   * @param framework The framework.
+   * Assigns this mesh's model buffer to a material that uses one (has a `modelBuffer` property),
+   * only when it differs. Materials without one (e.g. sprites) are skipped and no buffer is created for them.
+   * @internal
    */
-  constructor(framework) {
-    this._framework = framework;
+  __assignModelBuffer(material) {
+    if (!("modelBuffer" in material)) {
+      return;
+    }
+    const buffer = this._updateModelBuffer();
+    if (material.modelBuffer !== buffer) {
+      material.modelBuffer = buffer;
+    }
+  }
+  /** The material. Undefined for a mesh drawn through its submeshes. */
+  get material() {
+    return this._material;
+  }
+  /** Sets the material. */
+  set material(material) {
+    this._material = material;
+  }
+  /** The submeshes. They share this mesh's vertex and index buffers. */
+  get subMeshes() {
+    return this._subMeshes;
+  }
+  /**
+   * Adds a submesh that draws a range of this mesh's index buffer with its own material.
+   * @param material The material of the submesh.
+   * @param indexStart The first index of the range.
+   * @param indexCount The number of indices in the range.
+   * @returns The submesh.
+   */
+  addSubMesh(material, indexStart, indexCount) {
+    const subMesh = new SubMesh(this, material, indexStart, indexCount);
+    this._subMeshes.push(subMesh);
+    return subMesh;
   }
   /**
    * The state of a mesh.
@@ -2726,11 +3333,14 @@ class Mesh {
    * Sets the mesh from a geometry.
    *
    * This will create vertex buffer and index buffer from geometry.
-   * Positions, Colors, TextureCoordinates  and Normals will be ignored.
    * @param geometry - The geometry.
-   * @param format - The format for geometry.
+   * @param geometryFormat - The vertex layout. Defaults to the material's geometry format.
    */
-  setGeometry(geometry, format) {
+  setGeometry(geometry, geometryFormat) {
+    const format = geometryFormat ?? this._material?.geometryFormat;
+    if (format === void 0) {
+      throw new Error("Cannot create buffers for a Mesh without a material or geometry format.");
+    }
     if (geometry.vertexCount == 0) {
       const message = "Cannot create buffers for a Mesh as Mesh has no positions. Check that geometry.vertexCount is set.";
       throw new Error(message);
@@ -2759,25 +3369,44 @@ class Mesh {
     this._colors = meshParameters.colors;
     this.applyChanges();
   }
-  /**
-   * Dispose of the mesh.
-   */
+  /** @inheritDoc */
+  render() {
+    if (this.subMeshes?.length > 0) {
+      for (let i2 = 0; i2 < this.subMeshes.length; ++i2) {
+        this.subMeshes[i2].render();
+      }
+    }
+    if (this.material) {
+      this.__assignModelBuffer(this.material);
+      this.material.beforeRender();
+      this.material.renderMesh(this);
+    }
+  }
+  /**
+   * Dispose of the mesh.
+   */
   dispose() {
+    this.scene?.remove(this);
+    this._subMeshes.length = 0;
     this._vertexBuffer?.dispose();
     this._vertexBuffer = void 0;
     this._indexBuffer?.dispose();
     this._indexBuffer = void 0;
+    this._modelBuffer?.dispose();
+    this._modelBuffer = void 0;
   }
 }
 class QuadMesh extends Mesh {
   /**
    * The constructor.
    * @param framework The framework.
+   * @param scene The scene the quad adds itself to.
+   * @param material The material.
    * @param _isUpdatable Makes mesh updatable.
    * @param scale The scale factor for geometry. If not set, it is set to (1,1).
    */
-  constructor(framework, _isUpdatable, scale) {
-    super(framework);
+  constructor(framework, scene, material, _isUpdatable, scale) {
+    super(framework, scene, material);
     this._isUpdatable = _isUpdatable;
     if (_isUpdatable) {
       this._bufferUsage = BufferUsage.VERTEX | BufferUsage.COPY_DST;
@@ -2887,38 +3516,65 @@ class MeshFactory {
   }
   _framework;
   /** @inheritDoc */
-  create(geometry, geometryFormat) {
-    const mesh = new Mesh(this._framework);
-    mesh.setGeometry(geometry, geometryFormat);
+  create(scene, geometry, material) {
+    const mesh = new Mesh(this._framework, scene, material);
+    mesh.setGeometry(geometry);
+    return mesh;
+  }
+  /** @inheritDoc */
+  createWithSubMeshes(scene, geometry, subMeshes) {
+    if (subMeshes.length == 0) {
+      throw new Error("createWithSubMeshes needs at least one submesh.");
+    }
+    const format = subMeshes[0].material.geometryFormat;
+    if (subMeshes.some((s2) => s2.material.geometryFormat != format)) {
+      throw new Error("All submesh materials must use the same geometry format, as they share one vertex buffer.");
+    }
+    const mesh = new Mesh(this._framework, scene);
+    mesh.setGeometry(geometry, format);
+    for (const subMesh of subMeshes) {
+      mesh.addSubMesh(subMesh.material, subMesh.indexStart, subMesh.indexCount);
+    }
     return mesh;
   }
   /** @inheritDoc */
-  createQuadMesh(isUpdatable, scale) {
-    const quadMesh = new QuadMesh(this._framework, isUpdatable, scale);
-    quadMesh.initialize();
-    return quadMesh;
+  createQuadMesh(_isUpdatable, _scale) {
+    throw new Error("Meshes not implemented.");
   }
 }
 class InspectTextureMipsMaterial {
   _framework;
   _mipLevel = [0];
+  /** Created when the model buffer is assigned (the pipeline requires one). */
   _pipeline;
+  /** Texture and sampler set before the pipeline exists; applied when it is created. */
+  _pendingTexture;
+  _pendingSampler;
+  _samplerSet = false;
   _projectionViewBuffer;
   _fragmentDataBuffer;
   _modelBuffer;
-  _previousModelMatrix = mat4.create();
   constructor(framework) {
     this._framework = framework;
-    void this._framework;
     const usage = BufferUsage.UNIFORM | BufferUsage.COPY_DST;
-    this._projectionViewBuffer = framework.bufferFactory.createUniformBuffer(this._previousModelMatrix, usage);
-    this._modelBuffer = framework.bufferFactory.createUniformBuffer(this._previousModelMatrix, usage);
+    this._projectionViewBuffer = framework.bufferFactory.createUniformBuffer(mat4.create(), usage);
     this._fragmentDataBuffer = framework.bufferFactory.createUniformBuffer(this._mipLevel, usage);
-    this._pipeline = framework.renderPipelineFactory.createInspectTextureMipsRenderPipeline(
+  }
+  /** Creates the pipeline with the current bindings. */
+  _createPipeline(modelBuffer) {
+    const pipeline = this._framework.renderPipelineFactory.createInspectTextureMipsRenderPipeline(
       this._projectionViewBuffer,
-      this._modelBuffer,
+      modelBuffer,
       this._fragmentDataBuffer
     );
+    if (this._pendingTexture) {
+      pipeline.spriteTexture = this._pendingTexture;
+    }
+    if (this._samplerSet) {
+      pipeline.textureSampler = this._pendingSampler;
+    }
+    this._pipeline = pipeline;
+    return pipeline;
   }
   /**
    * The mip level to inspect.
@@ -2928,30 +3584,55 @@ class InspectTextureMipsMaterial {
    * The texture to inspect.
    */
   get texture() {
-    return this._pipeline.spriteTexture;
+    return this._pipeline?.spriteTexture ?? this._pendingTexture;
   }
   /**
    * The texture to inspect.
    */
   set texture(value) {
-    this._pipeline.spriteTexture = value;
+    this._pendingTexture = value;
+    if (this._pipeline) {
+      this._pipeline.spriteTexture = value;
+    }
   }
   /**
    * The texture sampler.
    */
   get textureSampler() {
-    return this._pipeline.textureSampler;
+    return this._pipeline ? this._pipeline.textureSampler : this._pendingSampler;
   }
   /**
    * The texture sampler.
    */
   set textureSampler(value) {
-    this._pipeline.textureSampler = value;
+    this._pendingSampler = value;
+    this._samplerSet = true;
+    if (this._pipeline) {
+      this._pipeline.textureSampler = value;
+    }
   }
   /**
-   * The model matrix.
+   * The model buffer (std140 `mat4`). Owned by the mesh, which assigns it before drawing; never disposed by this material.
+   * Undefined until assigned: rendering without one throws.
    */
-  modelMatrix = mat4.create();
+  get modelBuffer() {
+    return this._modelBuffer;
+  }
+  /** Binds the model buffer to the pipeline. */
+  set modelBuffer(value) {
+    if (value === this._modelBuffer) {
+      return;
+    }
+    this._modelBuffer = value;
+    if (!value) {
+      return;
+    }
+    if (this._pipeline) {
+      this._pipeline.modelBuffer = value;
+    } else {
+      this._createPipeline(value);
+    }
+  }
   /**
    * The geometry format.
    */
@@ -2962,44 +3643,49 @@ class InspectTextureMipsMaterial {
       this._mipLevel[0] = this.mipLevel;
       this._fragmentDataBuffer.update(this._mipLevel);
     }
-    if (!mat4.equals(this._previousModelMatrix, this.modelMatrix)) {
-      mat4.copy(this._previousModelMatrix, this.modelMatrix);
-      this._modelBuffer.update(this._previousModelMatrix);
-    }
   }
   /** @inheritDoc */
   renderMesh(mesh) {
-    this.render(mesh.vertexBuffer, mesh.indexBuffer);
+    this.render(mesh.vertexBuffer, mesh.indexBuffer, mesh.indexCount ?? -1, mesh.indexStart ?? 0);
   }
   /** @inheritDoc */
-  render(vertexBuffer, indexBuffer) {
-    this._pipeline.render(vertexBuffer, indexBuffer);
+  render(vertexBuffer, indexBuffer, indicesCount, indicesOffset) {
+    if (!this._modelBuffer) {
+      throw new Error("InspectTextureMipsMaterial: no modelBuffer. Render it through a mesh (the mesh assigns its model buffer) or set material.modelBuffer.");
+    }
+    (this._pipeline ?? this._createPipeline(this._modelBuffer)).render(vertexBuffer, indexBuffer, indicesCount, indicesOffset);
   }
   /** @inheritDoc */
   dispose() {
-    this._pipeline.dispose();
+    this._pipeline?.dispose();
+    this._pipeline = void 0;
     this._projectionViewBuffer.dispose();
-    this._modelBuffer.dispose();
     this._fragmentDataBuffer.dispose();
   }
 }
 class UnlitMaterialDescriptor {
   /** The primitive state. */
   primitiveState;
-  /** The projection view buffer to use */
-  projectionViewBuffer;
+  /** The camera used to render this material. */
+  camera;
 }
 class UnlitMaterial {
   _framework;
   _color = Color.white();
   _materialData = [1, 1, 1, 1];
+  /** Created when the model buffer is assigned (the pipeline requires one). */
   _pipeline;
+  _primitiveState;
+  /** Texture and sampler set before the pipeline exists; applied when it is created. */
+  _pendingTexture;
+  _pendingSampler;
+  _samplerSet = false;
   _projectionViewBuffer;
   /** False when the projection view buffer came from the descriptor. The caller owns that one. */
   _ownsProjectionViewBuffer;
+  _camera;
   _materialBuffer;
   _modelBuffer;
-  _previousModelMatrix = mat4.create();
   /**
    * The constructor.
    * @param framework The framework.
@@ -3007,18 +3693,54 @@ class UnlitMaterial {
    */
   constructor(framework, config) {
     this._framework = framework;
-    void this._framework;
     const usage = BufferUsage.UNIFORM | BufferUsage.COPY_DST;
-    this._ownsProjectionViewBuffer = !config?.projectionViewBuffer;
-    this._projectionViewBuffer = config?.projectionViewBuffer ?? framework.bufferFactory.createUniformBuffer(this._previousModelMatrix, usage);
-    this._modelBuffer = framework.bufferFactory.createUniformBuffer(this._previousModelMatrix, usage);
+    this._camera = config?.camera;
+    this._ownsProjectionViewBuffer = !config?.camera?.projectionViewBuffer;
+    this._projectionViewBuffer = config?.camera?.projectionViewBuffer ?? framework.bufferFactory.createUniformBuffer(mat4.create(), usage);
     this._materialBuffer = framework.bufferFactory.createUniformBuffer(this._materialData, usage);
-    this._pipeline = framework.renderPipelineFactory.createUnlitRenderPipeline(
+    this._primitiveState = config?.primitiveState;
+  }
+  /** Creates the pipeline with the current bindings. */
+  _createPipeline(modelBuffer) {
+    const pipeline = this._framework.renderPipelineFactory.createUnlitRenderPipeline(
       this._projectionViewBuffer,
-      this._modelBuffer,
+      modelBuffer,
       this._materialBuffer,
-      config?.primitiveState
+      this._primitiveState
     );
+    if (this._pendingTexture) {
+      pipeline.diffuseTexture = this._pendingTexture;
+    }
+    if (this._samplerSet) {
+      pipeline.diffuseTextureSampler = this._pendingSampler;
+    }
+    this._pipeline = pipeline;
+    return pipeline;
+  }
+  /**
+   * The camera. Setting it binds the camera's projection view buffer to the pipeline
+   * (the material's own placeholder buffer is disposed). Setting undefined keeps the last bound buffer.
+   */
+  get camera() {
+    return this._camera;
+  }
+  /** @inheritDoc */
+  set camera(camera) {
+    if (camera === this._camera) {
+      return;
+    }
+    this._camera = camera;
+    if (!camera) {
+      return;
+    }
+    if (this._ownsProjectionViewBuffer) {
+      this._projectionViewBuffer.dispose();
+      this._ownsProjectionViewBuffer = false;
+    }
+    this._projectionViewBuffer = camera.projectionViewBuffer;
+    if (this._pipeline) {
+      this._pipeline.projectionViewBuffer = this._projectionViewBuffer;
+    }
   }
   /**
    * The diffuse color.
@@ -3028,30 +3750,55 @@ class UnlitMaterial {
    * The texture to inspect.
    */
   get diffuseTexture() {
-    return this._pipeline.diffuseTexture;
+    return this._pipeline?.diffuseTexture ?? this._pendingTexture;
   }
   /**
    * The texture to inspect.
    */
   set diffuseTexture(value) {
-    this._pipeline.diffuseTexture = value;
+    this._pendingTexture = value;
+    if (this._pipeline) {
+      this._pipeline.diffuseTexture = value;
+    }
   }
   /**
    * The texture sampler.
    */
   get diffuseTextureSampler() {
-    return this._pipeline.diffuseTextureSampler;
+    return this._pipeline ? this._pipeline.diffuseTextureSampler : this._pendingSampler;
   }
   /**
    * The texture sampler.
    */
   set diffuseTextureSampler(value) {
-    this._pipeline.diffuseTextureSampler = value;
+    this._pendingSampler = value;
+    this._samplerSet = true;
+    if (this._pipeline) {
+      this._pipeline.diffuseTextureSampler = value;
+    }
   }
   /**
-   * The model matrix.
+   * The model buffer (std140 `mat4`). Owned by the mesh, which assigns it before drawing; never disposed by this material.
+   * Undefined until assigned: rendering without one throws.
    */
-  modelMatrix = mat4.create();
+  get modelBuffer() {
+    return this._modelBuffer;
+  }
+  /** Binds the model buffer to the pipeline. */
+  set modelBuffer(value) {
+    if (value === this._modelBuffer) {
+      return;
+    }
+    this._modelBuffer = value;
+    if (!value) {
+      return;
+    }
+    if (this._pipeline) {
+      this._pipeline.modelBuffer = value;
+    } else {
+      this._createPipeline(value);
+    }
+  }
   /**
    * The geometry format.
    */
@@ -3066,26 +3813,321 @@ class UnlitMaterial {
       this._materialData[3] = this._color.a;
       this._materialBuffer.update(this._materialData);
     }
-    if (!mat4.equals(this._previousModelMatrix, this.modelMatrix)) {
-      mat4.copy(this._previousModelMatrix, this.modelMatrix);
-      this._modelBuffer.update(this._previousModelMatrix);
-    }
   }
   /** @inheritDoc */
   renderMesh(mesh) {
-    this.render(mesh.vertexBuffer, mesh.indexBuffer);
+    this.render(mesh.vertexBuffer, mesh.indexBuffer, mesh.indexCount ?? -1, mesh.indexStart ?? 0);
   }
   /** @inheritDoc */
-  render(vertexBuffer, indexBuffer) {
-    this._pipeline.render(vertexBuffer, indexBuffer);
+  render(vertexBuffer, indexBuffer, indicesCount, indicesOffset) {
+    if (!this._modelBuffer) {
+      throw new Error("UnlitMaterial: no modelBuffer. Render it through a mesh (the mesh assigns its model buffer) or set material.modelBuffer.");
+    }
+    (this._pipeline ?? this._createPipeline(this._modelBuffer)).render(vertexBuffer, indexBuffer, indicesCount, indicesOffset);
   }
   /** @inheritDoc */
   dispose() {
-    this._pipeline.dispose();
+    this._pipeline?.dispose();
+    this._pipeline = void 0;
     if (this._ownsProjectionViewBuffer) {
       this._projectionViewBuffer.dispose();
     }
-    this._modelBuffer.dispose();
+    this._materialBuffer.dispose();
+  }
+}
+class SpriteMaterial {
+  _renderPipeline;
+  /**
+   * The constructor.
+   * @param framework - The framework.
+   * @param descriptor - The sprite material descriptor.
+   */
+  constructor(framework, descriptor) {
+    this._renderPipeline = framework.renderPipelineFactory.createSpriteRenderPipeline(descriptor.projectionViewBuffer);
+    this._renderPipeline.textureSampler = descriptor.sampler;
+    this._renderPipeline.spriteTexture = descriptor.texture;
+  }
+  /** @inheritDoc */
+  get geometryFormat() {
+    return this._renderPipeline.geometryFormat;
+  }
+  /** The sprite texture. */
+  get texture() {
+    return this._renderPipeline.spriteTexture;
+  }
+  /** The sprite texture. */
+  set texture(value) {
+    this._renderPipeline.spriteTexture = value;
+  }
+  /** @inheritDoc */
+  beforeRender() {
+  }
+  /** @inheritDoc */
+  renderMesh(mesh) {
+    this.render(mesh.vertexBuffer, mesh.indexBuffer, mesh.indexCount ?? -1, mesh.indexStart ?? 0);
+  }
+  /**
+   * Renders the material.
+   * @param vertexBuffer - The vertex buffer.
+   * @param indexBuffer - The index buffer.
+   * @param indicesCount - The number of indices to draw. If -1 draws all indices.
+   * @param indicesOffset - Indices offset. Defaults to 0.
+   */
+  render(vertexBuffer, indexBuffer, indicesCount, indicesOffset) {
+    this._renderPipeline.render(vertexBuffer, indexBuffer, indicesCount, indicesOffset);
+  }
+  /** @inheritDoc */
+  dispose() {
+    this._renderPipeline.dispose();
+  }
+}
+class ForwardBlinnPhongMaterialDescriptor {
+  /** The primitive state. */
+  primitiveState;
+  /** The projection view buffer. */
+  projectionViewBuffer;
+  /** The camera position buffer. */
+  cameraPositionBuffer;
+  /** The lights buffer. The shader is compiled for its light counts. Can also be set later through `material.lightsBuffer`. */
+  lightsBuffer;
+}
+class ForwardBlinnPhongMaterial {
+  _framework;
+  _lightsBuffer;
+  _diffuseColorCache;
+  _ambientColorCache;
+  _specularColorCache;
+  _shininessCache;
+  // std140: each vec3 starts on a 16-byte boundary, so pad each colour to 4 floats.
+  _materialData = [
+    0.1,
+    0.1,
+    0.1,
+    0,
+    // Ambient
+    0.8,
+    0.8,
+    0.8,
+    0,
+    // Diffuse
+    0.5,
+    0.5,
+    0.5,
+    32
+    // Specular, shininess (the float fills the vec3's padding)
+  ];
+  /** Created when the model buffer is assigned (the pipeline requires one). */
+  _pipeline;
+  _primitiveState;
+  /** Texture and sampler set before the pipeline exists; applied when it is created. */
+  _pendingTexture;
+  _pendingSampler;
+  _samplerSet = false;
+  _projectionViewBuffer;
+  _camera;
+  _cameraPositionBuffer;
+  _materialBuffer;
+  _modelBuffer;
+  /**
+   * The constructor.
+   * @param framework The framework.
+   * @param descriptor The material descriptor. Its projection view and camera position buffers are shared and are not disposed by this material.
+   * @throws Error when `descriptor`, `descriptor.projectionViewBuffer` or `descriptor.cameraPositionBuffer` is missing.
+   */
+  constructor(framework, descriptor) {
+    const missing = [
+      descriptor?.projectionViewBuffer ? void 0 : "descriptor.projectionViewBuffer",
+      descriptor?.cameraPositionBuffer ? void 0 : "descriptor.cameraPositionBuffer"
+    ].filter((x2) => x2 !== void 0);
+    if (missing.length > 0) {
+      throw new Error(`ForwardBlinnPhongMaterial: ${missing.join(" and ")} ${missing.length > 1 ? "are" : "is"} required (e.g. camera.projectionViewBuffer and camera.positionBuffer).`);
+    }
+    this._framework = framework;
+    const usage = BufferUsage.UNIFORM | BufferUsage.COPY_DST;
+    this._diffuseColorCache = this.diffuseColor.copy();
+    this._ambientColorCache = this.ambientColor.copy();
+    this._specularColorCache = this.specularColor.copy();
+    this._shininessCache = this.shininess;
+    this._projectionViewBuffer = descriptor.projectionViewBuffer;
+    this._cameraPositionBuffer = descriptor.cameraPositionBuffer;
+    this._materialBuffer = framework.bufferFactory.createUniformBuffer(this._materialData, usage);
+    this._primitiveState = descriptor.primitiveState;
+    this._lightsBuffer = descriptor.lightsBuffer;
+  }
+  /** Creates the pipeline with the current bindings. */
+  _createPipeline(modelBuffer) {
+    const pipeline = this._framework.renderPipelineFactory.createForwardBlinnPhongRenderPipeline({
+      projectionViewBuffer: this._projectionViewBuffer,
+      modelBuffer,
+      materialBuffer: this._materialBuffer,
+      cameraPositionBuffer: this._cameraPositionBuffer,
+      lightsBuffer: this._lightsBuffer?.buffer,
+      maxDirectionalLights: this._lightsBuffer?.maxDirectionalLights,
+      maxPointLights: this._lightsBuffer?.maxPointLights,
+      primitiveState: this._primitiveState
+    });
+    if (this._pendingTexture) {
+      pipeline.diffuseTexture = this._pendingTexture;
+    }
+    if (this._samplerSet) {
+      pipeline.diffuseTextureSampler = this._pendingSampler;
+    }
+    this._pipeline = pipeline;
+    return pipeline;
+  }
+  /**
+   * The ambient color of this material.
+   * Alpha is ignored. By default, it is (0.1,0.1,0.1).
+   */
+  ambientColor = new Color(0.1, 0.1, 0.1);
+  /**
+   * The diffuse color of this material.
+   * Alpha is ignored. By default, it is (0.8,0.8,0.8).
+   */
+  diffuseColor = new Color(0.8, 0.8, 0.8);
+  /**
+   * The specular color of this material (MTL `Ks`).
+   * Alpha is ignored. By default, it is (0.5,0.5,0.5).
+   */
+  specularColor = new Color(0.5, 0.5, 0.5);
+  /**
+   * The specular exponent (MTL `Ns`). Higher values give smaller, sharper highlights. By default, it is 32.
+   */
+  shininess = 32;
+  /**
+   * The camera. Setting it binds the camera's projection view and position buffers to the pipeline
+   * (used by the scene when its camera changes). Setting undefined keeps the last bound buffers.
+   * Undefined until set: the constructor only takes the buffers.
+   */
+  get camera() {
+    return this._camera;
+  }
+  /** @inheritDoc */
+  set camera(camera) {
+    if (camera === this._camera) {
+      return;
+    }
+    this._camera = camera;
+    if (!camera) {
+      return;
+    }
+    if (this._projectionViewBuffer !== camera.projectionViewBuffer) {
+      this._projectionViewBuffer = camera.projectionViewBuffer;
+      if (this._pipeline) {
+        this._pipeline.projectionViewBuffer = this._projectionViewBuffer;
+      }
+    }
+    if (this._cameraPositionBuffer !== camera.positionBuffer) {
+      this._cameraPositionBuffer = camera.positionBuffer;
+      if (this._pipeline) {
+        this._pipeline.cameraPositionBuffer = this._cameraPositionBuffer;
+      }
+    }
+  }
+  /** The lights buffer with the scene's lights. Shared, not disposed by this material. */
+  get lightsBuffer() {
+    return this._lightsBuffer;
+  }
+  /** The lights buffer with the scene's lights. Shared, not disposed by this material. */
+  set lightsBuffer(lightsBuffer) {
+    this._lightsBuffer = lightsBuffer;
+    if (lightsBuffer && this._pipeline) {
+      this._pipeline.setLightCounts(lightsBuffer.maxDirectionalLights, lightsBuffer.maxPointLights);
+      this._pipeline.lightsBuffer = lightsBuffer.buffer;
+    }
+  }
+  /**
+   * The texture to inspect.
+   */
+  get diffuseTexture() {
+    return this._pipeline?.diffuseTexture ?? this._pendingTexture;
+  }
+  /**
+   * The texture to inspect.
+   */
+  set diffuseTexture(value) {
+    this._pendingTexture = value;
+    if (this._pipeline) {
+      this._pipeline.diffuseTexture = value;
+    }
+  }
+  /**
+   * The texture sampler.
+   */
+  get diffuseTextureSampler() {
+    return this._pipeline ? this._pipeline.diffuseTextureSampler : this._pendingSampler;
+  }
+  /**
+   * The texture sampler.
+   */
+  set diffuseTextureSampler(value) {
+    this._pendingSampler = value;
+    this._samplerSet = true;
+    if (this._pipeline) {
+      this._pipeline.diffuseTextureSampler = value;
+    }
+  }
+  /**
+   * The model buffer (std140 `mat4`). Owned by the mesh, which assigns it before drawing; never disposed by this material.
+   * Undefined until assigned: rendering without one throws.
+   */
+  get modelBuffer() {
+    return this._modelBuffer;
+  }
+  /** Binds the model buffer to the pipeline. */
+  set modelBuffer(value) {
+    if (value === this._modelBuffer) {
+      return;
+    }
+    this._modelBuffer = value;
+    if (!value) {
+      return;
+    }
+    if (this._pipeline) {
+      this._pipeline.modelBuffer = value;
+    } else {
+      this._createPipeline(value);
+    }
+  }
+  /**
+   * The geometry format.
+   */
+  geometryFormat = GeometryFormat.POS3_COLOR4_TEXTURECOORDS2_NORMAL3;
+  /** @inheritDoc */
+  beforeRender() {
+    if (!this._diffuseColorCache.equals(this.diffuseColor) || !this._ambientColorCache.equals(this.ambientColor) || !this._specularColorCache.equals(this.specularColor) || this._shininessCache !== this.shininess) {
+      this._ambientColorCache.set(this.ambientColor);
+      this._diffuseColorCache.set(this.diffuseColor);
+      this._specularColorCache.set(this.specularColor);
+      this._shininessCache = this.shininess;
+      this._materialData[0] = this._ambientColorCache.r;
+      this._materialData[1] = this._ambientColorCache.g;
+      this._materialData[2] = this._ambientColorCache.b;
+      this._materialData[4] = this._diffuseColorCache.r;
+      this._materialData[5] = this._diffuseColorCache.g;
+      this._materialData[6] = this._diffuseColorCache.b;
+      this._materialData[8] = this._specularColorCache.r;
+      this._materialData[9] = this._specularColorCache.g;
+      this._materialData[10] = this._specularColorCache.b;
+      this._materialData[11] = this._shininessCache;
+      this._materialBuffer.update(this._materialData);
+    }
+  }
+  /** @inheritDoc */
+  renderMesh(mesh) {
+    this.render(mesh.vertexBuffer, mesh.indexBuffer, mesh.indexCount ?? -1, mesh.indexStart ?? 0);
+  }
+  /** @inheritDoc */
+  render(vertexBuffer, indexBuffer, indicesCount, indicesOffset) {
+    if (!this._modelBuffer) {
+      throw new Error("ForwardBlinnPhongMaterial: no modelBuffer. Render it through a mesh (the mesh assigns its model buffer) or set material.modelBuffer.");
+    }
+    (this._pipeline ?? this._createPipeline(this._modelBuffer)).render(vertexBuffer, indexBuffer, indicesCount, indicesOffset);
+  }
+  /** @inheritDoc */
+  dispose() {
+    this._pipeline?.dispose();
+    this._pipeline = void 0;
     this._materialBuffer.dispose();
   }
 }
@@ -3106,6 +4148,318 @@ class MaterialFactory {
   createUnlitMaterial(descriptor) {
     return new UnlitMaterial(this._framework, descriptor);
   }
+  /** @inheritDoc */
+  createSpriteMaterial(descriptor) {
+    return new SpriteMaterial(this._framework, descriptor);
+  }
+  /** @inheritDoc */
+  createForwardBlinnPhongMaterial(descriptor) {
+    return new ForwardBlinnPhongMaterial(this._framework, descriptor);
+  }
+}
+let nextLightId = 1;
+function createLightId() {
+  return nextLightId++;
+}
+class AmbientLight {
+  /**
+   * The constructor.
+   * @param descriptor The optional descriptor. The colour is copied.
+   * @param scene The optional scene to register with.
+   */
+  constructor(descriptor, scene) {
+    this.id = descriptor?.id ?? createLightId();
+    this.name = descriptor?.name;
+    this.color = descriptor?.color?.copy() ?? Color.black();
+    this.intensity = descriptor?.intensity ?? 1;
+    scene?.add(this);
+  }
+  /** The unique id of this light. */
+  id;
+  /** The optional name for a light. */
+  name;
+  /** The light color. Alpha is ignored. */
+  color;
+  /** Multiplies {@link color} when written to the lights buffer. */
+  intensity;
+}
+class DirectionalLight {
+  /**
+   * The constructor.
+   * @param descriptor The optional descriptor. Colour and direction are copied.
+   * @param scene The optional scene; the light adds itself via {@link Scene.add}.
+   * @throws Error when the scene has no free directional light slot left (the light is then not in the scene).
+   */
+  constructor(descriptor, scene) {
+    this.id = descriptor?.id ?? createLightId();
+    this.name = descriptor?.name;
+    this.color = descriptor?.color?.copy() ?? Color.white();
+    this.intensity = descriptor?.intensity ?? 1;
+    this.direction = descriptor?.direction ? vec3.clone(descriptor.direction) : vec3.fromValues(0, -1, 0);
+    scene?.add(this);
+  }
+  /** The unique id of this light. */
+  id;
+  /** The optional name for a light. */
+  name;
+  /** The light colour. Alpha is ignored. */
+  color;
+  /** Multiplies {@link color} when written to the lights buffer. */
+  intensity;
+  /** The direction in which the light travels. */
+  direction;
+}
+class PointLight {
+  /** The default constant attenuation. */
+  static DEFAULT_CONSTANT = 1;
+  /** The default linear attenuation. */
+  static DEFAULT_LINEAR = 0.09;
+  /** The default quadratic attenuation. */
+  static DEFAULT_QUADRATIC = 0.032;
+  /**
+   * The constructor.
+   * @param descriptor The optional descriptor. Colour and position are copied.
+   * @param scene The optional scene; the light adds itself via {@link Scene.add}.
+   * @throws Error when the scene has no free point light slot left (the light is then not in the scene).
+   */
+  constructor(descriptor, scene) {
+    this.id = descriptor?.id ?? createLightId();
+    this.name = descriptor?.name;
+    this.color = descriptor?.color?.copy() ?? Color.white();
+    this.intensity = descriptor?.intensity ?? 1;
+    this.position = descriptor?.position ? vec3.clone(descriptor.position) : vec3.create();
+    this.constant = descriptor?.constant ?? PointLight.DEFAULT_CONSTANT;
+    this.linear = descriptor?.linear ?? PointLight.DEFAULT_LINEAR;
+    this.quadratic = descriptor?.quadratic ?? PointLight.DEFAULT_QUADRATIC;
+    scene?.add(this);
+  }
+  /** The unique id of this light. */
+  id;
+  /** The optional name for a light. */
+  name;
+  /** The light colour. Alpha is ignored. */
+  color;
+  /** Multiplies {@link color} when written to the lights buffer. */
+  intensity;
+  /** World-space position of the light. */
+  position;
+  /** Constant attenuation term. */
+  constant;
+  /** Linear attenuation term. */
+  linear;
+  /** Quadratic attenuation term. */
+  quadratic;
+}
+const DEFAULT_DIRECTIONAL_LIGHTS_COUNT = 3;
+const DEFAULT_POINT_LIGHTS_COUNT = 3;
+class Scene {
+  _meshes = [];
+  _activeAmbientLight;
+  _disposed = false;
+  _activeCamera;
+  /**
+   * The camera the scene renders with; undefined until one is set or added.
+   * Setting it assigns it to the materials of every mesh (and submesh) whose camera differs;
+   * {@link update} also assigns it to meshes and submeshes added later.
+   */
+  get camera() {
+    return this._activeCamera;
+  }
+  set camera(value) {
+    this._activeCamera = value;
+    if (!value) {
+      return;
+    }
+    for (const mesh of this._meshes) {
+      Scene._assignCameraToMesh(mesh, value);
+    }
+  }
+  /** The ambient lights registered with this scene. */
+  ambientLights = [];
+  /**
+   * The constructor.
+   * @param framework The framework.
+   */
+  constructor(framework) {
+    this._activeAmbientLight = framework.lightsFactory.createAmbientLight(void 0, this);
+    this.__forwardLightsBuffer = framework.lightsFactory.__createLightsBuffer({
+      ambientLight: this._activeAmbientLight,
+      maxDirectionalLights: 3,
+      maxPointLights: 5
+    });
+  }
+  /**
+   * The lights buffer used for forward shading.
+   * @internal
+   */
+  __forwardLightsBuffer;
+  /** The meshes in this scene, in the order they were added. */
+  get meshes() {
+    return this._meshes;
+  }
+  /** The directional lights in this scene. */
+  get directionalLights() {
+    return this.__forwardLightsBuffer.directionalLights;
+  }
+  /** The point lights in this scene. */
+  get pointLights() {
+    return this.__forwardLightsBuffer.pointLights;
+  }
+  /**
+   * Gets the active ambient light.
+   */
+  get activeAmbientLight() {
+    return this._activeAmbientLight;
+  }
+  /** Sets the active ambient light; it is added to {@link ambientLights} if needed. */
+  set activeAmbientLight(value) {
+    this._addAmbientLight(value);
+    this._activeAmbientLight = value;
+    this.__forwardLightsBuffer.ambientLight = value;
+  }
+  /**
+   * Adds a mesh, a light or a camera. Adding an item that is already in the scene does nothing.
+   * - Mesh: drawn by {@link render}; gets the scene camera.
+   * - Ambient light: added to {@link ambientLights} (use {@link activeAmbientLight} to make it the lit one).
+   * - Directional / point light: added to the lights buffer.
+   * - Camera: becomes the scene {@link camera}.
+   * Constructors given a scene (meshes, lights, the perspective camera) call this themselves.
+   * @param item The item to add.
+   * @throws Error when all slots for a light kind are in use (3 directional, 5 point), or for an unsupported item.
+   */
+  add(item) {
+    if (item instanceof AmbientLight) {
+      this._addAmbientLight(item);
+    } else if (item instanceof DirectionalLight || item instanceof PointLight) {
+      this.__forwardLightsBuffer.add(item);
+    } else if (Scene._isCamera(item)) {
+      this.camera = item;
+    } else if (Scene._isMesh(item)) {
+      if (!this._meshes.includes(item)) {
+        this._meshes.push(item);
+        if (this._activeCamera) {
+          Scene._assignCameraToMesh(item, this._activeCamera);
+        }
+      }
+    } else {
+      throw new Error("Scene.add: expected a mesh, an AmbientLight, DirectionalLight, PointLight or a camera.");
+    }
+  }
+  /**
+   * Removes a mesh, a light or a camera. The mesh is not disposed.
+   * Removing the active camera clears {@link camera}.
+   * @param item The item to remove.
+   * @returns True when the item was in the scene (for a camera: was the active camera).
+   * @throws Error when removing the active ambient light (set another {@link activeAmbientLight} first), or for an unsupported item.
+   */
+  remove(item) {
+    if (item instanceof AmbientLight) {
+      if (item === this._activeAmbientLight) {
+        throw new Error("Scene.remove: cannot remove the active ambient light; set scene.activeAmbientLight to another light first.");
+      }
+      return Scene._removeFrom(this.ambientLights, item);
+    }
+    if (item instanceof DirectionalLight || item instanceof PointLight) {
+      return this.__forwardLightsBuffer.remove(item);
+    }
+    if (Scene._isCamera(item)) {
+      if (item !== this._activeCamera) {
+        return false;
+      }
+      this._activeCamera = void 0;
+      return true;
+    }
+    if (Scene._isMesh(item)) {
+      return Scene._removeFrom(this._meshes, item);
+    }
+    throw new Error("Scene.remove: expected a mesh, an AmbientLight, DirectionalLight, PointLight or a camera.");
+  }
+  /**
+   * Adds a directional or point light.
+   * @deprecated Use {@link add}.
+   * @throws Error when all slots for that kind are in use (3 directional, 5 point).
+   */
+  addLight(light) {
+    this.add(light);
+  }
+  /**
+   * Removes a directional or point light.
+   * @deprecated Use {@link remove}.
+   * @returns True when the light was in the scene.
+   */
+  removeLight(light) {
+    return this.remove(light);
+  }
+  _addAmbientLight(ambientLight) {
+    if (!this.ambientLights.includes(ambientLight)) {
+      this.ambientLights.push(ambientLight);
+    }
+  }
+  static _removeFrom(list, item) {
+    const index = list.indexOf(item);
+    if (index < 0) {
+      return false;
+    }
+    list.splice(index, 1);
+    return true;
+  }
+  /** Cameras have the camera buffers and updateBuffers(); meshes and lights do not. */
+  static _isCamera(item) {
+    const camera = item;
+    return typeof camera === "object" && camera !== null && "projectionViewBuffer" in camera && "viewMatrix" in camera && typeof camera.updateBuffers === "function";
+  }
+  /** Meshes have render() and a material slot or submeshes. */
+  static _isMesh(item) {
+    const mesh = item;
+    return typeof mesh === "object" && mesh !== null && typeof mesh.render === "function" && ("material" in mesh || "subMeshes" in mesh);
+  }
+  /**
+   * Updates the scene: assigns {@link camera} to the mesh materials that don't have it yet, and uploads changed lights.
+   * @param _time The game time.
+   * @public
+   */
+  update(_time) {
+    if (this._activeCamera) {
+      for (const mesh of this._meshes) {
+        Scene._assignCameraToMesh(mesh, this._activeCamera);
+      }
+    }
+    this.__forwardLightsBuffer.update();
+  }
+  static _assignCameraToMesh(mesh, camera) {
+    Scene._assignCamera(mesh.material, camera);
+    for (const subMesh of mesh.subMeshes ?? []) {
+      Scene._assignCamera(subMesh.material, camera);
+    }
+  }
+  static _assignCamera(material, camera) {
+    if (!camera.projectionViewBuffer || !camera.positionBuffer) {
+      return;
+    }
+    if (material && "camera" in material && material.camera !== camera) {
+      material.camera = camera;
+    }
+  }
+  /**
+   * Renders the meshes.
+   */
+  render() {
+    for (const mesh of this._meshes) {
+      mesh.render();
+    }
+  }
+  /** Disposes the meshes still in the scene and the lights buffer. Calling it twice does nothing. */
+  dispose() {
+    if (this._disposed) {
+      return;
+    }
+    this._disposed = true;
+    for (const mesh of this._meshes.slice()) {
+      mesh.dispose();
+    }
+    this._meshes.length = 0;
+    this.__forwardLightsBuffer.dispose();
+  }
 }
 var Key = /* @__PURE__ */ ((Key2) => {
   Key2[Key2["NONE"] = 0] = "NONE";
@@ -3380,16 +4734,195 @@ class CpuImageProcessor {
     return promise;
   }
 }
+class WebGlLightsBuffer {
+  /** Floats for the ambient light: vec3 padded to 16 bytes. */
+  static AMBIENT_FLOAT_COUNT = 4;
+  /** Floats per directional light: two vec3, each padded to 16 bytes. */
+  static DIRECTIONAL_LIGHT_FLOAT_COUNT = 8;
+  /** Floats per point light: vec3 light + float constant, vec3 position + float linear, float quadratic, padded to 48 bytes. */
+  static POINT_LIGHT_FLOAT_COUNT = 12;
+  _ambientLight;
+  _buffer;
+  _data;
+  _uploaded;
+  _directionalLights = [];
+  _pointLights = [];
+  _disposed = false;
+  /**
+   * The constructor.
+   * @param framework The framework, used to create the uniform buffer.
+   * @param descriptor The optional initial lights and directional light count.
+   */
+  constructor(framework, descriptor) {
+    this.ambientLight = descriptor?.ambientLight ?? new AmbientLight();
+    this.maxDirectionalLights = descriptor?.maxDirectionalLights ?? DEFAULT_DIRECTIONAL_LIGHTS_COUNT;
+    this.maxPointLights = descriptor?.maxPointLights ?? DEFAULT_POINT_LIGHTS_COUNT;
+    for (const light of descriptor?.directionalLights ?? []) {
+      this.add(light);
+    }
+    for (const light of descriptor?.pointLights ?? []) {
+      this.add(light);
+    }
+    const floatCount = WebGlLightsBuffer.AMBIENT_FLOAT_COUNT + this.maxDirectionalLights * WebGlLightsBuffer.DIRECTIONAL_LIGHT_FLOAT_COUNT + this.maxPointLights * WebGlLightsBuffer.POINT_LIGHT_FLOAT_COUNT;
+    this._data = new Array(floatCount).fill(0);
+    this._writeData();
+    this._uploaded = [...this._data];
+    this._buffer = framework.bufferFactory.createUniformBuffer(this._data, BufferUsage.UNIFORM | BufferUsage.COPY_DST);
+  }
+  /** @inheritDoc */
+  get ambientLight() {
+    return this._ambientLight;
+  }
+  /** @inheritDoc */
+  set ambientLight(ambientLight) {
+    this._ambientLight = ambientLight;
+  }
+  /** @inheritDoc */
+  get directionalLights() {
+    return this._directionalLights;
+  }
+  /** @inheritDoc */
+  maxDirectionalLights;
+  /** @inheritDoc */
+  get pointLights() {
+    return this._pointLights;
+  }
+  /** @inheritDoc */
+  add(light) {
+    const [list, max, kind] = this._listFor(light);
+    if (list.includes(light)) {
+      return;
+    }
+    if (list.length >= max) {
+      throw new Error(`LightsBuffer: cannot add ${kind} light ${light.id}; all ${max} ${kind} light slots are in use (max${kind === "directional" ? "Directional" : "Point"}Lights = ${max}).`);
+    }
+    list.push(light);
+  }
+  /** @inheritDoc */
+  remove(light) {
+    const [list] = this._listFor(light);
+    const index = list.indexOf(light);
+    if (index < 0) {
+      return false;
+    }
+    list.splice(index, 1);
+    return true;
+  }
+  /** @inheritDoc */
+  maxPointLights;
+  /** @inheritDoc */
+  get buffer() {
+    return this._buffer;
+  }
+  /** @inheritDoc */
+  update() {
+    this._writeData();
+    if (!this._hasChanged()) {
+      return;
+    }
+    this._buffer.update(this._data);
+    for (let i2 = 0; i2 < this._data.length; i2++) {
+      this._uploaded[i2] = this._data[i2];
+    }
+  }
+  /** @inheritDoc */
+  dispose() {
+    if (this._disposed) {
+      return;
+    }
+    this._disposed = true;
+    this._buffer.dispose();
+  }
+  _writeAmbientLight() {
+    this._writeColor(0, this.ambientLight.color, this.ambientLight.intensity);
+    this._data[3] = 0;
+  }
+  _listFor(light) {
+    if (light instanceof DirectionalLight) {
+      return [this._directionalLights, this.maxDirectionalLights, "directional"];
+    }
+    if (light instanceof PointLight) {
+      return [this._pointLights, this.maxPointLights, "point"];
+    }
+    throw new Error("LightsBuffer: expected a DirectionalLight or PointLight instance.");
+  }
+  /** Writes color * intensity as vec3 at offset (the fourth float is left to the caller). */
+  _writeColor(offset, color, intensity) {
+    this._data[offset] = color ? color.r * intensity : 0;
+    this._data[offset + 1] = color ? color.g * intensity : 0;
+    this._data[offset + 2] = color ? color.b * intensity : 0;
+  }
+  _hasChanged() {
+    for (let i2 = 0; i2 < this._data.length; i2++) {
+      if (this._data[i2] !== this._uploaded[i2]) {
+        return true;
+      }
+    }
+    return false;
+  }
+  _writeData() {
+    this._writeAmbientLight();
+    for (let i2 = 0; i2 < this.maxDirectionalLights; i2++) {
+      const offset = WebGlLightsBuffer.AMBIENT_FLOAT_COUNT + i2 * WebGlLightsBuffer.DIRECTIONAL_LIGHT_FLOAT_COUNT;
+      const light = this._directionalLights[i2];
+      this._writeColor(offset, light?.color, light?.intensity ?? 0);
+      this._data[offset + 3] = 0;
+      this._data[offset + 4] = light ? light.direction[0] : 0;
+      this._data[offset + 5] = light ? light.direction[1] : 0;
+      this._data[offset + 6] = light ? light.direction[2] : 0;
+      this._data[offset + 7] = 0;
+    }
+    const pointLightsStart = WebGlLightsBuffer.AMBIENT_FLOAT_COUNT + this.maxDirectionalLights * WebGlLightsBuffer.DIRECTIONAL_LIGHT_FLOAT_COUNT;
+    for (let i2 = 0; i2 < this.maxPointLights; i2++) {
+      const offset = pointLightsStart + i2 * WebGlLightsBuffer.POINT_LIGHT_FLOAT_COUNT;
+      const light = this._pointLights[i2];
+      this._writeColor(offset, light?.color, light?.intensity ?? 0);
+      this._data[offset + 3] = light ? light.constant : 1;
+      this._data[offset + 4] = light ? light.position[0] : 0;
+      this._data[offset + 5] = light ? light.position[1] : 0;
+      this._data[offset + 6] = light ? light.position[2] : 0;
+      this._data[offset + 7] = light ? light.linear : 0;
+      this._data[offset + 8] = light ? light.quadratic : 0;
+      this._data[offset + 9] = 0;
+      this._data[offset + 10] = 0;
+      this._data[offset + 11] = 0;
+    }
+  }
+}
+class WebGlAmbientLightFactory {
+  /**
+   * The constructor.
+   * @param _framework The framework.
+   */
+  constructor(_framework) {
+    this._framework = _framework;
+  }
+  _framework;
+  /** The colour used when no descriptor is given. */
+  static DEFAULT_COLOR = new Color(0.1, 0.1, 0.1);
+  /** @inheritDoc */
+  createAmbientLight(desc, scene) {
+    return new AmbientLight({ ...desc, color: desc?.color ?? WebGlAmbientLightFactory.DEFAULT_COLOR }, scene);
+  }
+  /** @inheritDoc */
+  __createLightsBuffer(desc) {
+    return new WebGlLightsBuffer(this._framework, desc);
+  }
+}
 class WindowManager {
   _canvas;
   _updateCallbacks = [];
   _renderCallbacks = [];
+  _ownsCanvas;
+  _animationFrame = null;
+  _disposed = false;
   /**
    * The constructor for the WindowManager class.
    * @param canvas An optional HTMLCanvasElement to associate with the window manager. If `null`, the window manager creates its own canvas and appends it to `document.body`.
    */
   constructor(canvas = null) {
     this._canvas = canvas ?? document.createElement("canvas");
+    this._ownsCanvas = !canvas;
     if (!canvas) {
       document.body.appendChild(this._canvas);
     }
@@ -3427,18 +4960,34 @@ class WindowManager {
   initializeForWebGl() {
     throw new Error("Method not implemented.");
   }
+  /** Stops the event loop, drops all callbacks and removes the canvas when this manager created it. */
   dispose() {
-    throw new Error("Method not implemented.");
+    if (this._disposed) {
+      return;
+    }
+    this._disposed = true;
+    if (this._animationFrame !== null) {
+      cancelAnimationFrame(this._animationFrame);
+      this._animationFrame = null;
+    }
+    this._updateCallbacks.length = 0;
+    this._renderCallbacks.length = 0;
+    if (this._ownsCanvas) {
+      this._canvas.remove();
+    }
   }
   /** @inheritdoc */
   runEventLoop() {
+    if (this._disposed) {
+      return;
+    }
     for (const callback of this._updateCallbacks) {
       callback();
     }
     for (const callback of this._renderCallbacks) {
       callback();
     }
-    requestAnimationFrame(() => this.runEventLoop());
+    this._animationFrame = requestAnimationFrame(() => this.runEventLoop());
   }
   /** @inheritdoc */
   get canvas() {
@@ -3465,123 +5014,6 @@ class FrameworkConfiguration {
   /** @inheritDoc */
   powerPreference = PowerPreferenceType.DEFAULT;
 }
-const RenderConfigurationSymbol = /* @__PURE__ */ Symbol("RenderConfiguration");
-class BaseGeometry {
-  /** @inheritdoc */
-  vertexCount = 0;
-  /** @inheritdoc */
-  positions;
-  /** @inheritdoc */
-  positionsFormat = VertexFormat.FLOAT_32X3;
-  /** @inheritdoc */
-  colors;
-  /** @inheritdoc */
-  colorFormat = VertexFormat.FLOAT_32X4;
-  /** @inheritdoc */
-  textureCoords;
-  /** @inheritdoc */
-  textureFormat = VertexFormat.FLOAT_32X2;
-  /** @inheritdoc */
-  normals;
-  /** @inheritdoc */
-  normalsFormat = VertexFormat.FLOAT_32X3;
-  /** The indices of geometry. */
-  indices;
-  /**
-   * Pushes vertex data from source format to destination format.
-   * @param index The index of the vertex to push.
-   * @param source The source vertex data.
-   * @param sourceFormat The vertex format of the source vertex data.
-   * @param destination The destination array to push the vertex data to.
-   * @param destinationFormat The vertex format of the destination vertex data.
-   */
-  pushFormat(index, source, sourceFormat, destination, destinationFormat) {
-    let _0 = 0;
-    let _1 = 0;
-    let _2 = 0;
-    let _3 = 0;
-    if (sourceFormat == VertexFormat.FLOAT_32) {
-      _0 = source[index];
-    } else if (sourceFormat == VertexFormat.FLOAT_32X2) {
-      _0 = source[index * 2];
-      _1 = source[index * 2 + 1];
-    } else if (sourceFormat == VertexFormat.FLOAT_32X3) {
-      _0 = source[index * 3];
-      _1 = source[index * 3 + 1];
-      _2 = source[index * 3 + 2];
-    } else if (sourceFormat == VertexFormat.FLOAT_32X4) {
-      _0 = source[index * 4];
-      _1 = source[index * 4 + 1];
-      _2 = source[index * 4 + 2];
-      _3 = source[index * 4 + 3];
-    }
-    destination.push(_0);
-    if (destinationFormat >= VertexFormat.FLOAT_32X2) {
-      destination.push(_1);
-    }
-    if (destinationFormat >= VertexFormat.FLOAT_32X3) {
-      destination.push(_2);
-    }
-    if (destinationFormat >= VertexFormat.FLOAT_32X4) {
-      destination.push(_3);
-    }
-  }
-  /**
-   * Converts the geometry data to interleaved vertex data based on the specified geometry format.
-   * @param format The geometry format to convert the geometry data to.
-   * @returns The interleaved vertex data as an array of numbers.
-   */
-  toInterleaved(format) {
-    let interleavedData = [];
-    switch (format) {
-      case GeometryFormat.POS3_COLOR4: {
-        let count = this.positions.length / 3;
-        for (let i2 = 0; i2 < count; i2++) {
-          this.pushFormat(i2, this.positions, VertexFormat.FLOAT_32X3, interleavedData, VertexFormat.FLOAT_32X3);
-          this.pushFormat(i2, this.colors, VertexFormat.FLOAT_32X4, interleavedData, VertexFormat.FLOAT_32X4);
-        }
-        break;
-      }
-      case GeometryFormat.POS3_TEXTURECOORDS2: {
-        let count = this.positions.length / 3;
-        for (let i2 = 0; i2 < count; i2++) {
-          this.pushFormat(i2, this.positions, VertexFormat.FLOAT_32X3, interleavedData, VertexFormat.FLOAT_32X3);
-          this.pushFormat(i2, this.textureCoords, VertexFormat.FLOAT_32X2, interleavedData, VertexFormat.FLOAT_32X2);
-        }
-        break;
-      }
-      case GeometryFormat.POS3_COLOR4_TEXTURECOORDS2: {
-        let count = this.positions.length / 3;
-        for (let i2 = 0; i2 < count; i2++) {
-          this.pushFormat(i2, this.positions, VertexFormat.FLOAT_32X3, interleavedData, VertexFormat.FLOAT_32X3);
-          this.pushFormat(i2, this.colors, VertexFormat.FLOAT_32X4, interleavedData, VertexFormat.FLOAT_32X4);
-          this.pushFormat(i2, this.textureCoords, VertexFormat.FLOAT_32X2, interleavedData, VertexFormat.FLOAT_32X2);
-        }
-        break;
-      }
-      case GeometryFormat.POS3_COLOR4_TEXTURECOORDS2_NORMAL3: {
-        let count = this.positions.length / 3;
-        for (let i2 = 0; i2 < count; i2++) {
-          this.pushFormat(i2, this.positions, VertexFormat.FLOAT_32X3, interleavedData, VertexFormat.FLOAT_32X3);
-          this.pushFormat(i2, this.colors, VertexFormat.FLOAT_32X4, interleavedData, VertexFormat.FLOAT_32X4);
-          this.pushFormat(i2, this.textureCoords, VertexFormat.FLOAT_32X2, interleavedData, VertexFormat.FLOAT_32X2);
-          this.pushFormat(i2, this.normals, VertexFormat.FLOAT_32X3, interleavedData, VertexFormat.FLOAT_32X3);
-        }
-        break;
-      }
-      case GeometryFormat.POS3_COLOR4_TEXTURECOORDS2_ALIGNED: {
-        let count = this.positions.length / 3;
-        for (let i2 = 0; i2 < count; i2++) {
-          this.pushFormat(i2, this.positions, VertexFormat.FLOAT_32X3, interleavedData, VertexFormat.FLOAT_32X4);
-          this.pushFormat(i2, this.colors, VertexFormat.FLOAT_32X4, interleavedData, VertexFormat.FLOAT_32X4);
-          this.pushFormat(i2, this.textureCoords, VertexFormat.FLOAT_32X2, interleavedData, VertexFormat.FLOAT_32X4);
-        }
-        break;
-      }
-    }
-    return interleavedData;
-  }
-}
 class GeometryBuilder {
   static DEFAULT_SCALE = vec2.fromValues(1, 1);
   /** @inheritdoc */
@@ -3678,6 +5110,35 @@ class GeometryBuilder {
     ];
     return geometry;
   }
+  /** @inheritdoc */
+  create(descriptor) {
+    const vertexCount = descriptor.positions.length / 3;
+    return new BaseGeometry(
+      [...descriptor.positions],
+      descriptor.indices ? [...descriptor.indices] : void 0,
+      descriptor.normals ? [...descriptor.normals] : new Array(vertexCount * 3).fill(0),
+      descriptor.textureCoords ? [...descriptor.textureCoords] : new Array(vertexCount * 2).fill(0),
+      descriptor.colors ? [...descriptor.colors] : new Array(vertexCount * 4).fill(1)
+    );
+  }
+}
+class ObjGeometryMapper {
+  /**
+   * Creates a geometry descriptor from an OBJ geometry definition.
+   * @param definition The geometry definition, e.g. `result.geometry` from `ObjLoader.loadAsync`.
+   * @param useMaterialColors True keeps the loader's per-vertex `Kd` colours; false (the default) uses white,
+   * for when each submesh's material carries the colour instead.
+   * @returns The descriptor. It references the definition's arrays; `geometryBuilder.create` copies them.
+   */
+  static toDescriptor(definition, useMaterialColors = false) {
+    return {
+      positions: definition.positions,
+      indices: definition.indices,
+      normals: definition.normals,
+      textureCoords: definition.textureCoords,
+      colors: useMaterialColors ? definition.colors : void 0
+    };
+  }
 }
 class ContentManager {
   /**
@@ -3693,6 +5154,7 @@ class ContentManager {
   shaderModuleLoader;
   _ktx2Factory = new x();
   _ktx2TextureCache = {};
+  _objLoader = new ObjLoader();
   /** @inheritDoc */
   async loadKtx2Async(path, contentConfig) {
     let ktx2Texture = this._ktx2TextureCache[path];
@@ -3705,9 +5167,19 @@ class ContentManager {
     }
     return ktx2Texture;
   }
+  /**
+   * Disposes the cached shader modules (their GL programs) and forgets cached KTX2 data.
+   * Called from `Framework.dispose()`.
+   */
+  dispose() {
+    this.shaderModuleLoader.dispose?.();
+    for (const key of Object.keys(this._ktx2TextureCache)) {
+      delete this._ktx2TextureCache[key];
+    }
+  }
   /** @inheritDoc */
-  loadShaderModule(shaderModuleId) {
-    return this.shaderModuleLoader.load(shaderModuleId);
+  loadShaderModule(shaderModuleId, keyValueDictionary) {
+    return this.shaderModuleLoader.load(shaderModuleId, keyValueDictionary);
   }
   /** @inheritDoc */
   async loadTexture2DAsync(path, textureDescriptor, contentConfig) {
@@ -3733,10 +5205,152 @@ class ContentManager {
       textureDescriptor?.generateMipmaps
     );
   }
-  /** @inheritDoc */
-  loadTexture2DFromPixels(width, height, pixels) {
-    const view = new Uint8Array(pixels);
-    return this._framework.textureFactory.create(width, height, view);
+  /** @inheritDoc */
+  loadTexture2DFromPixels(width, height, pixels) {
+    const view = new Uint8Array(pixels);
+    return this._framework.textureFactory.create(width, height, view);
+  }
+  /** @inheritDoc */
+  async loadMeshAsync(path, scene) {
+    const objResult = await this._loadObj(path);
+    const geometry = this._createGeometry(objResult.geometry);
+    const subMeshes = this._createSubMeshDescriptors(
+      objResult,
+      (definition) => this._createUnlitMaterial(definition, scene.camera)
+    );
+    return this._framework.meshFactory.createWithSubMeshes(scene, geometry, subMeshes);
+  }
+  /** @inheritDoc */
+  async loadBlinnPhongMeshAsync(path, scene) {
+    const camera = scene.camera;
+    if (!camera) {
+      throw new Error(`loadBlinnPhongMeshAsync("${path}"): the scene has no camera. Set scene.camera (or pass the scene to createPerspectiveCamera) before loading a Blinn-Phong mesh.`);
+    }
+    if (!camera.positionBuffer || !camera.projectionViewBuffer) {
+      const what = [camera.projectionViewBuffer ? void 0 : "projectionViewBuffer", camera.positionBuffer ? void 0 : "positionBuffer"].filter((x2) => x2 !== void 0).join(" and ");
+      throw new Error(`loadBlinnPhongMeshAsync("${path}"): the scene camera has no ${what}. Call camera.initialize() first (the camera factory does).`);
+    }
+    const objResult = await this._loadObj(path);
+    const geometry = this._createGeometry(objResult.geometry);
+    const subMeshes = this._createSubMeshDescriptors(
+      objResult,
+      (definition) => this._createBlinnPhongMaterial(definition, camera, scene.__forwardLightsBuffer)
+    );
+    return this._framework.meshFactory.createWithSubMeshes(scene, geometry, subMeshes);
+  }
+  /**
+   * Loads the OBJ file and its .mtl material libraries.
+   * @param path The path or url to the .obj file.
+   * @returns The plain OBJ data.
+   */
+  _loadObj(path) {
+    return this._objLoader.loadAsync(path);
+  }
+  /**
+   * Creates framework geometry from the OBJ geometry.
+   * Vertex colours stay white, because each submesh's material carries the colour.
+   * @param definition The OBJ geometry definition.
+   * @returns The geometry.
+   */
+  _createGeometry(definition) {
+    const descriptor = ObjGeometryMapper.toDescriptor(definition);
+    return this._framework.geometryBuilder.create(descriptor);
+  }
+  /**
+   * Creates one submesh descriptor per material range.
+   * Ranges that use the same material name share one material instance.
+   * @param objResult The loaded OBJ data.
+   * @param createMaterial Creates the material for a definition (undefined without `usemtl` or .mtl entry).
+   * @returns The submesh descriptors, in file order.
+   */
+  _createSubMeshDescriptors(objResult, createMaterial) {
+    const definitionsByName = this._indexMaterialDefinitions(objResult.materials);
+    const materialsByName = /* @__PURE__ */ new Map();
+    const subMeshes = [];
+    for (const range of objResult.geometry.materialRanges) {
+      let material = materialsByName.get(range.materialName);
+      if (material === void 0) {
+        const definition = this._findMaterialDefinition(definitionsByName, range.materialName);
+        material = createMaterial(definition);
+        materialsByName.set(range.materialName, material);
+      }
+      subMeshes.push({
+        material,
+        indexStart: range.indexStart,
+        indexCount: range.indexCount
+      });
+    }
+    return subMeshes;
+  }
+  /**
+   * Indexes material definitions by name.
+   * @param definitions The material definitions from the .mtl files.
+   * @returns A map from material name to definition.
+   */
+  _indexMaterialDefinitions(definitions) {
+    const definitionsByName = /* @__PURE__ */ new Map();
+    for (const definition of definitions) {
+      definitionsByName.set(definition.name, definition);
+    }
+    return definitionsByName;
+  }
+  /**
+   * Finds the definition for a `usemtl` name.
+   * @param definitionsByName The definitions by name.
+   * @param materialName The material name, or undefined for faces without `usemtl`.
+   * @returns The definition, or undefined when there is none.
+   */
+  _findMaterialDefinition(definitionsByName, materialName) {
+    if (materialName === void 0) {
+      return void 0;
+    }
+    return definitionsByName.get(materialName);
+  }
+  /**
+   * Creates the default unlit material for an OBJ material definition.
+   * The diffuse colour is the definition's `Kd` with `d` as alpha; white when there is no definition.
+   * @param definition The material definition, or undefined.
+   * @param camera The scene's current camera, or undefined; the scene assigns it on update.
+   * @returns The unlit material.
+   */
+  _createUnlitMaterial(definition, camera) {
+    const material = this._framework.materialFactory.createUnlitMaterial({
+      camera
+    });
+    const diffuse = definition?.diffuseColor ?? [1, 1, 1];
+    const opacity = definition?.opacity ?? 1;
+    material.diffuseColor = new Color(diffuse[0], diffuse[1], diffuse[2], opacity);
+    return material;
+  }
+  /**
+   * Creates a Blinn-Phong material for an OBJ material definition.
+   * `Kd` (with `d` as alpha) becomes the diffuse colour, white when missing.
+   * `Ka` becomes the ambient colour; when missing the diffuse colour is used, so ambient light tints by the surface colour.
+   * `Ks` and `Ns` become specular colour and shininess; when missing the material defaults stay (0.5 grey, 32).
+   * @param definition The material definition, or undefined.
+   * @param camera The scene's camera; its projection view and position buffers are bound.
+   * @param lightsBuffer The optional lights buffer; the shader is compiled for its light counts.
+   * @returns The Blinn-Phong material.
+   */
+  _createBlinnPhongMaterial(definition, camera, lightsBuffer) {
+    const material = this._framework.materialFactory.createForwardBlinnPhongMaterial({
+      projectionViewBuffer: camera.projectionViewBuffer,
+      cameraPositionBuffer: camera.positionBuffer,
+      lightsBuffer
+    });
+    material.camera = camera;
+    const diffuse = definition?.diffuseColor ?? [1, 1, 1];
+    const ambient = definition?.ambientColor ?? diffuse;
+    material.diffuseColor = new Color(diffuse[0], diffuse[1], diffuse[2], definition?.opacity ?? 1);
+    material.ambientColor = new Color(ambient[0], ambient[1], ambient[2]);
+    if (definition?.specularColor) {
+      const specular = definition.specularColor;
+      material.specularColor = new Color(specular[0], specular[1], specular[2]);
+    }
+    if (definition?.specularExponent !== void 0) {
+      material.shininess = definition.specularExponent;
+    }
+    return material;
   }
 }
 class ARenderer {
@@ -4445,16 +6059,15 @@ class WebGLFilterAnisotropicUtilities {
    * The max anisotropy extension string.
    */
   MAX_ANISOTROPY_EXT = "EXT_texture_filter_anisotropic";
-  _extension;
   /**
    * Gets the max anisotropy.
    * @param gl The WebGL2 rendering context.
    * @returns The maximum supported level of anisotropic filtering. `0` if not supported.
    */
   getMaxAnisotropy(gl) {
-    this._extension = gl.getExtension(this.MAX_ANISOTROPY_EXT);
-    if (this._extension) {
-      return gl.getParameter(this._extension.MAX_TEXTURE_MAX_ANISOTROPY_EXT);
+    const extension = gl.getExtension(this.MAX_ANISOTROPY_EXT);
+    if (extension) {
+      return gl.getParameter(extension.MAX_TEXTURE_MAX_ANISOTROPY_EXT);
     }
     return 0;
   }
@@ -4465,8 +6078,12 @@ class WebGLFilterAnisotropicUtilities {
    * @param anisotropy The level of anisotropic filtering
    */
   setAnisotropy(gl, texture, anisotropy) {
+    const extension = gl.getExtension(this.MAX_ANISOTROPY_EXT);
+    if (!extension) {
+      return;
+    }
     gl.bindTexture(gl.TEXTURE_2D, texture);
-    gl.texParameterf(gl.TEXTURE_2D, this._extension.MAX_TEXTURE_MAX_ANISOTROPY_EXT, anisotropy);
+    gl.texParameterf(gl.TEXTURE_2D, extension.MAX_TEXTURE_MAX_ANISOTROPY_EXT, anisotropy);
   }
 }
 class WebGlFrameBufferUtilities {
@@ -5464,25 +7081,38 @@ class WebGlTexture2D extends ATexture2D {
       listener(this);
     }
   }
-  static _defaultFilled = null;
+  /** One default texture per framework, so a new framework (and GL context) never gets a texture of an old one. */
+  static _defaultFilled = /* @__PURE__ */ new WeakMap();
   /**
    * Creates a default 1x1 white texture if it doesn't already exist and returns it.
    * This can be used as a placeholder texture when a texture is expected but not available.
    * @param framework The framework instance.
+   * The texture belongs to that framework's GL context; each framework gets its own.
    * @returns The default 1x1 white texture.
    */
   static getOrCreateDefault(framework) {
-    if (this._defaultFilled === null || this._defaultFilled.state === State.DISPOSED) {
+    let texture = WebGlTexture2D._defaultFilled.get(framework);
+    if (!texture || texture.state === State.DISPOSED) {
       const desc = new TextureDescriptor();
       desc.width = 1;
       desc.height = 1;
       desc.data = [new Uint8Array([255, 255, 255, 255])];
       desc.textureFormat = framework.renderer.preferredTextureFormat;
       desc.label = "RisDefaultFilledTexture";
-      this._defaultFilled = new WebGlTexture2D(framework, desc);
-      this._defaultFilled.initialize();
+      texture = new WebGlTexture2D(framework, desc);
+      texture.initialize();
+      WebGlTexture2D._defaultFilled.set(framework, texture);
     }
-    return this._defaultFilled;
+    return texture;
+  }
+  /**
+   * Disposes and forgets the default texture of a framework. Called from `Framework.dispose()`.
+   * @param framework The framework instance.
+   */
+  static disposeDefault(framework) {
+    const texture = WebGlTexture2D._defaultFilled.get(framework);
+    WebGlTexture2D._defaultFilled.delete(framework);
+    texture?.dispose();
   }
 }
 function asWebGLTexture2D(texture) {
@@ -5959,7 +7589,6 @@ class WebGlGraphicsDevice extends AGraphicsDevice {
   /** @inheritdoc */
   initialize() {
     this._canvas = this._windowManager.canvas;
-    debugger;
     const contextOptions = {
       antialias: false,
       alpha: this._descriptor.alpha,
@@ -6080,11 +7709,13 @@ class WebGlBuffersFactory {
 const mainRenderTargetFlipYVS = "#version 300 es\nlayout(location = 0) in vec3 a_position;\nlayout(location = 1) in vec2 a_texCoord;\nout vec2 v_texCoord;\nvoid main()\n {\n    gl_Position = vec4(a_position, 1.0);\n    v_texCoord = a_texCoord;\n}";
 const mainRenderTargetFlipYFS = "#version 300 es\nprecision highp float;\nin vec2 v_texCoord;\nout vec4 outColor;\nuniform sampler2D u_texture;\nvoid main() \n{\n    outColor = texture(u_texture, vec2(v_texCoord.x, 1.0 - v_texCoord.y));\n}";
 const spriteVS = "#version 300 es\n\nlayout(location = 0) in vec3 a_position;\nlayout(location = 1) in vec4 a_color;\nlayout(location = 2) in vec2 a_texCoord;\n\nout vec4 v_color;\nout vec2 v_texCoords;\n\nlayout(std140) uniform CameraBuffer\n{\n	mat4 u_projectionView;\n};\n\nvoid main()\n{\n	gl_Position = u_projectionView * vec4(a_position, 1.0);\n	v_color = a_color;\n	v_texCoords = a_texCoord;\n}";
-const spriteFS = "#version 300 es\nprecision mediump float;\n\nin vec4 v_color;\nin vec2 v_texCoords;\n\nlayout(location = 0) out vec4 o_outputColor;\n\nuniform sampler2D u_texture;\n\nvoid main()\n{\n    o_outputColor = texture(u_texture, v_texCoords) * v_color + vec4(1.0);\n}";
+const spriteFS = "#version 300 es\nprecision mediump float;\n\nin vec4 v_color;\nin vec2 v_texCoords;\n\nlayout(location = 0) out vec4 o_outputColor;\n\nuniform sampler2D u_texture;\n\nvoid main()\n{\n    o_outputColor = texture(u_texture, v_texCoords) * v_color;\n}";
 const inspectTextureMipsVS = "#version 300 es\n\nlayout(location = 0) in vec3 a_position;\nlayout(location = 1) in vec4 a_color;\nlayout(location = 2) in vec2 a_texCoord;\n\nout vec4 v_color;\nout vec2 v_texCoords;\n\nlayout(std140) uniform CameraBuffer\n{\n	mat4 projectionView;\n};\n\nlayout(std140) uniform ModelBuffer\n{\n    mat4 model;\n};\n\nvoid main()\n{\n	gl_Position = projectionView * model * vec4(a_position, 1.0);\n	v_color = a_color;\n	v_texCoords = a_texCoord;\n}";
 const inspectTextureMipsFS = "#version 300 es\nprecision mediump float;\n\nin vec4 v_color;\nin vec2 v_texCoords;\n\nlayout(location = 0) out vec4 o_outputColor;\n\nlayout(std140) uniform TextureConstantsBuffer {\n    float mipLevel;\n};\n\nuniform sampler2D u_texture;\n\nvoid main()\n{\n    o_outputColor = textureLod(u_texture, v_texCoords, mipLevel) * v_color;\n}";
 const unlitMaterialVS = "#version 300 es\n\nlayout(location = 0) in vec3 a_position;\nlayout(location = 1) in vec4 a_color;\nlayout(location = 2) in vec2 a_texCoord;\n\nout vec4 v_color;\nout vec2 v_texCoords;\n\nlayout(std140) uniform CameraBuffer\n{\n	mat4 projectionView;\n};\n\nlayout(std140) uniform ModelBuffer\n{\n    mat4 model;\n};\n\nvoid main()\n{\n	gl_Position = projectionView * model * vec4(a_position, 1.0);\n	v_color = a_color;\n	v_texCoords = a_texCoord;\n}";
-const unlitMaterialFS = "#version 300 es\nprecision mediump float;\n\nin vec4 v_color;\nin vec2 v_texCoords;\n\nlayout(location = 0) out vec4 o_outputColor;\n\nlayout(std140) uniform MaterialBuffer\n {\n    vec4 diffuseColor;\n};\n\nuniform sampler2D u_texture;\n\nvoid main()\n{\n    o_outputColor = texture(u_texture, v_texCoords) * v_color * diffuseColor;\n}";
+const unlitMaterialFS = "#version 300 es\nprecision mediump float;\n\nin vec4 v_color;\nin vec2 v_texCoords;\n\nlayout(location = 0) out vec4 o_outputColor;\n\nlayout(std140) uniform MaterialBuffer\n{\n    vec4 diffuseColor;\n};\n\nuniform sampler2D u_texture;\n\nvoid main()\n{\n    o_outputColor = texture(u_texture, v_texCoords) * v_color * diffuseColor;\n}";
+const forwardBlinnPhongVS = "#version 300 es\n\nlayout(location = 0) in vec3 a_position;\nlayout(location = 1) in vec4 a_color;\nlayout(location = 2) in vec2 a_texCoord;\nlayout(location = 3) in vec3 a_normal;\n\nout vec4 v_color;\nout vec2 v_texCoords;\nout vec3 v_normal;\nout vec3 v_worldPosition;\n\nlayout(std140) uniform CameraBuffer\n{\n	mat4 projectionView;\n};\n\nlayout(std140) uniform ModelBuffer\n{\n    mat4 model;\n};\n\nvoid main()\n{\n    vec4 worldPosition = model * vec4(a_position, 1.0);\n	gl_Position = projectionView * worldPosition;\n	v_color = a_color;\n	v_texCoords = a_texCoord;\n    // World-space normal through the normal matrix, correct for non-uniform mesh scale.\n    v_normal = transpose(inverse(mat3(model))) * a_normal;\n    v_worldPosition = worldPosition.xyz;\n}\n";
+const forwardBlinnPhongFS = "#version 300 es\nprecision mediump float;\n\n#define DIRECTIONAL_LIGHTS_COUNT ##DIRECTIONAL_LIGHTS_COUNT##\n#define POINT_LIGHTS_COUNT ##POINT_LIGHTS_COUNT##\n\nin vec4 v_color;\nin vec2 v_texCoords;\nin vec3 v_normal;\nin vec3 v_worldPosition;\n\nlayout(location = 0) out vec4 o_outputColor;\n\nlayout(std140) uniform MaterialBuffer\n{\n    vec3 u_ambientColor;\n    vec3 u_diffuseColor;\n    vec3 u_specularColor;\n    float u_shininess;\n};\n\nlayout(std140) uniform CameraPositionBuffer\n{\n    vec3 u_cameraPosition;\n};\n\nstruct DirectionalLight\n{\n    vec3 light;\n    vec3 direction;\n};\n\nstruct PointLight\n{\n    vec3 light;\n    float constant;\n    vec3 position;\n    float linear;\n    float quadratic;\n};\n\nlayout(std140) uniform LightsBuffer\n{\n    vec3 u_ambientLight;\n    DirectionalLight u_directionalLight[DIRECTIONAL_LIGHTS_COUNT];\n    PointLight u_pointLight[POINT_LIGHTS_COUNT];\n};\n\nuniform sampler2D u_texture;\n\nvoid main()\n{\n    vec3 normal = normalize(v_normal);\n\n    // Ambient lighting\n    vec3 ambient = u_ambientColor * u_ambientLight;\n\n    vec3 viewDirection = normalize(u_cameraPosition - v_worldPosition);\n\n    // Directional diffuse and Blinn-Phong specular lighting\n    vec3 diffuse = vec3(0.0);\n    vec3 specular = vec3(0.0);\n\n    for (int i = 0; i < DIRECTIONAL_LIGHTS_COUNT; ++i)\n    {\n        vec3 lightColor = u_directionalLight[i].light;\n        vec3 lightDirection = normalize(-u_directionalLight[i].direction);\n\n        float NdotL = max(dot(normal, lightDirection), 0.0);\n\n        diffuse += u_diffuseColor * lightColor * NdotL;\n\n        if (NdotL > 0.0)\n        {\n            vec3 halfway = normalize(lightDirection + viewDirection);\n            float NdotH = max(dot(normal, halfway), 0.0);\n            specular += u_specularColor * lightColor * pow(NdotH, u_shininess);\n        }\n    }\n\n    // Point lights: same diffuse and specular, scaled by distance attenuation.\n    for (int i = 0; i < POINT_LIGHTS_COUNT; ++i)\n    {\n        vec3 toLight = u_pointLight[i].position - v_worldPosition;\n        float lightDistance = length(toLight);\n        vec3 lightDirection = toLight / max(lightDistance, 0.0001);\n        float attenuation = 1.0 / (u_pointLight[i].constant\n            + u_pointLight[i].linear * lightDistance\n            + u_pointLight[i].quadratic * lightDistance * lightDistance);\n        vec3 lightColor = u_pointLight[i].light * attenuation;\n\n        float NdotL = max(dot(normal, lightDirection), 0.0);\n\n        diffuse += u_diffuseColor * lightColor * NdotL;\n\n        if (NdotL > 0.0)\n        {\n            vec3 halfway = normalize(lightDirection + viewDirection);\n            float NdotH = max(dot(normal, halfway), 0.0);\n            specular += u_specularColor * lightColor * pow(NdotH, u_shininess);\n        }\n    }\n\n    // Apply material lighting, texture, and vertex color\n    vec4 texel = texture(u_texture, v_texCoords) * v_color;\n    // Specular highlights are not tinted by the texture.\n    vec3 finalColor = texel.rgb * (ambient + diffuse) + specular;\n\n    o_outputColor = vec4(finalColor, texel.a);\n}";
 const ShaderModuleContent = {
   "main_render_target_flip_y": {
     "vertex": mainRenderTargetFlipYVS,
@@ -6105,6 +7736,11 @@ const ShaderModuleContent = {
     "vertex": unlitMaterialVS,
     "fragment": unlitMaterialFS,
     "reflection": {}
+  },
+  "forward_blinn_phong_material": {
+    "vertex": forwardBlinnPhongVS,
+    "fragment": forwardBlinnPhongFS,
+    "reflection": {}
   }
 };
 class WebGlShaderModule {
@@ -6115,11 +7751,12 @@ class WebGlShaderModule {
    * The constructor of the WebGL shader module.
    * @param framework The framework.
    * @param shaderFilePath
+   * @param @param keyValueDictionary - If present, tries to find key in shader such that it replaced ##DIRECTIONAL_LIGHT_COUNT## by given value for key DIRECTIONAL_LIGHST_COUNT.
    */
-  constructor(framework, shaderFilePath) {
+  constructor(framework, shaderFilePath, keyValueDictionary) {
     this._graphicsDevice = framework.renderer.graphicsDevice;
     this._gl = this._graphicsDevice.gl;
-    this._program = this._loadShaders(shaderFilePath);
+    this._program = this._loadShaders(shaderFilePath, keyValueDictionary);
   }
   /** @inheritDoc */
   stages = [];
@@ -6147,7 +7784,7 @@ class WebGlShaderModule {
   get program() {
     return this._program;
   }
-  _loadShaders(shaderFilePath) {
+  _loadShaders(shaderFilePath, keyValueDictionary) {
     const internalShader = this._tryResolveFrameworkShader(shaderFilePath);
     let vertexShaderSource = "";
     let fragmentShaderSource = "";
@@ -6157,6 +7794,12 @@ class WebGlShaderModule {
     } else {
       throw new Error("Not implemented");
     }
+    if (keyValueDictionary) {
+      for (const key in keyValueDictionary) {
+        vertexShaderSource = vertexShaderSource.replace(`##${key}##`, String(keyValueDictionary[key]));
+        fragmentShaderSource = fragmentShaderSource.replace(`##${key}##`, String(keyValueDictionary[key]));
+      }
+    }
     const vertexShader = WebGlUtilities.shader.createVertexShader(this._gl, vertexShaderSource);
     const fragmentShader = WebGlUtilities.shader.createFragmentShader(this._gl, fragmentShaderSource);
     const program = WebGlUtilities.program.create(this._gl, vertexShader, fragmentShader);
@@ -6172,6 +7815,13 @@ class WebGlShaderModule {
     }
   }
 }
+function shaderModuleCacheKey(id, keyValueDictionary) {
+  if (!keyValueDictionary) {
+    return id;
+  }
+  const entries = Object.keys(keyValueDictionary).sort().map((key) => `${key}=${keyValueDictionary[key]}`);
+  return entries.length === 0 ? id : `${id}?${entries.join("&")}`;
+}
 class WebGlShaderModuleLoader {
   _shaderModules = /* @__PURE__ */ new Map();
   _framework;
@@ -6182,18 +7832,23 @@ class WebGlShaderModuleLoader {
   constructor(framework) {
     this._framework = framework;
   }
-  /**
-   * The content types provided by this content module.
-   * @param assetFilePathOrIdentifier The asset file path or identifier of the content to load.
-   */
-  load(assetFilePathOrIdentifier) {
-    let shaderModule = this._shaderModules.get(assetFilePathOrIdentifier);
+  /** @inheritDoc */
+  load(assetFilePathOrIdentifier, keyValueDictionary) {
+    const cacheKey = shaderModuleCacheKey(assetFilePathOrIdentifier, keyValueDictionary);
+    let shaderModule = this._shaderModules.get(cacheKey);
     if (!shaderModule) {
-      shaderModule = new WebGlShaderModule(this._framework, assetFilePathOrIdentifier);
-      this._shaderModules.set(assetFilePathOrIdentifier, shaderModule);
+      shaderModule = new WebGlShaderModule(this._framework, assetFilePathOrIdentifier, keyValueDictionary);
+      this._shaderModules.set(cacheKey, shaderModule);
     }
     return shaderModule;
   }
+  /** Deletes every cached shader program and clears the cache. */
+  dispose() {
+    for (const shaderModule of this._shaderModules.values()) {
+      shaderModule.dispose();
+    }
+    this._shaderModules.clear();
+  }
 }
 class SpriteBatchMesh extends Mesh {
   /**
@@ -6203,13 +7858,22 @@ class SpriteBatchMesh extends Mesh {
   static TOTAL_FLOATS_PER_VERTEX = 9;
   /** The total number of floats in a sprite. 4 for each vertex * 9 floats per vertex (xyz rgba uv). */
   static TOTAL_FLOATS_IN_SPRITE = 4 * this.TOTAL_FLOATS_PER_VERTEX;
+  _spriteMaterial;
   _maxInstances = 0;
   _lastIndex = -1;
+  /** The offset of the first index to draw. Defaults to 0. */
+  indicesOffset = 0;
+  /** The number of indices to draw. If -1 draws all indices. */
+  indicesCount = -1;
   /**
    * The constructor for the batch sprite mesh.
+   * @param framework - The framework.
+   * @param material - The material.
+   * @param numberOfInstances - The number of instances.
    */
-  constructor(framework, numberOfInstances) {
-    super(framework);
+  constructor(framework, material, numberOfInstances) {
+    super(framework, null, material);
+    this._spriteMaterial = material;
     this._maxInstances = numberOfInstances;
     this._vertexData = new Array(this.maxInstances * SpriteBatchMesh.TOTAL_FLOATS_IN_SPRITE);
     this._setupIndices();
@@ -6227,6 +7891,12 @@ class SpriteBatchMesh extends Mesh {
     }
     this._indices = indices;
   }
+  /**
+   * Draws the mesh with its sprite material, using {@link indicesCount} and {@link indicesOffset}.
+   */
+  draw() {
+    this._spriteMaterial.render(this._vertexBuffer, this._indexBuffer, this.indicesCount, this.indicesOffset);
+  }
   /** The maximum number of instances that can be batched. */
   get maxInstances() {
     return this._maxInstances;
@@ -6393,7 +8063,7 @@ class SpriteBatchDrawable {
   _sampler;
   _maxBatchSize;
   _drawingMesh = null;
-  _renderPipeline = null;
+  _material = null;
   _needsResize = false;
   _fromInstance = 0;
   _toInstance = 0;
@@ -6418,10 +8088,12 @@ class SpriteBatchDrawable {
   projectionViewBuffer;
   /** Initialize the drawable */
   initialize() {
-    this._renderPipeline = this._framework.renderPipelineFactory.createSpriteRenderPipeline(this.projectionViewBuffer);
-    this._renderPipeline.spriteTexture = this._texture;
-    this._renderPipeline.textureSampler = this._sampler;
-    this._drawingMesh = new SpriteBatchMesh(this._framework, this._maxBatchSize);
+    this._material = this._framework.materialFactory.createSpriteMaterial({
+      projectionViewBuffer: this.projectionViewBuffer,
+      texture: this._texture,
+      sampler: this._sampler
+    });
+    this._drawingMesh = new SpriteBatchMesh(this._framework, this._material, this._maxBatchSize);
     this._drawingMesh.initialize();
   }
   /**
@@ -6459,15 +8131,10 @@ class SpriteBatchDrawable {
     if (this._toInstance > this._maxBatchSize) {
       this._toInstance = this._maxBatchSize;
     }
-    const indicesOffset = this._fromInstance * 6;
-    const indicesCount = this._toInstance * 6 - indicesOffset;
+    this._drawingMesh.indicesOffset = this._fromInstance * 6;
+    this._drawingMesh.indicesCount = this._toInstance * 6 - this._drawingMesh.indicesOffset;
     this._drawingMesh.applyChanges();
-    this._renderPipeline.render(
-      this._drawingMesh.vertexBuffer,
-      this._drawingMesh.indexBuffer,
-      indicesCount,
-      indicesOffset
-    );
+    this._drawingMesh.draw();
     this._fromInstance = this._toInstance;
   }
   /**
@@ -6482,7 +8149,7 @@ class SpriteBatchDrawable {
   }
   /** @inheritDoc */
   dispose() {
-    this._renderPipeline.dispose();
+    this._material.dispose();
     this._drawingMesh.dispose();
   }
 }
@@ -6827,6 +8494,35 @@ class VertexBufferLayout {
       ]
     );
   }
+  static createFloat3Float4Float2Float3Layout() {
+    const floatSize = 4;
+    return new VertexBufferLayout(
+      (3 + 4 + 2 + 3) * floatSize,
+      VertexStepMode.VERTEX,
+      [
+        {
+          format: VertexFormat.FLOAT_32X3,
+          offset: 0,
+          shaderLocation: 0
+        },
+        {
+          format: VertexFormat.FLOAT_32X4,
+          offset: 3 * floatSize,
+          shaderLocation: 1
+        },
+        {
+          format: VertexFormat.FLOAT_32X2,
+          offset: (3 + 4) * floatSize,
+          shaderLocation: 2
+        },
+        {
+          format: VertexFormat.FLOAT_32X3,
+          offset: (3 + 4 + 2) * floatSize,
+          shaderLocation: 3
+        }
+      ]
+    );
+  }
 }
 class AWebGlRenderPipeline {
   /** The framework instance. */
@@ -6920,6 +8616,8 @@ class WebGlMainRenderTargetRenderPipeline extends AWebGlRenderPipeline {
     super(framework);
     this._mainRenderTarget = mainRenderTarget;
   }
+  /** @inheritDoc */
+  geometryFormat = GeometryFormat.POS3_COLOR4_TEXTURECOORDS2;
   /** @inheritdoc */
   _provideBuffers() {
     return [this._vertexBuffer.buffer];
@@ -6995,6 +8693,8 @@ class WebGlSpriteRenderPipeline extends AWebGlRenderPipeline {
     super(framework);
     this._projectionViewBuffer = asWebGLUniformBuffer(projectionViewBuffer);
   }
+  /** @inheritDoc */
+  geometryFormat = GeometryFormat.POS3_COLOR4_TEXTURECOORDS2;
   /** @inheritdoc */
   get projectionViewBuffer() {
     return this._projectionViewBuffer;
@@ -7088,11 +8788,16 @@ class WebGlInspectTextureMipsRenderPipeline extends AWebGlRenderPipeline {
    * @param textureConstantsBuffer The texture constants buffer.
    */
   constructor(framework, projectionViewBuffer, modelBuffer, textureConstantsBuffer, primitiveState) {
+    if (!modelBuffer) {
+      throw new Error("WebGlInspectTextureMipsRenderPipeline: modelBuffer is required (the mesh's model buffer, std140 mat4).");
+    }
     super(framework, primitiveState);
     this._projectionViewBuffer = projectionViewBuffer;
     this._modelBuffer = modelBuffer;
     this._textureConstantsBuffer = textureConstantsBuffer;
   }
+  /** @inheritDoc */
+  geometryFormat = GeometryFormat.POS3_COLOR4_TEXTURECOORDS2;
   /** @inheritdoc */
   get projectionViewBuffer() {
     return this._projectionViewBuffer;
@@ -7107,6 +8812,9 @@ class WebGlInspectTextureMipsRenderPipeline extends AWebGlRenderPipeline {
   }
   /** @inheritdoc */
   set modelBuffer(value) {
+    if (!value) {
+      throw new Error("WebGlInspectTextureMipsRenderPipeline: modelBuffer is required (the mesh's model buffer, std140 mat4).");
+    }
     this._modelBuffer = asWebGLUniformBuffer(value);
   }
   /** @inheritdoc */
@@ -7223,11 +8931,16 @@ class WebGlUnlitRenderPipeline extends AWebGlRenderPipeline {
    * @param primitiveState The primitive state.
    */
   constructor(framework, projectionViewBuffer, modelBuffer, materialBuffer, primitiveState) {
+    if (!modelBuffer) {
+      throw new Error("WebGlUnlitRenderPipeline: modelBuffer is required (the mesh's model buffer, std140 mat4).");
+    }
     super(framework, primitiveState);
     this._projectionViewBuffer = projectionViewBuffer;
     this._modelBuffer = modelBuffer;
     this._materialBuffer = materialBuffer;
   }
+  /** @inheritDoc */
+  geometryFormat = GeometryFormat.POS3_COLOR4_TEXTURECOORDS2;
   /** @inheritdoc */
   get projectionViewBuffer() {
     return this._projectionViewBuffer;
@@ -7242,6 +8955,9 @@ class WebGlUnlitRenderPipeline extends AWebGlRenderPipeline {
   }
   /** @inheritdoc */
   set modelBuffer(value) {
+    if (!value) {
+      throw new Error("WebGlUnlitRenderPipeline: modelBuffer is required (the mesh's model buffer, std140 mat4).");
+    }
     this._modelBuffer = asWebGLUniformBuffer(value);
   }
   /** @inheritdoc */
@@ -7335,6 +9051,223 @@ class WebGlUnlitRenderPipeline extends AWebGlRenderPipeline {
     this._gl.drawElements(this.primitiveState.glPrimitiveType, toIndices, type, fromIndices);
   }
 }
+class WebGlForwardBlinnPhongRenderPipeline extends AWebGlRenderPipeline {
+  static CAMERA_BINDING_POINT = 0;
+  static MODEL_BINDING_POINT = 1;
+  static MATERIAL_BINDING_POINT = 2;
+  static LIGHTS_BINDING_POINT = 3;
+  static CAMERA_POSITION_BINDING_POINT = 4;
+  _texture = null;
+  _sampler;
+  _projectionViewBuffer;
+  _modelBuffer;
+  _materialBuffer;
+  _lightsBuffer;
+  _cameraBlockIndex = -1;
+  _modelBlockIndex = -1;
+  _materialBlockIndex = -1;
+  _lightsBlockIndex = -1;
+  _cameraPositionBuffer;
+  _cameraPositionBlockIndex = -1;
+  _maxDirectionalLights = DEFAULT_DIRECTIONAL_LIGHTS_COUNT;
+  _maxPointLights = DEFAULT_POINT_LIGHTS_COUNT;
+  _initialized = false;
+  _buffersArray = [null];
+  _lastVertexBuffer = null;
+  /**
+   * The constructor.
+   * @param framework The framework.
+   * @param projectionViewBuffer The projection view buffer.
+   * @param modelBuffer The model buffer.
+   * @param materialBuffer The material buffer.
+   * @param lightsBuffer The lights buffer (`LightsBuffer.buffer`). May be set later.
+   * @param cameraPositionBuffer The camera position buffer (world-space eye).
+   * @param primitiveState The primitive state.
+   */
+  constructor(framework, projectionViewBuffer, modelBuffer, materialBuffer, lightsBuffer, cameraPositionBuffer, primitiveState) {
+    if (!modelBuffer) {
+      throw new Error("WebGlForwardBlinnPhongRenderPipeline: modelBuffer is required (the mesh's model buffer, std140 mat4).");
+    }
+    super(framework, primitiveState);
+    this._projectionViewBuffer = projectionViewBuffer;
+    this._modelBuffer = modelBuffer;
+    this._materialBuffer = materialBuffer;
+    this._lightsBuffer = lightsBuffer;
+    this._cameraPositionBuffer = cameraPositionBuffer;
+  }
+  /** @inheritDoc */
+  geometryFormat = GeometryFormat.POS3_COLOR4_TEXTURECOORDS2_NORMAL3;
+  /** @inheritdoc */
+  get projectionViewBuffer() {
+    return this._projectionViewBuffer;
+  }
+  /** @inheritdoc */
+  set projectionViewBuffer(value) {
+    this._projectionViewBuffer = asWebGLUniformBuffer(value);
+  }
+  /** @inheritdoc */
+  get modelBuffer() {
+    return this._modelBuffer;
+  }
+  /** @inheritdoc */
+  set modelBuffer(value) {
+    if (!value) {
+      throw new Error("WebGlForwardBlinnPhongRenderPipeline: modelBuffer is required (the mesh's model buffer, std140 mat4).");
+    }
+    this._modelBuffer = asWebGLUniformBuffer(value);
+  }
+  /** @inheritdoc */
+  get materialBuffer() {
+    return this._materialBuffer;
+  }
+  /** @inheritdoc */
+  set materialBuffer(value) {
+    this._materialBuffer = asWebGLUniformBuffer(value);
+  }
+  /** @inheritdoc */
+  get lightsBuffer() {
+    return this._lightsBuffer;
+  }
+  /** @inheritdoc */
+  set lightsBuffer(value) {
+    this._lightsBuffer = asWebGLUniformBuffer(value);
+  }
+  /** @inheritdoc */
+  get maxDirectionalLights() {
+    return this._maxDirectionalLights;
+  }
+  /** @inheritdoc */
+  get maxPointLights() {
+    return this._maxPointLights;
+  }
+  /** @inheritdoc */
+  setLightCounts(maxDirectionalLights, maxPointLights) {
+    if (maxDirectionalLights === this._maxDirectionalLights && maxPointLights === this._maxPointLights) {
+      return;
+    }
+    this._maxDirectionalLights = maxDirectionalLights;
+    this._maxPointLights = maxPointLights;
+    if (this._initialized) {
+      this._loadProgram();
+    }
+  }
+  /** @inheritdoc */
+  get cameraPositionBuffer() {
+    return this._cameraPositionBuffer;
+  }
+  /** @inheritdoc */
+  set cameraPositionBuffer(value) {
+    this._cameraPositionBuffer = asWebGLUniformBuffer(value);
+  }
+  /** @inheritdoc */
+  get diffuseTexture() {
+    return this._texture;
+  }
+  /** @inheritdoc */
+  set diffuseTexture(value) {
+    this._texture = value;
+  }
+  /** @inheritdoc */
+  get diffuseTextureSampler() {
+    return this._sampler;
+  }
+  set diffuseTextureSampler(value) {
+    this._sampler = value;
+  }
+  /** @inheritdoc */
+  initialize() {
+    this._loadProgram();
+    this.vertexBufferLayouts = [VertexBufferLayout.createFloat3Float4Float2Float3Layout()];
+    super.initialize();
+    this._initialized = true;
+  }
+  /** Loads the shader variant for the current light counts (cached per counts by the shader loader). */
+  _loadProgram() {
+    const module = this._framework.content.loadShaderModule("forward_blinn_phong_material", {
+      "DIRECTIONAL_LIGHTS_COUNT": this._maxDirectionalLights,
+      "POINT_LIGHTS_COUNT": this._maxPointLights
+    });
+    this._program = module.program;
+    this._createResources();
+  }
+  _createResources() {
+    {
+      this._texture = WebGlTexture2D.getOrCreateDefault(this._framework);
+      this._cameraBlockIndex = this._gl.getUniformBlockIndex(this._program, "CameraBuffer");
+      this._gl.uniformBlockBinding(this._program, this._cameraBlockIndex, WebGlForwardBlinnPhongRenderPipeline.CAMERA_BINDING_POINT);
+      this._modelBlockIndex = this._gl.getUniformBlockIndex(this._program, "ModelBuffer");
+      this._gl.uniformBlockBinding(this._program, this._modelBlockIndex, WebGlForwardBlinnPhongRenderPipeline.MODEL_BINDING_POINT);
+      this._materialBlockIndex = this._gl.getUniformBlockIndex(this._program, "MaterialBuffer");
+      this._gl.uniformBlockBinding(this._program, this._materialBlockIndex, WebGlForwardBlinnPhongRenderPipeline.MATERIAL_BINDING_POINT);
+      this._lightsBlockIndex = this._gl.getUniformBlockIndex(this._program, "LightsBuffer");
+      this._gl.uniformBlockBinding(this._program, this._lightsBlockIndex, WebGlForwardBlinnPhongRenderPipeline.LIGHTS_BINDING_POINT);
+      this._cameraPositionBlockIndex = this._gl.getUniformBlockIndex(this._program, "CameraPositionBuffer");
+      this._gl.uniformBlockBinding(this._program, this._cameraPositionBlockIndex, WebGlForwardBlinnPhongRenderPipeline.CAMERA_POSITION_BINDING_POINT);
+    }
+  }
+  /** @inheritdoc */
+  _provideBuffers() {
+    if (this._lastVertexBuffer === null) {
+      return null;
+    }
+    this._buffersArray[0] = this._lastVertexBuffer.buffer;
+    return this._buffersArray;
+  }
+  /** @inheritdoc */
+  render(vertexBuffer, indexBuffer, indicesCount = -1, indicesOffset = 0) {
+    if (indicesCount == 0) {
+      return;
+    }
+    const webGlVertexBuffer = vertexBuffer;
+    const webGlIndexBuffer = indexBuffer;
+    const webGlSampler = this._sampler ?? this._defaultTextureSampler;
+    this.primitiveState.apply(this._gl);
+    this._blendState.apply(this._gl);
+    if (this._lastVertexBuffer != webGlVertexBuffer) {
+      this._lastVertexBuffer = webGlVertexBuffer;
+      this._createVertexArrayObject();
+    }
+    this._gl.useProgram(this._program);
+    this._gl.bindVertexArray(this._vertexArrayObject);
+    this._gl.bindBuffer(this._gl.ELEMENT_ARRAY_BUFFER, webGlIndexBuffer.buffer);
+    this._gl.bindBufferBase(
+      this._gl.UNIFORM_BUFFER,
+      WebGlForwardBlinnPhongRenderPipeline.CAMERA_BINDING_POINT,
+      this._projectionViewBuffer.glBuffer
+    );
+    this._gl.bindBufferBase(
+      this._gl.UNIFORM_BUFFER,
+      WebGlForwardBlinnPhongRenderPipeline.MODEL_BINDING_POINT,
+      this._modelBuffer.glBuffer
+    );
+    if (this.materialBuffer) {
+      this._gl.bindBufferBase(
+        this._gl.UNIFORM_BUFFER,
+        WebGlForwardBlinnPhongRenderPipeline.MATERIAL_BINDING_POINT,
+        this._materialBuffer.glBuffer
+      );
+    }
+    if (this._lightsBuffer) {
+      this._gl.bindBufferBase(
+        this._gl.UNIFORM_BUFFER,
+        WebGlForwardBlinnPhongRenderPipeline.LIGHTS_BINDING_POINT,
+        this._lightsBuffer.glBuffer
+      );
+    }
+    this._gl.bindBufferBase(
+      this._gl.UNIFORM_BUFFER,
+      WebGlForwardBlinnPhongRenderPipeline.CAMERA_POSITION_BINDING_POINT,
+      this._cameraPositionBuffer.glBuffer
+    );
+    this._gl.activeTexture(this._gl.TEXTURE0);
+    this._gl.bindTexture(this._gl.TEXTURE_2D, this._texture.glTexture);
+    this._gl.bindSampler(0, webGlSampler.glSampler);
+    const type = indexBuffer.type == IndexBufferType.UINT_16 ? this._gl.UNSIGNED_SHORT : this._gl.UNSIGNED_INT;
+    const toIndices = indicesCount > 0 ? indicesCount : indexBuffer.indicesCount;
+    const fromIndices = indicesOffset * indexBuffer.elementByteSize;
+    this._gl.drawElements(this.primitiveState.glPrimitiveType, toIndices, type, fromIndices);
+  }
+}
 class WebGlRenderPipelineFactory {
   /**
    * The constructor for the WebGLRenderPipelineFactory class.
@@ -7357,6 +9290,26 @@ class WebGlRenderPipelineFactory {
     return pipeline;
   }
   /** @inheritDoc */
+  createForwardBlinnPhongRenderPipeline(descriptor) {
+    const pipeline = new WebGlForwardBlinnPhongRenderPipeline(
+      this._framework,
+      descriptor.projectionViewBuffer,
+      descriptor.modelBuffer,
+      descriptor.materialBuffer,
+      descriptor.lightsBuffer,
+      descriptor.cameraPositionBuffer,
+      descriptor.primitiveState
+    );
+    if (descriptor.maxDirectionalLights !== void 0 || descriptor.maxPointLights !== void 0) {
+      pipeline.setLightCounts(
+        descriptor.maxDirectionalLights ?? pipeline.maxDirectionalLights,
+        descriptor.maxPointLights ?? pipeline.maxPointLights
+      );
+    }
+    pipeline.initialize();
+    return pipeline;
+  }
+  /** @inheritDoc */
   createMainFrameBufferPipeline(mainFrameBuffer) {
     const renderPipeline = new WebGlMainRenderTargetRenderPipeline(this._framework, mainFrameBuffer);
     renderPipeline.initialize();
@@ -7452,6 +9405,8 @@ class InputManager {
   _touchCapabilities;
   _contacts;
   _touchListening = false;
+  /** Aborting it removes every canvas listener added in initialize(). */
+  _listeners = new AbortController();
   /** Set in update, consumed in afterUpdate. Ageing before a publish would hide the press. */
   _touchPublished = false;
   static _PHASE_BEGIN = 0;
@@ -7478,6 +9433,12 @@ class InputManager {
   getTouchCapabilities() {
     return this._touchCapabilities;
   }
+  /** Removes the canvas listeners. Called from `Framework.dispose()`. */
+  dispose() {
+    this._listeners.abort();
+    this._listeners = new AbortController();
+    this._touchListening = false;
+  }
   /** @inheritDoc */
   initialize() {
     const canvas = this._framework.windowManager.canvas;
@@ -7488,18 +9449,18 @@ class InputManager {
     canvas.addEventListener("mousemove", (e4) => {
       this._mousePosition[0] = e4.clientX;
       this._mousePosition[1] = e4.clientY;
-    });
+    }, { signal: this._listeners.signal });
     canvas.addEventListener("mousedown", (e4) => {
       const idx = e4.button;
       const btn = this._mouseButtonMap[idx] ?? MouseButton.NONE;
       this._mouseButtonDown[btn] = true;
-    });
+    }, { signal: this._listeners.signal });
     canvas.addEventListener("mouseup", (e4) => {
       const idx = e4.button;
       const btn = this._mouseButtonMap[idx] ?? MouseButton.NONE;
       this._mouseButtonDown[btn] = false;
       this._mouseButtonReleased[btn] = true;
-    });
+    }, { signal: this._listeners.signal });
     canvas.addEventListener("wheel", (e4) => {
       let x2 = 0;
       let y2 = 0;
@@ -7515,7 +9476,7 @@ class InputManager {
       }
       vec2.set(this._scrollWheelPosition, x2, y2);
       e4.preventDefault();
-    });
+    }, { signal: this._listeners.signal });
   }
   _handleTouchEvents(canvas) {
     if (this._touchListening) {
@@ -7523,7 +9484,7 @@ class InputManager {
     }
     this._touchListening = true;
     canvas.style.touchAction = "none";
-    const options = InputManager._touchListenerOptions;
+    const options = { ...InputManager._touchListenerOptions, signal: this._listeners.signal };
     canvas.addEventListener("touchstart", this._onTouchStart, options);
     canvas.addEventListener("touchmove", this._onTouchMove, options);
     canvas.addEventListener("touchend", this._onTouchEnd, options);
@@ -7808,12 +9769,12 @@ class Framework {
   _onInitializeListeners = [];
   _onUpdateListeners = [];
   _onRenderListeners = [];
-  _container;
   _textureFactory;
   _buffersFactory;
   _contentManager;
   _geometryBuilder;
   _meshFactory;
+  _disposed = false;
   /**
    * The constructor for the Framework class.
    * @param options The optional framework configuration. When omitted, a default `FrameworkConfiguration` is used.
@@ -7824,7 +9785,6 @@ class Framework {
       console.warn("Canvas not provided. Creating canvas and appending it to document.body.");
     }
     options.backBufferSize = options.backBufferSize ?? vec2.fromValues(800, 600);
-    this._container = container.createChildContainer();
     this.windowManager = new WindowManager(options.canvas ?? null);
     const rendererConfig = {
       backBufferSize: options.backBufferSize,
@@ -7832,7 +9792,6 @@ class Framework {
       alpha: options.alpha ?? false,
       powerPreference: options.powerPreference ?? PowerPreferenceType.DEFAULT
     };
-    this._container.registerInstance(RenderConfigurationSymbol, rendererConfig);
     this.renderer = new WebGlRenderer(this, rendererConfig);
     this.renderingBackend = RenderingBackend.WEB_GL;
     this._textureFactory = new WebGlTextureFactory(this);
@@ -7841,6 +9800,7 @@ class Framework {
     this._contentManager = new ContentManager(this, new WebGlShaderModuleLoader(this));
     this._meshFactory = new MeshFactory(this);
     this.materialFactory = new MaterialFactory(this);
+    this.lightsFactory = new WebGlAmbientLightFactory(this);
     this._buffersFactory = new WebGlBuffersFactory(this);
     this.spriteBatch = new SpriteBatch(this);
     this.cameraFactory = new CameraFactory(this);
@@ -7938,6 +9898,8 @@ class Framework {
   /** @inheritDoc */
   materialFactory;
   /** @inheritDoc */
+  lightsFactory;
+  /** @inheritDoc */
   timeManager;
   /** @inheritDoc */
   input;
@@ -7950,10 +9912,10 @@ class Framework {
     this.spriteBatch.initialize();
     this.input.initialize();
     this.timeManager.prepareStart();
-    for (const listener of this._onLoadContentListeners) {
+    for (const listener of this._onInitializeListeners) {
       listener();
     }
-    for (const listener of this._onInitializeListeners) {
+    for (const listener of this._onLoadContentListeners) {
       listener();
     }
     this.renderer.afterInitialize();
@@ -7975,12 +9937,31 @@ class Framework {
     });
     this.windowManager.runEventLoop();
   }
-  /** @inheritDoc */
+  /**
+   * Stops the event loop and disposes the framework's services and GL resources,
+   * including per-framework caches such as the default texture and the shader modules.
+   * A new `Framework` afterwards creates fresh resources on its own context. Calling it twice does nothing.
+   */
   dispose() {
+    if (this._disposed) {
+      return;
+    }
+    this._disposed = true;
+    this.windowManager.dispose();
+    this.input.dispose?.();
+    this._onLoadContentListeners.length = 0;
+    this._onInitializeListeners.length = 0;
+    this._onUpdateListeners.length = 0;
+    this._onRenderListeners.length = 0;
+    WebGlTexture2D.disposeDefault(this);
+    this._contentManager.dispose?.();
+    this.renderer.graphicsDevice?.dispose();
   }
 }
 export {
   AlignUtilities,
+  AmbientLight,
+  BaseGeometry,
   BufferUsage,
   Button,
   CameraFactory,
@@ -7988,6 +9969,11 @@ export {
   ContentConfig,
   CpuImageProcessor,
   CullMode,
+  DEFAULT_DIRECTIONAL_LIGHTS_COUNT,
+  DEFAULT_POINT_LIGHTS_COUNT,
+  DirectionalLight,
+  ForwardBlinnPhongMaterial,
+  ForwardBlinnPhongMaterialDescriptor,
   Framework,
   FrameworkConfiguration,
   FrontFace,
@@ -8012,9 +9998,12 @@ export {
   MipMapSamplerFilter,
   MouseButton,
   MouseState,
+  ObjLoader,
+  ObjMaterialDefinition,
   OrbitCamera,
   OrthographicCamera,
   PerspectiveCamera,
+  PointLight,
   PowerPreferenceType,
   PrimitiveStateDescriptor,
   PrimitiveTopology,
@@ -8028,9 +10017,12 @@ export {
   SamplerAddressMode,
   SamplerDescriptor$1 as SamplerDescriptor,
   SamplerFilter,
+  Scene,
   ShaderStage,
+  SpriteMaterial,
   State,
   StoreAction,
+  SubMesh,
   SurfacePresentMode,
   SwapChainDescriptor,
   TextureDescriptor,