shaders 2.5.135 → 3.0.437

package/dist/core/PixelThrow-CiZj7iGN.js

@@ -0,0 +1,522 @@
+import { At as call, M as toHalfFloat, Ot as ZERO, Pt as floatE, R as std, Wt as unpremultiplyAlpha, bt as applyEdgeHandlingExpr, n as tgpu, on as d } from "./coords-BlwgBpJf.js";
+import { s as transformEdges } from "./transformations-fqzznt4g.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;
+const pixelThrowOffsetUV = tgpu.fn([
+	d.vec2f,
+	d.vec2f,
+	d.f32
+], d.vec2f)(/* @__PURE__ */ (($) => (globalThis.__TYPEGPU_META__ ??= /* @__PURE__ */ new WeakMap()).set($.f = ((uv, flowVec, scale) => {
+	"use gpu";
+	return d.vec2f(__tsover_sub(uv.x, __tsover_mul(flowVec.x, scale)), __tsover_sub(uv.y, __tsover_mul(flowVec.y, scale)));
+}), {
+	v: 1,
+	name: void 0,
+	ast: {
+		"params": [
+			{
+				"type": "i",
+				"name": "uv"
+			},
+			{
+				"type": "i",
+				"name": "flowVec"
+			},
+			{
+				"type": "i",
+				"name": "scale"
+			}
+		],
+		"body": [0, [[10, [
+			6,
+			[
+				7,
+				"d",
+				"vec2f"
+			],
+			[[
+				1,
+				[
+					7,
+					"uv",
+					"x"
+				],
+				"-",
+				[
+					1,
+					[
+						7,
+						"flowVec",
+						"x"
+					],
+					"*",
+					"scale"
+				]
+			], [
+				1,
+				[
+					7,
+					"uv",
+					"y"
+				],
+				"-",
+				[
+					1,
+					[
+						7,
+						"flowVec",
+						"y"
+					],
+					"*",
+					"scale"
+				]
+			]]
+		]]]],
+		"externalNames": ["d"]
+	},
+	externals: () => ({ d })
+}) && $.f)({})).$name("pixelThrowOffsetUV");
+function buildKeyScale(keyMode) {
+	return tgpu.fn([d.vec3f, d.f32], d.f32)(/* @__PURE__ */ (($) => (globalThis.__TYPEGPU_META__ ??= /* @__PURE__ */ new WeakMap()).set($.f = ((rgb, keyInfluence) => {
+		"use gpu";
+		const lum = d.vec3f(.299, .587, .114);
+		let key = d.f32(0);
+		if (keyMode === 1) key = __tsover_sub(1, std.dot(rgb, lum));
+		else if (keyMode === 2) key = rgb.x;
+		else if (keyMode === 3) key = rgb.y;
+		else if (keyMode === 4) key = rgb.z;
+		else key = std.dot(rgb, lum);
+		const keyClamped = std.clamp(key, 0, 1);
+		return std.mix(1, keyClamped, keyInfluence);
+	}), {
+		v: 1,
+		name: void 0,
+		ast: {
+			"params": [{
+				"type": "i",
+				"name": "rgb"
+			}, {
+				"type": "i",
+				"name": "keyInfluence"
+			}],
+			"body": [0, [
+				[
+					13,
+					"lum",
+					[
+						6,
+						[
+							7,
+							"d",
+							"vec3f"
+						],
+						[
+							[5, "0.299"],
+							[5, "0.587"],
+							[5, "0.114"]
+						]
+					]
+				],
+				[
+					12,
+					"key",
+					[
+						6,
+						[
+							7,
+							"d",
+							"f32"
+						],
+						[[5, "0"]]
+					]
+				],
+				[
+					11,
+					[
+						1,
+						"keyMode",
+						"===",
+						[5, "1"]
+					],
+					[
+						2,
+						"key",
+						"=",
+						[
+							1,
+							[5, "1"],
+							"-",
+							[
+								6,
+								[
+									7,
+									"std",
+									"dot"
+								],
+								["rgb", "lum"]
+							]
+						]
+					],
+					[
+						11,
+						[
+							1,
+							"keyMode",
+							"===",
+							[5, "2"]
+						],
+						[
+							2,
+							"key",
+							"=",
+							[
+								7,
+								"rgb",
+								"x"
+							]
+						],
+						[
+							11,
+							[
+								1,
+								"keyMode",
+								"===",
+								[5, "3"]
+							],
+							[
+								2,
+								"key",
+								"=",
+								[
+									7,
+									"rgb",
+									"y"
+								]
+							],
+							[
+								11,
+								[
+									1,
+									"keyMode",
+									"===",
+									[5, "4"]
+								],
+								[
+									2,
+									"key",
+									"=",
+									[
+										7,
+										"rgb",
+										"z"
+									]
+								],
+								[
+									2,
+									"key",
+									"=",
+									[
+										6,
+										[
+											7,
+											"std",
+											"dot"
+										],
+										["rgb", "lum"]
+									]
+								]
+							]
+						]
+					]
+				],
+				[
+					13,
+					"keyClamped",
+					[
+						6,
+						[
+							7,
+							"std",
+							"clamp"
+						],
+						[
+							"key",
+							[5, "0"],
+							[5, "1"]
+						]
+					]
+				],
+				[10, [
+					6,
+					[
+						7,
+						"std",
+						"mix"
+					],
+					[
+						[5, "1"],
+						"keyClamped",
+						"keyInfluence"
+					]
+				]]
+			]],
+			"externalNames": [
+				"d",
+				"keyMode",
+				"std"
+			]
+		},
+		externals: () => ({
+			d,
+			keyMode,
+			std
+		})
+	}) && $.f)({})).$name(`pixelThrowKeyScale_${keyMode}`);
+}
+const componentDefinition = {
+	name: "PixelThrow",
+	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"
+			}
+		}
+	},
+	fragment: (params) => {
+		const { uniforms, ctx, childNode, convertToTexture, onBeforeRender, onCleanup, dimensions, propValues, createDataTexture, registerMediaTexture, 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 texData = new Uint16Array(GRID * GRID * 4);
+		const flowTex = createDataTexture({
+			width: GRID,
+			height: GRID,
+			format: "rgba16float",
+			data: texData,
+			label: "pixelthrow-flow"
+		});
+		onCleanup(() => flowTex.destroy());
+		const flowKit = registerMediaTexture(() => flowTex.texture);
+		let prevX = .5, prevY = .5;
+		let velX = 0, velY = 0;
+		let lastTime = Date.now();
+		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;
+		};
+		onBeforeRender((fp) => {
+			const { pointer } = fp;
+			const now = Date.now();
+			const dt = Math.min((now - lastTime) / 1e3, .016);
+			lastTime = now;
+			if (dt <= 0) return;
+			const aspect = Math.max(1e-4, dimensions.width / Math.max(1, dimensions.height));
+			const rawVelX = (pointer.x - prevX) / dt;
+			const rawVelY = (pointer.y - prevY) / dt;
+			velX = velX * .8 + rawVelX * .2;
+			velY = velY * .8 + rawVelY * .2;
+			const speed = Math.sqrt(velX * velX + velY * velY);
+			const strength = num(getCpuValue("strength"), .25);
+			const radius = num(getCpuValue("radius"), .2);
+			const friction = num(getCpuValue("friction"), .3);
+			const momentum = num(getCpuValue("momentum"), .5);
+			const maxThrow = strength * .5;
+			const decay = Math.max(0, 1 - friction * dt * 4);
+			const advect = momentum * 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;
+			}
+			if (speed > .02) {
+				const r = Math.max(.001, radius);
+				const r2 = r * r;
+				const minI = Math.max(0, Math.floor((pointer.y - r) * GRID));
+				const maxI = Math.min(GRID - 1, Math.ceil((pointer.y + r) * GRID));
+				const minJ = Math.max(0, Math.floor((pointer.x - r) * GRID));
+				const maxJ = Math.min(GRID - 1, Math.ceil((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 - pointer.x) * aspect : cellX - pointer.x;
+					const dy = aspect >= 1 ? cellY - pointer.y : (cellY - pointer.y) / aspect;
+					const distSq = dx * dx + dy * dy;
+					if (distSq > r2) continue;
+					const influence = Math.exp(-distSq / r2);
+					const idx = (i * GRID + j) * 2;
+					temp[idx] += velX * influence * dt * 4;
+					temp[idx + 1] += velY * influence * dt * 4;
+				}
+			}
+			for (let k = 0; k < GRID * GRID * 2; k++) temp[k] = Math.max(-maxThrow, Math.min(maxThrow, temp[k]));
+			flow.set(temp);
+			for (let k = 0; k < GRID * GRID; k++) {
+				texData[k * 4] = toHalfFloat(flow[k * 2]);
+				texData[k * 4 + 1] = toHalfFloat(flow[k * 2 + 1]);
+			}
+			flowTex.write(texData);
+			prevX = pointer.x;
+			prevY = pointer.y;
+		});
+		const uv = ctx.uv;
+		const flowVec = flowKit.sample(uv, "linearClamp").member("xy");
+		const probeUV = call(pixelThrowOffsetUV, "pixelThrowOffsetUV", [
+			uv,
+			flowVec,
+			floatE(.5)
+		]);
+		const probe = call(unpremultiplyAlpha, "unpremultiplyAlpha", [child.sample(probeUV)]);
+		return call(unpremultiplyAlpha, "unpremultiplyAlpha", [applyEdgeHandlingExpr(call(pixelThrowOffsetUV, "pixelThrowOffsetUV", [
+			uv,
+			flowVec,
+			call(buildKeyScale(keyMode), `pixelThrowKeyScale_${keyMode}`, [probe.member("rgb"), uniforms.keyInfluence])
+		]), (u) => child.sample(u), edgeMode)]);
+	}
+};
+var PixelThrow_default = componentDefinition;
+export { pixelThrowOffsetUV as i, buildKeyScale as n, componentDefinition as r, PixelThrow_default as t };