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/fillSquare.ts b/packages/frontend/src/utility/image-effector/fxs/fill.ts similarity index 77% rename from packages/frontend/src/utility/image-effector/fxs/fillSquare.ts rename to 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);