shaders 2.3.51 → 2.3.53

package/dist/core/Aurora-BDnL1XdK.js

@@ -0,0 +1,233 @@
+import { i as transformColorSpace, r as transformColor, s as transformPosition, t as colorSpaceOptions } from "./transformations-CC_c-QAT.js";
+import { t as createAnimatedTime } from "./time-BZqyVJXt.js";
+import { t as mixColors } from "./colorMixing-Ehw-Hfs_.js";
+import { Fn, clamp, exp, float, fract, mix, mx_noise_float, pow, screenUV, sin, smoothstep, step, vec2, vec3, vec4, viewportSize } from "three/tsl";
+const componentDefinition = {
+	name: "Aurora",
+	category: "Textures",
+	description: "Mesmerizing aurora borealis with layered curtains, vertical rays, and flowing light.",
+	props: {
+		colorA: {
+			default: "#a533f8",
+			transform: transformColor,
+			description: "Edge color at the curtain base",
+			ui: {
+				type: "color",
+				label: "Color A",
+				group: "Colors"
+			}
+		},
+		colorB: {
+			default: "#22ee88",
+			transform: transformColor,
+			description: "Core color in the bright center",
+			ui: {
+				type: "color",
+				label: "Color B",
+				group: "Colors"
+			}
+		},
+		colorC: {
+			default: "#1694e8",
+			transform: transformColor,
+			description: "Tip color at the ray ends",
+			ui: {
+				type: "color",
+				label: "Color C",
+				group: "Colors"
+			}
+		},
+		colorSpace: {
+			default: "linear",
+			transform: transformColorSpace,
+			description: "Color space for color interpolation",
+			ui: {
+				type: "select",
+				options: colorSpaceOptions,
+				label: "Color Space",
+				group: "Colors"
+			}
+		},
+		balance: {
+			default: 50,
+			description: "Shifts color distribution across the curtain height",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 100,
+				step: 1,
+				label: "Balance",
+				group: "Colors"
+			}
+		},
+		intensity: {
+			default: 80,
+			description: "Overall aurora brightness",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 100,
+				step: 1,
+				label: "Intensity",
+				group: "Aurora"
+			}
+		},
+		curtainCount: {
+			default: 4,
+			description: "Number of aurora curtain layers",
+			ui: {
+				type: "range",
+				min: 1,
+				max: 4,
+				step: 1,
+				label: "Curtains",
+				group: "Aurora"
+			}
+		},
+		speed: {
+			default: 5,
+			description: "Animation speed",
+			ui: {
+				type: "range",
+				min: -10,
+				max: 10,
+				step: .1,
+				label: "Speed",
+				group: "Aurora"
+			}
+		},
+		waviness: {
+			default: 50,
+			description: "How much the curtains undulate",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 200,
+				step: 1,
+				label: "Waviness",
+				group: "Aurora"
+			}
+		},
+		rayDensity: {
+			default: 20,
+			description: "Density of vertical ray structures",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 100,
+				step: 1,
+				label: "Ray Detail",
+				group: "Aurora"
+			}
+		},
+		height: {
+			default: 120,
+			description: "How tall the aurora extends",
+			ui: {
+				type: "range",
+				min: 10,
+				max: 200,
+				step: 1,
+				label: "Height",
+				group: "Scene"
+			}
+		},
+		center: {
+			default: {
+				x: .5,
+				y: .5
+			},
+			transform: transformPosition,
+			description: "Center position of the aurora",
+			ui: {
+				type: "position",
+				label: "Center",
+				group: "Scene"
+			}
+		},
+		seed: {
+			default: 0,
+			description: "Random seed for variation",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 100,
+				step: 1,
+				label: "Seed",
+				group: "Aurora"
+			}
+		}
+	},
+	fragmentNode: (params) => {
+		const { uniforms } = params;
+		const colorA = uniforms.colorA.uniform;
+		const colorB = uniforms.colorB.uniform;
+		const colorC = uniforms.colorC.uniform;
+		const csMode = uniforms.colorSpace.uniform;
+		const balanceExp = mix(float(2.5), float(.4), uniforms.balance.uniform.mul(.01));
+		const intensity = uniforms.intensity.uniform.mul(.018);
+		const curtainCount = uniforms.curtainCount.uniform;
+		const waviness = uniforms.waviness.uniform.mul(.01);
+		const rayAmount = uniforms.rayDensity.uniform.mul(.01);
+		const auroraHeight = uniforms.height.uniform.mul(.01);
+		const centerX = uniforms.center.uniform.x;
+		const centerY = uniforms.center.uniform.y.oneMinus();
+		const seed = uniforms.seed.uniform;
+		const aspect = viewportSize.x.div(viewportSize.y);
+		const t = createAnimatedTime(params, uniforms.speed);
+		const auroraCurtain = Fn(([uv$1, layerIdx, layerTime]) => {
+			const tSlow = t.mul(.06).add(layerTime);
+			const lSeed = seed.add(layerIdx.mul(31.7));
+			const wx = uv$1.x.sub(centerX).mul(aspect).mul(2);
+			const ph1 = fract(sin(lSeed.mul(12.9)).mul(4758.5)).mul(Math.PI * 2);
+			const ph2 = fract(sin(lSeed.mul(78.2)).mul(2847.1)).mul(Math.PI * 2);
+			const ph3 = fract(sin(lSeed.mul(41.6)).mul(1593.7)).mul(Math.PI * 2);
+			const arc = sin(wx.mul(.7).add(tSlow.mul(.4)).add(ph1)).mul(.15).add(sin(wx.mul(1.6).add(tSlow.mul(.65)).add(ph2)).mul(.08)).add(sin(wx.mul(2.9).add(tSlow.mul(.3)).add(ph3)).mul(.04));
+			const noiseWarp = mx_noise_float(vec3(wx.mul(.5), tSlow.mul(.25), lSeed.mul(.1)));
+			const pathY = centerY.add(arc.mul(waviness)).add(noiseWarp.mul(.14).mul(waviness));
+			const warpedX = wx.add(noiseWarp.mul(2.5));
+			const rayFreq = mix(float(6), float(20), rayAmount);
+			const rayPhase = fract(sin(lSeed.mul(53.7)).mul(3847.2)).mul(Math.PI * 2);
+			const rays = pow(sin(warpedX.mul(rayFreq.mul(.15)).add(tSlow.mul(.1)).add(rayPhase)).mul(.5).add(.5), float(1.5));
+			const localHeight = auroraHeight.mul(mix(float(.4), float(1), rays));
+			const distFromPath = uv$1.y.sub(pathY);
+			const bottomFade = smoothstep(float(-.04), float(.015), distFromPath);
+			const topExtent = localHeight.mul(rays.mul(.4).add(.6));
+			const topFade = smoothstep(topExtent, float(0), distFromPath);
+			const envelope = bottomFade.mul(topFade);
+			const sectionBright = mix(float(.4), float(1), noiseWarp.mul(.5).add(.5));
+			const colorT = clamp(distFromPath.div(topExtent.add(.001)), 0, 1);
+			const coreD = colorT.sub(.2);
+			const coreBright = exp(coreD.mul(coreD).mul(-6)).mul(.3).add(1);
+			return vec2(colorT, envelope.mul(rays).mul(sectionBright).mul(coreBright));
+		});
+		return Fn(() => {
+			const uv$1 = screenUV;
+			const weightedT = float(0).toVar();
+			const totalAlpha = float(0).toVar();
+			const a1 = auroraCurtain(uv$1, float(0), float(0));
+			weightedT.assign(weightedT.add(a1.x.mul(a1.y)));
+			totalAlpha.assign(totalAlpha.add(a1.y));
+			const a2 = auroraCurtain(uv$1, float(1), float(3.1));
+			const w2 = a2.y.mul(step(float(2), curtainCount)).mul(.65);
+			weightedT.assign(weightedT.add(a2.x.mul(w2)));
+			totalAlpha.assign(totalAlpha.add(w2));
+			const a3 = auroraCurtain(uv$1, float(2), float(6.7));
+			const w3 = a3.y.mul(step(float(3), curtainCount)).mul(.45);
+			weightedT.assign(weightedT.add(a3.x.mul(w3)));
+			totalAlpha.assign(totalAlpha.add(w3));
+			const a4 = auroraCurtain(uv$1, float(3), float(9.4));
+			const w4 = a4.y.mul(step(float(4), curtainCount)).mul(.3);
+			weightedT.assign(weightedT.add(a4.x.mul(w4)));
+			totalAlpha.assign(totalAlpha.add(w4));
+			const avgT = pow(weightedT.div(totalAlpha.add(.001)), balanceExp);
+			const lowToMid = smoothstep(float(0), float(.2), avgT);
+			const midToHigh = smoothstep(float(.4), float(.85), avgT);
+			const col = mixColors(mixColors(colorA, colorB, lowToMid, csMode), colorC, midToHigh, csMode).rgb.mul(totalAlpha).mul(intensity);
+			const alpha = clamp(totalAlpha.mul(intensity).mul(.5), 0, 1);
+			return vec4(clamp(col, 0, 1), alpha);
+		})();
+	}
+};
+var Aurora_default = componentDefinition;
+export { componentDefinition as n, Aurora_default as t };

package/dist/core/CursorRipples-Dn_rE8nA.js

@@ -0,0 +1,177 @@
+import { t as applyEdgeHandling } from "./edges-Bd7GP4s2.js";
+import { o as transformEdges } from "./transformations-CC_c-QAT.js";
+import { DataTexture, FloatType, LinearFilter, RGFormat } from "three";
+import { convertToTexture, float, screenUV, texture, vec2, vec4 } from "three/tsl";
+var GRID_SIZE = 128;
+const componentDefinition = {
+	name: "CursorRipples",
+	category: "Interactive",
+	description: "Fluid-like ripple distortion",
+	requiresRTT: true,
+	requiresChild: true,
+	props: {
+		intensity: {
+			default: 10,
+			description: "Strength of the ripple distortion",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 20,
+				step: .1,
+				label: "Intensity",
+				group: "Effect"
+			}
+		},
+		decay: {
+			default: 10,
+			description: "How quickly ripples fade (higher = faster)",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 20,
+				step: .1,
+				label: "Decay",
+				group: "Effect"
+			}
+		},
+		radius: {
+			default: .5,
+			description: "Radius of cursor influence",
+			ui: {
+				type: "range",
+				min: .1,
+				max: 1,
+				step: .1,
+				label: "Radius",
+				group: "Effect"
+			}
+		},
+		chromaticSplit: {
+			default: 1,
+			description: "RGB channel separation along ripple edges",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 3,
+				step: .1,
+				label: "Chromatic Split",
+				group: "Effect"
+			}
+		},
+		edges: {
+			default: "stretch",
+			description: "How to handle edges when distortion pushes content out of bounds",
+			transform: transformEdges,
+			ui: {
+				type: "select",
+				options: [
+					{
+						label: "Stretch",
+						value: "stretch"
+					},
+					{
+						label: "Transparent",
+						value: "transparent"
+					},
+					{
+						label: "Mirror",
+						value: "mirror"
+					},
+					{
+						label: "Wrap",
+						value: "wrap"
+					}
+				],
+				label: "Edges",
+				group: "Effect"
+			}
+		}
+	},
+	fragmentNode: ({ uniforms, onBeforeRender, childNode, onCleanup, dimensions }) => {
+		const buffers = [new Float32Array(GRID_SIZE * GRID_SIZE), new Float32Array(GRID_SIZE * GRID_SIZE)];
+		let currentBuffer = 0;
+		const displacementData = new Float32Array(GRID_SIZE * GRID_SIZE * 2);
+		const displacementTexture = new DataTexture(displacementData, GRID_SIZE, GRID_SIZE, RGFormat, FloatType);
+		displacementTexture.magFilter = LinearFilter;
+		displacementTexture.minFilter = LinearFilter;
+		displacementTexture.needsUpdate = true;
+		const displacementField = texture(displacementTexture);
+		let prevX = .5;
+		let prevY = .5;
+		let lastTime = Date.now();
+		onBeforeRender(({ pointer }) => {
+			const currentTime = Date.now();
+			const dt = Math.min((currentTime - lastTime) / 1e3, .016);
+			lastTime = currentTime;
+			const aspect = dimensions.width / dimensions.height;
+			const substeps = 1;
+			const decay = uniforms.decay.uniform.value;
+			const radius = uniforms.radius.uniform.value * .05;
+			const rawVelX = dt > 0 ? (pointer.x - prevX) / dt : 0;
+			const rawVelY = dt > 0 ? (pointer.y - prevY) / dt : 0;
+			const mouseSpeed = Math.min(Math.sqrt(rawVelX * rawVelX + rawVelY * rawVelY), 2);
+			const dampFactor = 1 - decay * .004;
+			for (let s = 0; s < substeps; s++) {
+				const curr$1 = buffers[currentBuffer];
+				const prev = buffers[1 - currentBuffer];
+				if (s === 0 && mouseSpeed > .01) {
+					const influenceRadius = radius * 3;
+					const minJ = Math.max(1, Math.floor((pointer.x - influenceRadius) * GRID_SIZE));
+					const maxJ = Math.min(GRID_SIZE - 2, Math.ceil((pointer.x + influenceRadius) * GRID_SIZE));
+					const minI = Math.max(1, Math.floor((pointer.y - influenceRadius) * GRID_SIZE));
+					const maxI = Math.min(GRID_SIZE - 2, Math.ceil((pointer.y + influenceRadius) * GRID_SIZE));
+					for (let i = minI; i <= maxI; i++) for (let j = minJ; j <= maxJ; j++) {
+						const idx = i * GRID_SIZE + j;
+						const cellX = (j + .5) / GRID_SIZE;
+						const cellY = (i + .5) / GRID_SIZE;
+						const ddx = aspect >= 1 ? (cellX - pointer.x) * aspect : cellX - pointer.x;
+						const ddy = aspect >= 1 ? cellY - pointer.y : (cellY - pointer.y) / aspect;
+						const dist = Math.sqrt(ddx * ddx + ddy * ddy);
+						if (dist < influenceRadius) {
+							const influence = Math.exp(-dist * dist / (radius * radius));
+							curr$1[idx] -= influence * mouseSpeed * dt * 3;
+						}
+					}
+				}
+				for (let i = 1; i < GRID_SIZE - 1; i++) for (let j = 1; j < GRID_SIZE - 1; j++) {
+					const idx = i * GRID_SIZE + j;
+					prev[idx] = ((curr$1[idx - 1] + curr$1[idx + 1] + curr$1[idx - GRID_SIZE] + curr$1[idx + GRID_SIZE]) * .5 - prev[idx]) * dampFactor;
+				}
+				currentBuffer = 1 - currentBuffer;
+			}
+			const curr = buffers[currentBuffer];
+			for (let i = 1; i < GRID_SIZE - 1; i++) for (let j = 1; j < GRID_SIZE - 1; j++) {
+				const idx = i * GRID_SIZE + j;
+				const dIdx = idx * 2;
+				displacementData[dIdx] = (curr[idx + 1] - curr[idx - 1]) * .5;
+				displacementData[dIdx + 1] = (curr[idx + GRID_SIZE] - curr[idx - GRID_SIZE]) * .5;
+			}
+			displacementTexture.needsUpdate = true;
+			prevX = pointer.x;
+			prevY = pointer.y;
+		});
+		onCleanup(() => {
+			displacementTexture.dispose();
+		});
+		if (!childNode) return vec4(0, 0, 0, 0);
+		const childTexture = convertToTexture(childNode);
+		onCleanup(() => {
+			if (childTexture?.renderTarget?.dispose) childTexture.renderTarget.dispose();
+		});
+		const displacement = displacementField.sample(screenUV).xy;
+		const intensityScale = uniforms.intensity.uniform.mul(.1);
+		const scaledDisplacement = displacement.mul(intensityScale);
+		const maxDisp = float(.15);
+		const clampedDisplacement = scaledDisplacement.clamp(vec2(maxDisp.negate(), maxDisp.negate()), vec2(maxDisp, maxDisp));
+		const chromaticScale = uniforms.chromaticSplit.uniform.mul(.1);
+		const rUV = screenUV.sub(clampedDisplacement.mul(float(1).add(chromaticScale)));
+		const gUV = screenUV.sub(clampedDisplacement);
+		const bUV = screenUV.sub(clampedDisplacement.mul(float(1).sub(chromaticScale)));
+		const rSample = applyEdgeHandling(rUV, childTexture.sample(rUV), childTexture, uniforms.edges.uniform);
+		const gSample = applyEdgeHandling(gUV, childTexture.sample(gUV), childTexture, uniforms.edges.uniform);
+		const bSample = applyEdgeHandling(bUV, childTexture.sample(bUV), childTexture, uniforms.edges.uniform);
+		return vec4(rSample.r, gSample.g, bSample.b, gSample.a);
+	}
+};
+var CursorRipples_default = componentDefinition;
+export { componentDefinition as n, CursorRipples_default as t };