shaders 3.1.463 → 3.2.465

package/dist/core/Perspective-CZsUpoMX.js

@@ -0,0 +1,85 @@
+import { c as p, l as centerPropConfig, t as defineStd, u as edgesPropConfig } from "./lower-DSk_KxOY.js";
+import { c as transformPosition } from "./transformations-COlfAEsk.js";
+import { m as perspective } from "./warps-B5j8H1vX.js";
+const componentDefinition = defineStd({
+	name: "Perspective",
+	role: "warp",
+	category: "Distortions",
+	description: "Rotate the plane in 3D space with pan and tilt",
+	boundingBoxDeclaration: { aspectRatio: null },
+	props: {
+		center: centerPropConfig("Center point of rotation"),
+		pan: {
+			default: 0,
+			description: "Horizontal rotation (left/right)",
+			ui: {
+				type: ["range", "map"],
+				min: -90,
+				max: 90,
+				step: .1,
+				label: "Pan",
+				group: "Effect"
+			}
+		},
+		tilt: {
+			default: 0,
+			description: "Vertical rotation (up/down)",
+			ui: {
+				type: ["range", "map"],
+				min: -90,
+				max: 90,
+				step: .1,
+				label: "Tilt",
+				group: "Effect"
+			}
+		},
+		fov: {
+			default: 60,
+			description: "Field of view - controls perspective intensity",
+			ui: {
+				type: ["range", "map"],
+				min: 30,
+				max: 120,
+				step: 1,
+				label: "FOV",
+				group: "Effect"
+			}
+		},
+		zoom: {
+			default: 1,
+			description: "Zoom in to fill the frame after rotation",
+			ui: {
+				type: ["range", "map"],
+				min: .5,
+				max: 3,
+				step: .1,
+				label: "Zoom",
+				group: "Effect"
+			}
+		},
+		offset: {
+			default: {
+				x: .5,
+				y: .5
+			},
+			transform: transformPosition,
+			description: "Shift the result in X/Y",
+			ui: {
+				type: "position",
+				label: "Offset",
+				group: "Position"
+			}
+		},
+		edges: edgesPropConfig("transparent", "How to handle edges")
+	},
+	map: perspective({
+		center: p("center"),
+		pan: p("pan"),
+		tilt: p("tilt"),
+		fov: p("fov"),
+		zoom: p("zoom"),
+		offset: p("offset")
+	})
+});
+var Perspective_default = componentDefinition;
+export { componentDefinition as n, Perspective_default as t };

package/dist/core/PixelSort-sFDbi0pD.js

@@ -0,0 +1,222 @@
+import { Br as f32, Et as unpremultiplyAlpha, ot as call, q as createStateBuffer, rt as ZERO, t as defineStd } from "./lower-DSk_KxOY.js";
+import { s as buildOddEvenSortSet, u as createGridKernelPass } from "./porters-j4QbEOqj.js";
+import { R as vec2 } from "./math-DCQU6EQz.js";
+import { a as op, o as trackedViewport, t as gridSim } from "./grids-C6sTUox5.js";
+var WORK = 512;
+var CELL_COUNT = WORK * WORK;
+var STATE_FORMAT = "rgba16float";
+const makePixelSortKernels = (vertical, direction) => buildOddEvenSortSet({
+	n: WORK,
+	format: STATE_FORMAT,
+	namePrefix: "pixelSort",
+	vertical,
+	direction
+});
+const componentDefinition = defineStd({
+	name: "PixelSort",
+	role: "simulation",
+	species: "custom",
+	category: "Interactive",
+	description: "Pixels sort by brightness around the cursor and keep their sorted position, optionally decaying back over time",
+	requiresRTT: true,
+	requiresChild: true,
+	boundingBoxDeclaration: { aspectRatio: null },
+	usesPointer: true,
+	props: {
+		radius: {
+			default: .4,
+			description: "Size of the cursor brush that sorts pixels",
+			ui: {
+				type: ["range", "map"],
+				min: .03,
+				max: .6,
+				step: .01,
+				label: "Radius",
+				group: "Effect"
+			}
+		},
+		falloff: {
+			default: 1,
+			description: "Softness of the brush edge (0 = hard circle, 1 = very soft)",
+			ui: {
+				type: ["range", "map"],
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Falloff",
+				group: "Effect"
+			}
+		},
+		strength: {
+			default: .1,
+			description: "How fast pixels sort — runs more sorting passes per frame",
+			ui: {
+				type: ["range", "map"],
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Strength",
+				group: "Effect"
+			}
+		},
+		decay: {
+			default: .1,
+			description: "How quickly sorted pixels melt back to their original position (0 = permanent)",
+			ui: {
+				type: ["range", "map"],
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Decay",
+				group: "Effect"
+			}
+		},
+		axis: {
+			default: "vertical",
+			compileTime: true,
+			description: "Axis pixels are sorted along",
+			ui: {
+				type: "select",
+				options: [{
+					label: "Horizontal",
+					value: "horizontal"
+				}, {
+					label: "Vertical",
+					value: "vertical"
+				}],
+				label: "Axis",
+				group: "Effect"
+			}
+		},
+		direction: {
+			default: "descending",
+			compileTime: true,
+			description: "Sort order by brightness",
+			ui: {
+				type: "select",
+				options: [{
+					label: "Dark → Light",
+					value: "ascending"
+				}, {
+					label: "Light → Dark",
+					value: "descending"
+				}],
+				label: "Direction",
+				group: "Effect"
+			}
+		}
+	},
+	...gridSim((params, root) => {
+		const { childNode, convertToTexture, registerComputeTexture, propValues, onCleanup } = params;
+		if (!childNode) return null;
+		const vertical = propValues.axis === "vertical";
+		const dir = propValues.direction === "descending" ? -1 : 1;
+		const childTexture = convertToTexture(childNode);
+		const bufferA = createStateBuffer(root, f32, CELL_COUNT);
+		const bufferB = createStateBuffer(root, f32, CELL_COUNT);
+		const lumaBuf = createStateBuffer(root, f32, CELL_COUNT);
+		const stateTex = root.createTexture({
+			size: [WORK, WORK],
+			format: STATE_FORMAT
+		}).$usage("storage", "sampled");
+		onCleanup(() => stateTex.destroy());
+		const state = registerComputeTexture(stateTex);
+		const set = makePixelSortKernels(vertical, dir);
+		const lumaParams = root.createUniform(set.LumaParams);
+		const swapParams = root.createUniform(set.SwapParams);
+		const viewport = trackedViewport(params);
+		const size = [WORK, WORK];
+		let lumaPipeline = createGridKernelPass(root, set.key, { size });
+		let lumaReady = false;
+		const swapBgAB = root.createBindGroup(set.swapLayout, {
+			readBuf: bufferA,
+			writeBuf: bufferB,
+			lumaBuf,
+			params: swapParams.buffer
+		});
+		const swapBgBA = root.createBindGroup(set.swapLayout, {
+			readBuf: bufferB,
+			writeBuf: bufferA,
+			lumaBuf,
+			params: swapParams.buffer
+		});
+		const swap0 = createGridKernelPass(root, set.swap0, { size });
+		const swap1 = createGridKernelPass(root, set.swap1, { size });
+		const outputBgA = root.createBindGroup(set.outputLayout, {
+			srcBuf: bufferA,
+			stateTex
+		});
+		const outputBgB = root.createBindGroup(set.outputLayout, {
+			srcBuf: bufferB,
+			stateTex
+		});
+		const outputPass = createGridKernelPass(root, set.output, { size });
+		let frame = 0;
+		let passes = 1;
+		const sort = op.sortPass({
+			passes: () => passes,
+			pass: (parity, side) => (parity ? swap1 : swap0).with(side === "A" ? swapBgAB : swapBgBA)
+		});
+		return {
+			outputs: {
+				state,
+				childTexture
+			},
+			bindInputs: (resolve) => {
+				const src = resolve(childTexture.key);
+				if (src) {
+					const lumaBg = root.createBindGroup(set.lumaLayout, {
+						input: src.texture,
+						lumaBuf,
+						params: lumaParams.buffer
+					});
+					lumaPipeline = lumaPipeline.with(lumaBg);
+					lumaReady = true;
+				}
+			},
+			clampDt: .05,
+			stages: [
+				op.readyWhen(() => lumaReady),
+				op.values("brush+decay", (f) => {
+					const fp = f.frameParams;
+					const safe = viewport.safe(fp);
+					const tracked = viewport.tracked();
+					const strength = f.num("strength", .1);
+					const decayProp = f.num("decay", .1);
+					passes = 1 + Math.round(strength * 4);
+					swapParams.write({
+						mouseX: fp.pointer?.x ?? .5,
+						mouseY: fp.pointer?.y ?? .5,
+						radius: f.num("radius", .4),
+						falloff: f.num("falloff", 1),
+						decay: decayProp * f.dt * 2 / passes,
+						aspect: safe.width / safe.height,
+						seed: frame % 1024
+					});
+					lumaParams.write({
+						inputWidth: tracked.width,
+						inputHeight: tracked.height
+					});
+				}),
+				op.cache(() => lumaPipeline),
+				sort,
+				op.publish(() => outputPass.with(sort.side() === "A" ? outputBgA : outputBgB)),
+				op.values("frameAdvance", () => {
+					frame++;
+				})
+			]
+		};
+	}),
+	gpu: { fragment: ({ childNode, ctx, computeOutputs, propValues, convertToTexture }) => {
+		if (!childNode) return ZERO;
+		const state = computeOutputs?.state;
+		const childTex = computeOutputs?.childTexture;
+		if (!state || !childTex) return call(unpremultiplyAlpha, "unpremultiplyAlpha", [convertToTexture(childNode).sample(ctx.uv)]);
+		const vertical = propValues.axis === "vertical";
+		const srcCoord = state.sample(ctx.uv, "nearestClamp").member("r");
+		const childUV = vertical ? vec2(ctx.uv.member("x"), srcCoord) : vec2(srcCoord, ctx.uv.member("y"));
+		return call(unpremultiplyAlpha, "unpremultiplyAlpha", [childTex.sample(childUV)]);
+	} }
+});
+var PixelSort_default = componentDefinition;
+export { componentDefinition as n, makePixelSortKernels as r, PixelSort_default as t };

package/dist/core/PixelThrow-jqMlr2Be.js

@@ -0,0 +1,271 @@
+import { Et as unpremultiplyAlpha, J as applyEdgeHandlingExpr, et as bSplineTapSetup, ot as call, rt as ZERO, t as defineStd, z as toHalfFloat } from "./lower-DSk_KxOY.js";
+import { s as transformEdges } from "./transformations-COlfAEsk.js";
+import { C as mul, L as sub, S as mix, i as clamp, s as dot, y as local, z as vec3 } from "./math-DCQU6EQz.js";
+import { i as hostStep, n as hostFieldTexture, r as hostGridProgram } from "./grids-C6sTUox5.js";
+var transformThrowKey = (value) => {
+	return {
+		luminance: 0,
+		darkness: 1,
+		red: 2,
+		green: 3,
+		blue: 4
+	}[value] ?? 0;
+};
+var GRID = 128;
+var num = (v, f) => typeof v === "number" ? v : f;
+var offsetUV = (uv, flowVec, scale) => sub(uv, mul(flowVec, scale));
+var { Taps: PixelThrowBicubicTaps, setup: pixelThrowBicubicSetup } = bSplineTapSetup(GRID, {
+	fnName: "pixelThrowBicubicSetup",
+	structName: "PixelThrowBicubicTaps"
+});
+function keyScaleOf(keyMode, rgb, keyInfluence) {
+	const lum = vec3(.299, .587, .114);
+	return mix(1, clamp(keyMode === 1 ? sub(1, dot(rgb, lum)) : keyMode === 2 ? rgb.member("r") : keyMode === 3 ? rgb.member("g") : keyMode === 4 ? rgb.member("b") : dot(rgb, lum), 0, 1), keyInfluence);
+}
+const componentDefinition = defineStd({
+	name: "PixelThrow",
+	role: "simulation",
+	species: "custom",
+	category: "Interactive",
+	description: "Throws pixels along the cursor's path like a fluid — brighter (or redder/greener/bluer) pixels are flung farther, then settle back with friction",
+	requiresRTT: true,
+	requiresChild: true,
+	boundingBoxDeclaration: { aspectRatio: null },
+	usesPointer: true,
+	props: {
+		throwKey: {
+			default: "luminance",
+			transform: transformThrowKey,
+			compileTime: true,
+			description: "Which pixel value decides how far a pixel is thrown",
+			ui: {
+				type: "select",
+				options: [
+					{
+						label: "Brightness",
+						value: "luminance"
+					},
+					{
+						label: "Darkness",
+						value: "darkness"
+					},
+					{
+						label: "Red",
+						value: "red"
+					},
+					{
+						label: "Green",
+						value: "green"
+					},
+					{
+						label: "Blue",
+						value: "blue"
+					}
+				],
+				label: "Throw By",
+				group: "Effect"
+			}
+		},
+		strength: {
+			default: .25,
+			description: "Maximum distance pixels can be thrown",
+			ui: {
+				type: ["range", "map"],
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Strength",
+				group: "Effect"
+			}
+		},
+		keyInfluence: {
+			default: .8,
+			description: "How much the chosen value modulates throw distance (0 = all pixels thrown equally, 1 = only high-value pixels move)",
+			ui: {
+				type: ["range", "map"],
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Key Influence",
+				group: "Effect"
+			}
+		},
+		radius: {
+			default: .2,
+			description: "Size of the cursor's throw brush",
+			ui: {
+				type: ["range", "map"],
+				min: .02,
+				max: .6,
+				step: .01,
+				label: "Radius",
+				group: "Effect"
+			}
+		},
+		friction: {
+			default: .3,
+			description: "How quickly thrown pixels settle back to their origin (0 = float almost forever, 1 = snap back fast)",
+			ui: {
+				type: ["range", "map"],
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Friction",
+				group: "Effect"
+			}
+		},
+		momentum: {
+			default: .5,
+			description: "How much the thrown flow keeps drifting and swirling after the cursor passes (fluidity)",
+			ui: {
+				type: ["range", "map"],
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Momentum",
+				group: "Effect"
+			}
+		},
+		edges: {
+			default: "stretch",
+			description: "How to handle pixels thrown beyond the canvas edges",
+			transform: transformEdges,
+			compileTime: true,
+			ui: {
+				type: "select",
+				options: [
+					{
+						label: "Stretch",
+						value: "stretch"
+					},
+					{
+						label: "Transparent",
+						value: "transparent"
+					},
+					{
+						label: "Mirror",
+						value: "mirror"
+					},
+					{
+						label: "Wrap",
+						value: "wrap"
+					}
+				],
+				label: "Edges",
+				group: "Effect"
+			}
+		}
+	},
+	gpu: { fragment: (params) => {
+		const { uniforms, ctx, childNode, convertToTexture, onBeforeRender, dimensions, propValues, getCpuValue } = params;
+		if (!childNode) return ZERO;
+		const child = convertToTexture(childNode);
+		const edgeMode = propValues.edges ?? 0;
+		const rawKey = propValues.throwKey;
+		const keyMode = typeof rawKey === "number" ? rawKey : transformThrowKey(String(rawKey ?? "luminance"));
+		const flow = new Float32Array(GRID * GRID * 2);
+		const temp = new Float32Array(GRID * GRID * 2);
+		const field = hostFieldTexture(params, {
+			size: GRID,
+			label: "pixelthrow-flow"
+		});
+		const flowKit = field.texture;
+		let prevX = .5, prevY = .5;
+		let velX = 0, velY = 0;
+		let speed = 0;
+		let maxThrow = .125;
+		const sampleFlow = (gx, gy, ch) => {
+			const x0 = Math.floor(gx), y0 = Math.floor(gy);
+			const x1 = x0 + 1, y1 = y0 + 1;
+			if (x0 < 0 || y0 < 0 || x1 >= GRID || y1 >= GRID) return 0;
+			const fx = gx - x0, fy = gy - y0;
+			const i00 = (y0 * GRID + x0) * 2 + ch;
+			const i01 = (y0 * GRID + x1) * 2 + ch;
+			const i10 = (y1 * GRID + x0) * 2 + ch;
+			const i11 = (y1 * GRID + x1) * 2 + ch;
+			return flow[i00] * (1 - fx) * (1 - fy) + flow[i01] * fx * (1 - fy) + flow[i10] * (1 - fx) * fy + flow[i11] * fx * fy;
+		};
+		const aspectOf = () => Math.max(1e-4, dimensions.width / Math.max(1, dimensions.height));
+		onBeforeRender(hostGridProgram({
+			clampDt: .016,
+			steps: [
+				hostStep("dtGuard", (f) => f.dt <= 0 ? "skip" : void 0),
+				hostStep("cursorVelocity", (f) => {
+					const rawVelX = (f.pointer.x - prevX) / f.dt;
+					const rawVelY = (f.pointer.y - prevY) / f.dt;
+					velX = velX * .8 + rawVelX * .2;
+					velY = velY * .8 + rawVelY * .2;
+					speed = Math.sqrt(velX * velX + velY * velY);
+				}),
+				hostStep("advect+decay", (f) => {
+					const friction = num(getCpuValue("friction"), .3);
+					const momentum = num(getCpuValue("momentum"), .5);
+					maxThrow = num(getCpuValue("strength"), .25) * .5;
+					const decay = Math.max(0, 1 - friction * f.dt * 4);
+					const advect = momentum * f.dt * 12;
+					for (let i = 0; i < GRID; i++) for (let j = 0; j < GRID; j++) {
+						const idx = (i * GRID + j) * 2;
+						const srcX = j - flow[idx] * GRID * advect;
+						const srcY = i - flow[idx + 1] * GRID * advect;
+						temp[idx] = sampleFlow(srcX, srcY, 0) * decay;
+						temp[idx + 1] = sampleFlow(srcX, srcY, 1) * decay;
+					}
+				}),
+				hostStep("inject(brush)", (f) => {
+					if (speed <= .02) return;
+					const aspect = aspectOf();
+					const r = Math.max(.001, num(getCpuValue("radius"), .2));
+					const r2 = r * r;
+					const EDGE = Math.exp(-1);
+					const INV_EDGE = 1 / (1 - EDGE);
+					const minI = Math.max(0, Math.floor((f.pointer.y - r) * GRID));
+					const maxI = Math.min(GRID - 1, Math.ceil((f.pointer.y + r) * GRID));
+					const minJ = Math.max(0, Math.floor((f.pointer.x - r) * GRID));
+					const maxJ = Math.min(GRID - 1, Math.ceil((f.pointer.x + r) * GRID));
+					for (let i = minI; i <= maxI; i++) for (let j = minJ; j <= maxJ; j++) {
+						const cellX = (j + .5) / GRID;
+						const cellY = (i + .5) / GRID;
+						const dx = aspect >= 1 ? (cellX - f.pointer.x) * aspect : cellX - f.pointer.x;
+						const dy = aspect >= 1 ? cellY - f.pointer.y : (cellY - f.pointer.y) / aspect;
+						const distSq = dx * dx + dy * dy;
+						if (distSq > r2) continue;
+						const influence = (Math.exp(-distSq / r2) - EDGE) * INV_EDGE;
+						const idx = (i * GRID + j) * 2;
+						temp[idx] += velX * influence * f.dt * 4;
+						temp[idx + 1] += velY * influence * f.dt * 4;
+					}
+				}),
+				hostStep("saturate(tanh)", () => {
+					for (let k = 0; k < GRID * GRID; k++) {
+						const fx = temp[k * 2];
+						const fy = temp[k * 2 + 1];
+						const len = Math.sqrt(fx * fx + fy * fy);
+						if (len > 1e-6) {
+							const s = maxThrow * Math.tanh(len / maxThrow) / len;
+							temp[k * 2] = fx * s;
+							temp[k * 2 + 1] = fy * s;
+						}
+					}
+				}),
+				hostStep("publish(halfFloat)", (f) => {
+					flow.set(temp);
+					for (let k = 0; k < GRID * GRID; k++) {
+						field.texData[k * 4] = toHalfFloat(flow[k * 2]);
+						field.texData[k * 4 + 1] = toHalfFloat(flow[k * 2 + 1]);
+					}
+					field.upload();
+					prevX = f.pointer.x;
+					prevY = f.pointer.y;
+				})
+			]
+		}));
+		const uv = ctx.uv;
+		const taps = call(pixelThrowBicubicSetup, "pixelThrowBicubicSetup", [uv]);
+		const tapW = taps.member("w");
+		const flowVec = local(flowKit.sample(taps.member("uvA"), "linearClamp").member("xy").mul(tapW.member("x")).add(flowKit.sample(taps.member("uvB"), "linearClamp").member("xy").mul(tapW.member("y"))).add(flowKit.sample(taps.member("uvC"), "linearClamp").member("xy").mul(tapW.member("z"))).add(flowKit.sample(taps.member("uvD"), "linearClamp").member("xy").mul(tapW.member("w"))), "flowVec");
+		const probeUV = offsetUV(uv, flowVec, .5);
+		return call(unpremultiplyAlpha, "unpremultiplyAlpha", [applyEdgeHandlingExpr(local(offsetUV(uv, flowVec, keyScaleOf(keyMode, call(unpremultiplyAlpha, "unpremultiplyAlpha", [child.sample(probeUV)]).member("rgb"), uniforms.keyInfluence)), "displacedUV"), (u) => child.sample(u), edgeMode)]);
+	} }
+});
+var PixelThrow_default = componentDefinition;
+export { pixelThrowBicubicSetup as i, PixelThrow_default as n, componentDefinition as r, PixelThrowBicubicTaps as t };

package/dist/core/Pixelate-BM5zL6Ss.js

@@ -0,0 +1,55 @@
+import { c as p, t as defineStd } from "./lower-DSk_KxOY.js";
+import { k as pixelate } from "./blurs-D1HfQTGP.js";
+const componentDefinition = defineStd({
+	name: "Pixelate",
+	role: "filter",
+	species: "gather",
+	boundingBoxDeclaration: { aspectRatio: null },
+	category: "Stylize",
+	description: "Pixelation effect with adjustable cell size",
+	props: {
+		scale: {
+			default: 50,
+			description: "Number of pixels along the longest edge (higher = smaller pixels)",
+			ui: {
+				type: ["range", "map"],
+				min: 1,
+				max: 200,
+				step: 1,
+				label: "Scale",
+				group: "Effect"
+			}
+		},
+		gap: {
+			default: 0,
+			description: "Space between pixels as a fraction of cell size (0 = no gap, 1 = fully invisible)",
+			ui: {
+				type: ["range", "map"],
+				min: 0,
+				max: .95,
+				step: .01,
+				label: "Gap",
+				group: "Effect"
+			}
+		},
+		roundness: {
+			default: 0,
+			description: "Roundness of each pixel's corners (0 = square, 1 = circle)",
+			ui: {
+				type: ["range", "map"],
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Roundness",
+				group: "Effect"
+			}
+		}
+	},
+	effect: pixelate({
+		scale: p("scale"),
+		gap: p("gap"),
+		roundness: p("roundness")
+	})
+});
+var Pixelate_default = componentDefinition;
+export { componentDefinition as n, Pixelate_default as t };