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>

CHANGELOG.md

@@ -26,6 +26,11 @@
 - Fix: mCaptchaが正しく動作しない問題を修正
 - Fix: 非ログイン時にリバーシの対局が表示されない問題を修正
 - Fix: ノートの詳細表示でリアクションが全件表示されない問題を修正
+- Fix: 画像エフェクトの修正
+  - 塗りつぶし・モザイク・ぼかしエフェクトを回転させると歪む問題を修正
+  - モザイクの格子のサイズが画像の縦横比によって長方形となる問題を修正
+  - モザイクの色味がより自然になるように修正
+  - ぼかしに不自然な縦線が入る問題を修正
 
 ### Server
 - Enhance: OAuthのクライアント情報取得（Client Information Discovery）において、IndieWeb Living Standard 11 July 2024で定義されているJSONドキュメント形式に対応しました

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,
 			},
 		});

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(
+	vec2 scaledUv = vec2(centeredUv.x * aspect, centeredUv.y);
-		centeredUv.x * cos(angle) - centeredUv.y * sin(angle),
+	vec2 rotatedScaledUv = vec2(
-		centeredUv.x * sin(angle) + centeredUv.y * cos(angle)
+		scaledUv.x * cos(angle) - scaledUv.y * sin(angle),
-	) + u_offset;
+		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)
+	float normalizedRadius = u_radius / 100.0;
-	vec2 blurOffset = vec2(normalizedRadius) / in_resolution * referenceSize;
+	float radiusPx = normalizedRadius * referenceSize;
+	vec2 texelSize = 1.0 / in_resolution;
 
-	// Calculate how many samples to take in each direction
+	int sampleCount = max(u_samples, 1);
-	// This determines the grid density, not the blur extent
+	float sampleCountF = float(sampleCount);
-	int sampleRadius = int(sqrt(float(u_samples)) / 2.0);
+	float jitter = rand(in_uv * in_resolution);
+	float goldenAngle = 2.39996323;
 
-	// Sample in a grid pattern within the specified radius
+	// Sample in a circular pattern to avoid axis-aligned artifacts
-	for (int x = -sampleRadius; x <= sampleRadius; x++) {
+	for (int i = 0; i < sampleCount; i++) {
-		for (int y = -sampleRadius; y <= sampleRadius; y++) {
+		float fi = float(i);
-			// Normalize the grid position to [-1, 1] range
+		float radius = sqrt((fi + 0.5) / sampleCountF);
-			float normalizedX = float(x) / float(sampleRadius);
+		float theta = (fi + jitter) * goldenAngle;
-			float normalizedY = float(y) / float(sampleRadius);
+		vec2 direction = vec2(cos(theta), sin(theta));
+		vec2 offset = direction * (radiusPx * radius) * texelSize;
+		vec2 sampleUV = in_uv + offset;
 
-			// Scale by radius to get the actual sampling offset
+		if (sampleUV.x >= 0.0 && sampleUV.x <= 1.0 && sampleUV.y >= 0.0 && sampleUV.y <= 1.0) {
-			vec2 offset = vec2(normalizedX, normalizedY) * blurOffset;
+			float weight = exp(-radius * radius * 4.0);
-			vec2 sampleUV = in_uv + offset;
+			result += texture(in_texture, sampleUV) * weight;
-
+			totalSamples += weight;
-			// 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;
-			}
 		}
 	}
 

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,
 		},
 	},

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(
+	vec2 scaledUv = vec2(centeredUv.x * aspect, centeredUv.y);
-		centeredUv.x * cos(angle) - centeredUv.y * sin(angle),
+	vec2 rotatedScaledUv = vec2(
-		centeredUv.x * sin(angle) + centeredUv.y * cos(angle)
+		scaledUv.x * cos(angle) - scaledUv.y * sin(angle),
-	) + u_offset;
+		scaledUv.x * sin(angle) + scaledUv.y * cos(angle)
+	);
+	vec2 rotatedUV = vec2(rotatedScaledUv.x / aspect, rotatedScaledUv.y) + u_offset;
 
 	bool isInside = false;
 	if (u_ellipse) {

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(
+	vec2 scaledUv = vec2(centeredUv.x * aspect, centeredUv.y);
-		centeredUv.x * cos(angle) - centeredUv.y * sin(angle),
+	vec2 rotatedScaledUv = vec2(
-		centeredUv.x * sin(angle) + centeredUv.y * cos(angle)
+		scaledUv.x * cos(angle) - scaledUv.y * sin(angle),
-	) + u_offset;
+		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 baseResolution = (in_resolution.x + in_resolution.y) * 0.5;
-	float dy = u_strength / 1.0;
+	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)),
+		(dx * (floor((in_uv.x - centerUv.x - (dx / 2.0)) / dx) + 0.5)),
-		(dy * (floor((in_uv.y - 0.5 - (dy / 2.0)) / dy) + 0.5))
+		(dy * (floor((in_uv.y - centerUv.y - (dy / 2.0)) / dy) + 0.5))
-	) + vec2(0.5 + (dx / 2.0), 0.5 + (dy / 2.0));
+	) + vec2(centerUv.x + (dx / 2.0), centerUv.y + (dy / 2.0));
 
 	vec4 result = vec4(0.0);
 	float totalSamples = 0.0;
 
-	// TODO: より多くのサンプリング
+	vec2 halfStep = vec2(dx, dy) * 0.25;
-	result += texture(in_texture, new_uv);
+	result += texture(in_texture, new_uv + vec2(-halfStep.x, -halfStep.y));
-	totalSamples += 1.0;
+	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);
 }