From 4e5df659312026367079fa460eee07ccdfc89f6c Mon Sep 17 00:00:00 2001 From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com> Date: Wed, 4 Jun 2025 12:53:07 +0900 Subject: [PATCH] =?UTF-8?q?Revert=20"refactor:=20=E3=82=B7=E3=82=A7?= =?UTF-8?q?=E3=83=BC=E3=83=80=E3=83=BC=E3=83=95=E3=82=A1=E3=82=A4=E3=83=AB?= =?UTF-8?q?=E3=82=92lazy-loading=E3=81=A7=E3=81=8D=E3=82=8B=E3=82=88?= =?UTF-8?q?=E3=81=86=E3=81=AB"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This reverts commit a1ab2fa38c2b7485c069f9cd089bc7de59416c9d. --- .../src/components/MkImageEffectorDialog.vue | 12 +-- .../src/components/MkUploaderDialog.vue | 2 +- .../pages/settings/drive.WatermarkItem.vue | 4 +- .../utility/image-effector/ImageEffector.ts | 41 +++------- .../src/utility/image-effector/fxs.ts | 4 +- .../utility/image-effector/fxs/checker.glsl | 43 ---------- .../src/utility/image-effector/fxs/checker.ts | 42 +++++++++- .../fxs/chromaticAberration.glsl | 48 ----------- .../image-effector/fxs/chromaticAberration.ts | 47 ++++++++++- .../image-effector/fxs/colorClamp.glsl | 22 ----- .../utility/image-effector/fxs/colorClamp.ts | 21 ++++- .../fxs/colorClampAdvanced.glsl | 26 ------ .../image-effector/fxs/colorClampAdvanced.ts | 25 +++++- .../utility/image-effector/fxs/distort.glsl | 26 ------ .../src/utility/image-effector/fxs/distort.ts | 25 +++++- .../utility/image-effector/fxs/glitch.glsl | 33 -------- .../src/utility/image-effector/fxs/glitch.ts | 32 +++++++- .../utility/image-effector/fxs/grayscale.glsl | 22 ----- .../utility/image-effector/fxs/grayscale.ts | 21 ++++- .../utility/image-effector/fxs/invert.glsl | 23 ------ .../src/utility/image-effector/fxs/invert.ts | 22 ++++- .../utility/image-effector/fxs/mirror.glsl | 31 ------- .../src/utility/image-effector/fxs/mirror.ts | 30 ++++++- .../utility/image-effector/fxs/polkadot.glsl | 75 ----------------- .../utility/image-effector/fxs/polkadot.ts | 74 ++++++++++++++++- .../utility/image-effector/fxs/stripe.glsl | 45 ----------- .../src/utility/image-effector/fxs/stripe.ts | 44 +++++++++- .../utility/image-effector/fxs/threshold.glsl | 23 ------ .../utility/image-effector/fxs/threshold.ts | 22 ++++- .../fxs/watermarkPlacement.glsl | 80 ------------------- .../image-effector/fxs/watermarkPlacement.ts | 79 +++++++++++++++++- .../utility/image-effector/fxs/zoomLines.glsl | 33 -------- .../utility/image-effector/fxs/zoomLines.ts | 32 +++++++- packages/frontend/src/utility/watermark.ts | 6 +- 34 files changed, 529 insertions(+), 586 deletions(-) delete mode 100644 packages/frontend/src/utility/image-effector/fxs/checker.glsl delete mode 100644 packages/frontend/src/utility/image-effector/fxs/chromaticAberration.glsl delete mode 100644 packages/frontend/src/utility/image-effector/fxs/colorClamp.glsl delete mode 100644 packages/frontend/src/utility/image-effector/fxs/colorClampAdvanced.glsl delete mode 100644 packages/frontend/src/utility/image-effector/fxs/distort.glsl delete mode 100644 packages/frontend/src/utility/image-effector/fxs/glitch.glsl delete mode 100644 packages/frontend/src/utility/image-effector/fxs/grayscale.glsl delete mode 100644 packages/frontend/src/utility/image-effector/fxs/invert.glsl delete mode 100644 packages/frontend/src/utility/image-effector/fxs/mirror.glsl delete mode 100644 packages/frontend/src/utility/image-effector/fxs/polkadot.glsl delete mode 100644 packages/frontend/src/utility/image-effector/fxs/stripe.glsl delete mode 100644 packages/frontend/src/utility/image-effector/fxs/threshold.glsl delete mode 100644 packages/frontend/src/utility/image-effector/fxs/watermarkPlacement.glsl delete mode 100644 packages/frontend/src/utility/image-effector/fxs/zoomLines.glsl diff --git a/packages/frontend/src/components/MkImageEffectorDialog.vue b/packages/frontend/src/components/MkImageEffectorDialog.vue index de2c92bbd6..42502ba449 100644 --- a/packages/frontend/src/components/MkImageEffectorDialog.vue +++ b/packages/frontend/src/components/MkImageEffectorDialog.vue @@ -166,7 +166,7 @@ onMounted(async () => { await renderer.setLayers(layers); - await renderer.render(); + renderer.render(); closeWaiting(); }); @@ -193,7 +193,7 @@ async function save() { await nextTick(); // waitingがレンダリングされるまで待つ renderer.changeResolution(imageBitmap.width, imageBitmap.height); // 本番レンダリングのためオリジナル画質に戻す - await renderer.render(); // toBlobの直前にレンダリングしないと何故か壊れる + renderer.render(); // toBlobの直前にレンダリングしないと何故か壊れる canvasEl.value.toBlob((blob) => { emit('ok', new File([blob!], `image-${Date.now()}.png`, { type: 'image/png' })); dialog.value?.close(); @@ -202,14 +202,14 @@ async function save() { } const enabled = ref(true); -watch(enabled, async () => { +watch(enabled, () => { if (renderer != null) { if (enabled.value) { - await renderer.setLayers(layers); + renderer.setLayers(layers); } else { - await renderer.setLayers([]); + renderer.setLayers([]); } - await renderer.render(); + renderer.render(); } }); diff --git a/packages/frontend/src/components/MkUploaderDialog.vue b/packages/frontend/src/components/MkUploaderDialog.vue index c14c39cf4e..4c4bc26bfd 100644 --- a/packages/frontend/src/components/MkUploaderDialog.vue +++ b/packages/frontend/src/components/MkUploaderDialog.vue @@ -561,7 +561,7 @@ async function preprocess(item: (typeof items)['value'][number]): Promise await renderer.setLayers(preset.layers); - await renderer.render(); + renderer.render(); file = await new Promise((resolve) => { canvas.toBlob((blob) => { diff --git a/packages/frontend/src/pages/settings/drive.WatermarkItem.vue b/packages/frontend/src/pages/settings/drive.WatermarkItem.vue index 7123b214f1..b466f35fc5 100644 --- a/packages/frontend/src/pages/settings/drive.WatermarkItem.vue +++ b/packages/frontend/src/pages/settings/drive.WatermarkItem.vue @@ -80,7 +80,7 @@ onMounted(() => { await renderer.setLayers(props.preset.layers); - await renderer.render(); + renderer.render(); }, { immediate: true }); }; }); @@ -95,7 +95,7 @@ onUnmounted(() => { watch(() => props.preset, async () => { if (renderer != null) { await renderer.setLayers(props.preset.layers); - await renderer.render(); + renderer.render(); } }, { deep: true }); diff --git a/packages/frontend/src/utility/image-effector/ImageEffector.ts b/packages/frontend/src/utility/image-effector/ImageEffector.ts index 282f36778f..319dada09a 100644 --- a/packages/frontend/src/utility/image-effector/ImageEffector.ts +++ b/packages/frontend/src/utility/image-effector/ImageEffector.ts @@ -27,7 +27,7 @@ export function defineImageEffectorFx = { id: ID; name: string; - shader: string | (() => Promise); + shader: string; uniforms: US; params: PS, main: (ctx: { @@ -196,37 +196,22 @@ export class ImageEffector fx.id === layer.fxId); if (fx == null) return; const cachedShader = this.shaderCache.get(fx.id); - let shaderProgram: WebGLProgram; + const shaderProgram = cachedShader ?? this.initShaderProgram(`#version 300 es + in vec2 position; + out vec2 in_uv; - if (cachedShader != null) { - shaderProgram = cachedShader; - } else { - let shaderSource: string; - - if (typeof fx.shader === 'string') { - shaderSource = fx.shader; - } else { - shaderSource = await fx.shader(); + void main() { + in_uv = (position + 1.0) / 2.0; + gl_Position = vec4(position, 0.0, 1.0); } - - shaderProgram = this.initShaderProgram(`#version 300 es - in vec2 position; - out vec2 in_uv; - - void main() { - in_uv = (position + 1.0) / 2.0; - gl_Position = vec4(position, 0.0, 1.0); - } - `, shaderSource); - } - + `, fx.shader); if (cachedShader == null) { this.shaderCache.set(fx.id, shaderProgram); } @@ -245,7 +230,7 @@ export class ImageEffector { + Object.entries(fx.params).map(([key, param]) => { return [key, layer.params[key] ?? param.default]; }), ), @@ -253,7 +238,7 @@ export class ImageEffector { + Object.entries(fx.params).map(([k, v]) => { if (v.type !== 'texture') return [k, null]; const param = getValue(layer.params, k); if (param == null) return [k, null]; @@ -265,7 +250,7 @@ export class ImageEffector>; +] as const satisfies ImageEffectorFx[]; export const WATERMARK_FXS = [ FX_watermarkPlacement, FX_stripe, FX_polkadot, FX_checker, -] satisfies ReadonlyArray>; +] as const satisfies ImageEffectorFx[]; diff --git a/packages/frontend/src/utility/image-effector/fxs/checker.glsl b/packages/frontend/src/utility/image-effector/fxs/checker.glsl deleted file mode 100644 index b1625e6b17..0000000000 --- a/packages/frontend/src/utility/image-effector/fxs/checker.glsl +++ /dev/null @@ -1,43 +0,0 @@ -/* - * SPDX-FileCopyrightText: syuilo and misskey-project - * SPDX-License-Identifier: AGPL-3.0-only - */ - -#version 300 es -precision mediump float; - -const float PI = 3.141592653589793; -const float TWO_PI = 6.283185307179586; -const float HALF_PI = 1.5707963267948966; - -in vec2 in_uv; -uniform sampler2D in_texture; -uniform vec2 in_resolution; -uniform float u_angle; -uniform float u_scale; -uniform vec3 u_color; -uniform float u_opacity; -out vec4 out_color; - -void main() { - vec4 in_color = texture(in_texture, in_uv); - float x_ratio = max(in_resolution.x / in_resolution.y, 1.0); - float y_ratio = max(in_resolution.y / in_resolution.x, 1.0); - - float angle = -(u_angle * PI); - vec2 centeredUv = (in_uv - vec2(0.5, 0.5)) * vec2(x_ratio, y_ratio); - vec2 rotatedUV = vec2( - centeredUv.x * cos(angle) - centeredUv.y * sin(angle), - centeredUv.x * sin(angle) + centeredUv.y * cos(angle) - ); - - float fmodResult = mod(floor(u_scale * rotatedUV.x) + floor(u_scale * rotatedUV.y), 2.0); - float fin = max(sign(fmodResult), 0.0); - - out_color = vec4( - mix(in_color.r, u_color.r, fin * u_opacity), - mix(in_color.g, u_color.g, fin * u_opacity), - mix(in_color.b, u_color.b, fin * u_opacity), - in_color.a - ); -} diff --git a/packages/frontend/src/utility/image-effector/fxs/checker.ts b/packages/frontend/src/utility/image-effector/fxs/checker.ts index 9b1210fd56..b799bd0d13 100644 --- a/packages/frontend/src/utility/image-effector/fxs/checker.ts +++ b/packages/frontend/src/utility/image-effector/fxs/checker.ts @@ -6,10 +6,50 @@ import { defineImageEffectorFx } from '../ImageEffector.js'; import { i18n } from '@/i18n.js'; +const shader = `#version 300 es +precision mediump float; + +const float PI = 3.141592653589793; +const float TWO_PI = 6.283185307179586; +const float HALF_PI = 1.5707963267948966; + +in vec2 in_uv; +uniform sampler2D in_texture; +uniform vec2 in_resolution; +uniform float u_angle; +uniform float u_scale; +uniform vec3 u_color; +uniform float u_opacity; +out vec4 out_color; + +void main() { + vec4 in_color = texture(in_texture, in_uv); + float x_ratio = max(in_resolution.x / in_resolution.y, 1.0); + float y_ratio = max(in_resolution.y / in_resolution.x, 1.0); + + float angle = -(u_angle * PI); + vec2 centeredUv = (in_uv - vec2(0.5, 0.5)) * vec2(x_ratio, y_ratio); + vec2 rotatedUV = vec2( + centeredUv.x * cos(angle) - centeredUv.y * sin(angle), + centeredUv.x * sin(angle) + centeredUv.y * cos(angle) + ); + + float fmodResult = mod(floor(u_scale * rotatedUV.x) + floor(u_scale * rotatedUV.y), 2.0); + float fin = max(sign(fmodResult), 0.0); + + out_color = vec4( + mix(in_color.r, u_color.r, fin * u_opacity), + mix(in_color.g, u_color.g, fin * u_opacity), + mix(in_color.b, u_color.b, fin * u_opacity), + in_color.a + ); +} +`; + export const FX_checker = defineImageEffectorFx({ id: 'checker' as const, name: i18n.ts._imageEffector._fxs.checker, - shader: () => import('./checker.glsl?raw').then(m => m.default), + shader, uniforms: ['angle', 'scale', 'color', 'opacity'] as const, params: { angle: { diff --git a/packages/frontend/src/utility/image-effector/fxs/chromaticAberration.glsl b/packages/frontend/src/utility/image-effector/fxs/chromaticAberration.glsl deleted file mode 100644 index cc5d3ddaf3..0000000000 --- a/packages/frontend/src/utility/image-effector/fxs/chromaticAberration.glsl +++ /dev/null @@ -1,48 +0,0 @@ -/* - * SPDX-FileCopyrightText: syuilo and misskey-project - * SPDX-License-Identifier: AGPL-3.0-only - */ - -#version 300 es -precision mediump float; - -in vec2 in_uv; -uniform sampler2D in_texture; -uniform vec2 in_resolution; -out vec4 out_color; -uniform float u_amount; -uniform float u_start; -uniform bool u_normalize; - -void main() { - int samples = 64; - float r_strength = 1.0; - float g_strength = 1.5; - float b_strength = 2.0; - - vec2 size = vec2(in_resolution.x, in_resolution.y); - - vec4 accumulator = vec4(0.0); - float normalisedValue = length((in_uv - 0.5) * 2.0); - float strength = clamp((normalisedValue - u_start) * (1.0 / (1.0 - u_start)), 0.0, 1.0); - - vec2 vector = (u_normalize ? normalize(in_uv - vec2(0.5)) : in_uv - vec2(0.5)); - vec2 velocity = vector * strength * u_amount; - - vec2 rOffset = -vector * strength * (u_amount * r_strength); - vec2 gOffset = -vector * strength * (u_amount * g_strength); - vec2 bOffset = -vector * strength * (u_amount * b_strength); - - for (int i = 0; i < samples; i++) { - accumulator.r += texture(in_texture, in_uv + rOffset).r; - rOffset -= velocity / float(samples); - - accumulator.g += texture(in_texture, in_uv + gOffset).g; - gOffset -= velocity / float(samples); - - accumulator.b += texture(in_texture, in_uv + bOffset).b; - bOffset -= velocity / float(samples); - } - - out_color = vec4(vec3(accumulator / float(samples)), 1.0); -} diff --git a/packages/frontend/src/utility/image-effector/fxs/chromaticAberration.ts b/packages/frontend/src/utility/image-effector/fxs/chromaticAberration.ts index 905d82bd6d..82d7d883aa 100644 --- a/packages/frontend/src/utility/image-effector/fxs/chromaticAberration.ts +++ b/packages/frontend/src/utility/image-effector/fxs/chromaticAberration.ts @@ -6,10 +6,55 @@ 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; +out vec4 out_color; +uniform float u_amount; +uniform float u_start; +uniform bool u_normalize; + +void main() { + int samples = 64; + float r_strength = 1.0; + float g_strength = 1.5; + float b_strength = 2.0; + + vec2 size = vec2(in_resolution.x, in_resolution.y); + + vec4 accumulator = vec4(0.0); + float normalisedValue = length((in_uv - 0.5) * 2.0); + float strength = clamp((normalisedValue - u_start) * (1.0 / (1.0 - u_start)), 0.0, 1.0); + + vec2 vector = (u_normalize ? normalize(in_uv - vec2(0.5)) : in_uv - vec2(0.5)); + vec2 velocity = vector * strength * u_amount; + + vec2 rOffset = -vector * strength * (u_amount * r_strength); + vec2 gOffset = -vector * strength * (u_amount * g_strength); + vec2 bOffset = -vector * strength * (u_amount * b_strength); + + for (int i = 0; i < samples; i++) { + accumulator.r += texture(in_texture, in_uv + rOffset).r; + rOffset -= velocity / float(samples); + + accumulator.g += texture(in_texture, in_uv + gOffset).g; + gOffset -= velocity / float(samples); + + accumulator.b += texture(in_texture, in_uv + bOffset).b; + bOffset -= velocity / float(samples); + } + + out_color = vec4(vec3(accumulator / float(samples)), 1.0); +} +`; + export const FX_chromaticAberration = defineImageEffectorFx({ id: 'chromaticAberration' as const, name: i18n.ts._imageEffector._fxs.chromaticAberration, - shader: () => import('./chromaticAberration.glsl?raw').then(m => m.default), + shader, uniforms: ['amount', 'start', 'normalize'] as const, params: { normalize: { diff --git a/packages/frontend/src/utility/image-effector/fxs/colorClamp.glsl b/packages/frontend/src/utility/image-effector/fxs/colorClamp.glsl deleted file mode 100644 index b069124177..0000000000 --- a/packages/frontend/src/utility/image-effector/fxs/colorClamp.glsl +++ /dev/null @@ -1,22 +0,0 @@ -/* - * SPDX-FileCopyrightText: syuilo and misskey-project - * SPDX-License-Identifier: AGPL-3.0-only - */ - -#version 300 es -precision mediump float; - -in vec2 in_uv; -uniform sampler2D in_texture; -uniform vec2 in_resolution; -uniform float u_max; -uniform float u_min; -out vec4 out_color; - -void main() { - vec4 in_color = texture(in_texture, in_uv); - float r = min(max(in_color.r, u_min), u_max); - float g = min(max(in_color.g, u_min), u_max); - float b = min(max(in_color.b, u_min), u_max); - out_color = vec4(r, g, b, in_color.a); -} diff --git a/packages/frontend/src/utility/image-effector/fxs/colorClamp.ts b/packages/frontend/src/utility/image-effector/fxs/colorClamp.ts index b53def8a81..5393d73df0 100644 --- a/packages/frontend/src/utility/image-effector/fxs/colorClamp.ts +++ b/packages/frontend/src/utility/image-effector/fxs/colorClamp.ts @@ -6,10 +6,29 @@ 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 float u_max; +uniform float u_min; +out vec4 out_color; + +void main() { + vec4 in_color = texture(in_texture, in_uv); + float r = min(max(in_color.r, u_min), u_max); + float g = min(max(in_color.g, u_min), u_max); + float b = min(max(in_color.b, u_min), u_max); + out_color = vec4(r, g, b, in_color.a); +} +`; + export const FX_colorClamp = defineImageEffectorFx({ id: 'colorClamp' as const, name: i18n.ts._imageEffector._fxs.colorClamp, - shader: () => import('./colorClamp.glsl?raw').then(m => m.default), + shader, uniforms: ['max', 'min'] as const, params: { max: { diff --git a/packages/frontend/src/utility/image-effector/fxs/colorClampAdvanced.glsl b/packages/frontend/src/utility/image-effector/fxs/colorClampAdvanced.glsl deleted file mode 100644 index f9c0ed9d4d..0000000000 --- a/packages/frontend/src/utility/image-effector/fxs/colorClampAdvanced.glsl +++ /dev/null @@ -1,26 +0,0 @@ -/* - * SPDX-FileCopyrightText: syuilo and misskey-project - * SPDX-License-Identifier: AGPL-3.0-only - */ - -#version 300 es -precision mediump float; - -in vec2 in_uv; -uniform sampler2D in_texture; -uniform vec2 in_resolution; -uniform float u_rMax; -uniform float u_rMin; -uniform float u_gMax; -uniform float u_gMin; -uniform float u_bMax; -uniform float u_bMin; -out vec4 out_color; - -void main() { - vec4 in_color = texture(in_texture, in_uv); - float r = min(max(in_color.r, u_rMin), u_rMax); - float g = min(max(in_color.g, u_gMin), u_gMax); - float b = min(max(in_color.b, u_bMin), u_bMax); - out_color = vec4(r, g, b, in_color.a); -} diff --git a/packages/frontend/src/utility/image-effector/fxs/colorClampAdvanced.ts b/packages/frontend/src/utility/image-effector/fxs/colorClampAdvanced.ts index ea318ab0e2..c66d75a83f 100644 --- a/packages/frontend/src/utility/image-effector/fxs/colorClampAdvanced.ts +++ b/packages/frontend/src/utility/image-effector/fxs/colorClampAdvanced.ts @@ -6,10 +6,33 @@ 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 float u_rMax; +uniform float u_rMin; +uniform float u_gMax; +uniform float u_gMin; +uniform float u_bMax; +uniform float u_bMin; +out vec4 out_color; + +void main() { + vec4 in_color = texture(in_texture, in_uv); + float r = min(max(in_color.r, u_rMin), u_rMax); + float g = min(max(in_color.g, u_gMin), u_gMax); + float b = min(max(in_color.b, u_bMin), u_bMax); + out_color = vec4(r, g, b, in_color.a); +} +`; + export const FX_colorClampAdvanced = defineImageEffectorFx({ id: 'colorClampAdvanced' as const, name: i18n.ts._imageEffector._fxs.colorClampAdvanced, - shader: () => import('./colorClampAdvanced.glsl?raw').then(m => m.default), + shader, uniforms: ['rMax', 'rMin', 'gMax', 'gMin', 'bMax', 'bMin'] as const, params: { rMax: { diff --git a/packages/frontend/src/utility/image-effector/fxs/distort.glsl b/packages/frontend/src/utility/image-effector/fxs/distort.glsl deleted file mode 100644 index 9f27fda5c9..0000000000 --- a/packages/frontend/src/utility/image-effector/fxs/distort.glsl +++ /dev/null @@ -1,26 +0,0 @@ -/* - * SPDX-FileCopyrightText: syuilo and misskey-project - * SPDX-License-Identifier: AGPL-3.0-only - */ - -#version 300 es -precision mediump float; - -in vec2 in_uv; -uniform sampler2D in_texture; -uniform vec2 in_resolution; -uniform float u_phase; -uniform float u_frequency; -uniform float u_strength; -uniform int u_direction; // 0: vertical, 1: horizontal -out vec4 out_color; - -void main() { - float v = u_direction == 0 ? - sin(u_phase + in_uv.y * u_frequency) * u_strength : - sin(u_phase + in_uv.x * u_frequency) * u_strength; - vec4 in_color = u_direction == 0 ? - texture(in_texture, vec2(in_uv.x + v, in_uv.y)) : - texture(in_texture, vec2(in_uv.x, in_uv.y + v)); - out_color = in_color; -} diff --git a/packages/frontend/src/utility/image-effector/fxs/distort.ts b/packages/frontend/src/utility/image-effector/fxs/distort.ts index 21ec4e130a..f91287c038 100644 --- a/packages/frontend/src/utility/image-effector/fxs/distort.ts +++ b/packages/frontend/src/utility/image-effector/fxs/distort.ts @@ -6,10 +6,33 @@ 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 float u_phase; +uniform float u_frequency; +uniform float u_strength; +uniform int u_direction; // 0: vertical, 1: horizontal +out vec4 out_color; + +void main() { + float v = u_direction == 0 ? + sin(u_phase + in_uv.y * u_frequency) * u_strength : + sin(u_phase + in_uv.x * u_frequency) * u_strength; + vec4 in_color = u_direction == 0 ? + texture(in_texture, vec2(in_uv.x + v, in_uv.y)) : + texture(in_texture, vec2(in_uv.x, in_uv.y + v)); + out_color = in_color; +} +`; + export const FX_distort = defineImageEffectorFx({ id: 'distort' as const, name: i18n.ts._imageEffector._fxs.distort, - shader: () => import('./distort.glsl?raw').then(m => m.default), + shader, uniforms: ['phase', 'frequency', 'strength', 'direction'] as const, params: { direction: { diff --git a/packages/frontend/src/utility/image-effector/fxs/glitch.glsl b/packages/frontend/src/utility/image-effector/fxs/glitch.glsl deleted file mode 100644 index 1ce8c21d63..0000000000 --- a/packages/frontend/src/utility/image-effector/fxs/glitch.glsl +++ /dev/null @@ -1,33 +0,0 @@ -/* - * SPDX-FileCopyrightText: syuilo and misskey-project - * SPDX-License-Identifier: AGPL-3.0-only - */ - -#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); -} diff --git a/packages/frontend/src/utility/image-effector/fxs/glitch.ts b/packages/frontend/src/utility/image-effector/fxs/glitch.ts index 17b898b249..e4939a4302 100644 --- a/packages/frontend/src/utility/image-effector/fxs/glitch.ts +++ b/packages/frontend/src/utility/image-effector/fxs/glitch.ts @@ -7,10 +7,40 @@ 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: () => import('./glitch.glsl?raw').then(m => m.default), + shader, uniforms: ['amount', 'channelShift'] as const, params: { amount: { diff --git a/packages/frontend/src/utility/image-effector/fxs/grayscale.glsl b/packages/frontend/src/utility/image-effector/fxs/grayscale.glsl deleted file mode 100644 index 4d37e33961..0000000000 --- a/packages/frontend/src/utility/image-effector/fxs/grayscale.glsl +++ /dev/null @@ -1,22 +0,0 @@ -/* - * SPDX-FileCopyrightText: syuilo and misskey-project - * SPDX-License-Identifier: AGPL-3.0-only - */ - -#version 300 es -precision mediump float; - -in vec2 in_uv; -uniform sampler2D in_texture; -uniform vec2 in_resolution; -out vec4 out_color; - -float getBrightness(vec4 color) { - return (color.r + color.g + color.b) / 3.0; -} - -void main() { - vec4 in_color = texture(in_texture, in_uv); - float brightness = getBrightness(in_color); - out_color = vec4(brightness, brightness, brightness, in_color.a); -} diff --git a/packages/frontend/src/utility/image-effector/fxs/grayscale.ts b/packages/frontend/src/utility/image-effector/fxs/grayscale.ts index 38c2230a27..8f33706ae7 100644 --- a/packages/frontend/src/utility/image-effector/fxs/grayscale.ts +++ b/packages/frontend/src/utility/image-effector/fxs/grayscale.ts @@ -6,10 +6,29 @@ 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; +out vec4 out_color; + +float getBrightness(vec4 color) { + return (color.r + color.g + color.b) / 3.0; +} + +void main() { + vec4 in_color = texture(in_texture, in_uv); + float brightness = getBrightness(in_color); + out_color = vec4(brightness, brightness, brightness, in_color.a); +} +`; + export const FX_grayscale = defineImageEffectorFx({ id: 'grayscale' as const, name: i18n.ts._imageEffector._fxs.grayscale, - shader: () => import('./grayscale.glsl?raw').then(m => m.default), + shader, uniforms: [] as const, params: { }, diff --git a/packages/frontend/src/utility/image-effector/fxs/invert.glsl b/packages/frontend/src/utility/image-effector/fxs/invert.glsl deleted file mode 100644 index 38726d3c87..0000000000 --- a/packages/frontend/src/utility/image-effector/fxs/invert.glsl +++ /dev/null @@ -1,23 +0,0 @@ -/* - * SPDX-FileCopyrightText: syuilo and misskey-project - * SPDX-License-Identifier: AGPL-3.0-only - */ - -#version 300 es -precision mediump float; - -in vec2 in_uv; -uniform sampler2D in_texture; -uniform vec2 in_resolution; -uniform bool u_r; -uniform bool u_g; -uniform bool u_b; -out vec4 out_color; - -void main() { - vec4 in_color = texture(in_texture, in_uv); - out_color.r = u_r ? 1.0 - in_color.r : in_color.r; - out_color.g = u_g ? 1.0 - in_color.g : in_color.g; - out_color.b = u_b ? 1.0 - in_color.b : in_color.b; - out_color.a = in_color.a; -} diff --git a/packages/frontend/src/utility/image-effector/fxs/invert.ts b/packages/frontend/src/utility/image-effector/fxs/invert.ts index 65e6e8d4c7..220a2dea30 100644 --- a/packages/frontend/src/utility/image-effector/fxs/invert.ts +++ b/packages/frontend/src/utility/image-effector/fxs/invert.ts @@ -6,10 +6,30 @@ 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 bool u_r; +uniform bool u_g; +uniform bool u_b; +out vec4 out_color; + +void main() { + vec4 in_color = texture(in_texture, in_uv); + out_color.r = u_r ? 1.0 - in_color.r : in_color.r; + out_color.g = u_g ? 1.0 - in_color.g : in_color.g; + out_color.b = u_b ? 1.0 - in_color.b : in_color.b; + out_color.a = in_color.a; +} +`; + export const FX_invert = defineImageEffectorFx({ id: 'invert' as const, name: i18n.ts._imageEffector._fxs.invert, - shader: () => import('./invert.glsl?raw').then(m => m.default), + shader, uniforms: ['r', 'g', 'b'] as const, params: { r: { diff --git a/packages/frontend/src/utility/image-effector/fxs/mirror.glsl b/packages/frontend/src/utility/image-effector/fxs/mirror.glsl deleted file mode 100644 index 4ef807aaba..0000000000 --- a/packages/frontend/src/utility/image-effector/fxs/mirror.glsl +++ /dev/null @@ -1,31 +0,0 @@ -/* - * SPDX-FileCopyrightText: syuilo and misskey-project - * SPDX-License-Identifier: AGPL-3.0-only - */ - -#version 300 es -precision mediump float; - -in vec2 in_uv; -uniform sampler2D in_texture; -uniform vec2 in_resolution; -uniform int u_h; -uniform int u_v; -out vec4 out_color; - -void main() { - vec2 uv = in_uv; - if (u_h == -1 && in_uv.x > 0.5) { - uv.x = 1.0 - uv.x; - } - if (u_h == 1 && in_uv.x < 0.5) { - uv.x = 1.0 - uv.x; - } - if (u_v == -1 && in_uv.y > 0.5) { - uv.y = 1.0 - uv.y; - } - if (u_v == 1 && in_uv.y < 0.5) { - uv.y = 1.0 - uv.y; - } - out_color = texture(in_texture, uv); -} diff --git a/packages/frontend/src/utility/image-effector/fxs/mirror.ts b/packages/frontend/src/utility/image-effector/fxs/mirror.ts index 4220a6ac62..5946a2e0dc 100644 --- a/packages/frontend/src/utility/image-effector/fxs/mirror.ts +++ b/packages/frontend/src/utility/image-effector/fxs/mirror.ts @@ -6,10 +6,38 @@ 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_h; +uniform int u_v; +out vec4 out_color; + +void main() { + vec2 uv = in_uv; + if (u_h == -1 && in_uv.x > 0.5) { + uv.x = 1.0 - uv.x; + } + if (u_h == 1 && in_uv.x < 0.5) { + uv.x = 1.0 - uv.x; + } + if (u_v == -1 && in_uv.y > 0.5) { + uv.y = 1.0 - uv.y; + } + if (u_v == 1 && in_uv.y < 0.5) { + uv.y = 1.0 - uv.y; + } + out_color = texture(in_texture, uv); +} +`; + export const FX_mirror = defineImageEffectorFx({ id: 'mirror' as const, name: i18n.ts._imageEffector._fxs.mirror, - shader: () => import('./mirror.glsl?raw').then(m => m.default), + shader, uniforms: ['h', 'v'] as const, params: { h: { diff --git a/packages/frontend/src/utility/image-effector/fxs/polkadot.glsl b/packages/frontend/src/utility/image-effector/fxs/polkadot.glsl deleted file mode 100644 index a7c7940d70..0000000000 --- a/packages/frontend/src/utility/image-effector/fxs/polkadot.glsl +++ /dev/null @@ -1,75 +0,0 @@ -/* - * SPDX-FileCopyrightText: syuilo and misskey-project - * SPDX-License-Identifier: AGPL-3.0-only - */ - -#version 300 es -precision mediump float; - -const float PI = 3.141592653589793; -const float TWO_PI = 6.283185307179586; -const float HALF_PI = 1.5707963267948966; - -in vec2 in_uv; -uniform sampler2D in_texture; -uniform vec2 in_resolution; -uniform float u_angle; -uniform float u_scale; -uniform float u_major_radius; -uniform float u_major_opacity; -uniform float u_minor_divisions; -uniform float u_minor_radius; -uniform float u_minor_opacity; -uniform vec3 u_color; -out vec4 out_color; - -void main() { - vec4 in_color = texture(in_texture, in_uv); - float x_ratio = max(in_resolution.x / in_resolution.y, 1.0); - float y_ratio = max(in_resolution.y / in_resolution.x, 1.0); - - float angle = -(u_angle * PI); - vec2 centeredUv = (in_uv - vec2(0.5, 0.5)) * vec2(x_ratio, y_ratio); - vec2 rotatedUV = vec2( - centeredUv.x * cos(angle) - centeredUv.y * sin(angle), - centeredUv.x * sin(angle) + centeredUv.y * cos(angle) - ); - - float major_modX = mod(rotatedUV.x, (1.0 / u_scale)); - float major_modY = mod(rotatedUV.y, (1.0 / u_scale)); - float major_threshold = ((u_major_radius / 2.0) / u_scale); - if ( - length(vec2(major_modX, major_modY)) < major_threshold || - length(vec2((1.0 / u_scale) - major_modX, major_modY)) < major_threshold || - length(vec2(major_modX, (1.0 / u_scale) - major_modY)) < major_threshold || - length(vec2((1.0 / u_scale) - major_modX, (1.0 / u_scale) - major_modY)) < major_threshold - ) { - out_color = vec4( - mix(in_color.r, u_color.r, u_major_opacity), - mix(in_color.g, u_color.g, u_major_opacity), - mix(in_color.b, u_color.b, u_major_opacity), - in_color.a - ); - return; - } - - float minor_modX = mod(rotatedUV.x, (1.0 / u_scale / u_minor_divisions)); - float minor_modY = mod(rotatedUV.y, (1.0 / u_scale / u_minor_divisions)); - float minor_threshold = ((u_minor_radius / 2.0) / (u_minor_divisions * u_scale)); - if ( - length(vec2(minor_modX, minor_modY)) < minor_threshold || - length(vec2((1.0 / u_scale / u_minor_divisions) - minor_modX, minor_modY)) < minor_threshold || - length(vec2(minor_modX, (1.0 / u_scale / u_minor_divisions) - minor_modY)) < minor_threshold || - length(vec2((1.0 / u_scale / u_minor_divisions) - minor_modX, (1.0 / u_scale / u_minor_divisions) - minor_modY)) < minor_threshold - ) { - out_color = vec4( - mix(in_color.r, u_color.r, u_minor_opacity), - mix(in_color.g, u_color.g, u_minor_opacity), - mix(in_color.b, u_color.b, u_minor_opacity), - in_color.a - ); - return; - } - - out_color = in_color; -} diff --git a/packages/frontend/src/utility/image-effector/fxs/polkadot.ts b/packages/frontend/src/utility/image-effector/fxs/polkadot.ts index c6a4cff5cd..198dd9bad0 100644 --- a/packages/frontend/src/utility/image-effector/fxs/polkadot.ts +++ b/packages/frontend/src/utility/image-effector/fxs/polkadot.ts @@ -6,10 +6,82 @@ import { defineImageEffectorFx } from '../ImageEffector.js'; import { i18n } from '@/i18n.js'; +const shader = `#version 300 es +precision mediump float; + +const float PI = 3.141592653589793; +const float TWO_PI = 6.283185307179586; +const float HALF_PI = 1.5707963267948966; + +in vec2 in_uv; +uniform sampler2D in_texture; +uniform vec2 in_resolution; +uniform float u_angle; +uniform float u_scale; +uniform float u_major_radius; +uniform float u_major_opacity; +uniform float u_minor_divisions; +uniform float u_minor_radius; +uniform float u_minor_opacity; +uniform vec3 u_color; +out vec4 out_color; + +void main() { + vec4 in_color = texture(in_texture, in_uv); + float x_ratio = max(in_resolution.x / in_resolution.y, 1.0); + float y_ratio = max(in_resolution.y / in_resolution.x, 1.0); + + float angle = -(u_angle * PI); + vec2 centeredUv = (in_uv - vec2(0.5, 0.5)) * vec2(x_ratio, y_ratio); + vec2 rotatedUV = vec2( + centeredUv.x * cos(angle) - centeredUv.y * sin(angle), + centeredUv.x * sin(angle) + centeredUv.y * cos(angle) + ); + + float major_modX = mod(rotatedUV.x, (1.0 / u_scale)); + float major_modY = mod(rotatedUV.y, (1.0 / u_scale)); + float major_threshold = ((u_major_radius / 2.0) / u_scale); + if ( + length(vec2(major_modX, major_modY)) < major_threshold || + length(vec2((1.0 / u_scale) - major_modX, major_modY)) < major_threshold || + length(vec2(major_modX, (1.0 / u_scale) - major_modY)) < major_threshold || + length(vec2((1.0 / u_scale) - major_modX, (1.0 / u_scale) - major_modY)) < major_threshold + ) { + out_color = vec4( + mix(in_color.r, u_color.r, u_major_opacity), + mix(in_color.g, u_color.g, u_major_opacity), + mix(in_color.b, u_color.b, u_major_opacity), + in_color.a + ); + return; + } + + float minor_modX = mod(rotatedUV.x, (1.0 / u_scale / u_minor_divisions)); + float minor_modY = mod(rotatedUV.y, (1.0 / u_scale / u_minor_divisions)); + float minor_threshold = ((u_minor_radius / 2.0) / (u_minor_divisions * u_scale)); + if ( + length(vec2(minor_modX, minor_modY)) < minor_threshold || + length(vec2((1.0 / u_scale / u_minor_divisions) - minor_modX, minor_modY)) < minor_threshold || + length(vec2(minor_modX, (1.0 / u_scale / u_minor_divisions) - minor_modY)) < minor_threshold || + length(vec2((1.0 / u_scale / u_minor_divisions) - minor_modX, (1.0 / u_scale / u_minor_divisions) - minor_modY)) < minor_threshold + ) { + out_color = vec4( + mix(in_color.r, u_color.r, u_minor_opacity), + mix(in_color.g, u_color.g, u_minor_opacity), + mix(in_color.b, u_color.b, u_minor_opacity), + in_color.a + ); + return; + } + + out_color = in_color; +} +`; + export const FX_polkadot = defineImageEffectorFx({ id: 'polkadot' as const, name: i18n.ts._imageEffector._fxs.polkadot, - shader: () => import('./polkadot.glsl?raw').then(m => m.default), + shader, uniforms: ['angle', 'scale', 'major_radius', 'major_opacity', 'minor_divisions', 'minor_radius', 'minor_opacity', 'color'] as const, params: { angle: { diff --git a/packages/frontend/src/utility/image-effector/fxs/stripe.glsl b/packages/frontend/src/utility/image-effector/fxs/stripe.glsl deleted file mode 100644 index d54827658c..0000000000 --- a/packages/frontend/src/utility/image-effector/fxs/stripe.glsl +++ /dev/null @@ -1,45 +0,0 @@ -/* - * SPDX-FileCopyrightText: syuilo and misskey-project - * SPDX-License-Identifier: AGPL-3.0-only - */ - -#version 300 es -precision mediump float; - -const float PI = 3.141592653589793; -const float TWO_PI = 6.283185307179586; -const float HALF_PI = 1.5707963267948966; - -in vec2 in_uv; -uniform sampler2D in_texture; -uniform vec2 in_resolution; -uniform float u_angle; -uniform float u_frequency; -uniform float u_phase; -uniform float u_threshold; -uniform vec3 u_color; -uniform float u_opacity; -out vec4 out_color; - -void main() { - vec4 in_color = texture(in_texture, in_uv); - float x_ratio = max(in_resolution.x / in_resolution.y, 1.0); - float y_ratio = max(in_resolution.y / in_resolution.x, 1.0); - - float angle = -(u_angle * PI); - vec2 centeredUv = (in_uv - vec2(0.5, 0.5)) * vec2(x_ratio, y_ratio); - vec2 rotatedUV = vec2( - centeredUv.x * cos(angle) - centeredUv.y * sin(angle), - centeredUv.x * sin(angle) + centeredUv.y * cos(angle) - ); - - float phase = u_phase * TWO_PI; - float value = (1.0 + sin((rotatedUV.x * u_frequency - HALF_PI) + phase)) / 2.0; - value = value < u_threshold ? 1.0 : 0.0; - out_color = vec4( - mix(in_color.r, u_color.r, value * u_opacity), - mix(in_color.g, u_color.g, value * u_opacity), - mix(in_color.b, u_color.b, value * u_opacity), - in_color.a - ); -} diff --git a/packages/frontend/src/utility/image-effector/fxs/stripe.ts b/packages/frontend/src/utility/image-effector/fxs/stripe.ts index 46fb98db5e..37766e185d 100644 --- a/packages/frontend/src/utility/image-effector/fxs/stripe.ts +++ b/packages/frontend/src/utility/image-effector/fxs/stripe.ts @@ -6,10 +6,52 @@ import { defineImageEffectorFx } from '../ImageEffector.js'; import { i18n } from '@/i18n.js'; +const shader = `#version 300 es +precision mediump float; + +const float PI = 3.141592653589793; +const float TWO_PI = 6.283185307179586; +const float HALF_PI = 1.5707963267948966; + +in vec2 in_uv; +uniform sampler2D in_texture; +uniform vec2 in_resolution; +uniform float u_angle; +uniform float u_frequency; +uniform float u_phase; +uniform float u_threshold; +uniform vec3 u_color; +uniform float u_opacity; +out vec4 out_color; + +void main() { + vec4 in_color = texture(in_texture, in_uv); + float x_ratio = max(in_resolution.x / in_resolution.y, 1.0); + float y_ratio = max(in_resolution.y / in_resolution.x, 1.0); + + float angle = -(u_angle * PI); + vec2 centeredUv = (in_uv - vec2(0.5, 0.5)) * vec2(x_ratio, y_ratio); + vec2 rotatedUV = vec2( + centeredUv.x * cos(angle) - centeredUv.y * sin(angle), + centeredUv.x * sin(angle) + centeredUv.y * cos(angle) + ); + + float phase = u_phase * TWO_PI; + float value = (1.0 + sin((rotatedUV.x * u_frequency - HALF_PI) + phase)) / 2.0; + value = value < u_threshold ? 1.0 : 0.0; + out_color = vec4( + mix(in_color.r, u_color.r, value * u_opacity), + mix(in_color.g, u_color.g, value * u_opacity), + mix(in_color.b, u_color.b, value * u_opacity), + in_color.a + ); +} +`; + export const FX_stripe = defineImageEffectorFx({ id: 'stripe' as const, name: i18n.ts._imageEffector._fxs.stripe, - shader: () => import('./stripe.glsl?raw').then(m => m.default), + shader, uniforms: ['angle', 'frequency', 'phase', 'threshold', 'color', 'opacity'] as const, params: { angle: { diff --git a/packages/frontend/src/utility/image-effector/fxs/threshold.glsl b/packages/frontend/src/utility/image-effector/fxs/threshold.glsl deleted file mode 100644 index f938b2d520..0000000000 --- a/packages/frontend/src/utility/image-effector/fxs/threshold.glsl +++ /dev/null @@ -1,23 +0,0 @@ -/* - * SPDX-FileCopyrightText: syuilo and misskey-project - * SPDX-License-Identifier: AGPL-3.0-only - */ - -#version 300 es -precision mediump float; - -in vec2 in_uv; -uniform sampler2D in_texture; -uniform vec2 in_resolution; -uniform float u_r; -uniform float u_g; -uniform float u_b; -out vec4 out_color; - -void main() { - vec4 in_color = texture(in_texture, in_uv); - float r = in_color.r < u_r ? 0.0 : 1.0; - float g = in_color.g < u_g ? 0.0 : 1.0; - float b = in_color.b < u_b ? 0.0 : 1.0; - out_color = vec4(r, g, b, in_color.a); -} diff --git a/packages/frontend/src/utility/image-effector/fxs/threshold.ts b/packages/frontend/src/utility/image-effector/fxs/threshold.ts index fc6d73dcb0..f2b8b107fd 100644 --- a/packages/frontend/src/utility/image-effector/fxs/threshold.ts +++ b/packages/frontend/src/utility/image-effector/fxs/threshold.ts @@ -6,10 +6,30 @@ 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 float u_r; +uniform float u_g; +uniform float u_b; +out vec4 out_color; + +void main() { + vec4 in_color = texture(in_texture, in_uv); + float r = in_color.r < u_r ? 0.0 : 1.0; + float g = in_color.g < u_g ? 0.0 : 1.0; + float b = in_color.b < u_b ? 0.0 : 1.0; + out_color = vec4(r, g, b, in_color.a); +} +`; + export const FX_threshold = defineImageEffectorFx({ id: 'threshold' as const, name: i18n.ts._imageEffector._fxs.threshold, - shader: () => import('./threshold.glsl?raw').then(m => m.default), + shader, uniforms: ['r', 'g', 'b'] as const, params: { r: { diff --git a/packages/frontend/src/utility/image-effector/fxs/watermarkPlacement.glsl b/packages/frontend/src/utility/image-effector/fxs/watermarkPlacement.glsl deleted file mode 100644 index 1bcda303c5..0000000000 --- a/packages/frontend/src/utility/image-effector/fxs/watermarkPlacement.glsl +++ /dev/null @@ -1,80 +0,0 @@ -/* - * SPDX-FileCopyrightText: syuilo and misskey-project - * SPDX-License-Identifier: AGPL-3.0-only - */ - -#version 300 es -precision mediump float; - -const float PI = 3.141592653589793; -const float TWO_PI = 6.283185307179586; -const float HALF_PI = 1.5707963267948966; - -in vec2 in_uv; -uniform sampler2D in_texture; -uniform vec2 in_resolution; -uniform sampler2D u_texture_watermark; -uniform vec2 u_resolution_watermark; -uniform float u_scale; -uniform float u_angle; -uniform float u_opacity; -uniform bool u_repeat; -uniform int u_alignX; // 0: left, 1: center, 2: right -uniform int u_alignY; // 0: top, 1: center, 2: bottom -uniform int u_fitMode; // 0: contain, 1: cover -out vec4 out_color; - -void main() { - vec4 in_color = texture(in_texture, in_uv); - float in_x_ratio = max(in_resolution.x / in_resolution.y, 1.0); - float in_y_ratio = max(in_resolution.y / in_resolution.x, 1.0); - - bool contain = u_fitMode == 0; - - float x_ratio = u_resolution_watermark.x / in_resolution.x; - float y_ratio = u_resolution_watermark.y / in_resolution.y; - - float aspect_ratio = contain ? - (min(x_ratio, y_ratio) / max(x_ratio, y_ratio)) : - (max(x_ratio, y_ratio) / min(x_ratio, y_ratio)); - - float x_scale = contain ? - (x_ratio > y_ratio ? 1.0 * u_scale : aspect_ratio * u_scale) : - (x_ratio > y_ratio ? aspect_ratio * u_scale : 1.0 * u_scale); - - float y_scale = contain ? - (y_ratio > x_ratio ? 1.0 * u_scale : aspect_ratio * u_scale) : - (y_ratio > x_ratio ? aspect_ratio * u_scale : 1.0 * u_scale); - - float x_offset = u_alignX == 0 ? x_scale / 2.0 : u_alignX == 2 ? 1.0 - (x_scale / 2.0) : 0.5; - float y_offset = u_alignY == 0 ? y_scale / 2.0 : u_alignY == 2 ? 1.0 - (y_scale / 2.0) : 0.5; - - float angle = -(u_angle * PI); - vec2 center = vec2(x_offset, y_offset); - //vec2 centeredUv = (in_uv - center) * vec2(in_x_ratio, in_y_ratio); - vec2 centeredUv = (in_uv - center); - vec2 rotatedUV = vec2( - centeredUv.x * cos(angle) - centeredUv.y * sin(angle), - centeredUv.x * sin(angle) + centeredUv.y * cos(angle) - ) + center; - - // trim - if (!u_repeat) { - bool isInside = rotatedUV.x > x_offset - (x_scale / 2.0) && rotatedUV.x < x_offset + (x_scale / 2.0) && - rotatedUV.y > y_offset - (y_scale / 2.0) && rotatedUV.y < y_offset + (y_scale / 2.0); - if (!isInside) { - out_color = in_color; - return; - } - } - - vec4 watermark_color = texture(u_texture_watermark, vec2( - (rotatedUV.x - (x_offset - (x_scale / 2.0))) / x_scale, - (rotatedUV.y - (y_offset - (y_scale / 2.0))) / y_scale - )); - - out_color.r = mix(in_color.r, watermark_color.r, u_opacity * watermark_color.a); - out_color.g = mix(in_color.g, watermark_color.g, u_opacity * watermark_color.a); - out_color.b = mix(in_color.b, watermark_color.b, u_opacity * watermark_color.a); - out_color.a = in_color.a * (1.0 - u_opacity * watermark_color.a) + watermark_color.a * u_opacity; -} diff --git a/packages/frontend/src/utility/image-effector/fxs/watermarkPlacement.ts b/packages/frontend/src/utility/image-effector/fxs/watermarkPlacement.ts index d0c901110d..1c1c95b0c5 100644 --- a/packages/frontend/src/utility/image-effector/fxs/watermarkPlacement.ts +++ b/packages/frontend/src/utility/image-effector/fxs/watermarkPlacement.ts @@ -5,10 +5,87 @@ import { defineImageEffectorFx } from '../ImageEffector.js'; +const shader = `#version 300 es +precision mediump float; + +const float PI = 3.141592653589793; +const float TWO_PI = 6.283185307179586; +const float HALF_PI = 1.5707963267948966; + +in vec2 in_uv; +uniform sampler2D in_texture; +uniform vec2 in_resolution; +uniform sampler2D u_texture_watermark; +uniform vec2 u_resolution_watermark; +uniform float u_scale; +uniform float u_angle; +uniform float u_opacity; +uniform bool u_repeat; +uniform int u_alignX; // 0: left, 1: center, 2: right +uniform int u_alignY; // 0: top, 1: center, 2: bottom +uniform int u_fitMode; // 0: contain, 1: cover +out vec4 out_color; + +void main() { + vec4 in_color = texture(in_texture, in_uv); + float in_x_ratio = max(in_resolution.x / in_resolution.y, 1.0); + float in_y_ratio = max(in_resolution.y / in_resolution.x, 1.0); + + bool contain = u_fitMode == 0; + + float x_ratio = u_resolution_watermark.x / in_resolution.x; + float y_ratio = u_resolution_watermark.y / in_resolution.y; + + float aspect_ratio = contain ? + (min(x_ratio, y_ratio) / max(x_ratio, y_ratio)) : + (max(x_ratio, y_ratio) / min(x_ratio, y_ratio)); + + float x_scale = contain ? + (x_ratio > y_ratio ? 1.0 * u_scale : aspect_ratio * u_scale) : + (x_ratio > y_ratio ? aspect_ratio * u_scale : 1.0 * u_scale); + + float y_scale = contain ? + (y_ratio > x_ratio ? 1.0 * u_scale : aspect_ratio * u_scale) : + (y_ratio > x_ratio ? aspect_ratio * u_scale : 1.0 * u_scale); + + float x_offset = u_alignX == 0 ? x_scale / 2.0 : u_alignX == 2 ? 1.0 - (x_scale / 2.0) : 0.5; + float y_offset = u_alignY == 0 ? y_scale / 2.0 : u_alignY == 2 ? 1.0 - (y_scale / 2.0) : 0.5; + + float angle = -(u_angle * PI); + vec2 center = vec2(x_offset, y_offset); + //vec2 centeredUv = (in_uv - center) * vec2(in_x_ratio, in_y_ratio); + vec2 centeredUv = (in_uv - center); + vec2 rotatedUV = vec2( + centeredUv.x * cos(angle) - centeredUv.y * sin(angle), + centeredUv.x * sin(angle) + centeredUv.y * cos(angle) + ) + center; + + // trim + if (!u_repeat) { + bool isInside = rotatedUV.x > x_offset - (x_scale / 2.0) && rotatedUV.x < x_offset + (x_scale / 2.0) && + rotatedUV.y > y_offset - (y_scale / 2.0) && rotatedUV.y < y_offset + (y_scale / 2.0); + if (!isInside) { + out_color = in_color; + return; + } + } + + vec4 watermark_color = texture(u_texture_watermark, vec2( + (rotatedUV.x - (x_offset - (x_scale / 2.0))) / x_scale, + (rotatedUV.y - (y_offset - (y_scale / 2.0))) / y_scale + )); + + out_color.r = mix(in_color.r, watermark_color.r, u_opacity * watermark_color.a); + out_color.g = mix(in_color.g, watermark_color.g, u_opacity * watermark_color.a); + out_color.b = mix(in_color.b, watermark_color.b, u_opacity * watermark_color.a); + out_color.a = in_color.a * (1.0 - u_opacity * watermark_color.a) + watermark_color.a * u_opacity; +} +`; + export const FX_watermarkPlacement = defineImageEffectorFx({ id: 'watermarkPlacement' as const, name: '(internal)', - shader: () => import('./watermarkPlacement.glsl?raw').then(m => m.default), + shader, uniforms: ['texture_watermark', 'resolution_watermark', 'scale', 'angle', 'opacity', 'repeat', 'alignX', 'alignY', 'fitMode'] as const, params: { cover: { diff --git a/packages/frontend/src/utility/image-effector/fxs/zoomLines.glsl b/packages/frontend/src/utility/image-effector/fxs/zoomLines.glsl deleted file mode 100644 index a5faf92bf4..0000000000 --- a/packages/frontend/src/utility/image-effector/fxs/zoomLines.glsl +++ /dev/null @@ -1,33 +0,0 @@ -/* - * SPDX-FileCopyrightText: syuilo and misskey-project - * SPDX-License-Identifier: AGPL-3.0-only - */ - -#version 300 es -precision mediump float; - -in vec2 in_uv; -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_maskSize; -uniform bool u_black; -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; - 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)); - 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 - ); -} diff --git a/packages/frontend/src/utility/image-effector/fxs/zoomLines.ts b/packages/frontend/src/utility/image-effector/fxs/zoomLines.ts index b52b947055..2613362a71 100644 --- a/packages/frontend/src/utility/image-effector/fxs/zoomLines.ts +++ b/packages/frontend/src/utility/image-effector/fxs/zoomLines.ts @@ -6,10 +6,40 @@ 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 vec2 u_pos; +uniform float u_frequency; +uniform bool u_thresholdEnabled; +uniform float u_threshold; +uniform float u_maskSize; +uniform bool u_black; +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; + 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)); + 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 + ); +} +`; + export const FX_zoomLines = defineImageEffectorFx({ id: 'zoomLines' as const, name: i18n.ts._imageEffector._fxs.zoomLines, - shader: () => import('./zoomLines.glsl?raw').then(m => m.default), + shader, uniforms: ['pos', 'frequency', 'thresholdEnabled', 'threshold', 'maskSize', 'black'] as const, params: { x: { diff --git a/packages/frontend/src/utility/watermark.ts b/packages/frontend/src/utility/watermark.ts index eb96244d37..a70e14d95d 100644 --- a/packages/frontend/src/utility/watermark.ts +++ b/packages/frontend/src/utility/watermark.ts @@ -163,11 +163,11 @@ export class WatermarkRenderer { public async setLayers(layers: WatermarkPreset['layers']) { this.layers = layers; await this.effector.setLayers(this.makeImageEffectorLayers()); - await this.render(); + this.render(); } - public async render(): Promise { - await this.effector.render(); + public render(): void { + this.effector.render(); } /*