shaders 2.5.102 → 2.5.104

package/dist/core/Halftone-BUCDTTAU.js

@@ -0,0 +1,287 @@
+import { a as transformColor, r as transformAngle } from "./transformations-B5lM6fYX.js";
+import { t as unpremultiplyAlpha } from "./alpha-C4ptedXe.js";
+import { convertToTexture, cos, dot, float, fract, length, max, mix, radians, screenUV, sin, smoothstep, vec2, vec3, vec4, viewportSize } from "three/tsl";
+var transformStyle = (value) => {
+	return value === "cmyk" ? 1 : 0;
+};
+const componentDefinition = {
+	name: "Halftone",
+	category: "Stylize",
+	description: "Halftone dot pattern effect for printing aesthetics",
+	requiresRTT: true,
+	requiresChild: true,
+	props: {
+		style: {
+			default: "classic",
+			transform: transformStyle,
+			compileTime: true,
+			description: "Halftone rendering style",
+			ui: {
+				type: "select",
+				options: [{
+					label: "Simple",
+					value: "classic"
+				}, {
+					label: "CMYK Print",
+					value: "cmyk"
+				}],
+				label: "Style",
+				group: "Effect"
+			}
+		},
+		frequency: {
+			default: 100,
+			description: "Frequency of the halftone dots",
+			ui: {
+				type: ["range", "map"],
+				min: 10,
+				max: 300,
+				step: 1,
+				label: "Frequency",
+				group: "Effect"
+			}
+		},
+		angle: {
+			default: 45,
+			transform: transformAngle,
+			description: "Rotation angle of the pattern (in degrees)",
+			ui: {
+				type: ["range", "map"],
+				min: 0,
+				max: 360,
+				step: 1,
+				label: "Angle",
+				group: "Effect",
+				condition: { style: "classic" }
+			}
+		},
+		cyanAngle: {
+			default: 15,
+			transform: transformAngle,
+			description: "Screen angle for the cyan plate (in degrees)",
+			ui: {
+				type: ["range", "map"],
+				min: 0,
+				max: 360,
+				step: 1,
+				label: "Cyan Angle",
+				group: "Plate Angles",
+				condition: { style: "cmyk" }
+			}
+		},
+		magentaAngle: {
+			default: 75,
+			transform: transformAngle,
+			description: "Screen angle for the magenta plate (in degrees)",
+			ui: {
+				type: ["range", "map"],
+				min: 0,
+				max: 360,
+				step: 1,
+				label: "Magenta Angle",
+				group: "Plate Angles",
+				condition: { style: "cmyk" }
+			}
+		},
+		yellowAngle: {
+			default: 0,
+			transform: transformAngle,
+			description: "Screen angle for the yellow plate (in degrees)",
+			ui: {
+				type: ["range", "map"],
+				min: 0,
+				max: 360,
+				step: 1,
+				label: "Yellow Angle",
+				group: "Plate Angles",
+				condition: { style: "cmyk" }
+			}
+		},
+		blackAngle: {
+			default: 45,
+			transform: transformAngle,
+			description: "Screen angle for the black plate (in degrees)",
+			ui: {
+				type: ["range", "map"],
+				min: 0,
+				max: 360,
+				step: 1,
+				label: "Black Angle",
+				group: "Plate Angles",
+				condition: { style: "cmyk" }
+			}
+		},
+		misprint: {
+			default: 0,
+			description: "Simulated mis-registration between plates. Plates are offset around the misprint angle, producing colour fringing at the edges of inked regions.",
+			ui: {
+				type: ["range", "map"],
+				min: 0,
+				max: .01,
+				step: 5e-4,
+				label: "Misprint",
+				group: "Effect",
+				condition: { style: "cmyk" }
+			}
+		},
+		misprintAngle: {
+			default: 0,
+			transform: transformAngle,
+			description: "Direction the plates drift apart. Rotating this rotates the colour-fringing pattern.",
+			ui: {
+				type: ["range", "map"],
+				min: 0,
+				max: 360,
+				step: 1,
+				label: "Misprint Angle",
+				group: "Effect",
+				condition: { style: "cmyk" }
+			}
+		},
+		paperColor: {
+			default: "#ffffff",
+			transform: transformColor,
+			description: "Paper/substrate color shown where no ink lands",
+			ui: {
+				type: "color",
+				label: "Paper",
+				group: "Inks",
+				condition: { style: "cmyk" }
+			}
+		},
+		cyanColor: {
+			default: "#00ffff",
+			transform: transformColor,
+			description: "Cyan ink color",
+			ui: {
+				type: "color",
+				label: "Cyan",
+				group: "Inks",
+				condition: { style: "cmyk" }
+			}
+		},
+		magentaColor: {
+			default: "#ff00ff",
+			transform: transformColor,
+			description: "Magenta ink color",
+			ui: {
+				type: "color",
+				label: "Magenta",
+				group: "Inks",
+				condition: { style: "cmyk" }
+			}
+		},
+		yellowColor: {
+			default: "#ffff00",
+			transform: transformColor,
+			description: "Yellow ink color",
+			ui: {
+				type: "color",
+				label: "Yellow",
+				group: "Inks",
+				condition: { style: "cmyk" }
+			}
+		},
+		blackColor: {
+			default: "#000000",
+			transform: transformColor,
+			description: "Black (key) ink color",
+			ui: {
+				type: "color",
+				label: "Black",
+				group: "Inks",
+				condition: { style: "cmyk" }
+			}
+		}
+	},
+	fragmentNode: ({ uniforms, childNode, onCleanup }) => {
+		if (!childNode) return vec4(0);
+		const frequency = uniforms.frequency.uniform;
+		const smoothness = float(.1);
+		const aspect = viewportSize.x.div(viewportSize.y);
+		const aspectUV = vec2(screenUV.x.mul(aspect), screenUV.y);
+		const rotateUV = (uv$1, angleRad) => {
+			const c$1 = cos(angleRad);
+			const s = sin(angleRad);
+			return vec2(dot(uv$1, vec2(c$1, s.negate())), dot(uv$1, vec2(s, c$1)));
+		};
+		const dotMask = (rotatedUV, intensity) => {
+			const dist = length(fract(rotatedUV.mul(frequency)).sub(.5));
+			const size = intensity.mul(.75).sub(smoothness);
+			return smoothstep(size.sub(smoothness), size.add(smoothness), dist).oneMinus();
+		};
+		if (uniforms.style.uniform.value === 0) {
+			const gridUV = fract(rotateUV(aspectUV, radians(uniforms.angle.uniform)).mul(frequency)).sub(.5);
+			const dotSize = dot(childNode.rgb, vec3(.299, .587, .114)).mul(.7).add(.15);
+			const dist = length(gridUV);
+			const dotPattern = smoothstep(dotSize.sub(smoothness), dotSize.add(smoothness), dist).oneMinus();
+			return vec4(childNode.rgb.mul(dotPattern), childNode.a.mul(dotPattern));
+		}
+		const childTexture = convertToTexture(childNode);
+		onCleanup(() => {
+			if (childTexture?.renderTarget?.dispose) childTexture.renderTarget.dispose();
+		});
+		const misprint = uniforms.misprint.uniform;
+		const misprintAngleRad = radians(uniforms.misprintAngle.uniform);
+		const cAngleRad = radians(uniforms.cyanAngle.uniform);
+		const mAngleRad = radians(uniforms.magentaAngle.uniform);
+		const yAngleRad = radians(uniforms.yellowAngle.uniform);
+		const kAngleRad = radians(uniforms.blackAngle.uniform);
+		const plateOffset = (offsetAngleRad) => {
+			return vec2(cos(offsetAngleRad).mul(misprint), sin(offsetAngleRad).mul(misprint).div(aspect));
+		};
+		const cSampleUV = screenUV.add(plateOffset(misprintAngleRad));
+		const mSampleUV = screenUV.add(plateOffset(misprintAngleRad.add(radians(float(90)))));
+		const ySampleUV = screenUV.add(plateOffset(misprintAngleRad.add(radians(float(180)))));
+		const kSampleUV = screenUV.add(plateOffset(misprintAngleRad.add(radians(float(270)))));
+		const cSample = unpremultiplyAlpha(childTexture.sample(cSampleUV));
+		const mSample = unpremultiplyAlpha(childTexture.sample(mSampleUV));
+		const ySample = unpremultiplyAlpha(childTexture.sample(ySampleUV));
+		const kSample = unpremultiplyAlpha(childTexture.sample(kSampleUV));
+		const centerSample = unpremultiplyAlpha(childTexture.sample(screenUV));
+		const channelK = (s) => float(1).sub(max(max(s.r, s.g), s.b));
+		const channelC = (s) => {
+			const k$1 = channelK(s);
+			const invK = float(1).sub(k$1).max(float(1e-4));
+			return float(1).sub(s.r).sub(k$1).div(invK);
+		};
+		const channelM = (s) => {
+			const k$1 = channelK(s);
+			const invK = float(1).sub(k$1).max(float(1e-4));
+			return float(1).sub(s.g).sub(k$1).div(invK);
+		};
+		const channelY = (s) => {
+			const k$1 = channelK(s);
+			const invK = float(1).sub(k$1).max(float(1e-4));
+			return float(1).sub(s.b).sub(k$1).div(invK);
+		};
+		const c = channelC(cSample);
+		const m = channelM(mSample);
+		const y = channelY(ySample);
+		const k = channelK(kSample);
+		const cUV = rotateUV(aspectUV, cAngleRad);
+		const mUV = rotateUV(aspectUV, mAngleRad);
+		const yUV = rotateUV(aspectUV, yAngleRad);
+		const kUV = rotateUV(aspectUV, kAngleRad);
+		const cInk = dotMask(cUV, c);
+		const mInk = dotMask(mUV, m);
+		const yInk = dotMask(yUV, y);
+		const kInk = dotMask(kUV, k);
+		const paper = uniforms.paperColor.uniform;
+		const cyanCol = uniforms.cyanColor.uniform;
+		const magentaCol = uniforms.magentaColor.uniform;
+		const yellowCol = uniforms.yellowColor.uniform;
+		const blackCol = uniforms.blackColor.uniform;
+		const transmission = (inkColor, inkMask) => {
+			return mix(vec3(1, 1, 1), inkColor.rgb, inkMask.mul(inkColor.a));
+		};
+		let printed = paper.rgb;
+		printed = printed.mul(transmission(cyanCol, cInk));
+		printed = printed.mul(transmission(magentaCol, mInk));
+		printed = printed.mul(transmission(yellowCol, yInk));
+		printed = printed.mul(transmission(blackCol, kInk));
+		return vec4(printed, centerSample.a);
+	}
+};
+var Halftone_default = componentDefinition;
+export { componentDefinition as n, Halftone_default as t };