enhance(frontend): improve zoomLines image effect

1 files changed, 24 insertions, 9 deletions

diff --git a/packages/frontend/src/utility/image-effector/fxs/zoomLines.ts b/packages/frontend/src/utility/image-effector/fxs/zoomLines.ts
index 2e16ebea3b..4ea28658dd 100644
--- a/packages/frontend/src/utility/image-effector/fxs/zoomLines.ts
+++ b/packages/frontend/src/utility/image-effector/fxs/zoomLines.ts
@@ -4,11 +4,14 @@
  */
 
 import { defineImageEffectorFx } from '../ImageEffector.js';
+import { GLSL_LIB_SNOISE } from '@/utility/webgl.js';
 import { i18n } from '@/i18n.js';
 
 const shader = `#version 300 es
 precision mediump float;
 
+${GLSL_LIB_SNOISE}
+
 in vec2 in_uv;
 uniform sampler2D in_texture;
 uniform vec2 in_resolution;
@@ -22,10 +25,22 @@ out vec4 out_color;
 
 void main() {
 	vec4 in_color = texture(in_texture, in_uv);
-	float angle = atan(-u_pos.y + (in_uv.y), -u_pos.x + (in_uv.x));
-	float t = (1.0 + sin(angle * u_frequency)) / 2.0;
+	vec2 centeredUv = (in_uv - vec2(0.5, 0.5));
+	vec2 uv = centeredUv;
+
+	float seed = 1.0;
+	float time = 0.0;
+
+	vec2 noiseUV = (uv - u_pos) / distance((uv - u_pos), vec2(0.0));
+	float noiseX = (noiseUV.x + seed) * u_frequency;
+	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;
-	float d = distance(in_uv * vec2(2.0, 2.0), u_pos * vec2(2.0, 2.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),
@@ -61,9 +76,9 @@ export const FX_zoomLines = defineImageEffectorFx({
 		frequency: {
 			label: i18n.ts._imageEffector._fxProps.frequency,
 			type: 'number',
-			default: 30.0,
-			min: 1.0,
-			max: 200.0,
+			default: 5.0,
+			min: 0.0,
+			max: 15.0,
 			step: 0.1,
 		},
 		smoothing: {
@@ -75,7 +90,7 @@ export const FX_zoomLines = defineImageEffectorFx({
 		threshold: {
 			label: i18n.ts._imageEffector._fxProps.zoomLinesThreshold,
 			type: 'number',
-			default: 0.2,
+			default: 0.5,
 			min: 0.0,
 			max: 1.0,
 			step: 0.01,
@@ -95,8 +110,8 @@ export const FX_zoomLines = defineImageEffectorFx({
 		},
 	},
 	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.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);