enhance(frontend): improve zoomLines effect

locales/ja-JP.yml

@@ -3512,11 +3512,9 @@ _imageEffector:
     threshold: "しきい値"
     centerX: "中心X"
     centerY: "中心Y"
-    zoomLinesSmoothing: "スムージング"
-    zoomLinesSmoothingDescription: "スムージングと集中線の幅の設定は併用できません。"
-    zoomLinesThreshold: "集中線の幅"
+    density: "密度"
+    zoomLinesOutlineThickness: "線の影の太さ"
     zoomLinesMaskSize: "中心径"
-    zoomLinesBlack: "黒色にする"
     circle: "円形"
 
 drafts: "下書き"

packages/frontend/src/utility/image-compositor-functions/zoomLines.glsl

@@ -14,12 +14,15 @@ uniform sampler2D in_texture;
 uniform vec2 in_resolution;
 uniform vec2 u_pos;
 uniform float u_frequency;
-uniform bool u_thresholdEnabled;
 uniform float u_threshold;
+uniform float u_outlineThickness;
 uniform float u_maskSize;
-uniform bool u_black;
 out vec4 out_color;
 
+float remap(float value, float inputMin, float inputMax, float outputMin, float outputMax) {
+	return outputMin + (outputMax - outputMin) * ((value - inputMin) / (inputMax - inputMin));
+}
+
 void main() {
 	vec4 in_color = texture(in_texture, in_uv);
 	vec2 centeredUv = (in_uv - vec2(0.5, 0.5));
@@ -33,16 +36,19 @@ void main() {
 	float noiseY = (noiseUV.y + seed) * u_frequency;
   float noise = (1.0 + snoise(vec3(noiseX, noiseY, time))) / 2.0;
 
-	float t = noise;
-	if (u_thresholdEnabled) t = t < u_threshold ? 1.0 : 0.0;
+	if (noise < u_threshold) {
+		out_color = in_color;
+	} else {
+		float n = remap(noise, u_threshold, 1.0, 0.0, 1.0);
 
 		// TODO: マスクの形自体も揺らぎを与える
 		float d = distance(uv * vec2(2.0, 2.0), u_pos * vec2(2.0, 2.0));
 		float mask = d < u_maskSize ? 0.0 : ((d - u_maskSize) * (1.0 + (u_maskSize * 2.0)));
 		out_color = vec4(
-		mix(in_color.r, u_black ? 0.0 : 1.0, t * mask),
-		mix(in_color.g, u_black ? 0.0 : 1.0, t * mask),
-		mix(in_color.b, u_black ? 0.0 : 1.0, t * mask),
+			mix(in_color.r, n < u_outlineThickness ? 0.0 : 1.0, mask),
+			mix(in_color.g, n < u_outlineThickness ? 0.0 : 1.0, mask),
+			mix(in_color.b, n < u_outlineThickness ? 0.0 : 1.0, mask),
 			in_color.a
 		);
+	}
 }

packages/frontend/src/utility/image-compositor-functions/zoomLines.ts

@@ -12,20 +12,17 @@ export const fn = defineImageCompositorFunction<{
 	x: number;
 	y: number;
 	frequency: number;
-	smoothing: boolean;
-	threshold: number;
+	density: number;
+	outlineThickness: number;
 	maskSize: number;
-	black: boolean;
 }>({
 	shader,
 	main: ({ gl, u, params }) => {
 		gl.uniform2f(u.pos, params.x / 2, params.y / 2);
 		gl.uniform1f(u.frequency, params.frequency * params.frequency);
-		// thresholdの調整が有効な間はsmoothingが利用できない
-		gl.uniform1i(u.thresholdEnabled, params.smoothing ? 0 : 1);
-		gl.uniform1f(u.threshold, params.threshold);
+		gl.uniform1f(u.threshold, 1.0 - params.density);
+		gl.uniform1f(u.outlineThickness, params.outlineThickness);
 		gl.uniform1f(u.maskSize, params.maskSize);
-		gl.uniform1i(u.black, params.black ? 1 : 0);
 	},
 });
 
@@ -56,20 +53,22 @@ export const uiDefinition = {
 			max: 15.0,
 			step: 0.1,
 		},
-		smoothing: {
-			label: i18n.ts._imageEffector._fxProps.zoomLinesSmoothing,
-			caption: i18n.ts._imageEffector._fxProps.zoomLinesSmoothingDescription,
-			type: 'boolean',
-			default: false,
-		},
-		threshold: {
-			label: i18n.ts._imageEffector._fxProps.zoomLinesThreshold,
+		density: {
+			label: i18n.ts._imageEffector._fxProps.density,
 			type: 'number',
 			default: 0.5,
 			min: 0.0,
 			max: 1.0,
 			step: 0.01,
 		},
+		outlineThickness: {
+			label: i18n.ts._imageEffector._fxProps.zoomLinesOutlineThickness,
+			type: 'number',
+			default: 0.25,
+			min: 0.0,
+			max: 1.0,
+			step: 0.01,
+		},
 		maskSize: {
 			label: i18n.ts._imageEffector._fxProps.zoomLinesMaskSize,
 			type: 'number',
@@ -78,10 +77,5 @@ export const uiDefinition = {
 			max: 1.0,
 			step: 0.01,
 		},
-		black: {
-			label: i18n.ts._imageEffector._fxProps.zoomLinesBlack,
-			type: 'boolean',
-			default: false,
-		},
 	},
 } satisfies ImageEffectorUiDefinition<typeof fn>;

packages/i18n/src/autogen/locale.ts

@@ -13109,25 +13109,17 @@ export interface Locale extends ILocale {
              */
             "centerY": string;
             /**
-             * スムージング
+             * 密度
              */
-            "zoomLinesSmoothing": string;
+            "density": string;
             /**
-             * スムージングと集中線の幅の設定は併用できません。
+             * 線の影の太さ
              */
-            "zoomLinesSmoothingDescription": string;
-            /**
-             * 集中線の幅
-             */
-            "zoomLinesThreshold": string;
+            "zoomLinesOutlineThickness": string;
             /**
              * 中心径
              */
             "zoomLinesMaskSize": string;
-            /**
-             * 黒色にする
-             */
-            "zoomLinesBlack": string;
             /**
              * 円形
              */