shaders 3.1.462 → 3.2.464

package/dist/core/DisplacementMap-B-yc-a_8.js

@@ -0,0 +1,108 @@
+import { s as p, t as defineStd } from "./lower-z2vuXP8M.js";
+import { s as transformEdges } from "./transformations-CoIwF5JU.js";
+import { o as displaceByLayer } from "./warps-B_sbWWsN.js";
+var CHANNEL_MODES = {
+	twoAxis: 0,
+	directional: 1
+};
+const componentDefinition = defineStd({
+	name: "DisplacementMap",
+	role: "filter",
+	species: "gather",
+	category: "Distortions",
+	description: "Distorts child content using another layer's pixels as a displacement map",
+	boundingBoxDeclaration: { aspectRatio: null },
+	props: {
+		source: {
+			default: "",
+			description: "The layer whose pixels drive the displacement — its red/green (or luminance) push the content around",
+			compileTime: true,
+			ui: {
+				type: "layer",
+				label: "Source Layer",
+				group: "Effect"
+			}
+		},
+		amount: {
+			default: .3,
+			description: "Overall displacement strength",
+			ui: {
+				type: ["range", "map"],
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Amount",
+				group: "Effect"
+			}
+		},
+		channelMode: {
+			default: "twoAxis",
+			description: "How the source drives the push — red→X / green→Y, or luminance along a fixed angle",
+			compileTime: true,
+			transform: (value) => CHANNEL_MODES[value] ?? 0,
+			ui: {
+				type: "select",
+				options: [{
+					label: "Red / Green",
+					value: "twoAxis"
+				}, {
+					label: "Luminance",
+					value: "directional"
+				}],
+				label: "Channels",
+				group: "Effect"
+			}
+		},
+		angle: {
+			default: 0,
+			description: "Push direction in degrees (used by the Luminance channel mode)",
+			ui: {
+				type: ["range", "map"],
+				min: 0,
+				max: 360,
+				step: 1,
+				label: "Angle",
+				group: "Effect",
+				condition: { channelMode: "directional" }
+			}
+		},
+		edges: {
+			default: "mirror",
+			description: "How to handle edges when distortion pushes content out of bounds",
+			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"
+			}
+		}
+	},
+	effect: displaceByLayer({
+		source: p("source"),
+		amount: p("amount"),
+		channels: p("channelMode"),
+		angle: p("angle"),
+		edges: p("edges")
+	})
+});
+var DisplacementMap_default = componentDefinition;
+export { componentDefinition as n, DisplacementMap_default as t };

package/dist/core/Dither-CFxqATIY.js

@@ -0,0 +1,157 @@
+import { s as p, t as defineStd } from "./lower-z2vuXP8M.js";
+import { _ as pixelGrid, s as ditherInks, v as quantise } from "./patterns-CUWhLDh0.js";
+import { a as transformColor } from "./transformations-CoIwF5JU.js";
+var transformPattern = (value) => {
+	return {
+		bayer2: 0,
+		bayer4: 1,
+		bayer8: 2,
+		clusteredDot: 3,
+		blueNoise: 4,
+		whiteNoise: 5,
+		floydSteinberg: 6
+	}[value] ?? 1;
+};
+var transformColorMode = (value) => value === "source" ? 1 : 0;
+var grid = pixelGrid({ size: p("pixelSize") });
+const componentDefinition = defineStd({
+	name: "Dither",
+	role: "filter",
+	species: "gather",
+	category: "Stylize",
+	description: "Dithering effect with multiple pattern options",
+	blendWithChildren: false,
+	boundingBoxDeclaration: { aspectRatio: null },
+	props: {
+		pattern: {
+			default: "bayer4",
+			transform: transformPattern,
+			compileTime: true,
+			description: "Dithering pattern algorithm",
+			ui: {
+				type: "select",
+				options: [
+					{
+						label: "Bayer 2x2",
+						value: "bayer2"
+					},
+					{
+						label: "Bayer 4x4",
+						value: "bayer4"
+					},
+					{
+						label: "Bayer 8x8",
+						value: "bayer8"
+					},
+					{
+						label: "Clustered Dot",
+						value: "clusteredDot"
+					},
+					{
+						label: "Blue Noise",
+						value: "blueNoise"
+					},
+					{
+						label: "White Noise",
+						value: "whiteNoise"
+					},
+					{
+						label: "Floyd-Steinberg",
+						value: "floydSteinberg"
+					}
+				],
+				label: "Pattern",
+				group: "Effect"
+			}
+		},
+		pixelSize: {
+			default: 4,
+			description: "Size of dithering pixels",
+			ui: {
+				type: "range",
+				min: 1,
+				max: 20,
+				step: 1,
+				label: "Pixel Size",
+				group: "Effect"
+			}
+		},
+		threshold: {
+			default: .5,
+			description: "Luminance threshold for dithering",
+			ui: {
+				type: ["range", "map"],
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Threshold",
+				group: "Effect"
+			}
+		},
+		spread: {
+			default: 1,
+			description: "How much of the luminance range participates in dithering (lower = more solid areas)",
+			ui: {
+				type: ["range", "map"],
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Spread",
+				group: "Effect"
+			}
+		},
+		colorMode: {
+			default: "custom",
+			transform: transformColorMode,
+			compileTime: true,
+			description: "How colors are determined",
+			ui: {
+				type: "select",
+				options: [{
+					label: "Custom Colors",
+					value: "custom"
+				}, {
+					label: "Source Colors",
+					value: "source"
+				}],
+				label: "Color Mode",
+				group: "Colors"
+			}
+		},
+		colorA: {
+			default: "transparent",
+			transform: transformColor,
+			description: "Dark color for dithering",
+			ui: {
+				type: "color",
+				label: "Dark Color",
+				condition: { colorMode: "custom" },
+				group: "Colors"
+			}
+		},
+		colorB: {
+			default: "#ffffff",
+			transform: transformColor,
+			description: "Light color for dithering",
+			ui: {
+				type: "color",
+				label: "Light Color",
+				condition: { colorMode: "custom" },
+				group: "Colors"
+			}
+		}
+	},
+	effect: ditherInks({
+		grid,
+		levels: quantise({
+			grid,
+			pattern: p("pattern"),
+			threshold: p("threshold"),
+			spread: p("spread")
+		}),
+		mode: p("colorMode"),
+		colors: [p("colorA"), p("colorB")]
+	})
+});
+var Dither_default = componentDefinition;
+export { componentDefinition as n, Dither_default as t };

package/dist/core/DotGrid-Br5gKbrO.js

@@ -0,0 +1,112 @@
+import { s as p, t as defineStd } from "./lower-z2vuXP8M.js";
+import { c as dotLattice, k as withAlpha, x as sampleMapsAtCellCentres } from "./patterns-CUWhLDh0.js";
+import { a as transformColor } from "./transformations-CoIwF5JU.js";
+const componentDefinition = defineStd({
+	name: "DotGrid",
+	role: "generator",
+	boundingBoxDeclaration: {
+		aspectRatio: null,
+		supportsResizeFit: true
+	},
+	category: "Textures",
+	description: "Grid of dots with optional twinkling animation",
+	acceptsUVContext: true,
+	animatedTime: { speed: "speed" },
+	props: {
+		color: {
+			default: "#ffffff",
+			description: "The color of the dot",
+			transform: transformColor,
+			ui: {
+				type: "color",
+				label: "Color",
+				group: "Colors"
+			}
+		},
+		density: {
+			default: 30,
+			description: "The number of dots on the longest canvas edge",
+			ui: {
+				type: "range",
+				min: 1,
+				max: 200,
+				step: 1,
+				label: "Density",
+				group: "Effect"
+			}
+		},
+		dotSize: {
+			default: .3,
+			description: "The size of each dot, zero (0) being invisible, one (1) filled the grid with no gaps",
+			ui: {
+				type: ["range", "map"],
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Dot Size",
+				group: "Effect"
+			}
+		},
+		offset: {
+			default: 0,
+			description: "Horizontal stagger of alternating rows (0.5 = classic polka-dot brick offset)",
+			ui: {
+				type: ["range", "map"],
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Row Offset",
+				group: "Effect"
+			}
+		},
+		speed: {
+			default: 0,
+			description: "Animates the rows drifting horizontally (0 = static)",
+			ui: {
+				type: "range",
+				min: -3,
+				max: 3,
+				step: .01,
+				label: "Speed",
+				group: "Animation"
+			}
+		},
+		speedVariance: {
+			default: .3,
+			description: "Per-row random speed variance for irregular drifting motion",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Speed Variance",
+				group: "Animation"
+			}
+		},
+		twinkle: {
+			default: 0,
+			description: "Intensity of the twinkle effect (0 = off, 1 = full twinkle)",
+			ui: {
+				type: ["range", "map"],
+				min: 0,
+				max: 1,
+				step: .1,
+				label: "Twinkle",
+				group: "Animation"
+			}
+		}
+	},
+	mapSampleUVs: sampleMapsAtCellCentres({
+		cells: p("density"),
+		props: ["dotSize", "twinkle"]
+	}),
+	paint: withAlpha(p("color"), dotLattice({
+		density: p("density"),
+		dotSize: p("dotSize"),
+		offset: p("offset"),
+		speedVariance: p("speedVariance"),
+		twinkle: p("twinkle")
+	}))
+});
+var DotGrid_default = componentDefinition;
+export { componentDefinition as n, DotGrid_default as t };

package/dist/core/DropShadow-CRe0s6MQ.js

@@ -0,0 +1,96 @@
+import { s as p, t as defineStd } from "./lower-z2vuXP8M.js";
+import { a as transformColor, i as transformBoolean } from "./transformations-CoIwF5JU.js";
+import { B as shadowOffset, H as silhouetteCoverage, s as childTap, v as gatherStack, z as shadowComposite } from "./blurs-O1YbZEVw.js";
+const componentDefinition = defineStd({
+	name: "DropShadow",
+	role: "filter",
+	species: "gather",
+	boundingBoxDeclaration: { aspectRatio: null },
+	category: "Stylize",
+	description: "Adds a soft shadow behind the child content based on its alpha silhouette",
+	props: {
+		color: {
+			default: "#000000",
+			transform: transformColor,
+			description: "Shadow color",
+			ui: {
+				type: "color",
+				label: "Color",
+				group: "Colors"
+			}
+		},
+		distance: {
+			default: .1,
+			description: "How far the shadow is offset from the content",
+			ui: {
+				type: ["range", "map"],
+				min: 0,
+				max: 1,
+				step: .005,
+				label: "Distance",
+				group: "Effect"
+			}
+		},
+		angle: {
+			default: 135,
+			description: "Direction the shadow is cast (compass degrees: 0=up, 90=right, 135=lower-right, 180=down)",
+			ui: {
+				type: ["range", "map"],
+				min: 0,
+				max: 360,
+				step: 1,
+				label: "Angle",
+				group: "Effect"
+			}
+		},
+		blur: {
+			default: 5,
+			description: "Shadow softness (blur radius in pixels)",
+			ui: {
+				type: ["range", "map"],
+				min: 0,
+				max: 20,
+				step: .5,
+				label: "Blur",
+				group: "Effect"
+			}
+		},
+		intensity: {
+			default: .5,
+			description: "Shadow intensity — how strong/visible the shadow is",
+			ui: {
+				type: ["range", "map"],
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Intensity",
+				group: "Effect"
+			}
+		},
+		cutout: {
+			default: false,
+			transform: transformBoolean,
+			compileTime: true,
+			description: "Hide the original layer and show only the shadow",
+			ui: {
+				type: "checkbox",
+				label: "Cutout",
+				group: "Effect"
+			}
+		}
+	},
+	effect: gatherStack(childTap(), [shadowComposite({
+		coverage: silhouetteCoverage({
+			at: shadowOffset({
+				angle: p("angle"),
+				distance: p("distance")
+			}),
+			blur: p("blur")
+		}),
+		color: p("color"),
+		intensity: p("intensity"),
+		cutout: p("cutout")
+	})])
+});
+var DropShadow_default = componentDefinition;
+export { componentDefinition as n, DropShadow_default as t };

package/dist/core/Duotone-M-wa5I6y.js

@@ -0,0 +1,65 @@
+import { s as p, t as defineStd } from "./lower-z2vuXP8M.js";
+import { n as duotone } from "./color-C9iR6boM.js";
+import { a as transformColor, o as transformColorSpace, t as colorSpaceOptions } from "./transformations-CoIwF5JU.js";
+const componentDefinition = defineStd({
+	name: "Duotone",
+	role: "filter",
+	species: "pointwise",
+	boundingBoxDeclaration: { aspectRatio: null },
+	category: "Adjustments",
+	description: "Map colors to two tones based on luminance",
+	props: {
+		colorA: {
+			default: "#ff0000",
+			transform: transformColor,
+			description: "First color (used for darker areas)",
+			ui: {
+				type: "color",
+				label: "Color A",
+				group: "Colors"
+			}
+		},
+		colorB: {
+			default: "#023af4",
+			transform: transformColor,
+			description: "Second color (used for brighter areas)",
+			ui: {
+				type: "color",
+				label: "Color B",
+				group: "Colors"
+			}
+		},
+		blend: {
+			default: .5,
+			description: "Blend point between the two colors",
+			ui: {
+				type: ["range", "map"],
+				min: 0,
+				max: 1,
+				step: .1,
+				label: "Blend",
+				group: "Effect"
+			}
+		},
+		colorSpace: {
+			default: "linear",
+			transform: transformColorSpace,
+			compileTime: true,
+			description: "Color space for color interpolation",
+			ui: {
+				type: "select",
+				options: colorSpaceOptions,
+				label: "Color Space",
+				group: "Colors"
+			}
+		}
+	},
+	effect: duotone({
+		colorA: p("colorA"),
+		colorB: p("colorB"),
+		blend: p("blend"),
+		colorSpace: p("colorSpace")
+	})
+});
+var Duotone_default = componentDefinition;
+export { componentDefinition as n, Duotone_default as t };

package/dist/core/Ellipse-B8SC59iU.js

@@ -0,0 +1,44 @@
+import { t as defineStd } from "./lower-z2vuXP8M.js";
+import { o as ellipse } from "./shape-BMO1cLTt.js";
+const componentDefinition = defineStd({
+	role: "shape",
+	name: "Ellipse",
+	description: "Ellipse with independently adjustable horizontal and vertical radii",
+	shape: {
+		distance: ({ x, y }, u) => ellipse(x, y, u("radiusX"), u("radiusY")),
+		colorDescription: "Fill color of the ellipse",
+		centerDescription: "Center position of the ellipse",
+		bounds: { size: {
+			width: "radiusX",
+			height: "radiusY"
+		} },
+		shapeProps: {
+			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"
+				}
+			}
+		}
+	}
+});
+var Ellipse_default = componentDefinition;
+export { componentDefinition as n, Ellipse_default as t };

package/dist/core/{Emboss-hQvpTtH7.js → Emboss-Df9dLMp4.js}

@@ -1,8 +1,8 @@
-import { Dt as sin, Ft as vec3f, Lt as vec4f, Mt as vec2f, Ot as smoothstep, P as unpremultiplyAlpha, _t as max, ct as clamp, d as ZERO, et as typegpu_default, hn as __export, it as abs, kt as sqrt, lt as cos, m as call, rt as select, sn as f32, v as floatE } from "./edges-CV-BHMpI.js";
-import { C as sdf_exports } from "./device-DKcu50_C.js";
-import { i as shapeEffectBoundingBoxDeclaration, n as sdf3d_exports } from "./sdf3d-B8EwGL7R.js";
-import { i as sdfSpaceUV, r as offsetUV } from "./glass-Di_yYrw1.js";
-import { c as transformPosition } from "./transformations-u-UZrXjj.js";
+import { $n as vec4f, Cr as __export, En as cos, Gn as sqrt, Jn as vec2f, Pn as max, Tn as clamp, Tt as unpremultiplyAlpha, Un as sin, Wn as smoothstep, Zn as vec3f, at as call, bn as select, hr as f32, lt as floatE, mn as typegpu_default, t as defineStd, xn as abs } from "./lower-z2vuXP8M.js";
+import { j as shapedSurface } from "./materials-D7QX3H4h.js";
+import { v as shapeEffectBoundingBoxDeclaration } from "./sdf3d-BD5m6HR6.js";
+import { i as sdfSpaceUV, r as offsetUV } from "./glass-DxE2Cy6_.js";
+import { c as transformPosition } from "./transformations-CoIwF5JU.js";
 var emboss_exports = /* @__PURE__ */ __export({
 	applyEmbossEffect: () => applyEmbossEffect$1,
 	embossComposite: () => embossComposite,
@@ -1294,23 +1294,28 @@ function applyEmbossEffect$1(params, sdfSampler, childTexture, options) {
 	]);
 }
 var { applyEmbossEffect } = emboss_exports;
-var { ANALYTIC_SDF_EXTRA_FIELDS } = sdf_exports;
-var { createVolumetricFieldComputeNode, resolveShapeFieldSampler, VOLUMETRIC_FIELD_EXTRA_FIELDS } = sdf3d_exports;
 var DEFAULT_SHAPE_CONFIG = JSON.stringify({
 	type: "circleSDF",
 	radius: .35
 });
-const componentDefinition = {
+const componentDefinition = defineStd({
 	name: "Emboss",
+	role: "shapeEffect",
+	species: "custom",
 	boundingBoxDeclaration: shapeEffectBoundingBoxDeclaration,
 	category: "Shape Effects",
 	description: "Embossed / debossed relief shading on top of child content, driven by a custom shape",
 	requiresRTT: true,
 	requiresChild: true,
-	extraFields: {
-		...VOLUMETRIC_FIELD_EXTRA_FIELDS,
-		...ANALYTIC_SDF_EXTRA_FIELDS
-	},
+	...shapedSurface({
+		chord: "firstLobe",
+		stencil: "none",
+		child: "required",
+		surface: (frame, params) => applyEmbossEffect(params, frame.sampler, frame.childTexture, {
+			volumetric: frame.volumetric,
+			gradSampler: frame.gradSampler
+		})
+	}),
 	props: {
 		origin: {
 			default: "center",
@@ -1426,18 +1431,7 @@ const componentDefinition = {
 			compileTime: true,
 			description: "Active SDF shape type — triggers recompile when shape is switched. When empty, derived from shape JSON at mount time."
 		}
-	},
-	compute: (params) => createVolumetricFieldComputeNode(params, () => params.getCpuValue("shape"), "none", "firstLobe"),
-	fragment: (params) => {
-		const { childNode, convertToTexture } = params;
-		if (!childNode) return ZERO;
-		const childTexture = convertToTexture(childNode);
-		const { sampler, gradSampler, volumetric } = resolveShapeFieldSampler(params);
-		return applyEmbossEffect(params, sampler, childTexture, {
-			volumetric,
-			gradSampler
-		});
 	}
-};
+});
 var Emboss_default = componentDefinition;
 export { componentDefinition as n, Emboss_default as t };