fix(frontend): ぼかし・塗りつぶし・モザイクの画像エフェクトを修正 (#17155)

* fix(frontend): ぼかし・塗りつぶし・モザイクの画像エフェクトを修正

* Update Changelog

* fix changelog [ci skip]

* fix changelog [ci skip]

* tweak

---------

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

6 files changed, 65 insertions, 46 deletions

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8f19fa7363..deae7133f3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -26,6 +26,11 @@
 - Fix: mCaptchaが正しく動作しない問題を修正
 - Fix: 非ログイン時にリバーシの対局が表示されない問題を修正
 - Fix: ノートの詳細表示でリアクションが全件表示されない問題を修正
+- Fix: 画像エフェクトの修正
+  - 塗りつぶし・モザイク・ぼかしエフェクトを回転させると歪む問題を修正
+  - モザイクの格子のサイズが画像の縦横比によって長方形となる問題を修正
+  - モザイクの色味がより自然になるように修正
+  - ぼかしに不自然な縦線が入る問題を修正
 
 ### Server
 - Enhance: OAuthのクライアント情報取得（Client Information Discovery）において、IndieWeb Living Standard 11 July 2024で定義されているJSONドキュメント形式に対応しました
diff --git a/packages/frontend/src/components/MkImageEffectorDialog.vue b/packages/frontend/src/components/MkImageEffectorDialog.vue
index f740002088..85e86e3a77 100644
--- a/packages/frontend/src/components/MkImageEffectorDialog.vue
+++ b/packages/frontend/src/components/MkImageEffectorDialog.vue
@@ -295,7 +295,7 @@ function onImagePointerdown(ev: PointerEvent) {
 				scaleX: 0.1,
 				scaleY: 0.1,
 				angle: 0,
-				radius: 3,
+				radius: 10,
 				ellipse: false,
 			},
 		});
diff --git a/packages/frontend/src/utility/image-compositor-functions/blur.glsl b/packages/frontend/src/utility/image-compositor-functions/blur.glsl
index e591267887..dc48c2ae94 100644
--- a/packages/frontend/src/utility/image-compositor-functions/blur.glsl
+++ b/packages/frontend/src/utility/image-compositor-functions/blur.glsl
@@ -21,13 +21,20 @@ uniform float u_radius;
 uniform int u_samples;
 out vec4 out_color;
 
+float rand(vec2 value) {
+	return fract(sin(dot(value, vec2(12.9898, 78.233))) * 43758.5453);
+}
+
 void main() {
 	float angle = -(u_angle * PI);
+	float aspect = in_resolution.x / max(in_resolution.y, 1.0);
 	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;
+	vec2 scaledUv = vec2(centeredUv.x * aspect, centeredUv.y);
+	vec2 rotatedScaledUv = vec2(
+		scaledUv.x * cos(angle) - scaledUv.y * sin(angle),
+		scaledUv.x * sin(angle) + scaledUv.y * cos(angle)
+	);
+	vec2 rotatedUV = vec2(rotatedScaledUv.x / aspect, rotatedScaledUv.y) + u_offset;
 
 	bool isInside = false;
 	if (u_ellipse) {
@@ -46,31 +53,29 @@ void main() {
 	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);
+	float normalizedRadius = u_radius / 100.0;
+	float radiusPx = normalizedRadius * referenceSize;
+	vec2 texelSize = 1.0 / in_resolution;
 
-	// 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);
+	int sampleCount = max(u_samples, 1);
+	float sampleCountF = float(sampleCount);
+	float jitter = rand(in_uv * in_resolution);
+	float goldenAngle = 2.39996323;
 
-			// Scale by radius to get the actual sampling offset
-			vec2 offset = vec2(normalizedX, normalizedY) * blurOffset;
-			vec2 sampleUV = in_uv + offset;
+	// Sample in a circular pattern to avoid axis-aligned artifacts
+	for (int i = 0; i < sampleCount; i++) {
+		float fi = float(i);
+		float radius = sqrt((fi + 0.5) / sampleCountF);
+		float theta = (fi + jitter) * goldenAngle;
+		vec2 direction = vec2(cos(theta), sin(theta));
+		vec2 offset = direction * (radiusPx * radius) * texelSize;
+		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;
-			}
+		if (sampleUV.x >= 0.0 && sampleUV.x <= 1.0 && sampleUV.y >= 0.0 && sampleUV.y <= 1.0) {
+			float weight = exp(-radius * radius * 4.0);
+			result += texture(in_texture, sampleUV) * weight;
+			totalSamples += weight;
 		}
 	}
 
diff --git a/packages/frontend/src/utility/image-compositor-functions/blur.ts b/packages/frontend/src/utility/image-compositor-functions/blur.ts
index 1ab8eee6ba..72711445cc 100644
--- a/packages/frontend/src/utility/image-compositor-functions/blur.ts
+++ b/packages/frontend/src/utility/image-compositor-functions/blur.ts
@@ -84,9 +84,9 @@ export const uiDefinition = {
 		radius: {
 			label: i18n.ts._imageEffector._fxProps.strength,
 			type: 'number',
-			default: 3.0,
+			default: 10.0,
 			min: 0.0,
-			max: 10.0,
+			max: 20.0,
 			step: 0.5,
 		},
 	},
diff --git a/packages/frontend/src/utility/image-compositor-functions/fill.glsl b/packages/frontend/src/utility/image-compositor-functions/fill.glsl
index f04dc5545a..02e5e3a071 100644
--- a/packages/frontend/src/utility/image-compositor-functions/fill.glsl
+++ b/packages/frontend/src/utility/image-compositor-functions/fill.glsl
@@ -27,11 +27,14 @@ void main() {
 	//float y_ratio = max(in_resolution.y / in_resolution.x, 1.0);
 
 	float angle = -(u_angle * PI);
+	float aspect = in_resolution.x / max(in_resolution.y, 1.0);
 	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;
+	vec2 scaledUv = vec2(centeredUv.x * aspect, centeredUv.y);
+	vec2 rotatedScaledUv = vec2(
+		scaledUv.x * cos(angle) - scaledUv.y * sin(angle),
+		scaledUv.x * sin(angle) + scaledUv.y * cos(angle)
+	);
+	vec2 rotatedUV = vec2(rotatedScaledUv.x / aspect, rotatedScaledUv.y) + u_offset;
 
 	bool isInside = false;
 	if (u_ellipse) {
diff --git a/packages/frontend/src/utility/image-compositor-functions/pixelate.glsl b/packages/frontend/src/utility/image-compositor-functions/pixelate.glsl
index 4de3f27397..b08a3d798f 100644
--- a/packages/frontend/src/utility/image-compositor-functions/pixelate.glsl
+++ b/packages/frontend/src/utility/image-compositor-functions/pixelate.glsl
@@ -21,8 +21,6 @@ uniform int u_samples;
 uniform float u_strength;
 out vec4 out_color;
 
-// TODO: pixelateの中心を画像中心ではなく範囲の中心にする
-// TODO: 画像のアスペクト比に関わらず各画素は正方形にする
 
 void main() {
 	if (u_strength <= 0.0) {
@@ -31,11 +29,14 @@ void main() {
 	}
 
 	float angle = -(u_angle * PI);
+	float aspect = in_resolution.x / max(in_resolution.y, 1.0);
 	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;
+	vec2 scaledUv = vec2(centeredUv.x * aspect, centeredUv.y);
+	vec2 rotatedScaledUv = vec2(
+		scaledUv.x * cos(angle) - scaledUv.y * sin(angle),
+		scaledUv.x * sin(angle) + scaledUv.y * cos(angle)
+	);
+	vec2 rotatedUV = vec2(rotatedScaledUv.x / aspect, rotatedScaledUv.y) + u_offset;
 
 	bool isInside = false;
 	if (u_ellipse) {
@@ -50,19 +51,24 @@ void main() {
 		return;
 	}
 
-	float dx = u_strength / 1.0;
-	float dy = u_strength / 1.0;
+	float baseResolution = (in_resolution.x + in_resolution.y) * 0.5;
+	float dx = (u_strength * baseResolution) / max(in_resolution.x, 1.0);
+	float dy = (u_strength * baseResolution) / max(in_resolution.y, 1.0);
+	vec2 centerUv = vec2(0.5, 0.5) + u_offset;
 	vec2 new_uv = vec2(
-		(dx * (floor((in_uv.x - 0.5 - (dx / 2.0)) / dx) + 0.5)),
-		(dy * (floor((in_uv.y - 0.5 - (dy / 2.0)) / dy) + 0.5))
-	) + vec2(0.5 + (dx / 2.0), 0.5 + (dy / 2.0));
+		(dx * (floor((in_uv.x - centerUv.x - (dx / 2.0)) / dx) + 0.5)),
+		(dy * (floor((in_uv.y - centerUv.y - (dy / 2.0)) / dy) + 0.5))
+	) + vec2(centerUv.x + (dx / 2.0), centerUv.y + (dy / 2.0));
 
 	vec4 result = vec4(0.0);
 	float totalSamples = 0.0;
 
-	// TODO: より多くのサンプリング
-	result += texture(in_texture, new_uv);
-	totalSamples += 1.0;
+	vec2 halfStep = vec2(dx, dy) * 0.25;
+	result += texture(in_texture, new_uv + vec2(-halfStep.x, -halfStep.y));
+	result += texture(in_texture, new_uv + vec2(halfStep.x, -halfStep.y));
+	result += texture(in_texture, new_uv + vec2(-halfStep.x, halfStep.y));
+	result += texture(in_texture, new_uv + vec2(halfStep.x, halfStep.y));
+	totalSamples += 4.0;
 
 	out_color = totalSamples > 0.0 ? result / totalSamples : texture(in_texture, in_uv);
 }