@expofp/renderer 3.2.1 → 3.2.2

package/dist/index.js

@@ -1,4 +1,4 @@
-import { AlwaysDepth, BatchedMesh, Box3, BufferAttribute, BufferGeometry, Camera, Clock, Color, CustomBlending, DataTexture, DirectionalLight, DoubleSide, DynamicDrawUsage, FloatType, Frustum, Group, HemisphereLight, IntType, LessDepth, LessEqualDepth, LinearSRGBColorSpace, MathUtils, Matrix3, Matrix4, Mesh, MeshBasicMaterial, MeshPhysicalMaterial, MeshStandardMaterial, OneFactor, PMREMGenerator, PerspectiveCamera, Plane, PlaneGeometry, Quaternion, RGBAFormat, RGBAIntegerFormat, RGFormat, RGIntegerFormat, Raycaster, RedFormat, RedIntegerFormat, SRGBColorSpace, Scene, Sphere, Spherical, StreamDrawUsage, Texture, UnsignedIntType, Vector2, Vector3, Vector4, WebGLRenderer } from "three";
+import { AlwaysDepth, BatchedMesh, Box3, BufferAttribute, BufferGeometry, Camera, Clock, Color, CustomBlending, DataTexture, DirectionalLight, DoubleSide, DynamicDrawUsage, FloatType, Frustum, Group, HemisphereLight, IntType, LessDepth, LessEqualDepth, LinearSRGBColorSpace, MathUtils, Matrix3, Matrix4, Mesh, MeshBasicMaterial, MeshPhysicalMaterial, MeshStandardMaterial, NotEqualStencilFunc, OneFactor, PMREMGenerator, PerspectiveCamera, Plane, PlaneGeometry, Quaternion, RGBAFormat, RGBAIntegerFormat, RGFormat, RGIntegerFormat, Raycaster, RedFormat, RedIntegerFormat, ReplaceStencilOp, SRGBColorSpace, Scene, Sphere, Spherical, StreamDrawUsage, Texture, UnsignedIntType, Vector2, Vector3, Vector4, WebGLRenderer } from "three";
 import { traverseAncestorsGenerator } from "three/examples/jsm/utils/SceneUtils.js";
 import createLog from "debug";
 import { BatchedText, Text } from "troika-three-text";
@@ -1079,6 +1079,15 @@ var dimColorFrag = `
 * configured camera pitch. See {@link MaterialSystem.addPolygonOffset} for derivation.
 */
 var POLYGON_OFFSET_MULTIPLIER = 12;
+/**
+* Stencil refs for line materials are allocated downward from 255 to stay clear of
+* maplibre's stencil IDs (tile clipping masks), which grow upward from 1 in external
+* mode where the stencil buffer is shared. Allocation wraps back to 255 at the floor;
+* two line layers only share a ref (and stop blending where they overlap) in scenes
+* with more line layers than the 255..200 range holds.
+*/
+var LINE_STENCIL_REF_MAX = 255;
+var LINE_STENCIL_REF_MIN = 200;
 var sharedParameters = {
 	side: DoubleSide,
 	forceSinglePass: true,
@@ -1089,6 +1098,7 @@ var MaterialSystem = class {
 	backgroundMaterial;
 	viewport = new Vector4();
 	lightingMaterials = [];
+	nextLineStencilRef = LINE_STENCIL_REF_MAX;
 	/**
 	* Creates a line material.
 	* @param params {@link LineMaterialParameters}
@@ -1099,6 +1109,11 @@ var MaterialSystem = class {
 			...sharedParameters,
 			...params
 		});
+		material.stencilWrite = true;
+		material.stencilFunc = NotEqualStencilFunc;
+		material.stencilZPass = ReplaceStencilOp;
+		material.stencilRef = this.nextLineStencilRef;
+		this.nextLineStencilRef = this.nextLineStencilRef <= LINE_STENCIL_REF_MIN ? LINE_STENCIL_REF_MAX : this.nextLineStencilRef - 1;
 		material.onBeforeCompile = (shader) => {
 			shader.defines ??= {};
 			shader.defines["USE_BATCHING_COLOR"] = "";
@@ -1762,6 +1777,19 @@ function getAtlasSizeBytes(width, height) {
 	return Math.ceil(width * height * 4 * 1.33);
 }
 //#endregion
+//#region src/util/colors.ts
+extend([namesPlugin]);
+/**
+* Normalizes a {@link ColorInput} into an rgba color object.
+* @param colorInput color as a css color string or a numeric 0xRRGGBB value
+* @returns rgba color (r/g/b 0-255, a 0-1), or undefined if the input is not a valid color
+*/
+function normalizeColor(colorInput) {
+	const color = colord(typeof colorInput === "string" ? colorInput : `#${colorInput.toString(16).padStart(6, "0")}`);
+	if (!color.isValid()) return void 0;
+	return color.toRgb();
+}
+//#endregion
 //#region src/geometry/line.ts
 var logger$13 = createLogger("line");
 /**
@@ -1769,6 +1797,7 @@ var logger$13 = createLogger("line");
 */
 var LineSystem = class extends RenderableSystem {
 	lineColor = new Color();
+	opacityByDef = /* @__PURE__ */ new WeakMap();
 	/**
 	* @param ctx {@link RendererContext}
 	* @param materialSystem {@link MaterialSystem}
@@ -1784,6 +1813,8 @@ var LineSystem = class extends RenderableSystem {
 		const geometries = /* @__PURE__ */ new Map();
 		const lines = layer.children;
 		for (const line of lines) {
+			const normColor = normalizeColor(line.color);
+			if (normColor !== void 0) this.opacityByDef.set(line, normColor.a);
 			const lineGeometry = new LineSegmentsGeometry();
 			lineGeometry.setPositions(line.points.flatMap((pt) => [
 				pt.x,
@@ -1794,10 +1825,16 @@ var LineSystem = class extends RenderableSystem {
 			vertexCount += lineGeometry.attributes["position"].count;
 			indexCount += lineGeometry.index?.count ?? 0;
 		}
-		const material = this.materialSystem.createLineMaterial({ color: "white" });
+		const material = this.materialSystem.createLineMaterial({
+			color: "white",
+			transparent: lines.some((line) => (this.opacityByDef.get(line) ?? 1) < 1)
+		});
 		const batchedMesh = new BatchedMesh$1(lines.length, vertexCount, indexCount, material);
-		batchedMesh.addPerInstanceUniforms({ vertex: { linewidth: "float" } });
-		batchedMesh.setCustomSort((list) => list.sort((a, b) => a.z - b.z));
+		batchedMesh.addPerInstanceUniforms({
+			vertex: { linewidth: "float" },
+			fragment: { opacity: "float" }
+		});
+		batchedMesh.setCustomSort((list) => this.sortInstances(batchedMesh, list));
 		for (const [line, geometry] of geometries.entries()) {
 			const geometryId = batchedMesh.addGeometry(geometry);
 			const instanceId = batchedMesh.addInstance(geometryId);
@@ -1807,11 +1844,28 @@ var LineSystem = class extends RenderableSystem {
 		return group;
 	}
 	updateDefImpl(lineDef, mesh, instanceIds) {
+		const normColor = normalizeColor(lineDef.color);
+		if (!normColor) {
+			logger$13.warn(`Invalid color: ${lineDef.color} %O`, lineDef);
+			return;
+		}
+		const color = this.lineColor.setRGB(normColor.r / 255, normColor.g / 255, normColor.b / 255, SRGBColorSpace);
+		this.opacityByDef.set(lineDef, normColor.a);
 		for (const instanceId of instanceIds) {
-			mesh.setColorAt(instanceId, this.lineColor.set(lineDef.color));
+			mesh.setColorAt(instanceId, color);
 			mesh.setUniformAt(instanceId, "linewidth", lineDef.width);
+			mesh.setUniformAt(instanceId, "opacity", normColor.a);
 		}
 	}
+	sortInstances(mesh, list) {
+		const lineDefs = this.getDefsByObject(mesh);
+		list.sort((a, b) => {
+			const aOpacity = this.opacityByDef.get(lineDefs[a.index]) ?? 1;
+			const bOpacity = this.opacityByDef.get(lineDefs[b.index]) ?? 1;
+			if (aOpacity !== bOpacity) return bOpacity - aOpacity;
+			return a.index - b.index;
+		});
+	}
 	deinterleaveGeometry(geometry) {
 		const instanceStart = geometry.getAttribute("instanceStart");
 		const instanceEnd = geometry.getAttribute("instanceEnd");
@@ -2183,7 +2237,6 @@ function computeBoundingSphere(bounds, origin, out = new Sphere()) {
 //#endregion
 //#region src/geometry/mesh.ts
 var logger$12 = createLogger("mesh");
-extend([namesPlugin]);
 /**
 * A system that handles the rendering of shape defs.
 */
@@ -2209,7 +2262,7 @@ var MeshSystem = class extends RenderableSystem {
 		const shapes = layer.children;
 		const mapShapeToNormColor = /* @__PURE__ */ new Map();
 		for (const shapeDef of shapes) {
-			const normColor = this.normalizeColor(shapeDef.color);
+			const normColor = normalizeColor(shapeDef.color);
 			if (normColor !== void 0) mapShapeToNormColor.set(shapeDef, normColor);
 		}
 		const [opaqueShapes, transparentShapes] = partition(shapes, (shapeDef) => (mapShapeToNormColor.get(shapeDef)?.a ?? 1) === 1);
@@ -2256,7 +2309,7 @@ var MeshSystem = class extends RenderableSystem {
 		} else if (isRect) this.updateRect(shape, mesh, instanceId);
 	}
 	updateColor(shapeDef, mesh, instanceId) {
-		const color = this.normalizeColor(shapeDef.color);
+		const color = normalizeColor(shapeDef.color);
 		if (!color) {
 			logger$12.warn(`Invalid color: ${shapeDef.color} %O`, shapeDef);
 			return;
@@ -2321,11 +2374,6 @@ var MeshSystem = class extends RenderableSystem {
 		}
 		return batchedMesh;
 	}
-	normalizeColor(colorInput) {
-		const color = colord(typeof colorInput === "string" ? colorInput : `#${colorInput.toString(16).padStart(6, "0")}`);
-		if (!color.isValid()) return void 0;
-		return color.toRgb();
-	}
 	buildPolygonGeometry(polygon) {
 		return new BufferGeometry().setFromPoints(polygon.vertices).setIndex(polygon.indices.flat());
 	}
@@ -7674,7 +7722,8 @@ var Renderer = class {
 			antialias: true,
 			context: gl,
 			canvas: this.canvas,
-			precision: "highp"
+			precision: "highp",
+			stencil: true
 		};
 		this.clock = new Clock();
 		this.renderer = new WebGLRenderer(rendererOptions);

package/package.json

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