shaders 2.2.48 → 2.3.50

package/dist/core/{Godrays-CPWOcLmc.js → Godrays-B_-HliEA.js}

@@ -1,9 +1,9 @@
-import { r as transformColor, s as transformPosition } from "./transformations-YbhRK-rd.js";
+import { r as transformColor, s as transformPosition } from "./transformations-CC_c-QAT.js";
 import { t as createAnimatedTime } from "./time-BZqyVJXt.js";
 import { Fn, PI, abs, atan, clamp, float, length, mix, pow, screenUV, sin, smoothstep, vec2, vec4, viewportSize } from "three/tsl";
 const componentDefinition = {
 	name: "Godrays",
-	category: "Base Layers",
+	category: "Textures",
 	description: "Volumetric light rays emanating from a point",
 	requiresRTT: false,
 	props: {
@@ -16,7 +16,8 @@ const componentDefinition = {
 			description: "The center point of the god rays",
 			ui: {
 				type: "position",
-				label: "Center"
+				label: "Center",
+				group: "Position"
 			}
 		},
 		density: {
@@ -27,7 +28,8 @@ const componentDefinition = {
 				min: 0,
 				max: 1,
 				step: .1,
-				label: "Density"
+				label: "Density",
+				group: "Effect"
 			}
 		},
 		intensity: {
@@ -38,7 +40,8 @@ const componentDefinition = {
 				min: 0,
 				max: 1,
 				step: .1,
-				label: "Intensity"
+				label: "Intensity",
+				group: "Effect"
 			}
 		},
 		spotty: {
@@ -49,7 +52,8 @@ const componentDefinition = {
 				min: 0,
 				max: 1,
 				step: .1,
-				label: "Spotty"
+				label: "Spotty",
+				group: "Effect"
 			}
 		},
 		speed: {
@@ -60,7 +64,8 @@ const componentDefinition = {
 				min: 0,
 				max: 2,
 				step: .1,
-				label: "Speed"
+				label: "Speed",
+				group: "Animation"
 			}
 		},
 		rayColor: {
@@ -69,7 +74,8 @@ const componentDefinition = {
 			description: "Color of the light rays",
 			ui: {
 				type: "color",
-				label: "Ray Color"
+				label: "Ray Color",
+				group: "Colors"
 			}
 		},
 		backgroundColor: {
@@ -78,7 +84,8 @@ const componentDefinition = {
 			description: "Background color",
 			ui: {
 				type: "color",
-				label: "Background Color"
+				label: "Background Color",
+				group: "Colors"
 			}
 		}
 	},
@@ -102,12 +109,14 @@ const componentDefinition = {
 			const u = f.mul(f).mul(f.mul(-2).add(3));
 			return mix(mix(a, b, u.x), mix(c, d, u.x), u.y);
 		});
-		const raysShape = Fn(([uv$2, r, freq, intensity]) => {
-			const a = atan(uv$2.y, uv$2.x);
+		const angle = atan(shapeUV.y, shapeUV.x);
+		const angleWrapped = angle.mod(PI.mul(2));
+		const blendFactor = smoothstep(-.15, .15, shapeUV.x);
+		const raysShape = Fn(([a, aWrapped, blend, r, freq, intensity]) => {
 			const left = vec2(a.mul(freq), r);
-			const right = vec2(a.mod(PI.mul(2)).mul(freq), r);
+			const right = vec2(aWrapped.mul(freq), r);
 			const nLeft = pow(valueNoise(left), intensity);
-			return mix(pow(valueNoise(right), intensity), nLeft, smoothstep(-.15, .15, uv$2.x));
+			return mix(pow(valueNoise(right), intensity), nLeft, blend);
 		});
 		const animTime = createAnimatedTime(params, uniforms.speed).mul(.2);
 		const rayEffect = Fn(() => {
@@ -119,14 +128,14 @@ const componentDefinition = {
 			const r1 = radius.mul(1).sub(animTime.mul(3));
 			const r2 = radius.mul(.5).mul(float(1).add(spots)).sub(animTime.mul(2));
 			const f1 = density.mul(5);
-			const ray = raysShape(shapeUV, r1, f1, intensityCalc).toVar();
-			ray.assign(ray.mul(raysShape(shapeUV, r2, f1.mul(4), intensityCalc)));
+			const ray = raysShape(angle, angleWrapped, blendFactor, r1, f1, intensityCalc).toVar();
+			ray.assign(ray.mul(raysShape(angle, angleWrapped, blendFactor, r2, f1.mul(4), intensityCalc)));
 			accumRay.assign(accumRay.add(ray));
 			const r3 = radius.mul(1.4).sub(animTime.mul(2.5));
 			const r4 = radius.mul(.7).mul(float(1).add(spots)).sub(animTime.mul(1.8));
 			const f2 = density.mul(4.5);
-			const ray2 = raysShape(shapeUV, r3, f2, intensityCalc).toVar();
-			ray2.assign(ray2.mul(raysShape(shapeUV, r4, f2.mul(3.5), intensityCalc)));
+			const ray2 = raysShape(angle, angleWrapped, blendFactor, r3, f2, intensityCalc).toVar();
+			ray2.assign(ray2.mul(raysShape(angle, angleWrapped, blendFactor, r4, f2.mul(3.5), intensityCalc)));
 			accumRay.assign(accumRay.add(ray2.mul(.7)));
 			return clamp(accumRay, 0, 1);
 		})();

package/dist/core/{Grid-CsIIl3LT.js → Grid-DKSUwEIe.js}

@@ -1,8 +1,8 @@
-import { r as transformColor } from "./transformations-YbhRK-rd.js";
+import { r as transformColor } from "./transformations-CC_c-QAT.js";
 import { fract, fwidth, max, screenUV, smoothstep, vec2, vec4, viewportSize } from "three/tsl";
 const componentDefinition = {
 	name: "Grid",
-	category: "Base Layers",
+	category: "Textures",
 	description: "Simple grid lines pattern with adjustable thickness",
 	props: {
 		color: {
@@ -11,7 +11,8 @@ const componentDefinition = {
 			description: "The color of the grid lines",
 			ui: {
 				type: "color",
-				label: "Color"
+				label: "Color",
+				group: "Colors"
 			}
 		},
 		cells: {
@@ -22,7 +23,8 @@ const componentDefinition = {
 				min: 1,
 				max: 50,
 				step: 1,
-				label: "Cells"
+				label: "Cells",
+				group: "Effect"
 			}
 		},
 		thickness: {
@@ -33,7 +35,8 @@ const componentDefinition = {
 				min: 0,
 				max: 5,
 				step: .1,
-				label: "Thickness"
+				label: "Thickness",
+				group: "Effect"
 			}
 		}
 	},
@@ -48,7 +51,7 @@ const componentDefinition = {
 		const distToLineX = gridFract.x.min(gridFract.x.oneMinus());
 		const distToLineY = gridFract.y.min(gridFract.y.oneMinus());
 		const pixelSize = fwidth(gridUV);
-		const gridMask = max(smoothstep(lineWidth.add(pixelSize.x), lineWidth, distToLineX), smoothstep(lineWidth.add(pixelSize.y), lineWidth, distToLineY));
+		const gridMask = max(smoothstep(lineWidth, lineWidth.add(pixelSize.x), distToLineX).oneMinus(), smoothstep(lineWidth, lineWidth.add(pixelSize.y), distToLineY).oneMinus());
 		return vec4(uniforms.color.uniform.rgb, uniforms.color.uniform.a.mul(gridMask));
 	}
 };

package/dist/core/{GridDistortion-Cq3hRKXK.js → GridDistortion-DahXljLX.js}

@@ -1,5 +1,5 @@
 import { t as applyEdgeHandling } from "./edges-Bd7GP4s2.js";
-import { o as transformEdges } from "./transformations-YbhRK-rd.js";
+import { o as transformEdges } from "./transformations-CC_c-QAT.js";
 import { DataTexture, FloatType, LinearFilter, RGFormat } from "three";
 import { convertToTexture, float, screenUV, texture, uniform, vec2, vec4, viewportSize } from "three/tsl";
 var DEFAULT_GRID_SIZE = 20;
@@ -43,7 +43,8 @@ const componentDefinition = {
 				min: 0,
 				max: 5,
 				step: .1,
-				label: "Intensity"
+				label: "Intensity",
+				group: "Effect"
 			}
 		},
 		decay: {
@@ -54,7 +55,8 @@ const componentDefinition = {
 				min: 0,
 				max: 10,
 				step: .1,
-				label: "Decay"
+				label: "Decay",
+				group: "Effect"
 			}
 		},
 		radius: {
@@ -65,7 +67,8 @@ const componentDefinition = {
 				min: 0,
 				max: 3,
 				step: .1,
-				label: "Radius"
+				label: "Radius",
+				group: "Effect"
 			}
 		},
 		gridSize: {
@@ -76,7 +79,8 @@ const componentDefinition = {
 				min: 8,
 				max: 128,
 				step: 1,
-				label: "Grid Size"
+				label: "Grid Size",
+				group: "Effect"
 			}
 		},
 		edges: {
@@ -103,7 +107,8 @@ const componentDefinition = {
 						value: "wrap"
 					}
 				],
-				label: "Edges"
+				label: "Edges",
+				group: "Effect"
 			}
 		}
 	},
@@ -132,8 +137,8 @@ const componentDefinition = {
 				displacementData[idx + 1] *= 1 - decay * dt;
 				const cellX = (j + .5) / GRID_SIZE;
 				const cellY = (i + .5) / GRID_SIZE;
-				const dx = (cellX - pointer.x) / aspect$1;
-				const dy = cellY - pointer.y;
+				const dx = aspect$1 >= 1 ? (cellX - pointer.x) * aspect$1 : cellX - pointer.x;
+				const dy = aspect$1 >= 1 ? cellY - pointer.y : (cellY - pointer.y) / aspect$1;
 				const dist = Math.sqrt(dx * dx + dy * dy);
 				if (dist < radius * 2 && Math.abs(velX) + Math.abs(velY) > .01) {
 					const influence = Math.exp(-dist * dist / (radius * radius));

package/dist/core/{Halftone-BQsMiTyE.js → Halftone-ZVjwkjaQ.js}

@@ -1,4 +1,4 @@
-import { n as transformAngle } from "./transformations-YbhRK-rd.js";
+import { n as transformAngle } from "./transformations-CC_c-QAT.js";
 import { cos, dot, fract, length, radians, screenUV, sin, smoothstep, vec2, vec3, vec4, viewportSize } from "three/tsl";
 const componentDefinition = {
 	name: "Halftone",
@@ -14,7 +14,8 @@ const componentDefinition = {
 				min: 10,
 				max: 300,
 				step: 1,
-				label: "Frequency"
+				label: "Frequency",
+				group: "Effect"
 			}
 		},
 		angle: {
@@ -26,7 +27,8 @@ const componentDefinition = {
 				min: 0,
 				max: 360,
 				step: 1,
-				label: "Angle"
+				label: "Angle",
+				group: "Effect"
 			}
 		},
 		smoothness: {
@@ -37,7 +39,8 @@ const componentDefinition = {
 				min: 0,
 				max: .3,
 				step: .1,
-				label: "Smoothness"
+				label: "Smoothness",
+				group: "Effect"
 			}
 		}
 	},
@@ -56,7 +59,7 @@ const componentDefinition = {
 		const originalColor = childNode;
 		const dotSize = dot(originalColor.rgb, vec3(.299, .587, .114)).mul(.7).add(.15);
 		const dist = length(gridUV);
-		const dotPattern = smoothstep(dotSize.add(smoothness), dotSize.sub(smoothness), dist);
+		const dotPattern = smoothstep(dotSize.sub(smoothness), dotSize.add(smoothness), dist).oneMinus();
 		return vec4(originalColor.rgb.mul(dotPattern), originalColor.a.mul(dotPattern));
 	}
 };

package/dist/core/{HueShift-BTjEGl3Z.js → HueShift-gZlNBwNE.js}

@@ -12,7 +12,8 @@ const componentDefinition = {
 			min: -180,
 			max: 180,
 			step: 1,
-			label: "Shift"
+			label: "Shift",
+			group: "Appearance"
 		},
 		transform: (value) => value * Math.PI / 180
 	} },

package/dist/core/{ImageTexture-CY8Q8h_o.js → ImageTexture-DuXMku_O.js}

@@ -2,7 +2,7 @@ import { SRGBColorSpace, Texture, TextureLoader } from "three/webgpu";
 import { float, max, min, or, screenUV, select, step, texture, uniform, vec2, vec4, viewportSize } from "three/tsl";
 const componentDefinition = {
 	name: "ImageTexture",
-	category: "Base Layers",
+	category: "Textures",
 	description: "Display an image with customizable object-fit modes",
 	props: {
 		url: {
@@ -10,7 +10,8 @@ const componentDefinition = {
 			description: "Upload an image or provide a URL",
 			ui: {
 				type: "image-upload",
-				label: "Image"
+				label: "Image",
+				group: "Media"
 			}
 		},
 		objectFit: {
@@ -49,7 +50,8 @@ const componentDefinition = {
 						value: "none"
 					}
 				],
-				label: "Object Fit"
+				label: "Object Fit",
+				group: "Appearance"
 			}
 		}
 	},

package/dist/core/{Kaleidoscope-Dr-ja0XH.js → Kaleidoscope-COKZ0BDb.js}

@@ -1,5 +1,5 @@
 import { t as applyEdgeHandling } from "./edges-Bd7GP4s2.js";
-import { o as transformEdges, s as transformPosition } from "./transformations-YbhRK-rd.js";
+import { o as transformEdges, s as transformPosition } from "./transformations-CC_c-QAT.js";
 import { atan2, convertToTexture, cos, float, length, mod, screenUV, sin, vec2, vec4, viewportSize } from "three/tsl";
 const componentDefinition = {
 	name: "Kaleidoscope",
@@ -17,7 +17,8 @@ const componentDefinition = {
 			description: "The center point of the kaleidoscope effect",
 			ui: {
 				type: "position",
-				label: "Center"
+				label: "Center",
+				group: "Position"
 			}
 		},
 		segments: {
@@ -28,7 +29,8 @@ const componentDefinition = {
 				min: 2,
 				max: 24,
 				step: 1,
-				label: "Segments"
+				label: "Segments",
+				group: "Effect"
 			}
 		},
 		angle: {
@@ -39,7 +41,8 @@ const componentDefinition = {
 				min: 0,
 				max: 360,
 				step: 1,
-				label: "Angle"
+				label: "Angle",
+				group: "Effect"
 			}
 		},
 		edges: {
@@ -66,7 +69,8 @@ const componentDefinition = {
 						value: "wrap"
 					}
 				],
-				label: "Edges"
+				label: "Edges",
+				group: "Effect"
 			}
 		}
 	},