@expofp/renderer 3.1.2 → 3.1.3

package/dist/index.js

@@ -1485,7 +1485,7 @@ var ImageSystem = class extends RenderableSystem {
 	/** Textures memory limit in megabytes */
 	memoryLimitMb;
 	packer;
-	originalAtlases = /* @__PURE__ */ new Map();
+	atlasData = /* @__PURE__ */ new Map();
 	globalTranslationMatrix = new Matrix4();
 	originTranslationMatrix = new Matrix4();
 	rotationMatrix = new Matrix4();
@@ -1503,11 +1503,11 @@ var ImageSystem = class extends RenderableSystem {
 	}
 	dispose() {
 		super.dispose();
-		this.originalAtlases.clear();
+		this.atlasData.clear();
 	}
 	updateLayerImpl(group, layerDef) {
 		super.updateLayerImpl(group, layerDef);
-		if (this.memoryLimitMb) this.resizeTextures();
+		this.renderAtlases();
 	}
 	buildLayer(layer) {
 		const is3D = layer.mode === "3D";
@@ -1522,9 +1522,8 @@ var ImageSystem = class extends RenderableSystem {
 				originalIndex: imageWithIndex.originalIndex
 			}))).sort((a, b) => a.originalIndex - b.originalIndex);
 			const instanceCount = rectsWithDef.length;
-			const texture = createAtlas(bin);
 			const instanceMaterial = this.materialSystem.createTextureMaterial({
-				map: texture,
+				map: createPlaceholderTexture(),
 				uvOffset: true,
 				depthEnable: is3D
 			});
@@ -1532,6 +1531,7 @@ var ImageSystem = class extends RenderableSystem {
 			const vertexCount = instanceGeometry.attributes["position"].count;
 			const batchedMesh = new BatchedMesh$1(instanceCount, vertexCount, instanceGeometry.index?.count ?? 0, instanceMaterial);
 			batchedMesh.sortObjects = false;
+			batchedMesh.visible = false;
 			batchedMesh.addPerInstanceUniforms({ vertex: { uvOffset: "vec4" } });
 			const geometryId = batchedMesh.addGeometry(instanceGeometry);
 			for (const { def, rect } of rectsWithDef) {
@@ -1540,66 +1540,40 @@ var ImageSystem = class extends RenderableSystem {
 				batchedMesh.setUniformAt(instanceId, "uvOffset", uvOffset);
 				this.registerDefObject(def, batchedMesh, instanceId);
 			}
-			if (!rectsWithDef.some(({ def }) => def.source instanceof HTMLCanvasElement)) this.originalAtlases.set(batchedMesh, texture.image);
+			const resizable = !rectsWithDef.some(({ def }) => def.source instanceof HTMLCanvasElement);
+			this.atlasData.set(batchedMesh, {
+				bin,
+				resizable,
+				appliedScale: 0
+			});
 			group.add(batchedMesh);
 		}
 		return group;
 	}
 	/**
-	* Resize textures to fit the memory limit.
-	* Uses stored original atlases so that every call computes a globally proportional
-	* resize factor, regardless of how many layers have been loaded so far.
+	* Render (or re-render) atlas textures for all meshes, scaling to fit the memory limit when set.
+	* Atlases are rendered directly at the target scale — no full-size intermediate is created.
+	* Meshes already at the target scale are skipped.
 	*/
-	resizeTextures() {
-		if (!this.memoryLimitMb) {
-			logger$12.debug("Memory limit is not set, unable to resize textures.");
-			return;
-		}
-		logger$12.debug(`Resizing textures to fit memory limit: ${this.memoryLimitMb} MB`);
-		const resizableMeshes = [];
-		let totalOriginal = 0;
-		let totalNonResizable = 0;
+	renderAtlases() {
+		const scale = this.computeResizeFactor();
 		for (const mesh of this.getAllObjects()) {
-			const originalCanvas = this.originalAtlases.get(mesh);
-			const texture = mesh.material.map;
-			if (originalCanvas) {
-				totalOriginal += getCanvasSizeBytes(originalCanvas, texture.generateMipmaps);
-				resizableMeshes.push(mesh);
-			} else totalNonResizable += getCanvasSizeBytes(texture.image, texture.generateMipmaps);
-		}
-		if (resizableMeshes.length === 0) {
-			logger$12.debug("No resizable meshes found, no need to resize textures.");
-			return;
-		}
-		const budget = this.memoryLimitMb * 1024 * 1024 - totalNonResizable;
-		if (budget < 0) {
-			logger$12.debug("Memory limit is too low, unable to resize textures.");
-			return;
-		}
-		const resizeFactor = Math.sqrt(budget / totalOriginal);
-		if (resizeFactor >= 1) {
-			logger$12.debug("Textures are already within the memory limit, no need to resize");
-			return;
-		}
-		logger$12.debug(`Resize factor: ${resizeFactor}`);
-		let newTotal = totalNonResizable;
-		for (const mesh of resizableMeshes) {
+			const data = this.atlasData.get(mesh);
+			if (!data) continue;
+			const targetScale = data.resizable ? scale : 1;
+			if (data.appliedScale === targetScale) continue;
 			const material = mesh.material;
-			const currentTexture = material.map;
-			const originalCanvas = this.originalAtlases.get(mesh);
-			const resizedTexture = resizeCanvas(originalCanvas, resizeFactor);
-			const originalDim = `${originalCanvas.width}x${originalCanvas.height}`;
-			const resizedDim = `${resizedTexture.image.width}x${resizedTexture.image.height}`;
-			logger$12.debug(`Resized atlas for ${mesh.name || mesh.parent?.name}, from ${originalDim} to ${resizedDim}`);
-			newTotal += getCanvasSizeBytes(resizedTexture.image, resizedTexture.generateMipmaps);
-			material.map = resizedTexture;
+			const oldTexture = material.map;
+			material.map = createAtlas(data.bin, targetScale);
 			material.needsUpdate = true;
-			currentTexture.dispose();
+			oldTexture?.dispose();
+			mesh.visible = true;
+			data.appliedScale = targetScale;
+			logger$12.debug(`Rendered atlas for ${mesh.name || mesh.parent?.name} at scale ${targetScale.toFixed(3)}`);
 		}
-		logger$12.debug(`New memory usage after resizing: ${newTotal} bytes`);
 	}
 	disposeObject(object) {
-		this.originalAtlases.delete(object);
+		this.atlasData.delete(object);
 		super.disposeObject(object);
 	}
 	updateDefImpl(imageDef, mesh, instanceIds) {
@@ -1613,6 +1587,32 @@ var ImageSystem = class extends RenderableSystem {
 		const matrix = this.originTranslationMatrix.premultiply(this.scaleMatrix).premultiply(this.rotationMatrix).premultiply(this.globalTranslationMatrix);
 		mesh.setMatrixAt(instanceId, matrix);
 	}
+	computeResizeFactor() {
+		if (!this.memoryLimitMb) {
+			logger$12.debug("Memory limit is not set, atlases will not be scaled");
+			return 1;
+		}
+		let totalResizable = 0;
+		let totalNonResizable = 0;
+		for (const data of this.atlasData.values()) {
+			const bytes = getAtlasSizeBytes(data.bin.width, data.bin.height);
+			if (data.resizable) totalResizable += bytes;
+			else totalNonResizable += bytes;
+		}
+		if (totalResizable === 0) {
+			logger$12.debug("No resizable atlases, atlases will not be scaled");
+			return 1;
+		}
+		const budget = this.memoryLimitMb * 1024 * 1024 - totalNonResizable;
+		if (budget <= 0) {
+			logger$12.debug("Memory limit is too low, unable to resize textures.");
+			return 1;
+		}
+		const factor = Math.sqrt(budget / totalResizable);
+		if (factor >= 1) return 1;
+		logger$12.debug(`Resize factor: ${factor.toFixed(3)} (budget ${budget} bytes, resizable ${totalResizable} bytes)`);
+		return factor;
+	}
 	packImages(images) {
 		this.packer.reset();
 		const rectangles = [];
@@ -1646,23 +1646,19 @@ var ImageSystem = class extends RenderableSystem {
 		return this.packer.bins;
 	}
 };
-function createAtlas(bin) {
+function createAtlas(bin, scale) {
 	const t0 = performance.now();
 	const canvas = document.createElement("canvas");
-	canvas.width = bin.width;
-	canvas.height = bin.height;
+	canvas.width = Math.max(1, Math.floor(bin.width * scale));
+	canvas.height = Math.max(1, Math.floor(bin.height * scale));
 	const ctx = canvas.getContext("2d");
-	for (const rect of bin.rects) ctx.drawImage(rect.data[0].def.source, rect.x, rect.y, rect.width, rect.height);
+	for (const rect of bin.rects) ctx.drawImage(rect.data[0].def.source, Math.floor(rect.x * scale), Math.floor(rect.y * scale), Math.floor(rect.width * scale), Math.floor(rect.height * scale));
 	const t1 = performance.now();
-	logger$12.debug(`Create atlas took ${(t1 - t0).toFixed(2)} milliseconds.`);
+	logger$12.debug(`Create atlas (${canvas.width}x${canvas.height}) took ${(t1 - t0).toFixed(2)} milliseconds.`);
 	return createTexture(canvas);
 }
-function resizeCanvas(source, resizeFactor) {
-	const canvas = document.createElement("canvas");
-	canvas.width = Math.floor(source.width * resizeFactor);
-	canvas.height = Math.floor(source.height * resizeFactor);
-	canvas.getContext("2d").drawImage(source, 0, 0, canvas.width, canvas.height);
-	return createTexture(canvas);
+function createPlaceholderTexture() {
+	return new Texture(document.createElement("canvas"));
 }
 function createTexture(source) {
 	const texture = new Texture(source);
@@ -1672,8 +1668,8 @@ function createTexture(source) {
 	texture.needsUpdate = true;
 	return texture;
 }
-function getCanvasSizeBytes(canvas, useMipmaps) {
-	return Math.ceil(canvas.width * canvas.height * 4 * (useMipmaps ? 1.33 : 1));
+function getAtlasSizeBytes(width, height) {
+	return Math.ceil(width * height * 4 * 1.33);
 }
 //#endregion
 //#region src/geometry/line.ts
@@ -2511,10 +2507,8 @@ var LayerSystem = class {
 		for (const child of sceneDef.rootLayer.children) rootGroup.add(this.buildLayer(child));
 		this.updateLayer(sceneDef.rootLayer, false);
 		printTree(rootGroup, logger$8.debug);
-		if (sceneDef.memoryLimit) {
-			this.imageSystem.memoryLimitMb = sceneDef.memoryLimit;
-			this.imageSystem.resizeTextures();
-		}
+		if (sceneDef.memoryLimit) this.imageSystem.memoryLimitMb = sceneDef.memoryLimit;
+		this.imageSystem.renderAtlases();
 		return rootGroup;
 	}
 	/**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@expofp/renderer",
-  "version": "3.1.2",
+  "version": "3.1.3",
   "type": "module",
   "files": [
     "dist"