From 2f52c20150544823604633ece54b4b0dd1df10b8 Mon Sep 17 00:00:00 2001 From: Copilot <198982749+Copilot@users.noreply.github.com> Date: Sat, 20 Sep 2025 14:19:35 +0900 Subject: 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> --- locales/en-US.yml | 3 + locales/index.d.ts | 20 ++- locales/ja-JP.yml | 6 +- .../src/components/MkImageEffectorDialog.vue | 63 ++++++--- .../frontend/src/utility/image-effector/fxs.ts | 6 +- .../src/utility/image-effector/fxs/blur.ts | 157 +++++++++++++++++++++ .../src/utility/image-effector/fxs/fill.ts | 135 ++++++++++++++++++ .../src/utility/image-effector/fxs/fillSquare.ts | 122 ---------------- 8 files changed, 368 insertions(+), 144 deletions(-) create mode 100644 packages/frontend/src/utility/image-effector/fxs/blur.ts create mode 100644 packages/frontend/src/utility/image-effector/fxs/fill.ts delete mode 100644 packages/frontend/src/utility/image-effector/fxs/fillSquare.ts diff --git a/locales/en-US.yml b/locales/en-US.yml index 9c02e83021..faa7f5e59e 100644 --- a/locales/en-US.yml +++ b/locales/en-US.yml @@ -3194,6 +3194,7 @@ _imageEffector: mirror: "Mirror" invert: "Invert Colors" grayscale: "Grayscale" + blur: "Blur" colorAdjust: "Color Correction" colorClamp: "Color Compression" colorClampAdvanced: "Color Compression (Advanced)" @@ -3209,6 +3210,8 @@ _imageEffector: angle: "Angle" scale: "Size" size: "Size" + radius: "Radius" + samples: "Samples" color: "Color" opacity: "Opacity" normalize: "Normalize" diff --git a/locales/index.d.ts b/locales/index.d.ts index 95886125ff..9bef0113a2 100644 --- a/locales/index.d.ts +++ b/locales/index.d.ts @@ -12346,6 +12346,10 @@ export interface Locale extends ILocale { * 白黒 */ "grayscale": string; + /** + * ぼかし + */ + "blur": string; /** * 色調補正 */ @@ -12391,9 +12395,9 @@ export interface Locale extends ILocale { */ "tearing": string; /** - * 塗りつぶし(四角) + * 塗りつぶし */ - "fillSquare": string; + "fill": string; }; "_fxProps": { /** @@ -12408,6 +12412,14 @@ export interface Locale extends ILocale { * サイズ */ "size": string; + /** + * 半径 + */ + "radius": string; + /** + * サンプル数 + */ + "samples": string; /** * 位置 */ @@ -12524,6 +12536,10 @@ export interface Locale extends ILocale { * 黒色にする */ "zoomLinesBlack": string; + /** + * 円形 + */ + "circle": string; }; }; /** diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index 4ae52990e5..b0d864ade8 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -3306,6 +3306,7 @@ _imageEffector: mirror: "ミラー" invert: "色の反転" grayscale: "白黒" + blur: "ぼかし" colorAdjust: "色調補正" colorClamp: "色の圧縮" colorClampAdvanced: "色の圧縮(高度)" @@ -3317,12 +3318,14 @@ _imageEffector: checker: "チェッカー" blockNoise: "ブロックノイズ" tearing: "ティアリング" - fillSquare: "塗りつぶし(四角)" + fill: "塗りつぶし" _fxProps: angle: "角度" scale: "サイズ" size: "サイズ" + radius: "半径" + samples: "サンプル数" offset: "位置" color: "色" opacity: "不透明度" @@ -3352,6 +3355,7 @@ _imageEffector: zoomLinesThreshold: "集中線の幅" zoomLinesMaskSize: "中心径" zoomLinesBlack: "黒色にする" + circle: "円形" drafts: "下書き" _drafts: diff --git a/packages/frontend/src/components/MkImageEffectorDialog.vue b/packages/frontend/src/components/MkImageEffectorDialog.vue index 465100ef20..96fb01bb8c 100644 --- a/packages/frontend/src/components/MkImageEffectorDialog.vue +++ b/packages/frontend/src/components/MkImageEffectorDialog.vue @@ -23,7 +23,7 @@ SPDX-License-Identifier: AGPL-3.0-only
{{ i18n.ts.preview }}
- +
@@ -216,10 +216,24 @@ watch(enabled, () => { } }); -const fillSquare = ref(false); +const penMode = ref<'fill' | 'blur' | null>(null); + +function showPenMenu(ev: MouseEvent) { + os.popupMenu([{ + text: i18n.ts._imageEffector._fxs.fill, + action: () => { + penMode.value = 'fill'; + }, + }, { + text: i18n.ts._imageEffector._fxs.blur, + action: () => { + penMode.value = 'blur'; + }, + }], ev.currentTarget ?? ev.target); +} function onImagePointerdown(ev: PointerEvent) { - if (canvasEl.value == null || imageBitmap == null || !fillSquare.value) return; + if (canvasEl.value == null || imageBitmap == null || penMode.value == null) return; const AW = canvasEl.value.clientWidth; const AH = canvasEl.value.clientHeight; @@ -250,19 +264,34 @@ function onImagePointerdown(ev: PointerEvent) { } const id = genId(); - layers.push({ - id, - fxId: 'fillSquare', - params: { - offsetX: 0, - offsetY: 0, - scaleX: 0.1, - scaleY: 0.1, - angle: 0, - opacity: 1, - color: [1, 1, 1], - }, - }); + if (penMode.value === 'fill') { + layers.push({ + id, + fxId: 'fill', + params: { + offsetX: 0, + offsetY: 0, + scaleX: 0.1, + scaleY: 0.1, + angle: 0, + opacity: 1, + color: [1, 1, 1], + }, + }); + } else if (penMode.value === 'blur') { + layers.push({ + id, + fxId: 'blur', + params: { + offsetX: 0, + offsetY: 0, + scaleX: 0.1, + scaleY: 0.1, + angle: 0, + radius: 3, + }, + }); + } _move(ev.offsetX, ev.offsetY); @@ -302,7 +331,7 @@ function onImagePointerdown(ev: PointerEvent) { canvasEl.value?.removeEventListener('pointercancel', up); canvasEl.value?.releasePointerCapture(ev.pointerId); - fillSquare.value = false; + penMode.value = null; } canvasEl.value.addEventListener('pointermove', move); 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[]; 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/fill.ts b/packages/frontend/src/utility/image-effector/fxs/fill.ts new file mode 100644 index 0000000000..35dee594e3 --- /dev/null +++ b/packages/frontend/src/utility/image-effector/fxs/fill.ts @@ -0,0 +1,135 @@ +/* + * 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 vec3 u_color; +uniform float u_opacity; +out vec4 out_color; + +void main() { + vec4 in_color = texture(in_texture, in_uv); + //float x_ratio = max(in_resolution.x / in_resolution.y, 1.0); + //float y_ratio = max(in_resolution.y / in_resolution.x, 1.0); + + 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; + } + + out_color = isInside ? vec4( + mix(in_color.r, u_color.r, u_opacity), + mix(in_color.g, u_color.g, u_opacity), + mix(in_color.b, u_color.b, u_opacity), + in_color.a + ) : in_color; +} +`; + +export const FX_fill = defineImageEffectorFx({ + id: 'fill', + name: i18n.ts._imageEffector._fxs.fill, + shader, + uniforms: ['offset', 'scale', 'ellipse', 'angle', 'color', 'opacity'] 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) + '°', + }, + color: { + label: i18n.ts._imageEffector._fxProps.color, + type: 'color', + default: [1, 1, 1], + }, + opacity: { + label: i18n.ts._imageEffector._fxProps.opacity, + type: 'number', + default: 1.0, + min: 0.0, + max: 1.0, + step: 0.01, + toViewValue: v => Math.round(v * 100) + '%', + }, + }, + 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); + }, +}); diff --git a/packages/frontend/src/utility/image-effector/fxs/fillSquare.ts b/packages/frontend/src/utility/image-effector/fxs/fillSquare.ts deleted file mode 100644 index 55b53830e0..0000000000 --- a/packages/frontend/src/utility/image-effector/fxs/fillSquare.ts +++ /dev/null @@ -1,122 +0,0 @@ -/* - * 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 float u_angle; -uniform vec3 u_color; -uniform float u_opacity; -out vec4 out_color; - -void main() { - vec4 in_color = texture(in_texture, in_uv); - //float x_ratio = max(in_resolution.x / in_resolution.y, 1.0); - //float y_ratio = max(in_resolution.y / in_resolution.x, 1.0); - - 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 = 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), - mix(in_color.g, u_color.g, u_opacity), - mix(in_color.b, u_color.b, u_opacity), - in_color.a - ) : in_color; -} -`; - -export const FX_fillSquare = defineImageEffectorFx({ - id: 'fillSquare', - name: i18n.ts._imageEffector._fxs.fillSquare, - shader, - uniforms: ['offset', 'scale', 'angle', 'color', 'opacity'] 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 + ' X', - 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 + ' Y', - type: 'number', - default: 0.5, - min: 0.0, - max: 1.0, - step: 0.01, - toViewValue: v => Math.round(v * 100) + '%', - }, - 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) + '°', - }, - color: { - label: i18n.ts._imageEffector._fxProps.color, - type: 'color', - default: [1, 1, 1], - }, - opacity: { - label: i18n.ts._imageEffector._fxProps.opacity, - type: 'number', - default: 1.0, - min: 0.0, - max: 1.0, - step: 0.01, - toViewValue: v => Math.round(v * 100) + '%', - }, - }, - 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.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); - }, -}); -- cgit v1.2.3-freya