threejs-debug-compose 0.1.0

package/dist/debug-views-post.js

@@ -0,0 +1,329 @@
+import { resolveDebugViewLayout as e } from "./debug-view-layout.js";
+import { getDefaultDebugViewSource as t, getResolvedDebugViewMode as n } from "./debug-view-selection.js";
+import { createDebugViewportPlan as r } from "./debug-viewport-plan.js";
+import { createDebugViewportRenderGraphPlan as i } from "./debug-render-graph-plan.js";
+import { createDebugViewportRects as a, toDebugViewportPixels as o } from "./debug-viewport-presenter.js";
+import { createDebugViewportLabels as s, createDebugViewportPlanLabels as c } from "./debug-viewport-labels.js";
+import { createViewCompositor as l } from "./debug-views-tsl/compositor.js";
+import { createDebugViewUniforms as u, updateDebugViewUniforms as d } from "./debug-views-tsl/uniforms.js";
+import { createAoFallbacks as f } from "./debug-views-tsl/ao-fallbacks.js";
+import { configureMaterialDetailPass as p, configureSceneDebugPass as m, createDefaultDebugNodeResolver as h } from "./debug-views-tsl/default-debug-nodes.js";
+import { applyDebugTextureTypes as g, createDebugRenderPlan as _ } from "./debug-render-plan.js";
+import { createShaderCostOverride as v } from "./shader-cost/cost-override.js";
+import { pass as y } from "three/tsl";
+import { useEffect as b, useMemo as x, useRef as S } from "react";
+import { useFrame as C, useThree as w } from "@react-three/fiber";
+import { Html as T } from "@react-three/drei";
+import { RenderPipeline as E } from "three/webgpu";
+import { MeshBasicMaterial as D, MeshStandardMaterial as O, Vector2 as k, Vector4 as A } from "three";
+import { Fragment as j, jsx as M, jsxs as N } from "react/jsx-runtime";
+//#region components/debug-views/debug-views-post.tsx
+function P({ views: e, mode: t = "compose", viewportViews: n, activeView: r = 0, layout: i = "single", slots: a, columns: o, rows: s, showLabels: c = !1, viewportLabels: l, overlayOpacity: u = .35, enabled: d = !0 }) {
+	let f = x(() => ({
+		slots: a,
+		columns: o,
+		rows: s
+	}), [
+		a,
+		o,
+		s
+	]);
+	return d ? /* @__PURE__ */ M(F, {
+		views: e,
+		mode: t,
+		viewportViews: n,
+		activeView: r,
+		layout: i,
+		layoutOptions: f,
+		showLabels: c,
+		viewportLabels: l,
+		overlayOpacity: u
+	}) : null;
+}
+function F({ views: n, mode: a, viewportViews: o, activeView: s, layout: c, layoutOptions: l, showLabels: p, viewportLabels: m, overlayOpacity: h }) {
+	let { camera: g, gl: v, scene: y } = w(), b = x(() => u(), []), S = x(() => f(y), [y]), T = x(() => e(c, l), [c, l]), E = x(() => a === "viewport" ? r({
+		views: n,
+		viewportViews: o,
+		activeView: s,
+		layout: T
+	}) : void 0, [
+		a,
+		n,
+		o,
+		s,
+		T
+	]), D = x(() => E ? i(E) : void 0, [E]), O = E?.views ?? n, k = x(() => _(O, s, T), [
+		O,
+		s,
+		T
+	]), A = E?.views ?? k.views, P = x(() => A.some((e) => t(e) === "shaderCost"), [A]), F = z(a === "compose", y, g, k, T, W(v), b, S), R = B(a === "viewport", y, g, E, D, W(v), b, S);
+	return C(() => {
+		let e = y.background;
+		y.background = null;
+		try {
+			if (a === "viewport") {
+				let e = R.current;
+				e?.usesAoFallback && S.refresh(), e?.render();
+			} else d(b, 0, T, k.views.length, h), k.usesAoFallback && S.refresh(), F.current?.render();
+		} finally {
+			y.background = e;
+		}
+	}, 1), /* @__PURE__ */ N(j, { children: [p ? /* @__PURE__ */ M(I, {
+		views: A,
+		layout: T,
+		labels: m,
+		viewportPlan: E
+	}) : null, P ? /* @__PURE__ */ M(L, {}) : null] });
+}
+function I({ views: e, layout: t, labels: n, viewportPlan: r }) {
+	let i = x(() => r ? c(r, n) : s(e, t, n), [
+		e,
+		t,
+		n,
+		r
+	]);
+	return i.length === 0 ? null : /* @__PURE__ */ M(T, {
+		fullscreen: !0,
+		style: { pointerEvents: "none" },
+		children: /* @__PURE__ */ M("div", {
+			"aria-hidden": "true",
+			style: {
+				display: "grid",
+				gridTemplateColumns: `repeat(${t.columns}, minmax(0, 1fr))`,
+				gridTemplateRows: `repeat(${t.rows}, minmax(0, 1fr))`,
+				height: "100%",
+				inset: 0,
+				pointerEvents: "none",
+				position: "absolute",
+				width: "100%"
+			},
+			children: i.map((e, t) => /* @__PURE__ */ M("div", {
+				style: {
+					minWidth: 0,
+					position: "relative"
+				},
+				children: /* @__PURE__ */ M("span", {
+					style: {
+						backdropFilter: "blur(8px)",
+						background: "rgba(0, 0, 0, 0.58)",
+						border: "1px solid rgba(255, 255, 255, 0.16)",
+						borderRadius: 4,
+						color: "#fff",
+						fontFamily: "monospace",
+						fontSize: 11,
+						left: 10,
+						letterSpacing: "0.04em",
+						lineHeight: 1,
+						padding: "6px 8px",
+						position: "absolute",
+						textTransform: "uppercase",
+						top: 10,
+						whiteSpace: "nowrap"
+					},
+					children: e
+				})
+			}, `${t}:${e}`))
+		})
+	});
+}
+function L() {
+	return /* @__PURE__ */ M(T, {
+		fullscreen: !0,
+		style: { pointerEvents: "none" },
+		children: /* @__PURE__ */ N("div", {
+			"aria-hidden": "true",
+			style: {
+				alignItems: "center",
+				bottom: 42,
+				display: "flex",
+				flexDirection: "column",
+				gap: 6,
+				left: "50%",
+				pointerEvents: "none",
+				position: "absolute",
+				transform: "translateX(-50%)",
+				width: "min(560px, calc(100vw - 48px))",
+				zIndex: 20
+			},
+			children: [/* @__PURE__ */ N("div", {
+				style: {
+					alignItems: "center",
+					background: "rgba(0, 0, 0, 0.62)",
+					border: "1px solid rgba(255, 255, 255, 0.16)",
+					borderRadius: 6,
+					boxShadow: "0 10px 32px rgba(0, 0, 0, 0.32)",
+					display: "grid",
+					gap: 8,
+					gridTemplateColumns: "auto 1fr auto",
+					padding: "8px 10px",
+					width: "100%"
+				},
+				children: [
+					/* @__PURE__ */ M("span", {
+						style: R,
+						children: "cheap"
+					}),
+					/* @__PURE__ */ M("div", { style: {
+						background: "linear-gradient(90deg, #000 0%, #000 6%, #00ff1f 18%, #fff000 48%, #ff0d00 80%, #fff 100%)",
+						border: "1px solid rgba(255, 255, 255, 0.24)",
+						borderRadius: 999,
+						height: 12,
+						overflow: "hidden"
+					} }),
+					/* @__PURE__ */ M("span", {
+						style: R,
+						children: "expensive"
+					})
+				]
+			}), /* @__PURE__ */ M("div", {
+				style: {
+					color: "rgba(255, 255, 255, 0.7)",
+					fontFamily: "monospace",
+					fontSize: 10,
+					letterSpacing: "0.04em",
+					textTransform: "uppercase"
+				},
+				children: "estimated shader complexity · black = no rendered material"
+			})]
+		})
+	});
+}
+var R = {
+	color: "#fff",
+	fontFamily: "monospace",
+	fontSize: 10,
+	letterSpacing: "0.08em",
+	textTransform: "uppercase"
+};
+function z(e, t, n, r, i, a, o, s) {
+	let c = S(null);
+	return b(() => {
+		if (!e) return;
+		let l = H(t, n, r, i, a, o);
+		return r.usesAoFallback && s.apply(), c.current = l.pipeline, () => {
+			l.dispose(), s.restore(), c.current = null;
+		};
+	}, [
+		e,
+		t,
+		n,
+		r,
+		i,
+		a,
+		o,
+		s
+	]), c;
+}
+function B(e, t, n, r, i, s, c, l) {
+	let u = S(null);
+	return b(() => {
+		if (!e || !r || !i) return;
+		let f = i.passes.map((e) => {
+			let r = _([e.view], 0, V);
+			return {
+				plan: r,
+				runtime: H(t, e.camera ?? n, r, V, s, c, e.resolutionScale)
+			};
+		}), p = a(r), m = new k(), h = new A(), g = new A(), v = f.some((e) => e.plan.usesAoFallback);
+		return v && l.apply(), u.current = {
+			usesAoFallback: v,
+			render: () => {
+				s.getSize(m);
+				let e = s.getScissorTest();
+				s.getViewport(h), s.getScissor(g), s.setScissorTest(!1), s.setViewport(0, 0, m.x, m.y), s.clear(!0, !0, !1), s.setScissorTest(!0);
+				try {
+					for (let e of i.cells) {
+						let t = p[e.index], n = f[e.passIndex];
+						if (!t || !n) continue;
+						let r = o(t.scissor, m);
+						s.setViewport(r.x, r.y, r.width, r.height), s.setScissor(r.x, r.y, r.width, r.height), d(c, 0, V, 1, 1), n.runtime.pipeline.render();
+					}
+				} finally {
+					s.setViewport(h), s.setScissor(g), s.setScissorTest(e);
+				}
+			}
+		}, () => {
+			for (let e of f) e.runtime.dispose();
+			l.restore(), u.current = null;
+		};
+	}, [
+		e,
+		t,
+		n,
+		r,
+		i,
+		s,
+		c,
+		l
+	]), u;
+}
+var V = {
+	mode: "single",
+	presentation: "single",
+	columns: 1,
+	rows: 1,
+	slots: 1
+};
+function H(e, r, i, a, o, s, c = 1) {
+	let u = y(e, r);
+	u.setResolutionScale(c), m(u, i.sceneOutputs), g(u, i.sceneTextureTypes);
+	let d = i.usesMaterialDetailPass ? y(e, r) : void 0;
+	d && (d.setResolutionScale(c), p(d, i.materialDetailOutputs), g(d, i.materialDetailTextureTypes));
+	let f = i.usesWireframePass ? y(e, r) : void 0;
+	f && (f.setResolutionScale(c), f.overrideMaterial = new D({
+		color: 16777215,
+		wireframe: !0,
+		toneMapped: !1
+	}));
+	let _ = i.usesLightingOnlyPass ? y(e, r) : void 0;
+	_ && (_.setResolutionScale(c), _.overrideMaterial = new O({
+		color: 16777215,
+		metalness: 0,
+		roughness: .72
+	}));
+	let b = i.usesReflectionOnlyPass ? y(e, r) : void 0;
+	b && (b.setResolutionScale(c), b.overrideMaterial = new O({
+		color: 0,
+		metalness: 1,
+		roughness: .18
+	}));
+	let x = i.usesShaderCostPass ? v() : void 0, S = i.usesShaderCostPass ? U(e, r, c, x) : void 0, C = h(u, {
+		lightingOnlyPass: _,
+		materialDetailPass: d,
+		reflectionOnlyPass: b,
+		shaderCostPass: S,
+		wireframePass: f
+	}), w = new E(o, l({
+		views: i.views.map((e) => ({
+			...e,
+			mode: n(e),
+			node: e.node ?? C(t(e))
+		})),
+		uniforms: s,
+		layout: a
+	}));
+	return {
+		pipeline: w,
+		dispose: () => {
+			w.dispose(), u.dispose(), d?.dispose(), _?.overrideMaterial?.dispose(), _?.dispose(), b?.overrideMaterial?.dispose(), b?.dispose(), S?.dispose(), x?.dispose(), f?.overrideMaterial?.dispose(), f?.dispose();
+		}
+	};
+}
+function U(e, t, n, r) {
+	let i = y(e, t);
+	i.setResolutionScale(n);
+	let a = i.updateBefore.bind(i);
+	return i.updateBefore = (t) => {
+		let n = r?.apply(e);
+		try {
+			return a(t);
+		} finally {
+			n?.restore();
+		}
+	}, i;
+}
+function W(e) {
+	return e;
+}
+//#endregion
+export { P as DebugViews };

package/dist/debug-views-tsl/ao-fallbacks.js

@@ -0,0 +1,103 @@
+import { DataTexture as e, Material as t, RGBAFormat as n } from "three";
+//#region components/debug-views/debug-views-tsl/ao-fallbacks.ts
+var r = new e(new Uint8Array([
+	255,
+	255,
+	255,
+	255
+]), 1, 1, n);
+r.needsUpdate = !0;
+function i(e) {
+	let n = /* @__PURE__ */ new WeakMap(), r = [], i = /* @__PURE__ */ new Set(), c = /* @__PURE__ */ new Set(), l = /* @__PURE__ */ new Map(), u = /* @__PURE__ */ new Map(), d = t.prototype, f = a(d), p = !1;
+	function m() {
+		p ||= (o(d), !0), e.traverse(_);
+	}
+	function h() {
+		for (let e of c) S(e);
+	}
+	function g() {
+		for (let e of [...r]) D(e);
+		p &&= (s(f), !1), r.length = 0;
+		for (let e of i) e.removeEventListener("childadded", y), e.removeEventListener("childremoved", b);
+		i.clear(), c.clear(), l.clear(), u.clear();
+	}
+	function _(e) {
+		v(e), S(e);
+	}
+	function v(e) {
+		i.has(e) || (e.addEventListener("childadded", y), e.addEventListener("childremoved", b), i.add(e));
+	}
+	function y(e) {
+		e.child.traverse(_);
+	}
+	function b(e) {
+		e.child.traverse(x);
+	}
+	function x(e) {
+		w(e), c.delete(e), i.delete(e) && (e.removeEventListener("childadded", y), e.removeEventListener("childremoved", b));
+	}
+	function S(e) {
+		let t = e.material, n = t ? E(t) : /* @__PURE__ */ new Set(), r = l.get(e);
+		if (r) for (let e of r) n.has(e) || T(e);
+		for (let e of n) r?.has(e) || C(e);
+		n.size > 0 ? (c.add(e), l.set(e, n)) : (c.delete(e), l.delete(e));
+	}
+	function C(e) {
+		let t = u.get(e);
+		if (t !== void 0) {
+			u.set(e, t + 1);
+			return;
+		}
+		if (e.aoMap?.isTexture === !0) return;
+		let i = a(e);
+		n.set(e, i), r.push(i), u.set(e, 1), o(e);
+	}
+	function w(e) {
+		let t = l.get(e);
+		if (t) {
+			for (let e of t) T(e);
+			l.delete(e);
+		}
+	}
+	function T(e) {
+		let t = u.get(e);
+		if (t === void 0) return;
+		if (t > 1) {
+			u.set(e, t - 1);
+			return;
+		}
+		u.delete(e);
+		let r = n.get(e);
+		r && D(r);
+	}
+	function E(e) {
+		return Array.isArray(e) ? new Set(e) : new Set([e]);
+	}
+	function D(e) {
+		s(e), n.delete(e.material), u.delete(e.material);
+		let t = r.indexOf(e);
+		t >= 0 && r.splice(t, 1);
+	}
+	return {
+		apply: m,
+		refresh: h,
+		restore: g
+	};
+}
+function a(e) {
+	return {
+		hadAoMap: Object.prototype.hasOwnProperty.call(e, "aoMap"),
+		hadAoMapIntensity: Object.prototype.hasOwnProperty.call(e, "aoMapIntensity"),
+		material: e,
+		previousAoMap: e.aoMap,
+		previousAoMapIntensity: e.aoMapIntensity
+	};
+}
+function o(e) {
+	e.aoMap = r, e.aoMapIntensity = 0, e.needsUpdate = !0;
+}
+function s(e) {
+	e.hadAoMap ? e.material.aoMap = e.previousAoMap : delete e.material.aoMap, e.hadAoMapIntensity ? e.material.aoMapIntensity = e.previousAoMapIntensity : delete e.material.aoMapIntensity, e.material.needsUpdate = !0;
+}
+//#endregion
+export { i as createAoFallbacks };

package/dist/debug-views-tsl/compositor.js

@@ -0,0 +1,51 @@
+import { LAYOUT_INDEX as e, isResolvedDebugViewLayout as t, resolveDebugViewLayout as n } from "../debug-view-layout.js";
+import { visualizeDepth as r, visualizeHeatmap as i, visualizeNormal as a } from "./visualize.js";
+import { float as o, mix as s, screenUV as c, vec4 as l } from "three/tsl";
+//#region components/debug-views/debug-views-tsl/compositor.ts
+function u(t) {
+	let { views: n, uniforms: r, layout: i } = t;
+	if (n.length === 0) return l(0, 0, 0, 1);
+	let a = n.map((e) => g(e));
+	if (i) return d(i, a, r);
+	let s = f(a, r.activeView), c = p(a, r.overlayOpacity), u = m(a, r.viewCount, 2, 1), h = m(a, r.viewCount, 1, 2), _ = m(a, r.viewCount, 2, 2), v = m(a, r.viewCount, r.gridColumns, r.gridRows), y = r.layout.equal(o(e.single)), b = r.layout.equal(o(e.overlay)), x = r.layout.equal(o(e["split-h"])), S = r.layout.equal(o(e["split-v"])), C = r.layout.equal(o(e.quad));
+	return y.select(s, b.select(c, x.select(u, S.select(h, C.select(_, v)))));
+}
+function d(e, r, i) {
+	let a = t(e) ? e : n(e);
+	switch (a.presentation) {
+		case "single": return f(r, i.activeView);
+		case "overlay": return p(r, i.overlayOpacity);
+		case "grid": return m(r, i.viewCount, a.columns, a.rows);
+	}
+}
+function f(e, t) {
+	let n = e[0];
+	for (let r = 1; r < e.length; r++) n = t.greaterThan(o(r - .5)).select(e[r], n);
+	return n;
+}
+function p(e, t) {
+	if (e.length === 1) return e[0];
+	let n = e[0];
+	for (let r = 1; r < e.length; r++) n = s(n, e[r], t);
+	return n;
+}
+function m(e, t, n, r) {
+	let i = c, a = h(n), s = h(r), u = i.x.mul(a).floor(), d = s.sub(o(1)).sub(i.y.mul(s).floor()).mul(a).add(u), f = o(.003), p = i.x.mul(a).fract(), m = i.y.mul(s).fract(), g = p.lessThan(f).or(m.lessThan(f)), _ = e[0];
+	for (let t = 1; t < e.length; t++) _ = d.equal(o(t)).select(e[t], _);
+	return _ = d.greaterThanEqual(t).select(e[0], _), _ = g.select(l(.12, .12, .12, 1), _), _;
+}
+function h(e) {
+	return typeof e == "number" ? o(e) : e;
+}
+function g(e) {
+	let { node: t, mode: n = "passthrough", scale: s, bias: c } = e;
+	if (!t) return l(0, 0, 0, 1);
+	switch (n) {
+		case "normal": return a(t);
+		case "depth": return r(t, s === void 0 ? void 0 : o(s), c === void 0 ? void 0 : o(c));
+		case "heatmap": return i(t, s === void 0 ? void 0 : o(s), c === void 0 ? void 0 : o(c));
+		default: return t;
+	}
+}
+//#endregion
+export { u as createViewCompositor };

package/dist/debug-views-tsl/default-debug-nodes.js

@@ -0,0 +1,61 @@
+import { directionToColor as e, float as t, materialAO as n, materialColor as r, materialEmissive as i, materialMetalness as a, materialNormal as o, materialOpacity as s, materialRoughness as c, mrt as l, normalView as u, output as d, vec4 as f } from "three/tsl";
+//#region components/debug-views/debug-views-tsl/default-debug-nodes.ts
+var p = f(0, 0, 0, 1);
+function m(t, n) {
+	let i = { output: b(d) };
+	n.normal && (i.normal = y(e(b(u)))), n.albedo && (i.albedo = y(b(r).rgb)), n.material && (i.material = _(n.material)), t.setMRT(l(i));
+}
+function h(t, n) {
+	let r = { output: p };
+	n.materialNormal && (r.materialNormal = y(e(b(o)))), n.emissive && (r.emissive = y(b(i).rgb)), t.setMRT(l(r));
+}
+function g(e, t = {}) {
+	let n = /* @__PURE__ */ new Map();
+	function r(e, t) {
+		let r = n.get(e);
+		if (r) return r;
+		let i = t();
+		return n.set(e, i), i;
+	}
+	function i() {
+		return b(r("material", () => e.getTextureNode("material")));
+	}
+	return function(n) {
+		switch (n) {
+			case "beauty":
+			case "passthrough": return r("beauty", () => e.getTextureNode("output"));
+			case "normal": return r("normal", () => e.getTextureNode("normal"));
+			case "depth": return r("depth", () => e.getViewZNode("depth").mul(-1));
+			case "albedo":
+			case "baseColor": return r("albedo", () => e.getTextureNode("albedo"));
+			case "materialNormal":
+			case "normalMap": return r(n, () => t.materialDetailPass?.getTextureNode("materialNormal") ?? p);
+			case "emissive": return r("emissive", () => t.materialDetailPass?.getTextureNode("emissive") ?? p);
+			case "roughness": return r("roughness", () => v(i().r));
+			case "metalness":
+			case "metallic": return r(n, () => v(i().g));
+			case "opacity": return r("opacity", () => v(i().a));
+			case "transparency": return r("transparency", () => v(i().a.oneMinus()));
+			case "ao": return r("ao", () => v(i().b));
+			case "wireframe": return r("wireframe", () => t.wireframePass?.getTextureNode("output") ?? p);
+			case "lightingOnly": return r("lightingOnly", () => t.lightingOnlyPass?.getTextureNode("output") ?? p);
+			case "reflectionOnly": return r("reflectionOnly", () => t.reflectionOnlyPass?.getTextureNode("output") ?? p);
+			case "shaderCost": return r("shaderCost", () => b(t.shaderCostPass?.getTextureNode("output") ?? p).r);
+			default: return r("beauty", () => e.getTextureNode("output"));
+		}
+	};
+}
+function _(e) {
+	return f(e.roughness ? b(c) : t(0), e.metalness ? b(a) : t(0), e.ao ? b(n) : t(0), e.opacity ? b(s) : t(1));
+}
+function v(e) {
+	return f(e, e, e, 1);
+}
+function y(e) {
+	return f(e.x, e.y, e.z, 1);
+}
+function b(e) {
+	return e;
+}
+//#endregion
+export { h as configureMaterialDetailPass, m as configureSceneDebugPass, g as createDefaultDebugNodeResolver };

package/dist/debug-views-tsl/uniforms.js

@@ -0,0 +1,19 @@
+import { LAYOUT_INDEX as e, resolveDebugViewLayout as t } from "../debug-view-layout.js";
+import { uniform as n } from "three/tsl";
+//#region components/debug-views/debug-views-tsl/uniforms.ts
+function r() {
+	return {
+		activeView: n(0),
+		layout: n(0),
+		viewCount: n(3),
+		gridColumns: n(2),
+		gridRows: n(2),
+		overlayOpacity: n(.35)
+	};
+}
+function i(n, r, i = "single", a = 1, o = .35) {
+	let s = t(i), c = Math.max(1, a);
+	n.activeView.value = Math.max(0, Math.min(r, c - 1)), n.layout.value = e[s.mode], n.viewCount.value = c, n.gridColumns.value = s.columns, n.gridRows.value = s.rows, n.overlayOpacity.value = Math.max(0, Math.min(o, 1));
+}
+//#endregion
+export { r as createDebugViewUniforms, i as updateDebugViewUniforms };

package/dist/debug-views-tsl/visualize.js

@@ -0,0 +1,21 @@
+import { clamp as e, float as t, mix as n, vec4 as r } from "three/tsl";
+//#region components/debug-views/debug-views-tsl/visualize.ts
+var i = .1;
+function a(e) {
+	let t = e.xyz.mul(.5).add(.5);
+	return r(t.x, t.y, t.z, 1);
+}
+function o(n, i = t(1), a = t(0)) {
+	let o = e(n.mul(i).add(a), 0, 1);
+	return r(o, o, o, 1);
+}
+function s(n, a = t(i), o = t(0)) {
+	let s = e(n.mul(a).add(o), 0, 1), c = t(1).sub(s);
+	return r(c, c, c, 1);
+}
+function c(i, a = t(1), o = t(0)) {
+	let s = e(i.mul(a).add(o), 0, 1), c = r(0, 1, .12, 1), l = r(1, .9, 0, 1), u = r(1, .05, 0, 1), d = r(1, 1, 1, 1), f = e(s.sub(.25).mul(2.857143), 0, 1), p = e(s.sub(.6).mul(3.333333), 0, 1), m = e(s.sub(.9).mul(10), 0, 1), h = n(c, l, f), g = n(l, u, p), _ = n(u, d, m), v = s.lessThan(.6).select(h, s.lessThan(.9).select(g, _));
+	return s.lessThan(.001).select(r(0, 0, 0, 1), v);
+}
+//#endregion
+export { s as visualizeDepth, o as visualizeGrayscale, c as visualizeHeatmap, a as visualizeNormal };

package/dist/index.js

@@ -0,0 +1,11 @@
+import { DEFAULT_DEBUG_VIEWS as e, MATERIAL_DEBUG_VIEW_SOURCES as t, getDebugViewLabels as n } from "./debug-view-definitions.js";
+import { createCustomDebugView as r } from "./custom-debug-view.js";
+import { LAYOUT_INDEX as i, isResolvedDebugViewLayout as a, resolveDebugViewLayout as o } from "./debug-view-layout.js";
+import { createDebugViewportPlan as s } from "./debug-viewport-plan.js";
+import { createDebugViewportRenderGraphPlan as c } from "./debug-render-graph-plan.js";
+import { createDebugViewportRects as l } from "./debug-viewport-presenter.js";
+import { createDebugViewportLabels as u, createDebugViewportPlanLabels as d } from "./debug-viewport-labels.js";
+import { visualizeDepth as f, visualizeGrayscale as p, visualizeHeatmap as m, visualizeNormal as h } from "./debug-views-tsl/visualize.js";
+import { createViewCompositor as g } from "./debug-views-tsl/compositor.js";
+import { createDebugViewUniforms as _, updateDebugViewUniforms as v } from "./debug-views-tsl/uniforms.js";
+export { e as DEFAULT_DEBUG_VIEWS, i as LAYOUT_INDEX, t as MATERIAL_DEBUG_VIEW_SOURCES, r as createCustomDebugView, _ as createDebugViewUniforms, u as createDebugViewportLabels, s as createDebugViewportPlan, d as createDebugViewportPlanLabels, l as createDebugViewportRects, c as createDebugViewportRenderGraphPlan, g as createViewCompositor, n as getDebugViewLabels, a as isResolvedDebugViewLayout, o as resolveDebugViewLayout, v as updateDebugViewUniforms, f as visualizeDepth, p as visualizeGrayscale, m as visualizeHeatmap, h as visualizeNormal };

package/dist/react.js

@@ -0,0 +1,3 @@
+import { DebugViews as e } from "./debug-views-post.js";
+import { useDebugViewsControls as t } from "./use-debug-views-controls.js";
+export { e as DebugViews, t as useDebugViewsControls };

package/dist/shader-cost/cost-override.js

@@ -0,0 +1,67 @@
+import { createMaterialCostCache as e } from "./material-cost.js";
+import { Color as t, MeshBasicMaterial as n } from "three";
+function r(t = {}) {
+	let n = u(t.bucketCount), r = t.cache ?? e(), a = i(n);
+	return {
+		apply(e) {
+			return o(e, a, r);
+		},
+		dispose() {
+			for (let e of a) e.dispose();
+		},
+		bucketCount: n,
+		materials: a
+	};
+}
+function i(e = 16) {
+	let r = u(e);
+	return Array.from({ length: r }, (e, i) => {
+		let a = i / (r - 1);
+		return new n({
+			color: new t(a, a, a),
+			depthTest: !0,
+			depthWrite: !0,
+			name: `ShaderCostBucket:${i}`,
+			toneMapped: !1
+		});
+	});
+}
+function a(e, t = 16) {
+	let n = u(t);
+	return Math.round(Math.max(0, Math.min(1, e)) * (n - 1));
+}
+function o(e, t, n) {
+	let r = [];
+	e.traverse((e) => {
+		l(e) && (r.push({
+			mesh: e,
+			material: e.material
+		}), e.material = s(e.material, t, n));
+	});
+	let i = !1;
+	return {
+		restore() {
+			if (!i) {
+				for (let e of r) e.mesh.material = e.material;
+				i = !0;
+			}
+		},
+		get replacements() {
+			return r.length;
+		}
+	};
+}
+function s(e, t, n) {
+	return Array.isArray(e) ? e.map((e) => c(e, t, n)) : c(e, t, n);
+}
+function c(e, t, n) {
+	return t[a(n.get(e).cost, t.length)];
+}
+function l(e) {
+	return !!(e.isMesh && e.material);
+}
+function u(e = 16) {
+	return Math.max(2, Math.floor(e));
+}
+//#endregion
+export { r as createShaderCostOverride };