enhance(frontend): 画像エフェクトのUI改善 (#16191)

* enhance(frontend): 画像エフェクトの改善

* enhance: i18n colorClampAdvanced

* fix: missing translation

* enhance: i18n blockNoise

* fix lint

* fix: narrow down fx defs types

* fix

* fix: watermark用エフェクトは別で定義し直す

* fix lint

* ImageEffectorをwatermarkに隠蔽

* watermark関連の定義を完全に分離

* refactor

* fix

* ぼかし効果 -> スムージング

* refactor: remove unnecessary `as const`

* Update Changelog

packages/frontend/src/utility/image-effector/ImageEffector.ts

@@ -6,22 +6,78 @@
 import { getProxiedImageUrl } from '../media-proxy.js';
 import { initShaderProgram } from '../webgl.js';
 
+export type ImageEffectorRGB = [r: number, g: number, b: number];
+
 type ParamTypeToPrimitive = {
-	'number': number;
-	'number:enum': number;
-	'boolean': boolean;
-	'align': { x: 'left' | 'center' | 'right'; y: 'top' | 'center' | 'bottom'; };
-	'seed': number;
-	'texture': { type: 'text'; text: string | null; } | { type: 'url'; url: string | null; } | null;
-	'color': [r: number, g: number, b: number];
+	[K in ImageEffectorFxParamDef['type']]: (ImageEffectorFxParamDef & { type: K })['default'];
 };
 
-type ImageEffectorFxParamDefs = Record<string, {
-	type: keyof ParamTypeToPrimitive;
-	default: any;
+interface CommonParamDef {
+	type: string;
 	label?: string;
-	toViewValue?: (v: any) => string;
-}>;
+	caption?: string;
+	default: any;
+}
+
+interface NumberParamDef extends CommonParamDef {
+	type: 'number';
+	default: number;
+	min: number;
+	max: number;
+	step?: number;
+	toViewValue?: (v: number) => string;
+};
+
+interface NumberEnumParamDef extends CommonParamDef {
+	type: 'number:enum';
+	enum: {
+		value: number;
+		label?: string;
+		icon?: string;
+	}[];
+	default: number;
+};
+
+interface BooleanParamDef extends CommonParamDef {
+	type: 'boolean';
+	default: boolean;
+};
+
+interface AlignParamDef extends CommonParamDef {
+	type: 'align';
+	default: {
+		x: 'left' | 'center' | 'right';
+		y: 'top' | 'center' | 'bottom';
+	};
+};
+
+interface SeedParamDef extends CommonParamDef {
+	type: 'seed';
+	default: number;
+};
+
+interface TextureParamDef extends CommonParamDef {
+	type: 'texture';
+	default: { type: 'text'; text: string | null; } | { type: 'url'; url: string | null; } | null;
+};
+
+interface ColorParamDef extends CommonParamDef {
+	type: 'color';
+	default: ImageEffectorRGB;
+};
+
+type ImageEffectorFxParamDef = NumberParamDef | NumberEnumParamDef | BooleanParamDef | AlignParamDef | SeedParamDef | TextureParamDef | ColorParamDef;
+
+export type ImageEffectorFxParamDefs = Record<string, ImageEffectorFxParamDef>;
+
+export type GetParamType<T extends ImageEffectorFxParamDef> =
+	T extends NumberEnumParamDef
+		? T['enum'][number]['value']
+		: ParamTypeToPrimitive[T['type']];
+
+export type ParamsRecordTypeToDefRecord<PS extends ImageEffectorFxParamDefs> = {
+	[K in keyof PS]: GetParamType<PS[K]>;
+};
 
 export function defineImageEffectorFx<ID extends string, PS extends ImageEffectorFxParamDefs, US extends string[]>(fx: ImageEffectorFx<ID, PS, US>) {
 	return fx;
@@ -36,9 +92,7 @@ export type ImageEffectorFx<ID extends string = string, PS extends ImageEffector
 	main: (ctx: {
 		gl: WebGL2RenderingContext;
 		program: WebGLProgram;
-		params: {
-			[key in keyof PS]: ParamTypeToPrimitive[PS[key]['type']];
-		};
+		params: ParamsRecordTypeToDefRecord<PS>;
 		u: Record<US[number], WebGLUniformLocation>;
 		width: number;
 		height: number;

packages/frontend/src/utility/image-effector/fxs/blockNoise.ts

@@ -48,20 +48,22 @@ void main() {
 `;
 
 export const FX_blockNoise = defineImageEffectorFx({
-	id: 'blockNoise' as const,
+	id: 'blockNoise',
 	name: i18n.ts._imageEffector._fxs.glitch + ': ' + i18n.ts._imageEffector._fxs.blockNoise,
 	shader,
 	uniforms: ['amount', 'channelShift'] as const,
 	params: {
 		amount: {
-			type: 'number' as const,
+			label: i18n.ts._imageEffector._fxProps.amount,
+			type: 'number',
 			default: 50,
 			min: 1,
 			max: 100,
 			step: 1,
 		},
 		strength: {
-			type: 'number' as const,
+			label: i18n.ts._imageEffector._fxProps.strength,
+			type: 'number',
 			default: 0.05,
 			min: -1,
 			max: 1,
@@ -69,7 +71,8 @@ export const FX_blockNoise = defineImageEffectorFx({
 			toViewValue: v => Math.round(v * 100) + '%',
 		},
 		width: {
-			type: 'number' as const,
+			label: i18n.ts.width,
+			type: 'number',
 			default: 0.05,
 			min: 0.01,
 			max: 1,
@@ -77,7 +80,8 @@ export const FX_blockNoise = defineImageEffectorFx({
 			toViewValue: v => Math.round(v * 100) + '%',
 		},
 		height: {
-			type: 'number' as const,
+			label: i18n.ts.height,
+			type: 'number',
 			default: 0.01,
 			min: 0.01,
 			max: 1,
@@ -85,7 +89,8 @@ export const FX_blockNoise = defineImageEffectorFx({
 			toViewValue: v => Math.round(v * 100) + '%',
 		},
 		channelShift: {
-			type: 'number' as const,
+			label: i18n.ts._imageEffector._fxProps.glitchChannelShift,
+			type: 'number',
 			default: 0,
 			min: 0,
 			max: 10,
@@ -93,7 +98,8 @@ export const FX_blockNoise = defineImageEffectorFx({
 			toViewValue: v => Math.round(v * 100) + '%',
 		},
 		seed: {
-			type: 'seed' as const,
+			label: i18n.ts._imageEffector._fxProps.seed,
+			type: 'seed',
 			default: 100,
 		},
 	},

packages/frontend/src/utility/image-effector/fxs/checker.ts

@@ -47,13 +47,14 @@ void main() {
 `;
 
 export const FX_checker = defineImageEffectorFx({
-	id: 'checker' as const,
+	id: 'checker',
 	name: i18n.ts._imageEffector._fxs.checker,
 	shader,
 	uniforms: ['angle', 'scale', 'color', 'opacity'] as const,
 	params: {
 		angle: {
-			type: 'number' as const,
+			label: i18n.ts._imageEffector._fxProps.angle,
+			type: 'number',
 			default: 0,
 			min: -1.0,
 			max: 1.0,
@@ -61,18 +62,21 @@ export const FX_checker = defineImageEffectorFx({
 			toViewValue: v => Math.round(v * 90) + '°',
 		},
 		scale: {
-			type: 'number' as const,
+			label: i18n.ts._imageEffector._fxProps.scale,
+			type: 'number',
 			default: 3.0,
 			min: 1.0,
 			max: 10.0,
 			step: 0.1,
 		},
 		color: {
-			type: 'color' as const,
+			label: i18n.ts._imageEffector._fxProps.color,
+			type: 'color',
 			default: [1, 1, 1],
 		},
 		opacity: {
-			type: 'number' as const,
+			label: i18n.ts._imageEffector._fxProps.opacity,
+			type: 'number',
 			default: 0.5,
 			min: 0.0,
 			max: 1.0,

packages/frontend/src/utility/image-effector/fxs/chromaticAberration.ts

@@ -52,17 +52,19 @@ void main() {
 `;
 
 export const FX_chromaticAberration = defineImageEffectorFx({
-	id: 'chromaticAberration' as const,
+	id: 'chromaticAberration',
 	name: i18n.ts._imageEffector._fxs.chromaticAberration,
 	shader,
 	uniforms: ['amount', 'start', 'normalize'] as const,
 	params: {
 		normalize: {
-			type: 'boolean' as const,
+			label: i18n.ts._imageEffector._fxProps.normalize,
+			type: 'boolean',
 			default: false,
 		},
 		amount: {
-			type: 'number' as const,
+			label: i18n.ts._imageEffector._fxProps.amount,
+			type: 'number',
 			default: 0.1,
 			min: 0.0,
 			max: 1.0,

packages/frontend/src/utility/image-effector/fxs/colorAdjust.ts

@@ -85,13 +85,14 @@ void main() {
 `;
 
 export const FX_colorAdjust = defineImageEffectorFx({
-	id: 'colorAdjust' as const,
+	id: 'colorAdjust',
 	name: i18n.ts._imageEffector._fxs.colorAdjust,
 	shader,
 	uniforms: ['lightness', 'contrast', 'hue', 'brightness', 'saturation'] as const,
 	params: {
 		lightness: {
-			type: 'number' as const,
+			label: i18n.ts._imageEffector._fxProps.lightness,
+			type: 'number',
 			default: 0,
 			min: -1,
 			max: 1,
@@ -99,7 +100,8 @@ export const FX_colorAdjust = defineImageEffectorFx({
 			toViewValue: v => Math.round(v * 100) + '%',
 		},
 		contrast: {
-			type: 'number' as const,
+			label: i18n.ts._imageEffector._fxProps.contrast,
+			type: 'number',
 			default: 1,
 			min: 0,
 			max: 4,
@@ -107,7 +109,8 @@ export const FX_colorAdjust = defineImageEffectorFx({
 			toViewValue: v => Math.round(v * 100) + '%',
 		},
 		hue: {
-			type: 'number' as const,
+			label: i18n.ts._imageEffector._fxProps.hue,
+			type: 'number',
 			default: 0,
 			min: -1,
 			max: 1,
@@ -115,7 +118,8 @@ export const FX_colorAdjust = defineImageEffectorFx({
 			toViewValue: v => Math.round(v * 180) + '°',
 		},
 		brightness: {
-			type: 'number' as const,
+			label: i18n.ts._imageEffector._fxProps.brightness,
+			type: 'number',
 			default: 1,
 			min: 0,
 			max: 4,
@@ -123,7 +127,8 @@ export const FX_colorAdjust = defineImageEffectorFx({
 			toViewValue: v => Math.round(v * 100) + '%',
 		},
 		saturation: {
-			type: 'number' as const,
+			label: i18n.ts._imageEffector._fxProps.saturation,
+			type: 'number',
 			default: 1,
 			min: 0,
 			max: 4,

packages/frontend/src/utility/image-effector/fxs/colorClamp.ts

@@ -26,13 +26,14 @@ void main() {
 `;
 
 export const FX_colorClamp = defineImageEffectorFx({
-	id: 'colorClamp' as const,
+	id: 'colorClamp',
 	name: i18n.ts._imageEffector._fxs.colorClamp,
 	shader,
 	uniforms: ['max', 'min'] as const,
 	params: {
 		max: {
-			type: 'number' as const,
+			label: i18n.ts._imageEffector._fxProps.max,
+			type: 'number',
 			default: 1.0,
 			min: 0.0,
 			max: 1.0,
@@ -40,7 +41,8 @@ export const FX_colorClamp = defineImageEffectorFx({
 			toViewValue: v => Math.round(v * 100) + '%',
 		},
 		min: {
-			type: 'number' as const,
+			label: i18n.ts._imageEffector._fxProps.min,
+			type: 'number',
 			default: -1.0,
 			min: -1.0,
 			max: 0.0,

packages/frontend/src/utility/image-effector/fxs/colorClampAdvanced.ts

@@ -30,13 +30,14 @@ void main() {
 `;
 
 export const FX_colorClampAdvanced = defineImageEffectorFx({
-	id: 'colorClampAdvanced' as const,
+	id: 'colorClampAdvanced',
 	name: i18n.ts._imageEffector._fxs.colorClampAdvanced,
 	shader,
 	uniforms: ['rMax', 'rMin', 'gMax', 'gMin', 'bMax', 'bMin'] as const,
 	params: {
 		rMax: {
-			type: 'number' as const,
+			label: `${i18n.ts._imageEffector._fxProps.max} (${i18n.ts._imageEffector._fxProps.redComponent})`,
+			type: 'number',
 			default: 1.0,
 			min: 0.0,
 			max: 1.0,
@@ -44,7 +45,8 @@ export const FX_colorClampAdvanced = defineImageEffectorFx({
 			toViewValue: v => Math.round(v * 100) + '%',
 		},
 		rMin: {
-			type: 'number' as const,
+			label: `${i18n.ts._imageEffector._fxProps.min} (${i18n.ts._imageEffector._fxProps.redComponent})`,
+			type: 'number',
 			default: -1.0,
 			min: -1.0,
 			max: 0.0,
@@ -52,7 +54,8 @@ export const FX_colorClampAdvanced = defineImageEffectorFx({
 			toViewValue: v => Math.round(v * 100) + '%',
 		},
 		gMax: {
-			type: 'number' as const,
+			label: `${i18n.ts._imageEffector._fxProps.max} (${i18n.ts._imageEffector._fxProps.greenComponent})`,
+			type: 'number',
 			default: 1.0,
 			min: 0.0,
 			max: 1.0,
@@ -60,7 +63,8 @@ export const FX_colorClampAdvanced = defineImageEffectorFx({
 			toViewValue: v => Math.round(v * 100) + '%',
 		},
 		gMin: {
-			type: 'number' as const,
+			label: `${i18n.ts._imageEffector._fxProps.min} (${i18n.ts._imageEffector._fxProps.greenComponent})`,
+			type: 'number',
 			default: -1.0,
 			min: -1.0,
 			max: 0.0,
@@ -68,7 +72,8 @@ export const FX_colorClampAdvanced = defineImageEffectorFx({
 			toViewValue: v => Math.round(v * 100) + '%',
 		},
 		bMax: {
-			type: 'number' as const,
+			label: `${i18n.ts._imageEffector._fxProps.max} (${i18n.ts._imageEffector._fxProps.blueComponent})`,
+			type: 'number',
 			default: 1.0,
 			min: 0.0,
 			max: 1.0,
@@ -76,7 +81,8 @@ export const FX_colorClampAdvanced = defineImageEffectorFx({
 			toViewValue: v => Math.round(v * 100) + '%',
 		},
 		bMin: {
-			type: 'number' as const,
+			label: `${i18n.ts._imageEffector._fxProps.min} (${i18n.ts._imageEffector._fxProps.blueComponent})`,
+			type: 'number',
 			default: -1.0,
 			min: -1.0,
 			max: 0.0,

packages/frontend/src/utility/image-effector/fxs/distort.ts

@@ -34,18 +34,23 @@ void main() {
 `;
 
 export const FX_distort = defineImageEffectorFx({
-	id: 'distort' as const,
+	id: 'distort',
 	name: i18n.ts._imageEffector._fxs.distort,
 	shader,
 	uniforms: ['phase', 'frequency', 'strength', 'direction'] as const,
 	params: {
 		direction: {
-			type: 'number:enum' as const,
-			enum: [{ value: 0, label: 'v' }, { value: 1, label: 'h' }],
+			label: i18n.ts._imageEffector._fxProps.direction,
+			type: 'number:enum',
+			enum: [
+				{ value: 0 as const, label: i18n.ts.horizontal },
+				{ value: 1 as const, label: i18n.ts.vertical },
+			],
 			default: 1,
 		},
 		phase: {
-			type: 'number' as const,
+			label: i18n.ts._imageEffector._fxProps.phase,
+			type: 'number',
 			default: 0.0,
 			min: -1.0,
 			max: 1.0,
@@ -53,14 +58,16 @@ export const FX_distort = defineImageEffectorFx({
 			toViewValue: v => Math.round(v * 100) + '%',
 		},
 		frequency: {
-			type: 'number' as const,
+			label: i18n.ts._imageEffector._fxProps.frequency,
+			type: 'number',
 			default: 30,
 			min: 0,
 			max: 100,
 			step: 0.1,
 		},
 		strength: {
-			type: 'number' as const,
+			label: i18n.ts._imageEffector._fxProps.strength,
+			type: 'number',
 			default: 0.05,
 			min: 0,
 			max: 1,

packages/frontend/src/utility/image-effector/fxs/grayscale.ts

@@ -26,7 +26,7 @@ void main() {
 `;
 
 export const FX_grayscale = defineImageEffectorFx({
-	id: 'grayscale' as const,
+	id: 'grayscale',
 	name: i18n.ts._imageEffector._fxs.grayscale,
 	shader,
 	uniforms: [] as const,

packages/frontend/src/utility/image-effector/fxs/invert.ts

@@ -27,21 +27,24 @@ void main() {
 `;
 
 export const FX_invert = defineImageEffectorFx({
-	id: 'invert' as const,
+	id: 'invert',
 	name: i18n.ts._imageEffector._fxs.invert,
 	shader,
 	uniforms: ['r', 'g', 'b'] as const,
 	params: {
 		r: {
-			type: 'boolean' as const,
+			label: i18n.ts._imageEffector._fxProps.redComponent,
+			type: 'boolean',
 			default: true,
 		},
 		g: {
-			type: 'boolean' as const,
+			label: i18n.ts._imageEffector._fxProps.greenComponent,
+			type: 'boolean',
 			default: true,
 		},
 		b: {
-			type: 'boolean' as const,
+			label: i18n.ts._imageEffector._fxProps.blueComponent,
+			type: 'boolean',
 			default: true,
 		},
 	},

packages/frontend/src/utility/image-effector/fxs/mirror.ts

@@ -35,19 +35,29 @@ void main() {
 `;
 
 export const FX_mirror = defineImageEffectorFx({
-	id: 'mirror' as const,
+	id: 'mirror',
 	name: i18n.ts._imageEffector._fxs.mirror,
 	shader,
 	uniforms: ['h', 'v'] as const,
 	params: {
 		h: {
-			type: 'number:enum' as const,
-			enum: [{ value: -1, label: '<-' }, { value: 0, label: '|' }, { value: 1, label: '->' }],
+			label: i18n.ts.horizontal,
+			type: 'number:enum',
+			enum: [
+				{ value: -1 as const, icon: 'ti ti-arrow-bar-right' },
+				{ value: 0 as const, icon: 'ti ti-minus-vertical' },
+				{ value: 1 as const, icon: 'ti ti-arrow-bar-left' }
+			],
 			default: -1,
 		},
 		v: {
-			type: 'number:enum' as const,
-			enum: [{ value: -1, label: '^' }, { value: 0, label: '-' }, { value: 1, label: 'v' }],
+			label: i18n.ts.vertical,
+			type: 'number:enum',
+			enum: [
+				{ value: -1 as const, icon: 'ti ti-arrow-bar-down' },
+				{ value: 0 as const, icon: 'ti ti-minus' },
+				{ value: 1 as const, icon: 'ti ti-arrow-bar-up' }
+			],
 			default: 0,
 		},
 	},

packages/frontend/src/utility/image-effector/fxs/polkadot.ts

@@ -78,14 +78,16 @@ void main() {
 }
 `;
 
+// Primarily used for watermark
 export const FX_polkadot = defineImageEffectorFx({
-	id: 'polkadot' as const,
+	id: 'polkadot',
 	name: i18n.ts._imageEffector._fxs.polkadot,
 	shader,
 	uniforms: ['angle', 'scale', 'major_radius', 'major_opacity', 'minor_divisions', 'minor_radius', 'minor_opacity', 'color'] as const,
 	params: {
 		angle: {
-			type: 'number' as const,
+			label: i18n.ts._imageEffector._fxProps.angle,
+			type: 'number',
 			default: 0,
 			min: -1.0,
 			max: 1.0,
@@ -93,21 +95,24 @@ export const FX_polkadot = defineImageEffectorFx({
 			toViewValue: v => Math.round(v * 90) + '°',
 		},
 		scale: {
-			type: 'number' as const,
+			label: i18n.ts._imageEffector._fxProps.scale,
+			type: 'number',
 			default: 3.0,
 			min: 1.0,
 			max: 10.0,
 			step: 0.1,
 		},
 		majorRadius: {
-			type: 'number' as const,
+			label: i18n.ts._watermarkEditor.polkadotMainDotRadius,
+			type: 'number',
 			default: 0.1,
 			min: 0.0,
 			max: 1.0,
 			step: 0.01,
 		},
 		majorOpacity: {
-			type: 'number' as const,
+			label: i18n.ts._watermarkEditor.polkadotMainDotOpacity,
+			type: 'number',
 			default: 0.75,
 			min: 0.0,
 			max: 1.0,
@@ -115,21 +120,24 @@ export const FX_polkadot = defineImageEffectorFx({
 			toViewValue: v => Math.round(v * 100) + '%',
 		},
 		minorDivisions: {
-			type: 'number' as const,
+			label: i18n.ts._watermarkEditor.polkadotSubDotDivisions,
+			type: 'number',
 			default: 4,
 			min: 0,
 			max: 16,
 			step: 1,
 		},
 		minorRadius: {
-			type: 'number' as const,
+			label: i18n.ts._watermarkEditor.polkadotSubDotRadius,
+			type: 'number',
 			default: 0.25,
 			min: 0.0,
 			max: 1.0,
 			step: 0.01,
 		},
 		minorOpacity: {
-			type: 'number' as const,
+			label: i18n.ts._watermarkEditor.polkadotSubDotOpacity,
+			type: 'number',
 			default: 0.5,
 			min: 0.0,
 			max: 1.0,
@@ -137,7 +145,8 @@ export const FX_polkadot = defineImageEffectorFx({
 			toViewValue: v => Math.round(v * 100) + '%',
 		},
 		color: {
-			type: 'color' as const,
+			label: i18n.ts._imageEffector._fxProps.color,
+			type: 'color',
 			default: [1, 1, 1],
 		},
 	},

packages/frontend/src/utility/image-effector/fxs/stripe.ts

@@ -48,14 +48,16 @@ void main() {
 }
 `;
 
+// Primarily used for watermark
 export const FX_stripe = defineImageEffectorFx({
-	id: 'stripe' as const,
+	id: 'stripe',
 	name: i18n.ts._imageEffector._fxs.stripe,
 	shader,
 	uniforms: ['angle', 'frequency', 'phase', 'threshold', 'color', 'opacity'] as const,
 	params: {
 		angle: {
-			type: 'number' as const,
+			label: i18n.ts._imageEffector._fxProps.angle,
+			type: 'number',
 			default: 0.5,
 			min: -1.0,
 			max: 1.0,
@@ -63,14 +65,16 @@ export const FX_stripe = defineImageEffectorFx({
 			toViewValue: v => Math.round(v * 90) + '°',
 		},
 		frequency: {
-			type: 'number' as const,
+			label: i18n.ts._watermarkEditor.stripeFrequency,
+			type: 'number',
 			default: 10.0,
 			min: 1.0,
 			max: 30.0,
 			step: 0.1,
 		},
 		threshold: {
-			type: 'number' as const,
+			label: i18n.ts._watermarkEditor.stripeWidth,
+			type: 'number',
 			default: 0.1,
 			min: 0.0,
 			max: 1.0,
@@ -78,11 +82,13 @@ export const FX_stripe = defineImageEffectorFx({
 			toViewValue: v => Math.round(v * 100) + '%',
 		},
 		color: {
-			type: 'color' as const,
+			label: i18n.ts._imageEffector._fxProps.color,
+			type: 'color',
 			default: [1, 1, 1],
 		},
 		opacity: {
-			type: 'number' as const,
+			label: i18n.ts._imageEffector._fxProps.opacity,
+			type: 'number',
 			default: 0.5,
 			min: 0.0,
 			max: 1.0,

packages/frontend/src/utility/image-effector/fxs/tearing.ts

@@ -38,20 +38,22 @@ void main() {
 `;
 
 export const FX_tearing = defineImageEffectorFx({
-	id: 'tearing' as const,
+	id: 'tearing',
 	name: i18n.ts._imageEffector._fxs.glitch + ': ' + i18n.ts._imageEffector._fxs.tearing,
 	shader,
 	uniforms: ['amount', 'channelShift'] as const,
 	params: {
 		amount: {
-			type: 'number' as const,
+			label: i18n.ts._imageEffector._fxProps.amount,
+			type: 'number',
 			default: 3,
 			min: 1,
 			max: 100,
 			step: 1,
 		},
 		strength: {
-			type: 'number' as const,
+			label: i18n.ts._imageEffector._fxProps.strength,
+			type: 'number',
 			default: 0.05,
 			min: -1,
 			max: 1,
@@ -59,7 +61,8 @@ export const FX_tearing = defineImageEffectorFx({
 			toViewValue: v => Math.round(v * 100) + '%',
 		},
 		size: {
-			type: 'number' as const,
+			label: i18n.ts._imageEffector._fxProps.size,
+			type: 'number',
 			default: 0.2,
 			min: 0,
 			max: 1,
@@ -67,7 +70,8 @@ export const FX_tearing = defineImageEffectorFx({
 			toViewValue: v => Math.round(v * 100) + '%',
 		},
 		channelShift: {
-			type: 'number' as const,
+			label: i18n.ts._imageEffector._fxProps.glitchChannelShift,
+			type: 'number',
 			default: 0.5,
 			min: 0,
 			max: 10,
@@ -75,7 +79,8 @@ export const FX_tearing = defineImageEffectorFx({
 			toViewValue: v => Math.round(v * 100) + '%',
 		},
 		seed: {
-			type: 'seed' as const,
+			label: i18n.ts._imageEffector._fxProps.seed,
+			type: 'seed',
 			default: 100,
 		},
 	},

packages/frontend/src/utility/image-effector/fxs/threshold.ts

@@ -27,27 +27,30 @@ void main() {
 `;
 
 export const FX_threshold = defineImageEffectorFx({
-	id: 'threshold' as const,
+	id: 'threshold',
 	name: i18n.ts._imageEffector._fxs.threshold,
 	shader,
 	uniforms: ['r', 'g', 'b'] as const,
 	params: {
 		r: {
-			type: 'number' as const,
+			label: i18n.ts._imageEffector._fxProps.redComponent,
+			type: 'number',
 			default: 0.5,
 			min: 0.0,
 			max: 1.0,
 			step: 0.01,
 		},
 		g: {
-			type: 'number' as const,
+			label: i18n.ts._imageEffector._fxProps.greenComponent,
+			type: 'number',
 			default: 0.5,
 			min: 0.0,
 			max: 1.0,
 			step: 0.01,
 		},
 		b: {
-			type: 'number' as const,
+			label: i18n.ts._imageEffector._fxProps.blueComponent,
+			type: 'number',
 			default: 0.5,
 			min: 0.0,
 			max: 1.0,

packages/frontend/src/utility/image-effector/fxs/watermarkPlacement.ts

@@ -83,46 +83,46 @@ void main() {
 `;
 
 export const FX_watermarkPlacement = defineImageEffectorFx({
-	id: 'watermarkPlacement' as const,
+	id: 'watermarkPlacement',
 	name: '(internal)',
 	shader,
 	uniforms: ['texture_watermark', 'resolution_watermark', 'scale', 'angle', 'opacity', 'repeat', 'alignX', 'alignY', 'fitMode'] as const,
 	params: {
 		cover: {
-			type: 'boolean' as const,
+			type: 'boolean',
 			default: false,
 		},
 		repeat: {
-			type: 'boolean' as const,
+			type: 'boolean',
 			default: false,
 		},
 		scale: {
-			type: 'number' as const,
+			type: 'number',
 			default: 0.3,
 			min: 0.0,
 			max: 1.0,
 			step: 0.01,
 		},
 		angle: {
-			type: 'number' as const,
+			type: 'number',
 			default: 0,
 			min: -1.0,
 			max: 1.0,
 			step: 0.01,
 		},
 		align: {
-			type: 'align' as const,
+			type: 'align',
 			default: { x: 'right', y: 'bottom' },
 		},
 		opacity: {
-			type: 'number' as const,
+			type: 'number',
 			default: 0.75,
 			min: 0.0,
 			max: 1.0,
 			step: 0.01,
 		},
 		watermark: {
-			type: 'texture' as const,
+			type: 'texture',
 			default: null,
 		},
 	},

packages/frontend/src/utility/image-effector/fxs/zoomLines.ts

@@ -37,59 +37,68 @@ void main() {
 `;
 
 export const FX_zoomLines = defineImageEffectorFx({
-	id: 'zoomLines' as const,
+	id: 'zoomLines',
 	name: i18n.ts._imageEffector._fxs.zoomLines,
 	shader,
 	uniforms: ['pos', 'frequency', 'thresholdEnabled', 'threshold', 'maskSize', 'black'] as const,
 	params: {
 		x: {
-			type: 'number' as const,
+			label: i18n.ts._imageEffector._fxProps.centerX,
+			type: 'number',
 			default: 0.0,
 			min: -1.0,
 			max: 1.0,
 			step: 0.01,
 		},
 		y: {
-			type: 'number' as const,
+			label: i18n.ts._imageEffector._fxProps.centerY,
+			type: 'number',
 			default: 0.0,
 			min: -1.0,
 			max: 1.0,
 			step: 0.01,
 		},
 		frequency: {
-			type: 'number' as const,
+			label: i18n.ts._imageEffector._fxProps.frequency,
+			type: 'number',
 			default: 30.0,
 			min: 1.0,
 			max: 200.0,
 			step: 0.1,
 		},
-		thresholdEnabled: {
-			type: 'boolean' as const,
-			default: true,
+		smoothing: {
+			label: i18n.ts._imageEffector._fxProps.zoomLinesSmoothing,
+			caption: i18n.ts._imageEffector._fxProps.zoomLinesSmoothingDescription,
+			type: 'boolean',
+			default: false,
 		},
 		threshold: {
-			type: 'number' as const,
+			label: i18n.ts._imageEffector._fxProps.zoomLinesThreshold,
+			type: 'number',
 			default: 0.2,
 			min: 0.0,
 			max: 1.0,
 			step: 0.01,
 		},
 		maskSize: {
-			type: 'number' as const,
+			label: i18n.ts._imageEffector._fxProps.zoomLinesMaskSize,
+			type: 'number',
 			default: 0.5,
 			min: 0.0,
 			max: 1.0,
 			step: 0.01,
 		},
 		black: {
-			type: 'boolean' as const,
+			label: i18n.ts._imageEffector._fxProps.zoomLinesBlack,
+			type: 'boolean',
 			default: false,
 		},
 	},
 	main: ({ gl, u, params }) => {
 		gl.uniform2f(u.pos, (1.0 + params.x) / 2.0, (1.0 + params.y) / 2.0);
 		gl.uniform1f(u.frequency, params.frequency);
-		gl.uniform1i(u.thresholdEnabled, params.thresholdEnabled ? 1 : 0);
+		// thresholdの調整が有効な間はsmoothingが利用できない
+		gl.uniform1i(u.thresholdEnabled, params.smoothing ? 0 : 1);
 		gl.uniform1f(u.threshold, params.threshold);
 		gl.uniform1f(u.maskSize, params.maskSize);
 		gl.uniform1i(u.black, params.black ? 1 : 0);

packages/frontend/src/utility/watermark.ts

@@ -150,7 +150,6 @@ export class WatermarkRenderer {
 						minorRadius: layer.minorRadius,
 						minorOpacity: layer.minorOpacity,
 						color: layer.color,
-						opacity: layer.opacity,
 					},
 				};
 			} else if (layer.type === 'checker') {