shaders 2.2.23 → 2.2.25

package/dist/core/AngularBlur-Dl2gwk68.js

@@ -0,0 +1,64 @@
+import { o as transformPosition } from "./transformations-DxfQXZWi.js";
+import * as TSL from "three/tsl";
+const componentDefinition = {
+	name: "AngularBlur",
+	category: "Blurs",
+	description: "Radial motion blur rotating around a center point",
+	requiresRTT: true,
+	requiresChild: true,
+	props: {
+		intensity: {
+			default: 20,
+			description: "Intensity of the angular blur effect",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 100,
+				step: 1,
+				label: "Blur Intensity"
+			}
+		},
+		center: {
+			default: {
+				x: .5,
+				y: .5
+			},
+			transform: transformPosition,
+			description: "The center point of the rotation",
+			ui: {
+				type: "position",
+				label: "Center Position"
+			}
+		}
+	},
+	fragmentNode: ({ uniforms, childNode, onCleanup }) => {
+		const { vec2: vec2$1, vec4: vec4$1, float: float$1, screenUV: screenUV$1, sin: sin$1, cos: cos$1, Fn, convertToTexture: convertToTexture$1 } = TSL;
+		if (!childNode) return vec4$1(0, 0, 0, 0);
+		const childTexture = convertToTexture$1(childNode);
+		onCleanup(() => {
+			if (childTexture?.renderTarget?.dispose) childTexture.renderTarget.dispose();
+		});
+		const center = vec2$1(uniforms.center.uniform.x, uniforms.center.uniform.y.oneMinus());
+		const angle = uniforms.intensity.uniform.mul(.005);
+		return Fn(() => {
+			const initialCoord = screenUV$1.sub(center);
+			const total = vec4$1(0).toVar();
+			const totalWeight = float$1(0).toVar();
+			const angleStep = angle.div(float$1(31));
+			for (let i = 0; i < 32; i++) {
+				const t = float$1(i).div(float$1(31)).sub(.5).mul(2);
+				const weight = float$1(1).div(float$1(2.506628)).mul(float$1(-.5).mul(t).mul(t).div(float$1(.64)).exp());
+				const currentAngle = angleStep.mul(float$1(i));
+				const cosAngle = cos$1(currentAngle);
+				const sinAngle = sin$1(currentAngle);
+				const sampleCoord = vec2$1(initialCoord.x.mul(cosAngle).sub(initialCoord.y.mul(sinAngle)), initialCoord.x.mul(sinAngle).add(initialCoord.y.mul(cosAngle))).add(center);
+				const sample = childTexture.sample(sampleCoord).mul(weight);
+				total.assign(total.add(sample));
+				totalWeight.assign(totalWeight.add(weight));
+			}
+			return total.div(totalWeight);
+		})();
+	}
+};
+var AngularBlur_default = componentDefinition;
+export { componentDefinition as n, AngularBlur_default as t };

package/dist/core/Ascii-Dha_QpT3.js

@@ -0,0 +1,286 @@
+import { DataTexture, NearestFilter, RGBAFormat, UnsignedByteType } from "three";
+import * as TSL from "three/tsl";
+const componentDefinition = {
+	name: "Ascii",
+	category: "Stylize",
+	description: "Convert imagery to ASCII character art",
+	requiresRTT: true,
+	requiresChild: true,
+	props: {
+		characters: {
+			default: "@%#*+=-:.",
+			description: "Characters to use for ASCII effect (light to dark)",
+			ui: {
+				type: "text",
+				label: "Characters"
+			}
+		},
+		cellSize: {
+			default: 30,
+			description: "Size of each ASCII character cell in pixels",
+			ui: {
+				type: "range",
+				min: 8,
+				max: 100,
+				step: 1,
+				label: "Cell Size"
+			}
+		},
+		fontFamily: {
+			default: "JetBrains Mono",
+			description: "Font family for characters",
+			ui: {
+				type: "select",
+				options: [
+					{
+						label: "JetBrains Mono",
+						value: "JetBrains Mono"
+					},
+					{
+						label: "Fira Code",
+						value: "Fira Code"
+					},
+					{
+						label: "Source Code Pro",
+						value: "Source Code Pro"
+					},
+					{
+						label: "IBM Plex Mono",
+						value: "IBM Plex Mono"
+					},
+					{
+						label: "Space Mono",
+						value: "Space Mono"
+					},
+					{
+						label: "Roboto Mono",
+						value: "Roboto Mono"
+					},
+					{
+						label: "Courier Prime",
+						value: "Courier Prime"
+					}
+				],
+				label: "Font Family"
+			}
+		},
+		spacing: {
+			default: 1,
+			description: "Character size within each cell (1.0 = optimal size, 0.0 = smallest)",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 1,
+				step: .05,
+				label: "Character Size"
+			},
+			transform: (value) => .1 + value * 1.4
+		}
+	},
+	fragmentNode: ({ uniforms, childNode, onCleanup, onBeforeRender }) => {
+		const { vec2: vec2$1, vec3: vec3$1, vec4: vec4$1, floor, fract, dot: dot$1, ceil, sqrt: sqrt$1, screenUV: screenUV$1, texture, viewportSize: viewportSize$1, convertToTexture: convertToTexture$1 } = TSL;
+		if (!childNode) return vec4$1(0, 0, 0, 0);
+		const childTexture = convertToTexture$1(childNode);
+		onCleanup(() => {
+			if (childTexture?.renderTarget?.dispose) childTexture.renderTarget.dispose();
+		});
+		const ATLAS_TEXTURE_SIZE = 2048;
+		const GOOGLE_FONTS_MAP = {
+			"JetBrains Mono": "JetBrains+Mono",
+			"Fira Code": "Fira+Code",
+			"Source Code Pro": "Source+Code+Pro",
+			"IBM Plex Mono": "IBM+Plex+Mono",
+			"Space Mono": "Space+Mono",
+			"Roboto Mono": "Roboto+Mono",
+			"Courier Prime": "Courier+Prime"
+		};
+		const loadedFonts = /* @__PURE__ */ new Set();
+		async function loadGoogleFont(fontFamily) {
+			if (loadedFonts.has(fontFamily)) return;
+			if (!GOOGLE_FONTS_MAP[fontFamily]) return;
+			const googleFontName = GOOGLE_FONTS_MAP[fontFamily];
+			if (!document.querySelector(`link[href*="${googleFontName}"]`)) {
+				const link = document.createElement("link");
+				link.rel = "stylesheet";
+				link.href = `https://fonts.googleapis.com/css2?family=${googleFontName}:wght@400&display=swap`;
+				document.head.appendChild(link);
+			}
+			try {
+				if (document.fonts && document.fonts.load) {
+					const specs = [
+						`400 12px "${fontFamily}"`,
+						`12px "${fontFamily}"`,
+						`400 12px ${fontFamily}`,
+						`12px ${fontFamily}`
+					];
+					for (const spec of specs) try {
+						await document.fonts.load(spec);
+						break;
+					} catch (e) {}
+					await new Promise((resolve) => setTimeout(resolve, 500));
+					loadedFonts.add(fontFamily);
+				} else {
+					await new Promise((resolve) => setTimeout(resolve, 1e3));
+					loadedFonts.add(fontFamily);
+				}
+			} catch (error) {}
+		}
+		const createCharacterAtlas = async (characters, cellSize, fontFamily, spacing) => {
+			if (!characters || characters.length === 0) throw new Error("Characters string cannot be empty");
+			const charCount$1 = characters.length;
+			const atlasSize$1 = Math.max(2, Math.ceil(Math.sqrt(charCount$1)));
+			const baseAtlasCellSize = 128;
+			const spacingMultiplier = Math.max(1, 2 / spacing);
+			const actualCellSize = Math.min(baseAtlasCellSize * spacingMultiplier, ATLAS_TEXTURE_SIZE / atlasSize$1);
+			const fontSize = actualCellSize * .75;
+			const atlasCanvas = document.createElement("canvas");
+			atlasCanvas.width = ATLAS_TEXTURE_SIZE;
+			atlasCanvas.height = ATLAS_TEXTURE_SIZE;
+			const ctx = atlasCanvas.getContext("2d");
+			ctx.clearRect(0, 0, atlasCanvas.width, atlasCanvas.height);
+			ctx.fillStyle = "#ffffff";
+			ctx.font = `${fontSize}px "${fontFamily}", ${fontFamily}, monospace`;
+			if (!ctx.font.includes(fontFamily) && !ctx.font.includes("IBM") && !ctx.font.includes("Plex")) ctx.font = `${fontSize}px ${fontFamily}, monospace`;
+			ctx.textAlign = "center";
+			ctx.textBaseline = "middle";
+			for (let i = 0; i < charCount$1; i++) {
+				const char = characters[i];
+				const row = Math.floor(i / atlasSize$1);
+				const x = i % atlasSize$1 * actualCellSize + actualCellSize / 2;
+				const y = row * actualCellSize + actualCellSize / 2;
+				ctx.fillText(char, x, y);
+			}
+			const imageData = ctx.getImageData(0, 0, atlasCanvas.width, atlasCanvas.height);
+			return {
+				data: new Uint8Array(imageData.data),
+				width: ATLAS_TEXTURE_SIZE,
+				height: ATLAS_TEXTURE_SIZE,
+				atlasSize: atlasSize$1,
+				cellSize,
+				charCount: charCount$1,
+				characters,
+				fontFamily,
+				uvScale: atlasSize$1 * actualCellSize / ATLAS_TEXTURE_SIZE
+			};
+		};
+		const defaultCharacters = componentDefinition.props.characters.default;
+		const defaultCellSize = componentDefinition.props.cellSize.default;
+		const defaultFontFamily = componentDefinition.props.fontFamily.default;
+		const defaultSpacing = componentDefinition.props.spacing.transform ? componentDefinition.props.spacing.transform(componentDefinition.props.spacing.default) : componentDefinition.props.spacing.default;
+		const initialCharacters = uniforms?.characters?.uniform?.value ?? defaultCharacters;
+		const initialCellSize = uniforms?.cellSize?.uniform?.value ?? defaultCellSize;
+		const initialFontFamily = uniforms?.fontFamily?.uniform?.value ?? defaultFontFamily;
+		const initialSpacing = uniforms?.spacing?.uniform?.value ?? defaultSpacing;
+		let atlasData = {
+			data: new Uint8Array(ATLAS_TEXTURE_SIZE * ATLAS_TEXTURE_SIZE * 4),
+			width: ATLAS_TEXTURE_SIZE,
+			height: ATLAS_TEXTURE_SIZE,
+			atlasSize: 3,
+			cellSize: initialCellSize,
+			charCount: initialCharacters.length,
+			characters: initialCharacters,
+			fontFamily: initialFontFamily,
+			uvScale: 1
+		};
+		const atlasTexture = new DataTexture(atlasData.data, ATLAS_TEXTURE_SIZE, ATLAS_TEXTURE_SIZE, RGBAFormat, UnsignedByteType);
+		atlasTexture.minFilter = NearestFilter;
+		atlasTexture.magFilter = NearestFilter;
+		atlasTexture.generateMipmaps = false;
+		atlasTexture.needsUpdate = true;
+		const atlasField = texture(atlasTexture);
+		const charCountUniform = TSL.uniform(atlasData.charCount);
+		const cellSizeUniform = TSL.uniform(atlasData.cellSize);
+		const atlasScaleUniform = TSL.uniform(atlasData.uvScale);
+		let lastCharacters = initialCharacters;
+		let lastCellSize = initialCellSize;
+		let lastFontFamily = initialFontFamily;
+		let lastSpacing = initialSpacing;
+		const initializeAtlas = async () => {
+			const currentCharacters = uniforms?.characters?.uniform?.value ?? lastCharacters;
+			const currentCellSize = uniforms?.cellSize?.uniform?.value ?? lastCellSize;
+			const currentFontFamily = uniforms?.fontFamily?.uniform?.value ?? lastFontFamily;
+			const currentSpacing = uniforms?.spacing?.uniform?.value ?? lastSpacing;
+			atlasData = await createCharacterAtlas(currentCharacters, currentCellSize, currentFontFamily, currentSpacing);
+			atlasTexture.image.data = atlasData.data;
+			atlasTexture.needsUpdate = true;
+			charCountUniform.value = atlasData.charCount;
+			cellSizeUniform.value = atlasData.cellSize;
+			atlasScaleUniform.value = atlasData.uvScale;
+			lastCharacters = currentCharacters;
+			lastCellSize = currentCellSize;
+			lastFontFamily = currentFontFamily;
+			lastSpacing = currentSpacing;
+		};
+		setTimeout(() => {
+			initializeAtlas().catch((error) => {
+				console.error("Failed to initialize atlas:", error);
+			});
+			loadGoogleFont(uniforms?.fontFamily?.uniform?.value ?? initialFontFamily).then(() => {
+				initializeAtlas().catch((error) => {
+					console.error("Failed to update atlas with custom font:", error);
+				});
+			}).catch((error) => {
+				console.error("Failed to load font:", error);
+			});
+		}, 0);
+		let lastUpdateTime = 0;
+		let isUpdating = false;
+		onBeforeRender(() => {
+			const now = Date.now();
+			if (now - lastUpdateTime < 16 || isUpdating) return;
+			const currentCharacters = uniforms.characters?.uniform?.value ?? lastCharacters;
+			const currentCellSize = uniforms.cellSize?.uniform?.value ?? lastCellSize;
+			const currentFontFamily = uniforms.fontFamily?.uniform?.value ?? lastFontFamily;
+			const currentSpacing = uniforms.spacing?.uniform?.value ?? lastSpacing;
+			if (!currentCharacters || currentCharacters.length === 0) return;
+			if (currentCharacters !== lastCharacters || currentCellSize !== lastCellSize || currentFontFamily !== lastFontFamily || currentSpacing !== lastSpacing) {
+				lastUpdateTime = now;
+				isUpdating = true;
+				createCharacterAtlas(currentCharacters, currentCellSize, currentFontFamily, currentSpacing).then((newAtlasData) => {
+					atlasData = newAtlasData;
+					atlasTexture.image.data = atlasData.data;
+					atlasTexture.needsUpdate = true;
+					charCountUniform.value = atlasData.charCount;
+					cellSizeUniform.value = atlasData.cellSize;
+					atlasScaleUniform.value = atlasData.uvScale;
+					lastCharacters = currentCharacters;
+					lastCellSize = currentCellSize;
+					lastFontFamily = currentFontFamily;
+					lastSpacing = currentSpacing;
+					isUpdating = false;
+				}).catch((error) => {
+					console.error("Failed to update atlas:", error);
+					isUpdating = false;
+				});
+			}
+		});
+		onCleanup(() => {
+			atlasTexture.dispose();
+		});
+		const effectiveCellSize = cellSizeUniform.mul(1.5);
+		const mainGridSize = viewportSize$1.div(effectiveCellSize);
+		const gridCoords = screenUV$1.mul(mainGridSize);
+		const cellCoords = floor(gridCoords);
+		const rawCellUV = fract(gridCoords);
+		const characterSize = uniforms.spacing?.uniform ?? TSL.uniform(initialSpacing);
+		const center = vec2$1(.5);
+		const centeredUV = rawCellUV.sub(center);
+		const cellUV = centeredUV.div(characterSize).add(center);
+		const isOutsideBounds = TSL.any(TSL.greaterThan(TSL.abs(centeredUV), vec2$1(characterSize.mul(.5))));
+		const cellCenter = cellCoords.add(vec2$1(.5)).div(mainGridSize);
+		const cellColor = childTexture.sample(cellCenter);
+		const rawBrightness = dot$1(cellColor.rgb, vec3$1(.299, .587, .114));
+		const charCount = charCountUniform;
+		const charIndex = floor(rawBrightness.mul(.8).add(.1).mul(charCount).min(charCount.sub(1e-4)));
+		const atlasSize = ceil(sqrt$1(charCount));
+		const atlasCol = charIndex.mod(atlasSize);
+		const atlasRow = floor(charIndex.div(atlasSize));
+		const atlasCellSize = TSL.float(1).div(atlasSize).mul(atlasScaleUniform);
+		const atlasSampleUV = vec2$1(atlasCol, atlasRow).mul(atlasCellSize).add(cellUV.mul(atlasCellSize));
+		const asciiChar = atlasField.sample(atlasSampleUV);
+		const isBackground = dot$1(asciiChar.rgb, vec3$1(.299, .587, .114)).lessThan(.1);
+		return vec4$1(asciiChar.rgb.mul(cellColor.rgb), TSL.select(TSL.or(isBackground, isOutsideBounds), TSL.float(0), cellColor.a));
+	}
+};
+var Ascii_default = componentDefinition;
+export { componentDefinition as n, Ascii_default as t };

package/dist/core/Beam-CTN9Ni43.js

@@ -0,0 +1,139 @@
+import { i as transformColorSpace, o as transformPosition, r as transformColor, t as colorSpaceOptions } from "./transformations-DxfQXZWi.js";
+import { t as mixColors } from "./colorMixing-BXiTAqJU.js";
+import * as TSL from "three/tsl";
+const componentDefinition = {
+	name: "Beam",
+	category: "Base Layers",
+	description: "A beam of light from one point to another.",
+	acceptsUVContext: true,
+	props: {
+		startPosition: {
+			default: {
+				x: .2,
+				y: .5
+			},
+			transform: transformPosition,
+			description: "Starting point of the beam",
+			ui: {
+				type: "position",
+				label: "Start Position"
+			}
+		},
+		endPosition: {
+			default: {
+				x: .8,
+				y: .5
+			},
+			transform: transformPosition,
+			description: "Ending point of the beam",
+			ui: {
+				type: "position",
+				label: "End Position"
+			}
+		},
+		startThickness: {
+			default: .2,
+			description: "Thickness at the start of the beam",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 2,
+				step: .01,
+				label: "Start Thickness"
+			}
+		},
+		endThickness: {
+			default: .2,
+			description: "Thickness at the end of the beam",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 2,
+				step: .01,
+				label: "End Thickness"
+			}
+		},
+		startSoftness: {
+			default: .5,
+			description: "Edge softness at the start of the beam",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 50,
+				step: .01,
+				label: "Start Softness"
+			}
+		},
+		endSoftness: {
+			default: .5,
+			description: "Edge softness at the end of the beam",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 20,
+				step: .01,
+				label: "End Softness"
+			}
+		},
+		insideColor: {
+			default: "#FF0000",
+			transform: transformColor,
+			description: "Color at the center of the beam",
+			ui: {
+				type: "color",
+				label: "Inside Color"
+			}
+		},
+		outsideColor: {
+			default: "#0000FF",
+			transform: transformColor,
+			description: "Color at the edges of the beam",
+			ui: {
+				type: "color",
+				label: "Outside Color"
+			}
+		},
+		colorSpace: {
+			default: "linear",
+			transform: transformColorSpace,
+			description: "Color space for color interpolation",
+			ui: {
+				type: "select",
+				options: colorSpaceOptions,
+				label: "Color Space"
+			}
+		}
+	},
+	fragmentNode: ({ uniforms, uvContext }) => {
+		const { vec2: vec2$1, vec4: vec4$1, float: float$1, screenUV: screenUV$1, viewportSize: viewportSize$1, sqrt: sqrt$1, max: max$1, smoothstep, mix: mix$1, clamp: clamp$1, pow: pow$1 } = TSL;
+		const baseUV = uvContext ?? screenUV$1;
+		const aspect = viewportSize$1.x.div(viewportSize$1.y);
+		const startPos = vec2$1(uniforms.startPosition.uniform.x, uniforms.startPosition.uniform.y.oneMinus());
+		const endPos = vec2$1(uniforms.endPosition.uniform.x, uniforms.endPosition.uniform.y.oneMinus());
+		const aspectCorrectedStart = vec2$1(startPos.x.mul(aspect), startPos.y);
+		const aspectCorrectedEnd = vec2$1(endPos.x.mul(aspect), endPos.y);
+		const aspectCorrectedUV = vec2$1(baseUV.x.mul(aspect), baseUV.y);
+		const lineVec = vec2$1(aspectCorrectedEnd.x.sub(aspectCorrectedStart.x), aspectCorrectedEnd.y.sub(aspectCorrectedStart.y));
+		const toPoint = vec2$1(aspectCorrectedUV.x.sub(aspectCorrectedStart.x), aspectCorrectedUV.y.sub(aspectCorrectedStart.y));
+		const dotProduct = toPoint.x.mul(lineVec.x).add(toPoint.y.mul(lineVec.y));
+		const lineLengthSq = lineVec.x.mul(lineVec.x).add(lineVec.y.mul(lineVec.y));
+		const t = clamp$1(dotProduct.div(max$1(lineLengthSq, float$1(1e-4))), float$1(0), float$1(1));
+		const closestPoint = vec2$1(aspectCorrectedStart.x.add(lineVec.x.mul(t)), aspectCorrectedStart.y.add(lineVec.y.mul(t)));
+		const distVec = vec2$1(aspectCorrectedUV.x.sub(closestPoint.x), aspectCorrectedUV.y.sub(closestPoint.y));
+		const distance = sqrt$1(distVec.x.mul(distVec.x).add(distVec.y.mul(distVec.y)));
+		const thickness = mix$1(uniforms.startThickness.uniform.mul(.25), uniforms.endThickness.uniform.mul(.25), t);
+		const startSoft = uniforms.startSoftness.uniform;
+		const endSoft = uniforms.endSoftness.uniform;
+		const softness = mix$1(startSoft, endSoft, t);
+		const normalizedDist = distance.div(max$1(thickness, float$1(1e-4)));
+		const edgeEnd = float$1(1).add(softness);
+		const alpha = pow$1(float$1(1).sub(smoothstep(float$1(1), edgeEnd, normalizedDist)), float$1(1).add(softness.mul(1.5)));
+		const colorT = smoothstep(float$1(1).sub(softness), float$1(1).add(softness), normalizedDist);
+		const insideCol = uniforms.insideColor.uniform;
+		const outsideCol = uniforms.outsideColor.uniform;
+		const beamColorRGB = mixColors(insideCol, outsideCol, colorT, uniforms.colorSpace.uniform).rgb;
+		return vec4$1(beamColorRGB, insideCol.a.add(outsideCol.a).div(float$1(2)).mul(alpha));
+	}
+};
+var Beam_default = componentDefinition;
+export { componentDefinition as n, Beam_default as t };