add 10 effects + firefox fix

src/lib/effects/ASCIIEffect.js

@@ -0,0 +1,55 @@
+import Effect from "@/lib/core/Effect";
+import ShaderPass from "@/lib/graphics/ShaderPass";
+import ASCIIShader from "@/lib/shaders/ASCIIShader";
+
+export default class ASCIIEffect extends Effect {
+	static config = {
+		name: "ASCIIEffect",
+		description: "Converts image to ASCII art style using luminance patterns.",
+		type: "effect",
+		label: "ASCII",
+		defaultProperties: {
+			charSize: 8,
+			colored: true,
+		},
+		controls: {
+			charSize: {
+				label: "Char Size",
+				type: "number",
+				min: 4,
+				max: 32,
+				step: 1,
+				withRange: true,
+				withReactor: true,
+			},
+			colored: {
+				label: "Colored",
+				type: "toggle",
+			},
+		},
+	};
+
+	constructor(properties) {
+		super(ASCIIEffect, properties);
+	}
+
+	updatePass() {
+		const { charSize, colored } = this.properties;
+		const { width, height } = this.scene.getSize();
+
+		this.pass.setUniforms({
+			charSize,
+			colored: colored ? 1 : 0,
+			resolution: [width, height],
+		});
+	}
+
+	addToScene() {
+		this.pass = new ShaderPass(ASCIIShader);
+		this.updatePass();
+	}
+
+	removeFromScene() {
+		this.pass = null;
+	}
+}

src/lib/effects/ChromaticWarpEffect.js

@@ -0,0 +1,49 @@
+import Effect from "@/lib/core/Effect";
+import ShaderPass from "@/lib/graphics/ShaderPass";
+import ChromaticWarpShader from "@/lib/shaders/ChromaticWarpShader";
+
+export default class ChromaticWarpEffect extends Effect {
+	static config = {
+		name: "ChromaticWarpEffect",
+		description: "Barrel lens distortion with chromatic aberration.",
+		type: "effect",
+		label: "Chromatic Warp",
+		defaultProperties: {
+			warp: 0.3,
+			chromatic: 0.5,
+		},
+		controls: {
+			warp: {
+				label: "Warp",
+				type: "number",
+				min: 0,
+				max: 1.0,
+				step: 0.01,
+				withRange: true,
+				withReactor: true,
+			},
+			chromatic: {
+				label: "Chromatic",
+				type: "number",
+				min: 0,
+				max: 1.0,
+				step: 0.01,
+				withRange: true,
+				withReactor: true,
+			},
+		},
+	};
+
+	constructor(properties) {
+		super(ChromaticWarpEffect, properties);
+	}
+
+	addToScene() {
+		this.pass = new ShaderPass(ChromaticWarpShader);
+		this.updatePass();
+	}
+
+	removeFromScene() {
+		this.pass = null;
+	}
+}

src/lib/effects/EdgeDetectionEffect.js

@@ -0,0 +1,66 @@
+import Effect from "@/lib/core/Effect";
+import ShaderPass from "@/lib/graphics/ShaderPass";
+import EdgeDetectionShader from "@/lib/shaders/EdgeDetectionShader";
+
+export default class EdgeDetectionEffect extends Effect {
+	static config = {
+		name: "EdgeDetectionEffect",
+		description: "Sobel edge detection. Outline or neon glow mode.",
+		type: "effect",
+		label: "Edge Detection",
+		defaultProperties: {
+			thickness: 1.0,
+			neon: false,
+			color: "#ffffff",
+		},
+		controls: {
+			thickness: {
+				label: "Thickness",
+				type: "number",
+				min: 0.5,
+				max: 5,
+				step: 0.1,
+				withRange: true,
+				withReactor: true,
+			},
+			neon: {
+				label: "Neon Mode",
+				type: "toggle",
+			},
+			color: {
+				label: "Edge Color",
+				type: "color",
+			},
+		},
+	};
+
+	constructor(properties) {
+		super(EdgeDetectionEffect, properties);
+	}
+
+	updatePass() {
+		const { thickness, neon, color } = this.properties;
+		const { width, height } = this.scene.getSize();
+
+		// Parse hex color to RGB 0-1
+		const r = parseInt(color.slice(1, 3), 16) / 255;
+		const g = parseInt(color.slice(3, 5), 16) / 255;
+		const b = parseInt(color.slice(5, 7), 16) / 255;
+
+		this.pass.setUniforms({
+			thickness,
+			neon: neon ? 1 : 0,
+			edgeColor: [r, g, b],
+			resolution: [width, height],
+		});
+	}
+
+	addToScene() {
+		this.pass = new ShaderPass(EdgeDetectionShader);
+		this.updatePass();
+	}
+
+	removeFromScene() {
+		this.pass = null;
+	}
+}

src/lib/effects/FeedbackEffect.js

@@ -0,0 +1,53 @@
+import Effect from "@/lib/core/Effect";
+import FeedbackPass from "@/lib/effects/passes/FeedbackPass";
+
+export default class FeedbackEffect extends Effect {
+	static config = {
+		name: "FeedbackEffect",
+		description: "Frame feedback echo that accumulates previous frames with decay.",
+		type: "effect",
+		label: "Feedback Echo",
+		defaultProperties: {
+			decay: 0.85,
+			zoom: 1.0,
+		},
+		controls: {
+			decay: {
+				label: "Decay",
+				type: "number",
+				min: 0,
+				max: 0.99,
+				step: 0.01,
+				withRange: true,
+				withReactor: true,
+			},
+			zoom: {
+				label: "Zoom",
+				type: "number",
+				min: 1.0,
+				max: 1.1,
+				step: 0.001,
+				withRange: true,
+				withReactor: true,
+			},
+		},
+	};
+
+	constructor(properties) {
+		super(FeedbackEffect, properties);
+	}
+
+	updatePass() {
+		const { decay, zoom } = this.properties;
+		this.pass.setUniforms({ decay, zoom });
+	}
+
+	addToScene() {
+		this.pass = new FeedbackPass();
+		this.updatePass();
+	}
+
+	removeFromScene() {
+		this.pass = null;
+	}
+}

src/lib/effects/FilmGrainEffect.js

@@ -0,0 +1,64 @@
+import Effect from "@/lib/core/Effect";
+import ShaderPass from "@/lib/graphics/ShaderPass";
+import FilmGrainShader from "@/lib/shaders/FilmGrainShader";
+
+export default class FilmGrainEffect extends Effect {
+	static config = {
+		name: "FilmGrainEffect",
+		description: "Film grain noise overlay.",
+		type: "effect",
+		label: "Film Grain",
+		defaultProperties: {
+			intensity: 0.3,
+			size: 512,
+			colored: false,
+		},
+		controls: {
+			intensity: {
+				label: "Intensity",
+				type: "number",
+				min: 0,
+				max: 1.0,
+				step: 0.01,
+				withRange: true,
+				withReactor: true,
+			},
+			size: {
+				label: "Grain Size",
+				type: "number",
+				min: 50,
+				max: 2000,
+				step: 10,
+				withRange: true,
+			},
+			colored: {
+				label: "Colored",
+				type: "toggle",
+			},
+		},
+	};
+
+	constructor(properties) {
+		super(FilmGrainEffect, properties);
+		this.time = 0;
+	}
+
+	updatePass() {
+		const { intensity, size, colored } = this.properties;
+		this.pass.setUniforms({ intensity, size, colored: colored ? 1 : 0 });
+	}
+
+	addToScene() {
+		this.pass = new ShaderPass(FilmGrainShader);
+		this.updatePass();
+	}
+
+	removeFromScene() {
+		this.pass = null;
+	}
+
+	render(scene, data) {
+		this.time += data.delta * 0.001;
+		this.pass.setUniforms({ time: this.time });
+	}
+}

src/lib/effects/HeatDistortionEffect.js

@@ -0,0 +1,73 @@
+import Effect from "@/lib/core/Effect";
+import ShaderPass from "@/lib/graphics/ShaderPass";
+import HeatDistortionShader from "@/lib/shaders/HeatDistortionShader";
+
+export default class HeatDistortionEffect extends Effect {
+	static config = {
+		name: "HeatDistortionEffect",
+		description: "Heat shimmer distortion using simplex noise.",
+		type: "effect",
+		label: "Heat Distortion",
+		defaultProperties: {
+			intensity: 0.5,
+			scale: 3.0,
+			speed: 0.5,
+		},
+		controls: {
+			intensity: {
+				label: "Intensity",
+				type: "number",
+				min: 0,
+				max: 1.0,
+				step: 0.01,
+				withRange: true,
+				withReactor: true,
+			},
+			scale: {
+				label: "Scale",
+				type: "number",
+				min: 1,
+				max: 10,
+				step: 0.1,
+				withRange: true,
+			},
+			speed: {
+				label: "Speed",
+				type: "number",
+				min: 0,
+				max: 1.0,
+				step: 0.01,
+				withRange: true,
+				withReactor: true,
+			},
+		},
+	};
+
+	constructor(properties) {
+		super(HeatDistortionEffect, properties);
+		this.time = 0;
+	}
+
+	updatePass() {
+		const { intensity, scale, speed } = this.properties;
+		this.pass.setUniforms({ intensity, scale, speed });
+	}
+
+	addToScene() {
+		this.pass = new ShaderPass(HeatDistortionShader);
+		this.updatePass();
+	}
+
+	removeFromScene() {
+		this.pass = null;
+	}
+
+	render(scene, data) {
+		if (!data.hasUpdate) return;
+
+		const { speed } = this.properties;
+		this.time += data.delta / (1000 / Math.max(speed, 0.01));
+
+		this.pass.setUniforms({ time: this.time });
+	}
+}