enhance(frontend): マスクエフェクト (#16556)

* wip

* wip

* Update MkImageEffectorDialog.vue

* Update MkImageEffectorDialog.vue

* Update MkImageEffectorDialog.vue

* Update MkImageEffectorDialog.vue

* Update MkImageEffectorDialog.vue

* Update fillSquare.ts

* Update CHANGELOG.md

* Update fillSquare.ts

2 files changed, 124 insertions, 0 deletions

diff --git a/packages/frontend/src/utility/image-effector/fxs.ts b/packages/frontend/src/utility/image-effector/fxs.ts
index 1fa48aea15..43e10a22fc 100644
--- a/packages/frontend/src/utility/image-effector/fxs.ts
+++ b/packages/frontend/src/utility/image-effector/fxs.ts
@@ -18,6 +18,7 @@ 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 type { ImageEffectorFx } from './ImageEffector.js';
 
 export const FXS = [
@@ -36,4 +37,5 @@ export const FXS = [
 	FX_chromaticAberration,
 	FX_tearing,
 	FX_blockNoise,
+	FX_fillSquare,
 ] as const satisfies ImageEffectorFx<string, any>[];
diff --git a/packages/frontend/src/utility/image-effector/fxs/fillSquare.ts b/packages/frontend/src/utility/image-effector/fxs/fillSquare.ts
new file mode 100644
index 0000000000..55b53830e0
--- /dev/null
+++ b/packages/frontend/src/utility/image-effector/fxs/fillSquare.ts
@@ -0,0 +1,122 @@
+/*
+ * 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);
+	},
+});