From 07bbc5ab3374afc6e8ec66a5da265b27c6416c27 Mon Sep 17 00:00:00 2001 From: syuilo <4439005+syuilo@users.noreply.github.com> Date: Wed, 11 Mar 2026 15:59:00 +0900 Subject: [PATCH] enhance(frontend): improve zoomLines effect --- locales/ja-JP.yml | 6 ++-- .../image-compositor-functions/zoomLines.glsl | 32 ++++++++++------- .../image-compositor-functions/zoomLines.ts | 34 ++++++++----------- packages/i18n/src/autogen/locale.ts | 16 +++------ 4 files changed, 39 insertions(+), 49 deletions(-) diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index 45d2efdf35..4af17dd39e 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -3512,11 +3512,9 @@ _imageEffector: threshold: "しきい値" centerX: "中心X" centerY: "中心Y" - zoomLinesSmoothing: "スムージング" - zoomLinesSmoothingDescription: "スムージングと集中線の幅の設定は併用できません。" - zoomLinesThreshold: "集中線の幅" + density: "密度" + zoomLinesOutlineThickness: "線の影の太さ" zoomLinesMaskSize: "中心径" - zoomLinesBlack: "黒色にする" circle: "円形" drafts: "下書き" diff --git a/packages/frontend/src/utility/image-compositor-functions/zoomLines.glsl b/packages/frontend/src/utility/image-compositor-functions/zoomLines.glsl index a0f11fcb5b..e47a8223cf 100644 --- a/packages/frontend/src/utility/image-compositor-functions/zoomLines.glsl +++ b/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), - in_color.a - ); + // 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, 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 + ); + } } diff --git a/packages/frontend/src/utility/image-compositor-functions/zoomLines.ts b/packages/frontend/src/utility/image-compositor-functions/zoomLines.ts index f8768e4ec3..67f927ce39 100644 --- a/packages/frontend/src/utility/image-compositor-functions/zoomLines.ts +++ b/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; diff --git a/packages/i18n/src/autogen/locale.ts b/packages/i18n/src/autogen/locale.ts index f814f3ecc2..05a2195374 100644 --- a/packages/i18n/src/autogen/locale.ts +++ b/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; /** * 円形 */