Implement professional-grade Gaussian-approximated blur effect with resolution independence and configurable quality for image effector system (#16571)

* Initial plan

* Implement blur effect for image effector system

Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com>

* Improve blur quality with configurable sample count

Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com>

* Revert to simpler blur implementation with configurable sample count

Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com>

* Fix blur size independence from sample count

Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com>

* Make blur radius resolution-independent

Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com>

* Update blur.ts

* Enhance blur quality with explicit diagonal sampling and fix parameter configuration

Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com>

* Implement Gaussian-approximated blur with distance-based weighting for superior quality

Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com>

* Revert "Implement Gaussian-approximated blur with distance-based weighting for superior quality"

This reverts commit c739e9f55b64e8869f52dc2641ae6e972892dc7e.

* Revert "Enhance blur quality with explicit diagonal sampling and fix parameter configuration"

This reverts commit ffbc6eeba70dc9a3448dcb133d56b9fb776fc636.

* wip

* tweak

* ellipse

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com>

3 files changed, 181 insertions, 9 deletions

diff --git a/packages/frontend/src/utility/image-effector/fxs.ts b/packages/frontend/src/utility/image-effector/fxs.ts
index 43e10a22fc..83ec20823d 100644
--- a/packages/frontend/src/utility/image-effector/fxs.ts
+++ b/packages/frontend/src/utility/image-effector/fxs.ts
@@ -18,7 +18,8 @@ import { FX_stripe } from './fxs/stripe.js';
 import { FX_threshold } from './fxs/threshold.js';
 import { FX_zoomLines } from './fxs/zoomLines.js';
 import { FX_blockNoise } from './fxs/blockNoise.js';
-import { FX_fillSquare } from './fxs/fillSquare.js';
+import { FX_fill } from './fxs/fill.js';
+import { FX_blur } from './fxs/blur.js';
 import type { ImageEffectorFx } from './ImageEffector.js';
 
 export const FXS = [
@@ -37,5 +38,6 @@ export const FXS = [
 	FX_chromaticAberration,
 	FX_tearing,
 	FX_blockNoise,
-	FX_fillSquare,
+	FX_fill,
+	FX_blur,
 ] as const satisfies ImageEffectorFx<string, any>[];
diff --git a/packages/frontend/src/utility/image-effector/fxs/blur.ts b/packages/frontend/src/utility/image-effector/fxs/blur.ts
new file mode 100644
index 0000000000..fa215fd3e4
--- /dev/null
+++ b/packages/frontend/src/utility/image-effector/fxs/blur.ts
@@ -0,0 +1,157 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { defineImageEffectorFx } from '../ImageEffector.js';
+import { i18n } from '@/i18n.js';
+
+const shader = `#version 300 es
+precision mediump float;
+
+const float PI = 3.141592653589793;
+const float TWO_PI = 6.283185307179586;
+const float HALF_PI = 1.5707963267948966;
+
+in vec2 in_uv;
+uniform sampler2D in_texture;
+uniform vec2 in_resolution;
+uniform vec2 u_offset;
+uniform vec2 u_scale;
+uniform bool u_ellipse;
+uniform float u_angle;
+uniform float u_radius;
+uniform int u_samples;
+out vec4 out_color;
+
+void main() {
+	float angle = -(u_angle * PI);
+	vec2 centeredUv = in_uv - vec2(0.5, 0.5) - u_offset;
+	vec2 rotatedUV = vec2(
+		centeredUv.x * cos(angle) - centeredUv.y * sin(angle),
+		centeredUv.x * sin(angle) + centeredUv.y * cos(angle)
+	) + u_offset;
+
+	bool isInside = false;
+	if (u_ellipse) {
+		vec2 norm = (rotatedUV - u_offset) / u_scale;
+		isInside = dot(norm, norm) <= 1.0;
+	} else {
+		isInside = rotatedUV.x > u_offset.x - u_scale.x && rotatedUV.x < u_offset.x + u_scale.x && rotatedUV.y > u_offset.y - u_scale.y && rotatedUV.y < u_offset.y + u_scale.y;
+	}
+
+	if (!isInside) {
+		out_color = texture(in_texture, in_uv);
+		return;
+	}
+
+	vec4 result = vec4(0.0);
+	float totalSamples = 0.0;
+
+	// Make blur radius resolution-independent by using a percentage of image size
+	// This ensures consistent visual blur regardless of image resolution
+	float referenceSize = min(in_resolution.x, in_resolution.y);
+	float normalizedRadius = u_radius / 100.0; // Convert radius to percentage (0-15 -> 0-0.15)
+	vec2 blurOffset = vec2(normalizedRadius) / in_resolution * referenceSize;
+
+	// Calculate how many samples to take in each direction
+	// This determines the grid density, not the blur extent
+	int sampleRadius = int(sqrt(float(u_samples)) / 2.0);
+
+	// Sample in a grid pattern within the specified radius
+	for (int x = -sampleRadius; x <= sampleRadius; x++) {
+		for (int y = -sampleRadius; y <= sampleRadius; y++) {
+			// Normalize the grid position to [-1, 1] range
+			float normalizedX = float(x) / float(sampleRadius);
+			float normalizedY = float(y) / float(sampleRadius);
+
+			// Scale by radius to get the actual sampling offset
+			vec2 offset = vec2(normalizedX, normalizedY) * blurOffset;
+			vec2 sampleUV = in_uv + offset;
+
+			// Only sample if within texture bounds
+			if (sampleUV.x >= 0.0 && sampleUV.x <= 1.0 && sampleUV.y >= 0.0 && sampleUV.y <= 1.0) {
+				result += texture(in_texture, sampleUV);
+				totalSamples += 1.0;
+			}
+		}
+	}
+
+	out_color = totalSamples > 0.0 ? result / totalSamples : texture(in_texture, in_uv);
+}
+`;
+
+export const FX_blur = defineImageEffectorFx({
+	id: 'blur',
+	name: i18n.ts._imageEffector._fxs.blur,
+	shader,
+	uniforms: ['offset', 'scale', 'ellipse', 'angle', 'radius', 'samples'] as const,
+	params: {
+		offsetX: {
+			label: i18n.ts._imageEffector._fxProps.offset + ' X',
+			type: 'number',
+			default: 0.0,
+			min: -1.0,
+			max: 1.0,
+			step: 0.01,
+			toViewValue: v => Math.round(v * 100) + '%',
+		},
+		offsetY: {
+			label: i18n.ts._imageEffector._fxProps.offset + ' Y',
+			type: 'number',
+			default: 0.0,
+			min: -1.0,
+			max: 1.0,
+			step: 0.01,
+			toViewValue: v => Math.round(v * 100) + '%',
+		},
+		scaleX: {
+			label: i18n.ts._imageEffector._fxProps.scale + ' W',
+			type: 'number',
+			default: 0.5,
+			min: 0.0,
+			max: 1.0,
+			step: 0.01,
+			toViewValue: v => Math.round(v * 100) + '%',
+		},
+		scaleY: {
+			label: i18n.ts._imageEffector._fxProps.scale + ' H',
+			type: 'number',
+			default: 0.5,
+			min: 0.0,
+			max: 1.0,
+			step: 0.01,
+			toViewValue: v => Math.round(v * 100) + '%',
+		},
+		ellipse: {
+			label: i18n.ts._imageEffector._fxProps.circle,
+			type: 'boolean',
+			default: false,
+		},
+		angle: {
+			label: i18n.ts._imageEffector._fxProps.angle,
+			type: 'number',
+			default: 0,
+			min: -1.0,
+			max: 1.0,
+			step: 0.01,
+			toViewValue: v => Math.round(v * 90) + '°',
+		},
+		radius: {
+			label: i18n.ts._imageEffector._fxProps.strength,
+			type: 'number',
+			default: 3.0,
+			min: 0.0,
+			max: 10.0,
+			step: 0.5,
+		},
+	},
+	main: ({ gl, u, params }) => {
+		gl.uniform2f(u.offset, params.offsetX / 2, params.offsetY / 2);
+		gl.uniform2f(u.scale, params.scaleX / 2, params.scaleY / 2);
+		gl.uniform1i(u.ellipse, params.ellipse ? 1 : 0);
+		gl.uniform1f(u.angle, params.angle / 2);
+		gl.uniform1f(u.radius, params.radius);
+		gl.uniform1i(u.samples, 256);
+	},
+});
diff --git a/packages/frontend/src/utility/image-effector/fxs/fillSquare.ts b/packages/frontend/src/utility/image-effector/fxs/fill.ts
index 55b53830e0..35dee594e3 100644
--- a/packages/frontend/src/utility/image-effector/fxs/fillSquare.ts
+++ b/packages/frontend/src/utility/image-effector/fxs/fill.ts
@@ -18,6 +18,7 @@ uniform sampler2D in_texture;
 uniform vec2 in_resolution;
 uniform vec2 u_offset;
 uniform vec2 u_scale;
+uniform bool u_ellipse;
 uniform float u_angle;
 uniform vec3 u_color;
 uniform float u_opacity;
@@ -35,7 +36,13 @@ void main() {
 		centeredUv.x * sin(angle) + centeredUv.y * cos(angle)
 	) + u_offset;
 
-	bool isInside = rotatedUV.x > u_offset.x - u_scale.x && rotatedUV.x < u_offset.x + u_scale.x && rotatedUV.y > u_offset.y - u_scale.y && rotatedUV.y < u_offset.y + u_scale.y;
+	bool isInside = false;
+	if (u_ellipse) {
+		vec2 norm = (rotatedUV - u_offset) / u_scale;
+		isInside = dot(norm, norm) <= 1.0;
+	} else {
+		isInside = rotatedUV.x > u_offset.x - u_scale.x && rotatedUV.x < u_offset.x + u_scale.x && rotatedUV.y > u_offset.y - u_scale.y && rotatedUV.y < u_offset.y + u_scale.y;
+	}
 
 	out_color = isInside ? vec4(
 		mix(in_color.r, u_color.r, u_opacity),
@@ -46,11 +53,11 @@ void main() {
 }
 `;
 
-export const FX_fillSquare = defineImageEffectorFx({
-	id: 'fillSquare',
-	name: i18n.ts._imageEffector._fxs.fillSquare,
+export const FX_fill = defineImageEffectorFx({
+	id: 'fill',
+	name: i18n.ts._imageEffector._fxs.fill,
 	shader,
-	uniforms: ['offset', 'scale', 'angle', 'color', 'opacity'] as const,
+	uniforms: ['offset', 'scale', 'ellipse', 'angle', 'color', 'opacity'] as const,
 	params: {
 		offsetX: {
 			label: i18n.ts._imageEffector._fxProps.offset + ' X',
@@ -71,7 +78,7 @@ export const FX_fillSquare = defineImageEffectorFx({
 			toViewValue: v => Math.round(v * 100) + '%',
 		},
 		scaleX: {
-			label: i18n.ts._imageEffector._fxProps.scale + ' X',
+			label: i18n.ts._imageEffector._fxProps.scale + ' W',
 			type: 'number',
 			default: 0.5,
 			min: 0.0,
@@ -80,7 +87,7 @@ export const FX_fillSquare = defineImageEffectorFx({
 			toViewValue: v => Math.round(v * 100) + '%',
 		},
 		scaleY: {
-			label: i18n.ts._imageEffector._fxProps.scale + ' Y',
+			label: i18n.ts._imageEffector._fxProps.scale + ' H',
 			type: 'number',
 			default: 0.5,
 			min: 0.0,
@@ -88,6 +95,11 @@ export const FX_fillSquare = defineImageEffectorFx({
 			step: 0.01,
 			toViewValue: v => Math.round(v * 100) + '%',
 		},
+		ellipse: {
+			label: i18n.ts._imageEffector._fxProps.circle,
+			type: 'boolean',
+			default: false,
+		},
 		angle: {
 			label: i18n.ts._imageEffector._fxProps.angle,
 			type: 'number',
@@ -115,6 +127,7 @@ export const FX_fillSquare = defineImageEffectorFx({
 	main: ({ gl, u, params }) => {
 		gl.uniform2f(u.offset, params.offsetX / 2, params.offsetY / 2);
 		gl.uniform2f(u.scale, params.scaleX / 2, params.scaleY / 2);
+		gl.uniform1i(u.ellipse, params.ellipse ? 1 : 0);
 		gl.uniform1f(u.angle, params.angle / 2);
 		gl.uniform3f(u.color, params.color[0], params.color[1], params.color[2]);
 		gl.uniform1f(u.opacity, params.opacity);