From fe805fb7f0a05ea201fafb5e7926cded33d53b31 Mon Sep 17 00:00:00 2001 From: syuilo <4439005+syuilo@users.noreply.github.com> Date: Sun, 15 Jun 2025 11:06:46 +0900 Subject: enhance(frontend/image-effector): tweak fxs --- .../frontend/src/utility/image-effector/fxs.ts | 8 +- .../src/utility/image-effector/fxs/blockNoise.ts | 2 +- .../src/utility/image-effector/fxs/glitch.ts | 99 ---------------------- .../src/utility/image-effector/fxs/tearing.ts | 99 ++++++++++++++++++++++ 4 files changed, 103 insertions(+), 105 deletions(-) delete mode 100644 packages/frontend/src/utility/image-effector/fxs/glitch.ts create mode 100644 packages/frontend/src/utility/image-effector/fxs/tearing.ts (limited to 'packages/frontend/src/utility/image-effector') diff --git a/packages/frontend/src/utility/image-effector/fxs.ts b/packages/frontend/src/utility/image-effector/fxs.ts index 003b56efc4..1fa48aea15 100644 --- a/packages/frontend/src/utility/image-effector/fxs.ts +++ b/packages/frontend/src/utility/image-effector/fxs.ts @@ -10,21 +10,17 @@ import { FX_colorClamp } from './fxs/colorClamp.js'; import { FX_colorClampAdvanced } from './fxs/colorClampAdvanced.js'; import { FX_distort } from './fxs/distort.js'; import { FX_polkadot } from './fxs/polkadot.js'; -import { FX_glitch } from './fxs/glitch.js'; +import { FX_tearing } from './fxs/tearing.js'; import { FX_grayscale } from './fxs/grayscale.js'; import { FX_invert } from './fxs/invert.js'; import { FX_mirror } from './fxs/mirror.js'; import { FX_stripe } from './fxs/stripe.js'; import { FX_threshold } from './fxs/threshold.js'; -import { FX_watermarkPlacement } from './fxs/watermarkPlacement.js'; import { FX_zoomLines } from './fxs/zoomLines.js'; import { FX_blockNoise } from './fxs/blockNoise.js'; import type { ImageEffectorFx } from './ImageEffector.js'; export const FXS = [ - FX_watermarkPlacement, - FX_chromaticAberration, - FX_glitch, FX_mirror, FX_invert, FX_grayscale, @@ -37,5 +33,7 @@ export const FXS = [ FX_stripe, FX_polkadot, FX_checker, + FX_chromaticAberration, + FX_tearing, FX_blockNoise, ] as const satisfies ImageEffectorFx[]; diff --git a/packages/frontend/src/utility/image-effector/fxs/blockNoise.ts b/packages/frontend/src/utility/image-effector/fxs/blockNoise.ts index 66ebbabc0c..bf7eaa8bda 100644 --- a/packages/frontend/src/utility/image-effector/fxs/blockNoise.ts +++ b/packages/frontend/src/utility/image-effector/fxs/blockNoise.ts @@ -49,7 +49,7 @@ void main() { export const FX_blockNoise = defineImageEffectorFx({ id: 'blockNoise' as const, - name: i18n.ts._imageEffector._fxs.blockNoise, + name: i18n.ts._imageEffector._fxs.glitch + ': ' + i18n.ts._imageEffector._fxs.blockNoise, shader, uniforms: ['amount', 'channelShift'] as const, params: { diff --git a/packages/frontend/src/utility/image-effector/fxs/glitch.ts b/packages/frontend/src/utility/image-effector/fxs/glitch.ts deleted file mode 100644 index 702b476a0b..0000000000 --- a/packages/frontend/src/utility/image-effector/fxs/glitch.ts +++ /dev/null @@ -1,99 +0,0 @@ -/* - * SPDX-FileCopyrightText: syuilo and misskey-project - * SPDX-License-Identifier: AGPL-3.0-only - */ - -import seedrandom from 'seedrandom'; -import { defineImageEffectorFx } from '../ImageEffector.js'; -import { i18n } from '@/i18n.js'; - -const shader = `#version 300 es -precision mediump float; - -in vec2 in_uv; -uniform sampler2D in_texture; -uniform vec2 in_resolution; -uniform int u_amount; -uniform float u_shiftStrengths[128]; -uniform float u_shiftOrigins[128]; -uniform float u_shiftHeights[128]; -uniform float u_channelShift; -out vec4 out_color; - -void main() { - float v = 0.0; - - for (int i = 0; i < u_amount; i++) { - if (in_uv.y > (u_shiftOrigins[i] - u_shiftHeights[i]) && in_uv.y < (u_shiftOrigins[i] + u_shiftHeights[i])) { - v += u_shiftStrengths[i]; - } - } - - float r = texture(in_texture, vec2(in_uv.x + (v * (1.0 + u_channelShift)), in_uv.y)).r; - float g = texture(in_texture, vec2(in_uv.x + v, in_uv.y)).g; - float b = texture(in_texture, vec2(in_uv.x + (v * (1.0 + (u_channelShift / 2.0))), in_uv.y)).b; - float a = texture(in_texture, vec2(in_uv.x + v, in_uv.y)).a; - out_color = vec4(r, g, b, a); -} -`; - -export const FX_glitch = defineImageEffectorFx({ - id: 'glitch' as const, - name: i18n.ts._imageEffector._fxs.glitch, - shader, - uniforms: ['amount', 'channelShift'] as const, - params: { - amount: { - type: 'number' as const, - default: 3, - min: 1, - max: 100, - step: 1, - }, - strength: { - type: 'number' as const, - default: 0.05, - min: -1, - max: 1, - step: 0.01, - toViewValue: v => Math.round(v * 100) + '%', - }, - size: { - type: 'number' as const, - default: 0.2, - min: 0, - max: 1, - step: 0.01, - toViewValue: v => Math.round(v * 100) + '%', - }, - channelShift: { - type: 'number' as const, - default: 0.5, - min: 0, - max: 10, - step: 0.01, - toViewValue: v => Math.round(v * 100) + '%', - }, - seed: { - type: 'seed' as const, - default: 100, - }, - }, - main: ({ gl, program, u, params }) => { - gl.uniform1i(u.amount, params.amount); - gl.uniform1f(u.channelShift, params.channelShift); - - const rnd = seedrandom(params.seed.toString()); - - for (let i = 0; i < params.amount; i++) { - const o = gl.getUniformLocation(program, `u_shiftOrigins[${i.toString()}]`); - gl.uniform1f(o, rnd()); - - const s = gl.getUniformLocation(program, `u_shiftStrengths[${i.toString()}]`); - gl.uniform1f(s, (1 - (rnd() * 2)) * params.strength); - - const h = gl.getUniformLocation(program, `u_shiftHeights[${i.toString()}]`); - gl.uniform1f(h, rnd() * params.size); - } - }, -}); diff --git a/packages/frontend/src/utility/image-effector/fxs/tearing.ts b/packages/frontend/src/utility/image-effector/fxs/tearing.ts new file mode 100644 index 0000000000..d5f1e062ec --- /dev/null +++ b/packages/frontend/src/utility/image-effector/fxs/tearing.ts @@ -0,0 +1,99 @@ +/* + * SPDX-FileCopyrightText: syuilo and misskey-project + * SPDX-License-Identifier: AGPL-3.0-only + */ + +import seedrandom from 'seedrandom'; +import { defineImageEffectorFx } from '../ImageEffector.js'; +import { i18n } from '@/i18n.js'; + +const shader = `#version 300 es +precision mediump float; + +in vec2 in_uv; +uniform sampler2D in_texture; +uniform vec2 in_resolution; +uniform int u_amount; +uniform float u_shiftStrengths[128]; +uniform float u_shiftOrigins[128]; +uniform float u_shiftHeights[128]; +uniform float u_channelShift; +out vec4 out_color; + +void main() { + float v = 0.0; + + for (int i = 0; i < u_amount; i++) { + if (in_uv.y > (u_shiftOrigins[i] - u_shiftHeights[i]) && in_uv.y < (u_shiftOrigins[i] + u_shiftHeights[i])) { + v += u_shiftStrengths[i]; + } + } + + float r = texture(in_texture, vec2(in_uv.x + (v * (1.0 + u_channelShift)), in_uv.y)).r; + float g = texture(in_texture, vec2(in_uv.x + v, in_uv.y)).g; + float b = texture(in_texture, vec2(in_uv.x + (v * (1.0 + (u_channelShift / 2.0))), in_uv.y)).b; + float a = texture(in_texture, vec2(in_uv.x + v, in_uv.y)).a; + out_color = vec4(r, g, b, a); +} +`; + +export const FX_tearing = defineImageEffectorFx({ + id: 'tearing' as const, + name: i18n.ts._imageEffector._fxs.glitch + ': ' + i18n.ts._imageEffector._fxs.tearing, + shader, + uniforms: ['amount', 'channelShift'] as const, + params: { + amount: { + type: 'number' as const, + default: 3, + min: 1, + max: 100, + step: 1, + }, + strength: { + type: 'number' as const, + default: 0.05, + min: -1, + max: 1, + step: 0.01, + toViewValue: v => Math.round(v * 100) + '%', + }, + size: { + type: 'number' as const, + default: 0.2, + min: 0, + max: 1, + step: 0.01, + toViewValue: v => Math.round(v * 100) + '%', + }, + channelShift: { + type: 'number' as const, + default: 0.5, + min: 0, + max: 10, + step: 0.01, + toViewValue: v => Math.round(v * 100) + '%', + }, + seed: { + type: 'seed' as const, + default: 100, + }, + }, + main: ({ gl, program, u, params }) => { + gl.uniform1i(u.amount, params.amount); + gl.uniform1f(u.channelShift, params.channelShift); + + const rnd = seedrandom(params.seed.toString()); + + for (let i = 0; i < params.amount; i++) { + const o = gl.getUniformLocation(program, `u_shiftOrigins[${i.toString()}]`); + gl.uniform1f(o, rnd()); + + const s = gl.getUniformLocation(program, `u_shiftStrengths[${i.toString()}]`); + gl.uniform1f(s, (1 - (rnd() * 2)) * params.strength); + + const h = gl.getUniformLocation(program, `u_shiftHeights[${i.toString()}]`); + gl.uniform1f(h, rnd() * params.size); + } + }, +}); -- cgit v1.2.3-freya