shaders 2.3.75 → 2.4.76

package/dist/core/{Circle-CMeFMTtC.js → Circle--0oHzoCi.js}

@@ -15,7 +15,7 @@ var transformStrokePosition = (value) => {
 };
 const componentDefinition = {
 	name: "Circle",
-	category: "Textures",
+	category: "Shapes",
 	description: "Generate a circle with adjustable size and softness",
 	props: {
 		color: {

package/dist/core/Crescent-B4Z_WAgY.js

@@ -0,0 +1,186 @@
+import { a as transformColor, l as transformPosition, o as transformColorSpace, t as colorSpaceOptions } from "./transformations-B5lM6fYX.js";
+import { t as mixColors } from "./colorMixing-BPpDnR5I.js";
+import { r as crescentSdf } from "./sdf-BDsv-WBk.js";
+import { cos, float, screenUV, sin, smoothstep, vec2, vec4, viewportSize } from "three/tsl";
+var transformStrokePosition = (value) => {
+	return {
+		"outside": 0,
+		"center": 1,
+		"inside": 2
+	}[value?.toLowerCase()] ?? 1;
+};
+const componentDefinition = {
+	name: "Crescent",
+	category: "Shapes",
+	description: "Crescent moon shape — an outer circle with an inner circle subtracted",
+	props: {
+		color: {
+			default: "#ffffff",
+			transform: transformColor,
+			description: "Fill color of the crescent",
+			ui: {
+				type: "color",
+				label: "Color",
+				group: "Colors"
+			}
+		},
+		center: {
+			default: {
+				x: .5,
+				y: .5
+			},
+			transform: transformPosition,
+			description: "Center position of the crescent",
+			ui: {
+				type: "position",
+				label: "Center",
+				group: "Position"
+			}
+		},
+		radius: {
+			default: .3,
+			description: "Outer circle radius",
+			ui: {
+				type: "range",
+				min: .05,
+				max: 1,
+				step: .01,
+				label: "Size",
+				group: "Shape"
+			}
+		},
+		innerRatio: {
+			default: .8,
+			description: "Inner (bite) circle radius as a fraction of outer radius",
+			ui: {
+				type: "range",
+				min: .3,
+				max: 1.2,
+				step: .01,
+				label: "Bite Size",
+				group: "Shape"
+			}
+		},
+		offset: {
+			default: .2,
+			description: "Horizontal distance the bite circle is shifted from center",
+			ui: {
+				type: "range",
+				min: .01,
+				max: .5,
+				step: .01,
+				label: "Bite Offset",
+				group: "Shape"
+			}
+		},
+		rotation: {
+			default: 0,
+			description: "Rotation in degrees",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 360,
+				step: 1,
+				label: "Rotation",
+				group: "Shape"
+			}
+		},
+		softness: {
+			default: 0,
+			description: "Edge softness for antialiasing",
+			ui: {
+				type: "range",
+				min: 0,
+				max: .1,
+				step: .001,
+				label: "Softness",
+				group: "Effect"
+			}
+		},
+		strokeThickness: {
+			default: 0,
+			description: "Stroke thickness. Zero means no stroke.",
+			ui: {
+				type: "range",
+				min: 0,
+				max: .2,
+				step: .005,
+				label: "Stroke Thickness",
+				group: "Stroke"
+			}
+		},
+		strokeColor: {
+			default: "#000000",
+			transform: transformColor,
+			description: "Color of the stroke outline",
+			ui: {
+				type: "color",
+				label: "Stroke Color",
+				group: "Colors"
+			}
+		},
+		strokePosition: {
+			default: "center",
+			transform: transformStrokePosition,
+			description: "Position of the stroke relative to the shape edge",
+			ui: {
+				type: "select",
+				options: [
+					{
+						label: "Outside",
+						value: "outside"
+					},
+					{
+						label: "Center",
+						value: "center"
+					},
+					{
+						label: "Inside",
+						value: "inside"
+					}
+				],
+				label: "Stroke Position",
+				group: "Stroke"
+			}
+		},
+		colorSpace: {
+			default: "linear",
+			transform: transformColorSpace,
+			compileTime: true,
+			description: "Color space for blending fill and stroke colors",
+			ui: {
+				type: "select",
+				options: colorSpaceOptions,
+				label: "Color Blending",
+				group: "Colors"
+			}
+		}
+	},
+	fragmentNode: ({ uniforms }) => {
+		const uv$1 = screenUV;
+		const aspect = viewportSize.x.div(viewportSize.y);
+		const aspectUV = vec2(uv$1.x.mul(aspect), uv$1.y);
+		const centerPos = vec2(uniforms.center.uniform.x.mul(aspect), uniforms.center.uniform.y.oneMinus());
+		const dx = aspectUV.x.sub(centerPos.x);
+		const dy = aspectUV.y.sub(centerPos.y);
+		const rotRad = uniforms.rotation.uniform.mul(float(Math.PI / 180));
+		const cosR = cos(rotRad);
+		const sinR = sin(rotRad);
+		const sdf = crescentSdf(dx.mul(cosR).add(dy.mul(sinR)), dy.mul(cosR).sub(dx.mul(sinR)), uniforms.radius.uniform, uniforms.innerRatio.uniform, uniforms.offset.uniform);
+		const edgeSoftness = uniforms.softness.uniform;
+		const strokeThickness = uniforms.strokeThickness.uniform;
+		const strokePositionMode = uniforms.strokePosition.uniform;
+		const hasStroke = strokeThickness.greaterThan(float(0));
+		const isCenter = strokePositionMode.greaterThanEqual(float(.5)).and(strokePositionMode.lessThan(float(1.5)));
+		const isInside = strokePositionMode.greaterThanEqual(float(1.5));
+		const halfThickness = strokeThickness.mul(.5);
+		const strokeInner = isInside.select(strokeThickness.negate(), isCenter.select(halfThickness.negate(), float(0)));
+		const strokeOuter = isInside.select(float(0), isCenter.select(halfThickness, strokeThickness));
+		const overallMask = smoothstep(strokeOuter.sub(edgeSoftness), strokeOuter, sdf).oneMinus();
+		const strokeBlend = hasStroke.select(smoothstep(strokeInner.sub(edgeSoftness), strokeInner, sdf), float(0));
+		const blendedColor = mixColors(vec4(uniforms.color.uniform.rgb, uniforms.color.uniform.a), vec4(uniforms.strokeColor.uniform.rgb, uniforms.strokeColor.uniform.a), strokeBlend, uniforms.colorSpace.uniform.value);
+		return vec4(blendedColor.xyz, blendedColor.w.mul(overallMask));
+	}
+};
+var Crescent_default = componentDefinition;
+export { componentDefinition as n, Crescent_default as t };

package/dist/core/Cross-M5Vm5Kmy.js

@@ -0,0 +1,186 @@
+import { a as transformColor, l as transformPosition, o as transformColorSpace, t as colorSpaceOptions } from "./transformations-B5lM6fYX.js";
+import { t as mixColors } from "./colorMixing-BPpDnR5I.js";
+import { i as crossSdf } from "./sdf-BDsv-WBk.js";
+import { cos, float, screenUV, sin, smoothstep, vec2, vec4, viewportSize } from "three/tsl";
+var transformStrokePosition = (value) => {
+	return {
+		"outside": 0,
+		"center": 1,
+		"inside": 2
+	}[value?.toLowerCase()] ?? 1;
+};
+const componentDefinition = {
+	name: "Cross",
+	category: "Shapes",
+	description: "Plus / cross shape with adjustable arm length, width, and rounding",
+	props: {
+		color: {
+			default: "#ffffff",
+			transform: transformColor,
+			description: "Fill color of the cross",
+			ui: {
+				type: "color",
+				label: "Color",
+				group: "Colors"
+			}
+		},
+		center: {
+			default: {
+				x: .5,
+				y: .5
+			},
+			transform: transformPosition,
+			description: "Center position of the cross",
+			ui: {
+				type: "position",
+				label: "Center",
+				group: "Position"
+			}
+		},
+		radius: {
+			default: .35,
+			description: "Arm half-length — distance from center to the end of each arm",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Arm Length",
+				group: "Shape"
+			}
+		},
+		thickness: {
+			default: .08,
+			description: "Arm half-width — controls how wide each arm is",
+			ui: {
+				type: "range",
+				min: .01,
+				max: .5,
+				step: .005,
+				label: "Arm Width",
+				group: "Shape"
+			}
+		},
+		rounding: {
+			default: 0,
+			description: "Corner rounding — rounds the arm ends and concave corners",
+			ui: {
+				type: "range",
+				min: 0,
+				max: .2,
+				step: .005,
+				label: "Rounding",
+				group: "Shape"
+			}
+		},
+		rotation: {
+			default: 0,
+			description: "Rotation in degrees (45° turns a plus into an ×)",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 360,
+				step: 1,
+				label: "Rotation",
+				group: "Shape"
+			}
+		},
+		softness: {
+			default: 0,
+			description: "Edge softness for antialiasing",
+			ui: {
+				type: "range",
+				min: 0,
+				max: .1,
+				step: .001,
+				label: "Softness",
+				group: "Effect"
+			}
+		},
+		strokeThickness: {
+			default: 0,
+			description: "Stroke thickness. Zero means no stroke.",
+			ui: {
+				type: "range",
+				min: 0,
+				max: .2,
+				step: .005,
+				label: "Stroke Thickness",
+				group: "Stroke"
+			}
+		},
+		strokeColor: {
+			default: "#000000",
+			transform: transformColor,
+			description: "Color of the stroke outline",
+			ui: {
+				type: "color",
+				label: "Stroke Color",
+				group: "Colors"
+			}
+		},
+		strokePosition: {
+			default: "center",
+			transform: transformStrokePosition,
+			description: "Position of the stroke relative to the shape edge",
+			ui: {
+				type: "select",
+				options: [
+					{
+						label: "Outside",
+						value: "outside"
+					},
+					{
+						label: "Center",
+						value: "center"
+					},
+					{
+						label: "Inside",
+						value: "inside"
+					}
+				],
+				label: "Stroke Position",
+				group: "Stroke"
+			}
+		},
+		colorSpace: {
+			default: "linear",
+			transform: transformColorSpace,
+			compileTime: true,
+			description: "Color space for blending fill and stroke colors",
+			ui: {
+				type: "select",
+				options: colorSpaceOptions,
+				label: "Color Blending",
+				group: "Colors"
+			}
+		}
+	},
+	fragmentNode: ({ uniforms }) => {
+		const uv$1 = screenUV;
+		const aspect = viewportSize.x.div(viewportSize.y);
+		const aspectUV = vec2(uv$1.x.mul(aspect), uv$1.y);
+		const centerPos = vec2(uniforms.center.uniform.x.mul(aspect), uniforms.center.uniform.y.oneMinus());
+		const dx = aspectUV.x.sub(centerPos.x);
+		const dy = aspectUV.y.sub(centerPos.y);
+		const rotRad = uniforms.rotation.uniform.mul(float(Math.PI / 180));
+		const cosR = cos(rotRad);
+		const sinR = sin(rotRad);
+		const sdf = crossSdf(dx.mul(cosR).add(dy.mul(sinR)), dy.mul(cosR).sub(dx.mul(sinR)), uniforms.radius.uniform, uniforms.thickness.uniform, uniforms.rounding.uniform);
+		const edgeSoftness = uniforms.softness.uniform;
+		const strokeThickness = uniforms.strokeThickness.uniform;
+		const strokePositionMode = uniforms.strokePosition.uniform;
+		const hasStroke = strokeThickness.greaterThan(float(0));
+		const isCenter = strokePositionMode.greaterThanEqual(float(.5)).and(strokePositionMode.lessThan(float(1.5)));
+		const isInside = strokePositionMode.greaterThanEqual(float(1.5));
+		const halfThickness = strokeThickness.mul(.5);
+		const strokeInner = isInside.select(strokeThickness.negate(), isCenter.select(halfThickness.negate(), float(0)));
+		const strokeOuter = isInside.select(float(0), isCenter.select(halfThickness, strokeThickness));
+		const overallMask = smoothstep(strokeOuter.sub(edgeSoftness), strokeOuter, sdf).oneMinus();
+		const strokeBlend = hasStroke.select(smoothstep(strokeInner.sub(edgeSoftness), strokeInner, sdf), float(0));
+		const blendedColor = mixColors(vec4(uniforms.color.uniform.rgb, uniforms.color.uniform.a), vec4(uniforms.strokeColor.uniform.rgb, uniforms.strokeColor.uniform.a), strokeBlend, uniforms.colorSpace.uniform.value);
+		return vec4(blendedColor.xyz, blendedColor.w.mul(overallMask));
+	}
+};
+var Cross_default = componentDefinition;
+export { componentDefinition as n, Cross_default as t };

package/dist/core/Ellipse-BjbjXlOx.js

@@ -0,0 +1,174 @@
+import { a as transformColor, l as transformPosition, o as transformColorSpace, t as colorSpaceOptions } from "./transformations-B5lM6fYX.js";
+import { t as mixColors } from "./colorMixing-BPpDnR5I.js";
+import { a as ellipseSdf } from "./sdf-BDsv-WBk.js";
+import { cos, float, screenUV, sin, smoothstep, vec2, vec4, viewportSize } from "three/tsl";
+var transformStrokePosition = (value) => {
+	return {
+		"outside": 0,
+		"center": 1,
+		"inside": 2
+	}[value?.toLowerCase()] ?? 1;
+};
+const componentDefinition = {
+	name: "Ellipse",
+	category: "Shapes",
+	description: "Ellipse with independently adjustable horizontal and vertical radii",
+	props: {
+		color: {
+			default: "#ffffff",
+			transform: transformColor,
+			description: "Fill color of the ellipse",
+			ui: {
+				type: "color",
+				label: "Color",
+				group: "Colors"
+			}
+		},
+		center: {
+			default: {
+				x: .5,
+				y: .5
+			},
+			transform: transformPosition,
+			description: "Center position of the ellipse",
+			ui: {
+				type: "position",
+				label: "Center",
+				group: "Position"
+			}
+		},
+		radiusX: {
+			default: .35,
+			description: "Horizontal semi-axis radius",
+			ui: {
+				type: "range",
+				min: .01,
+				max: 1,
+				step: .01,
+				label: "Width",
+				group: "Shape"
+			}
+		},
+		radiusY: {
+			default: .2,
+			description: "Vertical semi-axis radius",
+			ui: {
+				type: "range",
+				min: .01,
+				max: 1,
+				step: .01,
+				label: "Height",
+				group: "Shape"
+			}
+		},
+		rotation: {
+			default: 0,
+			description: "Rotation in degrees",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 360,
+				step: 1,
+				label: "Rotation",
+				group: "Shape"
+			}
+		},
+		softness: {
+			default: 0,
+			description: "Edge softness for antialiasing",
+			ui: {
+				type: "range",
+				min: 0,
+				max: .1,
+				step: .001,
+				label: "Softness",
+				group: "Effect"
+			}
+		},
+		strokeThickness: {
+			default: 0,
+			description: "Stroke thickness. Zero means no stroke.",
+			ui: {
+				type: "range",
+				min: 0,
+				max: .2,
+				step: .005,
+				label: "Stroke Thickness",
+				group: "Stroke"
+			}
+		},
+		strokeColor: {
+			default: "#000000",
+			transform: transformColor,
+			description: "Color of the stroke outline",
+			ui: {
+				type: "color",
+				label: "Stroke Color",
+				group: "Colors"
+			}
+		},
+		strokePosition: {
+			default: "center",
+			transform: transformStrokePosition,
+			description: "Position of the stroke relative to the shape edge",
+			ui: {
+				type: "select",
+				options: [
+					{
+						label: "Outside",
+						value: "outside"
+					},
+					{
+						label: "Center",
+						value: "center"
+					},
+					{
+						label: "Inside",
+						value: "inside"
+					}
+				],
+				label: "Stroke Position",
+				group: "Stroke"
+			}
+		},
+		colorSpace: {
+			default: "linear",
+			transform: transformColorSpace,
+			compileTime: true,
+			description: "Color space for blending fill and stroke colors",
+			ui: {
+				type: "select",
+				options: colorSpaceOptions,
+				label: "Color Blending",
+				group: "Colors"
+			}
+		}
+	},
+	fragmentNode: ({ uniforms }) => {
+		const uv$1 = screenUV;
+		const aspect = viewportSize.x.div(viewportSize.y);
+		const aspectUV = vec2(uv$1.x.mul(aspect), uv$1.y);
+		const centerPos = vec2(uniforms.center.uniform.x.mul(aspect), uniforms.center.uniform.y.oneMinus());
+		const dx = aspectUV.x.sub(centerPos.x);
+		const dy = aspectUV.y.sub(centerPos.y);
+		const rotRad = uniforms.rotation.uniform.mul(float(Math.PI / 180));
+		const cosR = cos(rotRad);
+		const sinR = sin(rotRad);
+		const sdf = ellipseSdf(dx.mul(cosR).add(dy.mul(sinR)), dy.mul(cosR).sub(dx.mul(sinR)), uniforms.radiusX.uniform, uniforms.radiusY.uniform);
+		const edgeSoftness = uniforms.softness.uniform;
+		const strokeThickness = uniforms.strokeThickness.uniform;
+		const strokePositionMode = uniforms.strokePosition.uniform;
+		const hasStroke = strokeThickness.greaterThan(float(0));
+		const isCenter = strokePositionMode.greaterThanEqual(float(.5)).and(strokePositionMode.lessThan(float(1.5)));
+		const isInside = strokePositionMode.greaterThanEqual(float(1.5));
+		const halfThickness = strokeThickness.mul(.5);
+		const strokeInner = isInside.select(strokeThickness.negate(), isCenter.select(halfThickness.negate(), float(0)));
+		const strokeOuter = isInside.select(float(0), isCenter.select(halfThickness, strokeThickness));
+		const overallMask = smoothstep(strokeOuter.sub(edgeSoftness), strokeOuter, sdf).oneMinus();
+		const strokeBlend = hasStroke.select(smoothstep(strokeInner.sub(edgeSoftness), strokeInner, sdf), float(0));
+		const blendedColor = mixColors(vec4(uniforms.color.uniform.rgb, uniforms.color.uniform.a), vec4(uniforms.strokeColor.uniform.rgb, uniforms.strokeColor.uniform.a), strokeBlend, uniforms.colorSpace.uniform.value);
+		return vec4(blendedColor.xyz, blendedColor.w.mul(overallMask));
+	}
+};
+var Ellipse_default = componentDefinition;
+export { componentDefinition as n, Ellipse_default as t };