From 4ba18690d7abd7eea086bb59e6cbcc8ead9e121a Mon Sep 17 00:00:00 2001 From: syuilo <4439005+syuilo@users.noreply.github.com> Date: Thu, 6 Nov 2025 20:25:17 +0900 Subject: [PATCH] =?UTF-8?q?feat(frontend):=20EXIF=E3=83=95=E3=83=AC?= =?UTF-8?q?=E3=83=BC=E3=83=A0=E6=A9=9F=E8=83=BD=20(#16725)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * wip * wip * Update ImageEffector.ts * Update image-label-renderer.ts * Update image-label-renderer.ts * wip * Update image-label-renderer.ts * wip * wip * wip * wip * wip * wip * wip * Update use-uploader.ts * Update watermark.ts * wip * wu * wip * Update image-frame-renderer.ts * wip * wip * Update image-frame-renderer.ts * Create ImageCompositor.ts * Update ImageCompositor.ts * wip * wip * Update ImageEffector.ts * wip * Update use-uploader.ts * wip * wip * wip * wip * Update fxs.ts * wip * wip * wip * Update CHANGELOG.md * wip * wip * Update MkImageEffectorDialog.vue * Update MkImageEffectorDialog.vue * Update MkImageFrameEditorDialog.vue * Update use-uploader.ts * improve error handling * Update use-uploader.ts * 🎨 * wip * wip * lazy load * lazy load * wip * wip * wip --- CHANGELOG.md | 2 + locales/index.d.ts | 176 +++++- locales/ja-JP.yml | 49 +- packages/frontend/package.json | 1 + .../src/components/MkEmbedCodeGenDialog.vue | 23 +- .../MkImageEffectorDialog.Layer.vue | 12 +- .../src/components/MkImageEffectorDialog.vue | 89 +-- .../components/MkImageFrameEditorDialog.vue | 509 ++++++++++++++++++ .../MkWatermarkEditorDialog.Layer.vue | 2 +- .../components/MkWatermarkEditorDialog.vue | 162 ++++-- .../frontend/src/composables/use-uploader.ts | 186 +++++-- packages/frontend/src/lib/ImageCompositor.ts | 313 +++++++++++ packages/frontend/src/lib/pizzax.ts | 2 + .../pages/settings/drive.ImageFrameItem.vue | 113 ++++ .../pages/settings/drive.WatermarkItem.vue | 15 +- .../frontend/src/pages/settings/drive.vue | 86 ++- packages/frontend/src/preferences/def.ts | 23 +- .../blockNoise.glsl | 0 .../blockNoise.ts | 59 +- .../blur.glsl | 0 .../blur.ts | 38 +- .../checker.glsl | 0 .../checker.ts | 31 +- .../chromaticAberration.glsl | 0 .../chromaticAberration.ts | 25 +- .../colorAdjust.glsl | 0 .../colorAdjust.ts | 34 +- .../colorClamp.glsl | 0 .../colorClamp.ts | 33 +- .../colorClampAdvanced.ts | 37 +- .../distort.glsl | 0 .../distort.ts | 31 +- .../fill.glsl | 0 .../fill.ts | 39 +- .../grayscale.glsl | 0 .../image-compositor-functions/grayscale.ts | 21 + .../invert.glsl | 0 .../invert.ts | 28 +- .../mirror.glsl | 0 .../mirror.ts | 29 +- .../pixelate.glsl | 0 .../pixelate.ts | 38 +- .../polkadot.glsl | 0 .../polkadot.ts | 44 +- .../stripe.glsl | 0 .../stripe.ts | 37 +- .../tearing.glsl | 0 .../tearing.ts | 54 +- .../threshold.glsl | 0 .../threshold.ts | 28 +- .../zoomLines.glsl | 0 .../zoomLines.ts | 40 +- .../utility/image-effector/ImageEffector.ts | 484 ++--------------- .../src/utility/image-effector/fxs.ts | 82 +-- .../utility/image-effector/fxs/grayscale.ts | 19 - .../ImageFrameRenderer.ts | 270 ++++++++++ .../utility/image-frame-renderer/frame.glsl | 61 +++ .../src/utility/image-frame-renderer/frame.ts | 57 ++ packages/frontend/src/utility/watermark.ts | 218 -------- .../utility/watermark/WatermarkRenderer.ts | 332 ++++++++++++ .../watermark.glsl} | 0 .../watermark.ts} | 63 +-- packages/frontend/src/utility/webgl.ts | 11 + pnpm-lock.yaml | 18 + 64 files changed, 2838 insertions(+), 1186 deletions(-) create mode 100644 packages/frontend/src/components/MkImageFrameEditorDialog.vue create mode 100644 packages/frontend/src/lib/ImageCompositor.ts create mode 100644 packages/frontend/src/pages/settings/drive.ImageFrameItem.vue rename packages/frontend/src/utility/{image-effector/fxs => image-compositor-functions}/blockNoise.glsl (100%) rename packages/frontend/src/utility/{image-effector/fxs => image-compositor-functions}/blockNoise.ts (83%) rename packages/frontend/src/utility/{image-effector/fxs => image-compositor-functions}/blur.glsl (100%) rename packages/frontend/src/utility/{image-effector/fxs => image-compositor-functions}/blur.ts (81%) rename packages/frontend/src/utility/{image-effector/fxs => image-compositor-functions}/checker.glsl (100%) rename packages/frontend/src/utility/{image-effector/fxs => image-compositor-functions}/checker.ts (74%) rename packages/frontend/src/utility/{image-effector/fxs => image-compositor-functions}/chromaticAberration.glsl (100%) rename packages/frontend/src/utility/{image-effector/fxs => image-compositor-functions}/chromaticAberration.ts (66%) rename packages/frontend/src/utility/{image-effector/fxs => image-compositor-functions}/colorAdjust.glsl (100%) rename packages/frontend/src/utility/{image-effector/fxs => image-compositor-functions}/colorAdjust.ts (79%) rename packages/frontend/src/utility/{image-effector/fxs => image-compositor-functions}/colorClamp.glsl (100%) rename packages/frontend/src/utility/{image-effector/fxs => image-compositor-functions}/colorClamp.ts (73%) rename packages/frontend/src/utility/{image-effector/fxs => image-compositor-functions}/colorClampAdvanced.ts (83%) rename packages/frontend/src/utility/{image-effector/fxs => image-compositor-functions}/distort.glsl (100%) rename packages/frontend/src/utility/{image-effector/fxs => image-compositor-functions}/distort.ts (76%) rename packages/frontend/src/utility/{image-effector/fxs => image-compositor-functions}/fill.glsl (100%) rename packages/frontend/src/utility/{image-effector/fxs => image-compositor-functions}/fill.ts (81%) rename packages/frontend/src/utility/{image-effector/fxs => image-compositor-functions}/grayscale.glsl (100%) create mode 100644 packages/frontend/src/utility/image-compositor-functions/grayscale.ts rename packages/frontend/src/utility/{image-effector/fxs => image-compositor-functions}/invert.glsl (100%) rename packages/frontend/src/utility/{image-effector/fxs => image-compositor-functions}/invert.ts (68%) rename packages/frontend/src/utility/{image-effector/fxs => image-compositor-functions}/mirror.glsl (100%) rename packages/frontend/src/utility/{image-effector/fxs => image-compositor-functions}/mirror.ts (63%) rename packages/frontend/src/utility/{image-effector/fxs => image-compositor-functions}/pixelate.glsl (100%) rename packages/frontend/src/utility/{image-effector/fxs => image-compositor-functions}/pixelate.ts (81%) rename packages/frontend/src/utility/{image-effector/fxs => image-compositor-functions}/polkadot.glsl (100%) rename packages/frontend/src/utility/{image-effector/fxs => image-compositor-functions}/polkadot.ts (81%) rename packages/frontend/src/utility/{image-effector/fxs => image-compositor-functions}/stripe.glsl (100%) rename packages/frontend/src/utility/{image-effector/fxs => image-compositor-functions}/stripe.ts (77%) rename packages/frontend/src/utility/{image-effector/fxs => image-compositor-functions}/tearing.glsl (100%) rename packages/frontend/src/utility/{image-effector/fxs => image-compositor-functions}/tearing.ts (82%) rename packages/frontend/src/utility/{image-effector/fxs => image-compositor-functions}/threshold.glsl (100%) rename packages/frontend/src/utility/{image-effector/fxs => image-compositor-functions}/threshold.ts (71%) rename packages/frontend/src/utility/{image-effector/fxs => image-compositor-functions}/zoomLines.glsl (100%) rename packages/frontend/src/utility/{image-effector/fxs => image-compositor-functions}/zoomLines.ts (80%) delete mode 100644 packages/frontend/src/utility/image-effector/fxs/grayscale.ts create mode 100644 packages/frontend/src/utility/image-frame-renderer/ImageFrameRenderer.ts create mode 100644 packages/frontend/src/utility/image-frame-renderer/frame.glsl create mode 100644 packages/frontend/src/utility/image-frame-renderer/frame.ts delete mode 100644 packages/frontend/src/utility/watermark.ts create mode 100644 packages/frontend/src/utility/watermark/WatermarkRenderer.ts rename packages/frontend/src/utility/{image-effector/fxs/watermarkPlacement.glsl => watermark/watermark.glsl} (100%) rename packages/frontend/src/utility/{image-effector/fxs/watermarkPlacement.ts => watermark/watermark.ts} (59%) diff --git a/CHANGELOG.md b/CHANGELOG.md index 211296bb4d..057ffd5566 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,8 @@ - Enhance: DockerのNode.jsが24.10.0に更新されました ### Client +- Feat: 画像にメタデータを含むフレームをつけられる機能 +- Enhance: プリセットを作成しなくても画像にウォーターマークを付与できるように - Enhance: 管理しているチャンネルの見分けがつきやすくなるように - Enhance: プロフィールへのリンクをユーザーポップアップのアバターに追加 - Enhance: ユーザーのノート、フォロー、フォロワーページへのリンクをユーザーポップアップに追加 diff --git a/locales/index.d.ts b/locales/index.d.ts index 43e31c16a1..e4ebfedd3d 100644 --- a/locales/index.d.ts +++ b/locales/index.d.ts @@ -5625,6 +5625,172 @@ export interface Locale extends ILocale { * あなたは管理者です */ "youAreAdmin": string; + /** + * フレーム + */ + "frame": string; + /** + * プリセット + */ + "presets": string; + /** + * ゼロ埋め + */ + "zeroPadding": string; + "_imageEditing": { + "_vars": { + /** + * ファイルのキャプション + */ + "caption": string; + /** + * ファイル名 + */ + "filename": string; + /** + * 拡張子無しファイル名 + */ + "filename_without_ext": string; + /** + * 撮影年 + */ + "year": string; + /** + * 撮影月 + */ + "month": string; + /** + * 撮影日 + */ + "day": string; + /** + * 撮影した時刻(時) + */ + "hour": string; + /** + * 撮影した時刻(分) + */ + "minute": string; + /** + * 撮影した時刻(秒) + */ + "second": string; + /** + * カメラ名 + */ + "camera_model": string; + /** + * レンズ名 + */ + "camera_lens_model": string; + /** + * 焦点距離 + */ + "camera_mm": string; + /** + * 焦点距離(35mm判換算) + */ + "camera_mm_35": string; + /** + * 絞り + */ + "camera_f": string; + /** + * シャッタースピード + */ + "camera_s": string; + /** + * ISO感度 + */ + "camera_iso": string; + /** + * 緯度 + */ + "gps_lat": string; + /** + * 経度 + */ + "gps_long": string; + }; + }; + "_imageFrameEditor": { + /** + * フレームの編集 + */ + "title": string; + /** + * 画像にフレームやメタデータを含んだラベルを追加して装飾できます。 + */ + "tip": string; + /** + * ヘッダー + */ + "header": string; + /** + * フッター + */ + "footer": string; + /** + * フチの幅 + */ + "borderThickness": string; + /** + * ラベルの幅 + */ + "labelThickness": string; + /** + * ラベルのスケール + */ + "labelScale": string; + /** + * 中央揃え + */ + "centered": string; + /** + * キャプション(大) + */ + "captionMain": string; + /** + * キャプション(小) + */ + "captionSub": string; + /** + * 利用可能な変数 + */ + "availableVariables": string; + /** + * 二次元コード + */ + "withQrCode": string; + /** + * 背景色 + */ + "backgroundColor": string; + /** + * 文字色 + */ + "textColor": string; + /** + * フォント + */ + "font": string; + /** + * セリフ + */ + "fontSerif": string; + /** + * サンセリフ + */ + "fontSansSerif": string; + /** + * 保存せずに終了しますか？ + */ + "quitWithoutSaveConfirm": string; + /** + * 画像の読み込みに失敗しました + */ + "failedToLoadImage": string; + }; "_compression": { "_quality": { /** @@ -12354,7 +12520,7 @@ export interface Locale extends ILocale { "defaultPreset": string; "_watermarkEditor": { /** - * 画像にクレジット情報などのウォーターマークを追加することができます。 + * 画像にクレジット情報などのウォーターマークを追加できます。 */ "tip": string; /** @@ -12469,6 +12635,10 @@ export interface Locale extends ILocale { * 空欄にするとアカウントのURLになります */ "leaveBlankToAccountUrl": string; + /** + * 画像の読み込みに失敗しました + */ + "failedToLoadImage": string; }; "_imageEffector": { /** @@ -12487,6 +12657,10 @@ export interface Locale extends ILocale { * 設定項目はありません */ "nothingToConfigure": string; + /** + * 画像の読み込みに失敗しました + */ + "failedToLoadImage": string; "_fxs": { /** * 色収差 diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index 0e2ae63804..d0485af208 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -1401,6 +1401,51 @@ widgets: "ウィジェット" deviceInfo: "デバイス情報" deviceInfoDescription: "技術的なお問い合わせの際に、以下の情報を併記すると問題の解決に役立つことがあります。" youAreAdmin: "あなたは管理者です" +frame: "フレーム" +presets: "プリセット" +zeroPadding: "ゼロ埋め" + +_imageEditing: + _vars: + caption: "ファイルのキャプション" + filename: "ファイル名" + filename_without_ext: "拡張子無しファイル名" + year: "撮影年" + month: "撮影月" + day: "撮影日" + hour: "撮影した時刻(時)" + minute: "撮影した時刻(分)" + second: "撮影した時刻(秒)" + camera_model: "カメラ名" + camera_lens_model: "レンズ名" + camera_mm: "焦点距離" + camera_mm_35: "焦点距離(35mm判換算)" + camera_f: "絞り" + camera_s: "シャッタースピード" + camera_iso: "ISO感度" + gps_lat: "緯度" + gps_long: "経度" + +_imageFrameEditor: + title: "フレームの編集" + tip: "画像にフレームやメタデータを含んだラベルを追加して装飾できます。" + header: "ヘッダー" + footer: "フッター" + borderThickness: "フチの幅" + labelThickness: "ラベルの幅" + labelScale: "ラベルのスケール" + centered: "中央揃え" + captionMain: "キャプション(大)" + captionSub: "キャプション(小)" + availableVariables: "利用可能な変数" + withQrCode: "二次元コード" + backgroundColor: "背景色" + textColor: "文字色" + font: "フォント" + fontSerif: "セリフ" + fontSansSerif: "サンセリフ" + quitWithoutSaveConfirm: "保存せずに終了しますか？" + failedToLoadImage: "画像の読み込みに失敗しました" _compression: _quality: @@ -3307,7 +3352,7 @@ _userLists: watermark: "ウォーターマーク" defaultPreset: "デフォルトのプリセット" _watermarkEditor: - tip: "画像にクレジット情報などのウォーターマークを追加することができます。" + tip: "画像にクレジット情報などのウォーターマークを追加できます。" quitWithoutSaveConfirm: "保存せずに終了しますか？" driveFileTypeWarn: "このファイルは対応していません" driveFileTypeWarnDescription: "画像ファイルを選択してください" @@ -3336,12 +3381,14 @@ _watermarkEditor: polkadotSubDotRadius: "サブドットの大きさ" polkadotSubDotDivisions: "サブドットの数" leaveBlankToAccountUrl: "空欄にするとアカウントのURLになります" + failedToLoadImage: "画像の読み込みに失敗しました" _imageEffector: title: "エフェクト" addEffect: "エフェクトを追加" discardChangesConfirm: "変更を破棄して終了しますか？" nothingToConfigure: "設定項目はありません" + failedToLoadImage: "画像の読み込みに失敗しました" _fxs: chromaticAberration: "色収差" diff --git a/packages/frontend/package.json b/packages/frontend/package.json index bd81d1d2c6..1ad3437e86 100644 --- a/packages/frontend/package.json +++ b/packages/frontend/package.json @@ -48,6 +48,7 @@ "estree-walker": "3.0.3", "eventemitter3": "5.0.1", "execa": "9.6.0", + "exifreader": "4.32.0", "frontend-shared": "workspace:*", "icons-subsetter": "workspace:*", "idb-keyval": "6.2.2", diff --git a/packages/frontend/src/components/MkEmbedCodeGenDialog.vue b/packages/frontend/src/components/MkEmbedCodeGenDialog.vue index 0cb8499699..4f16149caa 100644 --- a/packages/frontend/src/components/MkEmbedCodeGenDialog.vue +++ b/packages/frontend/src/components/MkEmbedCodeGenDialog.vue @@ -24,9 +24,7 @@ SPDX-License-Identifier: AGPL-3.0-only :leaveToClass="$style.transition_x_leaveTo" >
-
+
{{ i18n.ts.preview }}
@@ -91,20 +89,18 @@ import { url } from '@@/js/config.js'; import { embedRouteWithScrollbar } from '@@/js/embed-page.js'; import type { EmbeddableEntity, EmbedParams } from '@@/js/embed-page.js'; import MkModalWindow from '@/components/MkModalWindow.vue'; - import MkInput from '@/components/MkInput.vue'; import MkSelect from '@/components/MkSelect.vue'; import MkSwitch from '@/components/MkSwitch.vue'; import MkButton from '@/components/MkButton.vue'; - import MkCode from '@/components/MkCode.vue'; import MkInfo from '@/components/MkInfo.vue'; - import * as os from '@/os.js'; import { i18n } from '@/i18n.js'; import { useMkSelect } from '@/composables/use-mkselect.js'; import { copyToClipboard } from '@/utility/copy-to-clipboard.js'; import { normalizeEmbedParams, getEmbedCode } from '@/utility/get-embed-code.js'; +import { prefer } from '@/preferences.js'; const emit = defineEmits<{ (ev: 'ok'): void; @@ -314,10 +310,19 @@ onUnmounted(() => { .embedCodeGenPreviewRoot { position: relative; - background-color: var(--MI_THEME-bg); - background-size: auto auto; - background-image: repeating-linear-gradient(135deg, transparent, transparent 6px, var(--MI_THEME-panel) 6px, var(--MI_THEME-panel) 12px); cursor: not-allowed; + background-color: var(--MI_THEME-bg); + background-image: linear-gradient(135deg, transparent 30%, var(--MI_THEME-panel) 30%, var(--MI_THEME-panel) 50%, transparent 50%, transparent 80%, var(--MI_THEME-panel) 80%, var(--MI_THEME-panel) 100%); + background-size: 20px 20px; +} + +.animatedBg { + animation: bg 1.2s linear infinite; +} + +@keyframes bg { + 0% { background-position: 0 0; } + 100% { background-position: -20px -20px; } } .embedCodeGenPreviewWrapper { diff --git a/packages/frontend/src/components/MkImageEffectorDialog.Layer.vue b/packages/frontend/src/components/MkImageEffectorDialog.Layer.vue index f734325039..bc7e8b0946 100644 --- a/packages/frontend/src/components/MkImageEffectorDialog.Layer.vue +++ b/packages/frontend/src/components/MkImageEffectorDialog.Layer.vue @@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only @@ -26,14 +26,14 @@ import MkImageEffectorFxForm from '@/components/MkImageEffectorFxForm.vue'; import { FXS } from '@/utility/image-effector/fxs.js'; const layer = defineModel('layer', { required: true }); -const fx = FXS.find((fx) => fx.id === layer.value.fxId); +const fx = FXS[layer.value.fxId]; if (fx == null) { throw new Error(`Unrecognized effect: ${layer.value.fxId}`); } const emit = defineEmits<{ - (e: 'del'): void; - (e: 'swapUp'): void; - (e: 'swapDown'): void; + (ev: 'del'): void; + (ev: 'swapUp'): void; + (ev: 'swapDown'): void; }>(); diff --git a/packages/frontend/src/components/MkImageEffectorDialog.vue b/packages/frontend/src/components/MkImageEffectorDialog.vue index 19ddb81919..3d7801f925 100644 --- a/packages/frontend/src/components/MkImageEffectorDialog.vue +++ b/packages/frontend/src/components/MkImageEffectorDialog.vue @@ -18,7 +18,7 @@ SPDX-License-Identifier: AGPL-3.0-only
-
+
{{ i18n.ts.preview }}
@@ -64,6 +64,7 @@ import * as os from '@/os.js'; import { deepClone } from '@/utility/clone.js'; import { FXS } from '@/utility/image-effector/fxs.js'; import { genId } from '@/utility/id.js'; +import { prefer } from '@/preferences.js'; const props = defineProps<{ image: File; @@ -94,19 +95,19 @@ const layers = reactive([]); watch(layers, async () => { if (renderer != null) { - renderer.setLayers(layers); + renderer.render(layers); } }, { deep: true }); function addEffect(ev: MouseEvent) { - os.popupMenu(FXS.map((fx) => ({ - text: fx.name, + os.popupMenu(Object.entries(FXS).map(([id, fx]) => ({ + text: fx.uiDefinition.name, action: () => { layers.push({ id: genId(), - fxId: fx.id, - params: Object.fromEntries(Object.entries(fx.params).map(([k, v]) => [k, v.default])), - }); + fxId: id as keyof typeof FXS, + params: Object.fromEntries(Object.entries(fx.uiDefinition.params).map(([k, v]) => [k, v.default])), + } as ImageEffectorLayer); }, })), ev.currentTarget ?? ev.target); } @@ -136,7 +137,7 @@ function onLayerDelete(layer: ImageEffectorLayer) { const canvasEl = useTemplateRef('canvasEl'); -let renderer: ImageEffector | null = null; +let renderer: ImageEffector | null = null; let imageBitmap: ImageBitmap | null = null; onMounted(async () => { @@ -146,31 +147,36 @@ onMounted(async () => { await nextTick(); // waitingがレンダリングされるまで待つ - imageBitmap = await window.createImageBitmap(props.image); + try { + imageBitmap = await window.createImageBitmap(props.image); - const MAX_W = 1000; - const MAX_H = 1000; - let w = imageBitmap.width; - let h = imageBitmap.height; + const MAX_W = 1000; + const MAX_H = 1000; + let w = imageBitmap.width; + let h = imageBitmap.height; - if (w > MAX_W || h > MAX_H) { - const scale = Math.min(MAX_W / w, MAX_H / h); - w *= scale; - h *= scale; + if (w > MAX_W || h > MAX_H) { + const scale = Math.min(MAX_W / w, MAX_H / h); + w = Math.floor(w * scale); + h = Math.floor(h * scale); + } + + renderer = new ImageEffector({ + canvas: canvasEl.value, + renderWidth: w, + renderHeight: h, + image: imageBitmap, + }); + + await renderer.render(layers); + } catch (err) { + console.error(err); + os.alert({ + type: 'error', + text: i18n.ts._imageEffector.failedToLoadImage, + }); } - renderer = new ImageEffector({ - canvas: canvasEl.value, - renderWidth: w, - renderHeight: h, - image: imageBitmap, - fxs: FXS, - }); - - await renderer.setLayers(layers); - - renderer.render(); - closeWaiting(); }); @@ -196,7 +202,7 @@ async function save() { await nextTick(); // waitingがレンダリングされるまで待つ renderer.changeResolution(imageBitmap.width, imageBitmap.height); // 本番レンダリングのためオリジナル画質に戻す - renderer.render(); // toBlobの直前にレンダリングしないと何故か壊れる + await renderer.render(layers); // toBlobの直前にレンダリングしないと何故か壊れる canvasEl.value.toBlob((blob) => { emit('ok', new File([blob!], `image-${Date.now()}.png`, { type: 'image/png' })); dialog.value?.close(); @@ -208,11 +214,10 @@ const enabled = ref(true); watch(enabled, () => { if (renderer != null) { if (enabled.value) { - renderer.setLayers(layers); + renderer.render(layers); } else { - renderer.setLayers([]); + renderer.render([]); } - renderer.render(); } }); @@ -281,6 +286,7 @@ function onImagePointerdown(ev: PointerEvent) { angle: 0, opacity: 1, color: [1, 1, 1], + ellipse: false, }, }); } else if (penMode.value === 'blur') { @@ -294,6 +300,7 @@ function onImagePointerdown(ev: PointerEvent) { scaleY: 0.1, angle: 0, radius: 3, + ellipse: false, }, }); } else if (penMode.value === 'pixelate') { @@ -307,6 +314,7 @@ function onImagePointerdown(ev: PointerEvent) { scaleY: 0.1, angle: 0, strength: 0.2, + ellipse: false, }, }); } @@ -329,7 +337,7 @@ function onImagePointerdown(ev: PointerEvent) { const scaleY = Math.abs(y - startY); const layerIndex = layers.findIndex((l) => l.id === id); - const layer = layerIndex !== -1 ? layers[layerIndex] : null; + const layer = layerIndex !== -1 ? (layers[layerIndex] as Extract) : null; if (layer != null) { layer.params.offsetX = (x + startX) - 1; layer.params.offsetY = (y + startY) - 1; @@ -373,8 +381,17 @@ function onImagePointerdown(ev: PointerEvent) { .preview { position: relative; background-color: var(--MI_THEME-bg); - background-size: auto auto; - background-image: repeating-linear-gradient(135deg, transparent, transparent 6px, var(--MI_THEME-panel) 6px, var(--MI_THEME-panel) 12px); + background-image: linear-gradient(135deg, transparent 30%, var(--MI_THEME-panel) 30%, var(--MI_THEME-panel) 50%, transparent 50%, transparent 80%, var(--MI_THEME-panel) 80%, var(--MI_THEME-panel) 100%); + background-size: 20px 20px; +} + +.animatedBg { + animation: bg 1.2s linear infinite; +} + +@keyframes bg { + 0% { background-position: 0 0; } + 100% { background-position: -20px -20px; } } .previewContainer { diff --git a/packages/frontend/src/components/MkImageFrameEditorDialog.vue b/packages/frontend/src/components/MkImageFrameEditorDialog.vue new file mode 100644 index 0000000000..2a91c85952 --- /dev/null +++ b/packages/frontend/src/components/MkImageFrameEditorDialog.vue @@ -0,0 +1,509 @@ + + + + + + + diff --git a/packages/frontend/src/components/MkWatermarkEditorDialog.Layer.vue b/packages/frontend/src/components/MkWatermarkEditorDialog.Layer.vue index b34181e5cc..154b3ffc27 100644 --- a/packages/frontend/src/components/MkWatermarkEditorDialog.Layer.vue +++ b/packages/frontend/src/components/MkWatermarkEditorDialog.Layer.vue @@ -345,7 +345,7 @@ SPDX-License-Identifier: AGPL-3.0-only @@ -380,8 +425,17 @@ function removeLayer(layer: WatermarkPreset['layers'][number]) { .preview { position: relative; background-color: var(--MI_THEME-bg); - background-size: auto auto; - background-image: repeating-linear-gradient(135deg, transparent, transparent 6px, var(--MI_THEME-panel) 6px, var(--MI_THEME-panel) 12px); + background-image: linear-gradient(135deg, transparent 30%, var(--MI_THEME-panel) 30%, var(--MI_THEME-panel) 50%, transparent 50%, transparent 80%, var(--MI_THEME-panel) 80%, var(--MI_THEME-panel) 100%); + background-size: 20px 20px; +} + +.animatedBg { + animation: bg 1.2s linear infinite; +} + +@keyframes bg { + 0% { background-position: 0 0; } + 100% { background-position: -20px -20px; } } .previewContainer { diff --git a/packages/frontend/src/composables/use-uploader.ts b/packages/frontend/src/composables/use-uploader.ts index e4aa1fda53..8ffb1e656b 100644 --- a/packages/frontend/src/composables/use-uploader.ts +++ b/packages/frontend/src/composables/use-uploader.ts @@ -9,6 +9,8 @@ import isAnimated from 'is-file-animated'; import { EventEmitter } from 'eventemitter3'; import { computed, markRaw, onMounted, onUnmounted, ref, triggerRef } from 'vue'; import type { MenuItem } from '@/types/menu.js'; +import type { WatermarkLayers, WatermarkPreset } from '@/utility/watermark/WatermarkRenderer.js'; +import type { ImageFrameParams, ImageFramePreset } from '@/utility/image-frame-renderer/ImageFrameRenderer.js'; import { genId } from '@/utility/id.js'; import { i18n } from '@/i18n.js'; import { prefer } from '@/preferences.js'; @@ -16,7 +18,6 @@ import { isWebpSupported } from '@/utility/isWebpSupported.js'; import { uploadFile, UploadAbortedError } from '@/utility/drive.js'; import * as os from '@/os.js'; import { ensureSignin } from '@/i.js'; -import { WatermarkRenderer } from '@/utility/watermark.js'; export type UploaderFeatures = { imageEditing?: boolean; @@ -28,13 +29,7 @@ const THUMBNAIL_SUPPORTED_TYPES = [ 'image/png', 'image/webp', 'image/svg+xml', -]; - -const IMAGE_COMPRESSION_SUPPORTED_TYPES = [ - 'image/jpeg', - 'image/png', - 'image/webp', - 'image/svg+xml', + 'image/gif', ]; const IMAGE_EDITING_SUPPORTED_TYPES = [ @@ -49,11 +44,7 @@ const VIDEO_COMPRESSION_SUPPORTED_TYPES = [ // TODO 'video/x-matroska', ]; -const WATERMARK_SUPPORTED_TYPES = IMAGE_EDITING_SUPPORTED_TYPES; - const IMAGE_PREPROCESS_NEEDED_TYPES = [ - ...WATERMARK_SUPPORTED_TYPES, - ...IMAGE_COMPRESSION_SUPPORTED_TYPES, ...IMAGE_EDITING_SUPPORTED_TYPES, ]; @@ -83,7 +74,9 @@ export type UploaderItem = { compressedSize?: number | null; preprocessedFile?: Blob | null; file: File; - watermarkPresetId: string | null; + watermarkPreset: WatermarkPreset | null; + watermarkLayers: WatermarkLayers | null; + imageFrameParams: ImageFrameParams | null; isSensitive?: boolean; caption?: string | null; abort?: (() => void) | null; @@ -135,6 +128,7 @@ export function useUploader(options: { const id = genId(); const filename = file.name ?? 'untitled'; const extension = filename.split('.').length > 1 ? '.' + filename.split('.').pop() : ''; + const watermarkPreset = uploaderFeatures.value.watermark && $i.policies.watermarkAvailable ? (prefer.s.watermarkPresets.find(p => p.id === prefer.s.defaultWatermarkPresetId) ?? null) : null; items.value.push({ id, name: prefer.s.keepOriginalFilename ? filename : id + extension, @@ -146,8 +140,10 @@ export function useUploader(options: { aborted: false, uploaded: null, uploadFailed: false, - compressionLevel: IMAGE_COMPRESSION_SUPPORTED_TYPES.includes(file.type) ? prefer.s.defaultImageCompressionLevel : VIDEO_COMPRESSION_SUPPORTED_TYPES.includes(file.type) ? prefer.s.defaultVideoCompressionLevel : 0, - watermarkPresetId: uploaderFeatures.value.watermark && $i.policies.watermarkAvailable ? prefer.s.defaultWatermarkPresetId : null, + compressionLevel: IMAGE_EDITING_SUPPORTED_TYPES.includes(file.type) ? prefer.s.defaultImageCompressionLevel : VIDEO_COMPRESSION_SUPPORTED_TYPES.includes(file.type) ? prefer.s.defaultVideoCompressionLevel : 0, + watermarkPreset, + watermarkLayers: watermarkPreset?.layers ?? null, + imageFrameParams: null, file: markRaw(file), }); const reactiveItem = items.value.at(-1)!; @@ -253,7 +249,7 @@ export function useUploader(options: { }, },*/ { icon: 'ti ti-sparkles', - text: i18n.ts._imageEffector.title + ' (BETA)', + text: i18n.ts._imageEffector.title, action: async () => { const { dispose } = await os.popupAsyncWithDialog(import('@/components/MkImageEffectorDialog.vue').then(x => x.default), { image: item.file, @@ -280,13 +276,14 @@ export function useUploader(options: { if ( uploaderFeatures.value.watermark && $i.policies.watermarkAvailable && - WATERMARK_SUPPORTED_TYPES.includes(item.file.type) && + IMAGE_EDITING_SUPPORTED_TYPES.includes(item.file.type) && !item.preprocessing && !item.uploading && !item.uploaded ) { - function changeWatermarkPreset(presetId: string | null) { - item.watermarkPresetId = presetId; + function change(layers: WatermarkLayers | null, preset?: WatermarkPreset | null) { + item.watermarkPreset = preset ?? null; + item.watermarkLayers = layers; preprocess(item).then(() => { triggerRef(items); }); @@ -295,43 +292,109 @@ export function useUploader(options: { menu.push({ icon: 'ti ti-copyright', text: i18n.ts.watermark, - caption: computed(() => item.watermarkPresetId == null ? null : prefer.s.watermarkPresets.find(p => p.id === item.watermarkPresetId)?.name), + caption: computed(() => item.watermarkPreset != null ? item.watermarkPreset.name : item.watermarkLayers != null ? i18n.ts.custom : null), type: 'parent', children: [{ - type: 'radioOption', - text: i18n.ts.none, - active: computed(() => item.watermarkPresetId == null), - action: () => changeWatermarkPreset(null), - }, { - type: 'divider', - }, ...prefer.s.watermarkPresets.map(preset => ({ - type: 'radioOption' as const, - text: preset.name, - active: computed(() => item.watermarkPresetId === preset.id), - action: () => changeWatermarkPreset(preset.id), - })), ...(prefer.s.watermarkPresets.length > 0 ? [{ - type: 'divider' as const, - }] : []), { - type: 'button', - icon: 'ti ti-plus', - text: i18n.ts.add, + type: 'button' as const, + icon: 'ti ti-pencil', + text: i18n.ts.edit, action: async () => { const { dispose } = await os.popupAsyncWithDialog(import('@/components/MkWatermarkEditorDialog.vue').then(x => x.default), { + layers: item.watermarkLayers, image: item.file, }, { - ok: (preset) => { - prefer.commit('watermarkPresets', [...prefer.s.watermarkPresets, preset]); - changeWatermarkPreset(preset.id); + ok: (layers) => { + change(layers); }, closed: () => dispose(), }); }, - }], + }, { + type: 'button' as const, + icon: 'ti ti-x', + text: i18n.ts.remove, + action: () => change(null), + }, { + type: 'divider', + }, { + type: 'label', + text: i18n.ts.presets, + }, ...prefer.s.watermarkPresets.map(preset => ({ + type: 'radioOption' as const, + text: preset.name, + active: computed(() => item.watermarkPreset?.id === preset.id), + action: () => change(preset.layers, preset), + }))], }); } if ( - (IMAGE_COMPRESSION_SUPPORTED_TYPES.includes(item.file.type) || VIDEO_COMPRESSION_SUPPORTED_TYPES.includes(item.file.type)) && + uploaderFeatures.value.imageEditing && + IMAGE_EDITING_SUPPORTED_TYPES.includes(item.file.type) && + !item.preprocessing && + !item.uploading && + !item.uploaded + ) { + function change(params: ImageFrameParams | null) { + item.imageFrameParams = params; + preprocess(item).then(() => { + triggerRef(items); + }); + } + + menu.push({ + icon: 'ti ti-device-ipad-horizontal', + text: i18n.ts.frame, + type: 'parent' as const, + children: [{ + type: 'button' as const, + icon: 'ti ti-pencil', + text: i18n.ts.edit, + action: async () => { + const { dispose } = await os.popupAsyncWithDialog(import('@/components/MkImageFrameEditorDialog.vue').then(x => x.default), { + params: item.imageFrameParams, + image: item.file, + imageCaption: item.caption ?? null, + imageFilename: item.name, + }, { + ok: (params) => { + change(params); + }, + closed: () => dispose(), + }); + }, + }, ...(item.imageFrameParams != null ? [{ + type: 'button' as const, + icon: 'ti ti-x', + text: i18n.ts.remove, + action: () => change(null), + }] : []), { + type: 'divider' as const, + }, { + type: 'label' as const, + text: i18n.ts.presets, + }, ...prefer.s.imageFramePresets.map(preset => ({ + type: 'button' as const, + text: preset.name, + action: async () => { + const { dispose } = await os.popupAsyncWithDialog(import('@/components/MkImageFrameEditorDialog.vue').then(x => x.default), { + params: preset.params, + image: item.file, + imageCaption: item.caption ?? null, + imageFilename: item.name, + }, { + ok: (params) => { + change(params); + }, + closed: () => dispose(), + }); + }, + }))], + }); + } + + if ( + (IMAGE_EDITING_SUPPORTED_TYPES.includes(item.file.type) || VIDEO_COMPRESSION_SUPPORTED_TYPES.includes(item.file.type)) && !item.preprocessing && !item.uploading && !item.uploaded @@ -545,10 +608,10 @@ export function useUploader(options: { let preprocessedFile: Blob | File = item.file; - const needsWatermark = item.watermarkPresetId != null && WATERMARK_SUPPORTED_TYPES.includes(preprocessedFile.type) && $i.policies.watermarkAvailable; - const preset = prefer.s.watermarkPresets.find(p => p.id === item.watermarkPresetId); - if (needsWatermark && preset != null) { + const needsWatermark = item.watermarkLayers != null && IMAGE_EDITING_SUPPORTED_TYPES.includes(preprocessedFile.type) && $i.policies.watermarkAvailable; + if (needsWatermark && item.watermarkLayers != null) { const canvas = window.document.createElement('canvas'); + const WatermarkRenderer = await import('@/utility/watermark/WatermarkRenderer.js').then(x => x.WatermarkRenderer); const renderer = new WatermarkRenderer({ canvas: canvas, renderWidth: imageBitmap.width, @@ -556,9 +619,7 @@ export function useUploader(options: { image: imageBitmap, }); - await renderer.setLayers(preset.layers); - - renderer.render(); + await renderer.render(item.watermarkLayers); preprocessedFile = await new Promise((resolve) => { canvas.toBlob((blob) => { @@ -571,8 +632,35 @@ export function useUploader(options: { }); } + const needsImageFrame = item.imageFrameParams != null && IMAGE_EDITING_SUPPORTED_TYPES.includes(preprocessedFile.type); + if (needsImageFrame && item.imageFrameParams != null) { + const canvas = window.document.createElement('canvas'); + const ExifReader = await import('exifreader'); + const exif = await ExifReader.load(await item.file.arrayBuffer()); + const ImageFrameRenderer = await import('@/utility/image-frame-renderer/ImageFrameRenderer.js').then(x => x.ImageFrameRenderer); + const frameRenderer = new ImageFrameRenderer({ + canvas: canvas, + image: await window.createImageBitmap(preprocessedFile), + exif, + caption: item.caption ?? null, + filename: item.name, + }); + + await frameRenderer.render(item.imageFrameParams); + + preprocessedFile = await new Promise((resolve) => { + canvas.toBlob((blob) => { + if (blob == null) { + throw new Error('Failed to convert canvas to blob'); + } + resolve(blob); + frameRenderer.destroy(); + }, 'image/png'); + }); + } + const compressionSettings = getCompressionSettings(item.compressionLevel); - const needsCompress = item.compressionLevel !== 0 && compressionSettings && IMAGE_COMPRESSION_SUPPORTED_TYPES.includes(preprocessedFile.type) && !(await isAnimated(preprocessedFile)); + const needsCompress = item.compressionLevel !== 0 && compressionSettings && IMAGE_EDITING_SUPPORTED_TYPES.includes(preprocessedFile.type) && !(await isAnimated(preprocessedFile)); if (needsCompress) { const config = { diff --git a/packages/frontend/src/lib/ImageCompositor.ts b/packages/frontend/src/lib/ImageCompositor.ts new file mode 100644 index 0000000000..a26302af77 --- /dev/null +++ b/packages/frontend/src/lib/ImageCompositor.ts @@ -0,0 +1,313 @@ +/* + * SPDX-FileCopyrightText: syuilo and misskey-project + * SPDX-License-Identifier: AGPL-3.0-only + */ + +import { createTexture, initShaderProgram } from '../utility/webgl.js'; + +export type ImageCompositorFunctionParams = Record; + +export type ImageCompositorFunction = { + shader: string; + main: (ctx: { + gl: WebGL2RenderingContext; + program: WebGLProgram; + params: PS; + u: Record; + width: number; + height: number; + textures: Map; + }) => void; +}; + +export type ImageCompositorLayer = any> = { + [K in keyof FNS]: { + id: string; + functionId: K; + params: Parameters[0]['params']; + }; +}[keyof FNS]; + +export function defineImageCompositorFunction(fn: ImageCompositorFunction) { + return fn; +} + +// TODO: per layer cache + +export class ImageCompositor>> { + private gl: WebGL2RenderingContext; + private canvas: HTMLCanvasElement | null = null; + private renderWidth: number; + private renderHeight: number; + private baseTexture: WebGLTexture; + private shaderCache: Map = new Map(); + private perLayerResultTextures: Map = new Map(); + private perLayerResultFrameBuffers: Map = new Map(); + private nopProgram: WebGLProgram; + private registeredTextures: Map = new Map(); + private registeredFunctions: Map = new Map(); + + constructor(options: { + canvas: HTMLCanvasElement; + renderWidth: number; + renderHeight: number; + image: ImageData | ImageBitmap | HTMLImageElement | HTMLCanvasElement | null; + functions: FNS; + }) { + this.canvas = options.canvas; + this.renderWidth = options.renderWidth; + this.renderHeight = options.renderHeight; + + this.canvas.width = this.renderWidth; + this.canvas.height = this.renderHeight; + + const gl = this.canvas.getContext('webgl2', { + preserveDrawingBuffer: false, + alpha: true, + premultipliedAlpha: false, + }); + + if (gl == null) throw new Error('Failed to initialize WebGL2 context'); + + this.gl = gl; + + gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight); + + const VERTICES = new Float32Array([-1, -1, -1, 1, 1, 1, -1, -1, 1, 1, 1, -1]); + const vertexBuffer = gl.createBuffer(); + gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); + gl.bufferData(gl.ARRAY_BUFFER, VERTICES, gl.STATIC_DRAW); + + if (options.image != null) { + this.baseTexture = createTexture(gl); + gl.activeTexture(gl.TEXTURE0); + gl.bindTexture(gl.TEXTURE_2D, this.baseTexture); + gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, options.image.width, options.image.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, options.image); + gl.bindTexture(gl.TEXTURE_2D, null); + } else { + this.baseTexture = createTexture(gl); + gl.activeTexture(gl.TEXTURE0); + } + + this.nopProgram = initShaderProgram(this.gl, `#version 300 es + in vec2 position; + out vec2 in_uv; + + void main() { + in_uv = (position + 1.0) / 2.0; + gl_Position = vec4(position * vec2(1.0, -1.0), 0.0, 1.0); + } + `, `#version 300 es + precision mediump float; + + in vec2 in_uv; + uniform sampler2D u_texture; + out vec4 out_color; + + void main() { + out_color = texture(u_texture, in_uv); + } + `); + + // レジスタ番号はシェーダープログラムに属しているわけではなく、独立の存在なので、とりあえず nopProgram を使って設定する(その後は効果が持続する) + // ref. https://qiita.com/emadurandal/items/5966c8374f03d4de3266 + const positionLocation = gl.getAttribLocation(this.nopProgram, 'position'); + gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0); + gl.enableVertexAttribArray(positionLocation); + + for (const [id, fn] of Object.entries(options.functions)) { + const uniforms = this.extractUniformNamesFromShader(fn.shader); + this.registeredFunctions.set(id, { ...fn, id, uniforms }); + } + } + + private extractUniformNamesFromShader(shader: string): string[] { + const uniformRegex = /uniform\s+\w+\s+(\w+)\s*;/g; + const uniforms: string[] = []; + let match; + while ((match = uniformRegex.exec(shader)) !== null) { + uniforms.push(match[1].replace(/^u_/, '')); + } + return uniforms; + } + + private renderLayer(layer: ImageCompositorLayer, preTexture: WebGLTexture, invert = false) { + const gl = this.gl; + + const fn = this.registeredFunctions.get(layer.functionId); + if (fn == null) return; + + const cachedShader = this.shaderCache.get(fn.id); + const shaderProgram = cachedShader ?? initShaderProgram(this.gl, `#version 300 es + in vec2 position; + uniform bool u_invert; + out vec2 in_uv; + + void main() { + in_uv = (position + 1.0) / 2.0; + gl_Position = u_invert ? vec4(position * vec2(1.0, -1.0), 0.0, 1.0) : vec4(position, 0.0, 1.0); + } + `, fn.shader); + if (cachedShader == null) { + this.shaderCache.set(fn.id, shaderProgram); + } + + gl.useProgram(shaderProgram); + + const in_resolution = gl.getUniformLocation(shaderProgram, 'in_resolution'); + gl.uniform2fv(in_resolution, [this.renderWidth, this.renderHeight]); + + const u_invert = gl.getUniformLocation(shaderProgram, 'u_invert'); + gl.uniform1i(u_invert, invert ? 1 : 0); + + gl.activeTexture(gl.TEXTURE0); + gl.bindTexture(gl.TEXTURE_2D, preTexture); + const in_texture = gl.getUniformLocation(shaderProgram, 'in_texture'); + gl.uniform1i(in_texture, 0); + + fn.main({ + gl: gl, + program: shaderProgram, + params: layer.params, + u: Object.fromEntries(fn.uniforms.map(u => [u, gl.getUniformLocation(shaderProgram, 'u_' + u)!])), + width: this.renderWidth, + height: this.renderHeight, + textures: this.registeredTextures, + }); + + gl.drawArrays(gl.TRIANGLES, 0, 6); + } + + public render(layers: (ImageCompositorLayer)[]) { + const gl = this.gl; + + // 入力をそのまま出力 + if (layers.length === 0) { + gl.activeTexture(gl.TEXTURE0); + gl.bindTexture(gl.TEXTURE_2D, this.baseTexture); + + gl.useProgram(this.nopProgram); + gl.uniform1i(gl.getUniformLocation(this.nopProgram, 'u_texture')!, 0); + + gl.drawArrays(gl.TRIANGLES, 0, 6); + return; + } + + let preTexture = this.baseTexture; + + for (const layer of layers) { + const isLast = layer === layers.at(-1); + + const cachedResultTexture = this.perLayerResultTextures.get(layer.id); + const resultTexture = cachedResultTexture ?? createTexture(gl); + if (cachedResultTexture == null) { + this.perLayerResultTextures.set(layer.id, resultTexture); + } + gl.bindTexture(gl.TEXTURE_2D, resultTexture); + gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, this.renderWidth, this.renderHeight, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); + gl.bindTexture(gl.TEXTURE_2D, null); + + if (isLast) { + gl.bindFramebuffer(gl.FRAMEBUFFER, null); + } else { + const cachedResultFrameBuffer = this.perLayerResultFrameBuffers.get(layer.id); + const resultFrameBuffer = cachedResultFrameBuffer ?? gl.createFramebuffer(); + if (cachedResultFrameBuffer == null) { + this.perLayerResultFrameBuffers.set(layer.id, resultFrameBuffer); + } + gl.bindFramebuffer(gl.FRAMEBUFFER, resultFrameBuffer); + gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, resultTexture, 0); + } + + this.renderLayer(layer, preTexture, isLast); + + preTexture = resultTexture; + } + } + + public registerTexture(key: string, image: ImageData | ImageBitmap | HTMLImageElement | HTMLCanvasElement) { + const gl = this.gl; + + const existing = this.registeredTextures.get(key); + if (existing != null) { + gl.deleteTexture(existing.texture); + this.registeredTextures.delete(key); + } + + const texture = createTexture(gl); + gl.activeTexture(gl.TEXTURE0); + gl.bindTexture(gl.TEXTURE_2D, texture); + gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, image.width, image.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, image); + gl.bindTexture(gl.TEXTURE_2D, null); + + this.registeredTextures.set(key, { + texture: texture, + width: image.width, + height: image.height, + }); + } + + public unregisterTexture(key: string) { + const gl = this.gl; + + const existing = this.registeredTextures.get(key); + if (existing != null) { + gl.deleteTexture(existing.texture); + this.registeredTextures.delete(key); + } + } + + public hasTexture(key: string) { + return this.registeredTextures.has(key); + } + + public getKeysOfRegisteredTextures() { + return this.registeredTextures.keys(); + } + + public changeResolution(width: number, height: number) { + if (this.renderWidth === width && this.renderHeight === height) return; + + this.renderWidth = width; + this.renderHeight = height; + if (this.canvas) { + this.canvas.width = this.renderWidth; + this.canvas.height = this.renderHeight; + } + this.gl.viewport(0, 0, this.renderWidth, this.renderHeight); + } + + /* + * disposeCanvas = true だとloseContextを呼ぶため、コンストラクタで渡されたcanvasも再利用不可になるので注意 + */ + public destroy(disposeCanvas = true) { + this.gl.deleteProgram(this.nopProgram); + + for (const shader of this.shaderCache.values()) { + this.gl.deleteProgram(shader); + } + this.shaderCache.clear(); + + for (const texture of this.perLayerResultTextures.values()) { + this.gl.deleteTexture(texture); + } + this.perLayerResultTextures.clear(); + + for (const framebuffer of this.perLayerResultFrameBuffers.values()) { + this.gl.deleteFramebuffer(framebuffer); + } + this.perLayerResultFrameBuffers.clear(); + + for (const texture of this.registeredTextures.values()) { + this.gl.deleteTexture(texture.texture); + } + this.registeredTextures.clear(); + + this.gl.deleteTexture(this.baseTexture); + + if (disposeCanvas) { + const loseContextExt = this.gl.getExtension('WEBGL_lose_context'); + if (loseContextExt) loseContextExt.loseContext(); + } + } +} diff --git a/packages/frontend/src/lib/pizzax.ts b/packages/frontend/src/lib/pizzax.ts index 6dffcf9478..8faac6155c 100644 --- a/packages/frontend/src/lib/pizzax.ts +++ b/packages/frontend/src/lib/pizzax.ts @@ -5,6 +5,8 @@ // PIZZAX --- A lightweight store +// TODO: Misskeyのドメイン知識があるのでutilityなどに移動する + import { onUnmounted, ref, watch } from 'vue'; import { BroadcastChannel } from 'broadcast-channel'; import type { Ref } from 'vue'; diff --git a/packages/frontend/src/pages/settings/drive.ImageFrameItem.vue b/packages/frontend/src/pages/settings/drive.ImageFrameItem.vue new file mode 100644 index 0000000000..62922fc964 --- /dev/null +++ b/packages/frontend/src/pages/settings/drive.ImageFrameItem.vue @@ -0,0 +1,113 @@ + + + + + + + diff --git a/packages/frontend/src/pages/settings/drive.WatermarkItem.vue b/packages/frontend/src/pages/settings/drive.WatermarkItem.vue index bb91d5e212..0c03a4493a 100644 --- a/packages/frontend/src/pages/settings/drive.WatermarkItem.vue +++ b/packages/frontend/src/pages/settings/drive.WatermarkItem.vue @@ -22,8 +22,8 @@ SPDX-License-Identifier: AGPL-3.0-only diff --git a/packages/frontend/src/pages/settings/drive.vue b/packages/frontend/src/pages/settings/drive.vue index f58ff4c78c..8d443921a9 100644 --- a/packages/frontend/src/pages/settings/drive.vue +++ b/packages/frontend/src/pages/settings/drive.vue @@ -124,6 +124,34 @@ SPDX-License-Identifier: AGPL-3.0-only + + + + + + +
+
+ + + + + + + + + +
+
+ + + { + if (res == null) return; + if (res.enabled) imageFramePresetsSyncEnabled.value = true; + }); + } else { + prefer.disableSync('imageFramePresets'); + imageFramePresetsSyncEnabled.value = false; + } +} + misskeyApi('drive').then(info => { capacity.value = info.capacity; usage.value = info.usage; @@ -266,8 +311,11 @@ function chooseUploadFolder() { async function addWatermarkPreset() { const { dispose } = await os.popupAsyncWithDialog(import('@/components/MkWatermarkEditorDialog.vue').then(x => x.default), { + presetEditMode: true, + preset: null, + layers: [], }, { - ok: (preset: WatermarkPreset) => { + presetOk: (preset) => { prefer.commit('watermarkPresets', [...prefer.s.watermarkPresets, preset]); }, closed: () => dispose(), @@ -299,6 +347,40 @@ function onDeleteWatermarkPreset(id: string) { } } +function onUpdateImageFramePreset(id: string, preset: ImageFramePreset) { + const index = prefer.s.imageFramePresets.findIndex(p => p.id === id); + if (index !== -1) { + prefer.commit('imageFramePresets', [ + ...prefer.s.imageFramePresets.slice(0, index), + preset, + ...prefer.s.imageFramePresets.slice(index + 1), + ]); + } +} + +function onDeleteImageFramePreset(id: string) { + const index = prefer.s.imageFramePresets.findIndex(p => p.id === id); + if (index !== -1) { + prefer.commit('imageFramePresets', [ + ...prefer.s.imageFramePresets.slice(0, index), + ...prefer.s.imageFramePresets.slice(index + 1), + ]); + } +} + +async function addImageFramePreset() { + const { dispose } = await os.popupAsyncWithDialog(import('@/components/MkImageFrameEditorDialog.vue').then(x => x.default), { + presetEditMode: true, + preset: null, + params: null, + }, { + presetOk: (preset) => { + prefer.commit('imageFramePresets', [...prefer.s.imageFramePresets, preset]); + }, + closed: () => dispose(), + }); +} + function saveProfile() { misskeyApi('i/update', { alwaysMarkNsfw: !!alwaysMarkNsfw.value, diff --git a/packages/frontend/src/preferences/def.ts b/packages/frontend/src/preferences/def.ts index 915b192605..2f2107d9ed 100644 --- a/packages/frontend/src/preferences/def.ts +++ b/packages/frontend/src/preferences/def.ts @@ -12,7 +12,8 @@ import type { SoundType } from '@/utility/sound.js'; import type { Plugin } from '@/plugin.js'; import type { DeviceKind } from '@/utility/device-kind.js'; import type { DeckProfile } from '@/deck.js'; -import type { WatermarkPreset } from '@/utility/watermark.js'; +import type { WatermarkPreset } from '@/utility/watermark/WatermarkRenderer.js'; +import type { ImageFramePreset } from '@/utility/image-frame-renderer/ImageFrameRenderer.js'; import { genId } from '@/utility/id.js'; import { DEFAULT_DEVICE_KIND } from '@/utility/device-kind.js'; import { deepEqual } from '@/utility/deep-equal.js'; @@ -437,6 +438,26 @@ export const PREF_DEF = definePreferences({ accountDependent: true, default: null as WatermarkPreset['id'] | null, }, + imageFramePresets: { + accountDependent: true, + default: [] as ImageFramePreset[], + mergeStrategy: (a, b) => { + const mergedItems = [] as typeof a; + for (const x of a.concat(b)) { + const sameIdItem = mergedItems.find(y => y.id === x.id); + if (sameIdItem != null) { + if (deepEqual(x, sameIdItem)) { // 完全な重複は無視 + continue; + } else { // IDは同じなのに内容が違う場合はマージ不可とする + throw new Error(); + } + } else { + mergedItems.push(x); + } + } + return mergedItems; + }, + }, defaultImageCompressionLevel: { default: 2 as 0 | 1 | 2 | 3, }, diff --git a/packages/frontend/src/utility/image-effector/fxs/blockNoise.glsl b/packages/frontend/src/utility/image-compositor-functions/blockNoise.glsl similarity index 100% rename from packages/frontend/src/utility/image-effector/fxs/blockNoise.glsl rename to packages/frontend/src/utility/image-compositor-functions/blockNoise.glsl diff --git a/packages/frontend/src/utility/image-effector/fxs/blockNoise.ts b/packages/frontend/src/utility/image-compositor-functions/blockNoise.ts similarity index 83% rename from packages/frontend/src/utility/image-effector/fxs/blockNoise.ts rename to packages/frontend/src/utility/image-compositor-functions/blockNoise.ts index 355ab4536c..8c83ef51a0 100644 --- a/packages/frontend/src/utility/image-effector/fxs/blockNoise.ts +++ b/packages/frontend/src/utility/image-compositor-functions/blockNoise.ts @@ -5,14 +5,42 @@ import seedrandom from 'seedrandom'; import shader from './blockNoise.glsl'; -import { defineImageEffectorFx } from '../ImageEffector.js'; +import type { ImageEffectorUiDefinition } from '../image-effector/ImageEffector.js'; +import { defineImageCompositorFunction } from '@/lib/ImageCompositor.js'; import { i18n } from '@/i18n.js'; -export const FX_blockNoise = defineImageEffectorFx({ - id: 'blockNoise', - name: i18n.ts._imageEffector._fxs.glitch + ': ' + i18n.ts._imageEffector._fxs.blockNoise, +export const fn = defineImageCompositorFunction<{ + amount: number; + strength: number; + width: number; + height: number; + channelShift: number; + seed: number; +}>({ shader, - uniforms: ['amount', 'channelShift'] as const, + main: ({ gl, program, u, params }) => { + gl.uniform1i(u.amount, params.amount); + gl.uniform1f(u.channelShift, params.channelShift); + + const margin = 0; + + const rnd = seedrandom(params.seed.toString()); + + for (let i = 0; i < params.amount; i++) { + const o = gl.getUniformLocation(program, `u_shiftOrigins[${i.toString()}]`); + gl.uniform2f(o, (rnd() * (1 + (margin * 2))) - margin, (rnd() * (1 + (margin * 2))) - margin); + + const s = gl.getUniformLocation(program, `u_shiftStrengths[${i.toString()}]`); + gl.uniform1f(s, (1 - (rnd() * 2)) * params.strength); + + const sizes = gl.getUniformLocation(program, `u_shiftSizes[${i.toString()}]`); + gl.uniform2f(sizes, params.width, params.height); + } + }, +}); + +export const uiDefinition = { + name: i18n.ts._imageEffector._fxs.glitch + ': ' + i18n.ts._imageEffector._fxs.blockNoise, params: { amount: { label: i18n.ts._imageEffector._fxProps.amount, @@ -64,23 +92,4 @@ export const FX_blockNoise = defineImageEffectorFx({ default: 100, }, }, - main: ({ gl, program, u, params }) => { - gl.uniform1i(u.amount, params.amount); - gl.uniform1f(u.channelShift, params.channelShift); - - const margin = 0; - - const rnd = seedrandom(params.seed.toString()); - - for (let i = 0; i < params.amount; i++) { - const o = gl.getUniformLocation(program, `u_shiftOrigins[${i.toString()}]`); - gl.uniform2f(o, (rnd() * (1 + (margin * 2))) - margin, (rnd() * (1 + (margin * 2))) - margin); - - const s = gl.getUniformLocation(program, `u_shiftStrengths[${i.toString()}]`); - gl.uniform1f(s, (1 - (rnd() * 2)) * params.strength); - - const sizes = gl.getUniformLocation(program, `u_shiftSizes[${i.toString()}]`); - gl.uniform2f(sizes, params.width, params.height); - } - }, -}); +} satisfies ImageEffectorUiDefinition; diff --git a/packages/frontend/src/utility/image-effector/fxs/blur.glsl b/packages/frontend/src/utility/image-compositor-functions/blur.glsl similarity index 100% rename from packages/frontend/src/utility/image-effector/fxs/blur.glsl rename to packages/frontend/src/utility/image-compositor-functions/blur.glsl diff --git a/packages/frontend/src/utility/image-effector/fxs/blur.ts b/packages/frontend/src/utility/image-compositor-functions/blur.ts similarity index 81% rename from packages/frontend/src/utility/image-effector/fxs/blur.ts rename to packages/frontend/src/utility/image-compositor-functions/blur.ts index 40f51fa646..1ab8eee6ba 100644 --- a/packages/frontend/src/utility/image-effector/fxs/blur.ts +++ b/packages/frontend/src/utility/image-compositor-functions/blur.ts @@ -3,15 +3,33 @@ * SPDX-License-Identifier: AGPL-3.0-only */ -import { defineImageEffectorFx } from '../ImageEffector.js'; import shader from './blur.glsl'; +import type { ImageEffectorUiDefinition } from '../image-effector/ImageEffector.js'; +import { defineImageCompositorFunction } from '@/lib/ImageCompositor.js'; import { i18n } from '@/i18n.js'; -export const FX_blur = defineImageEffectorFx({ - id: 'blur', - name: i18n.ts._imageEffector._fxs.blur, +export const fn = defineImageCompositorFunction<{ + offsetX: number; + offsetY: number; + scaleX: number; + scaleY: number; + ellipse: boolean; + angle: number; + radius: number; +}>({ shader, - uniforms: ['offset', 'scale', 'ellipse', 'angle', 'radius', 'samples'] as const, + main: ({ gl, u, params }) => { + gl.uniform2f(u.offset, params.offsetX / 2, params.offsetY / 2); + gl.uniform2f(u.scale, params.scaleX / 2, params.scaleY / 2); + gl.uniform1i(u.ellipse, params.ellipse ? 1 : 0); + gl.uniform1f(u.angle, params.angle / 2); + gl.uniform1f(u.radius, params.radius); + gl.uniform1i(u.samples, 256); + }, +}); + +export const uiDefinition = { + name: i18n.ts._imageEffector._fxs.blur, params: { offsetX: { label: i18n.ts._imageEffector._fxProps.offset + ' X', @@ -72,12 +90,4 @@ export const FX_blur = defineImageEffectorFx({ step: 0.5, }, }, - main: ({ gl, u, params }) => { - gl.uniform2f(u.offset, params.offsetX / 2, params.offsetY / 2); - gl.uniform2f(u.scale, params.scaleX / 2, params.scaleY / 2); - gl.uniform1i(u.ellipse, params.ellipse ? 1 : 0); - gl.uniform1f(u.angle, params.angle / 2); - gl.uniform1f(u.radius, params.radius); - gl.uniform1i(u.samples, 256); - }, -}); +} satisfies ImageEffectorUiDefinition; diff --git a/packages/frontend/src/utility/image-effector/fxs/checker.glsl b/packages/frontend/src/utility/image-compositor-functions/checker.glsl similarity index 100% rename from packages/frontend/src/utility/image-effector/fxs/checker.glsl rename to packages/frontend/src/utility/image-compositor-functions/checker.glsl diff --git a/packages/frontend/src/utility/image-effector/fxs/checker.ts b/packages/frontend/src/utility/image-compositor-functions/checker.ts similarity index 74% rename from packages/frontend/src/utility/image-effector/fxs/checker.ts rename to packages/frontend/src/utility/image-compositor-functions/checker.ts index 7d1938eeb7..e0476bb126 100644 --- a/packages/frontend/src/utility/image-effector/fxs/checker.ts +++ b/packages/frontend/src/utility/image-compositor-functions/checker.ts @@ -3,15 +3,28 @@ * SPDX-License-Identifier: AGPL-3.0-only */ -import { defineImageEffectorFx } from '../ImageEffector.js'; import shader from './checker.glsl'; +import type { ImageEffectorUiDefinition } from '../image-effector/ImageEffector.js'; +import { defineImageCompositorFunction } from '@/lib/ImageCompositor.js'; import { i18n } from '@/i18n.js'; -export const FX_checker = defineImageEffectorFx({ - id: 'checker', - name: i18n.ts._imageEffector._fxs.checker, +export const fn = defineImageCompositorFunction<{ + angle: number; + scale: number; + color: [number, number, number]; + opacity: number; +}>({ shader, - uniforms: ['angle', 'scale', 'color', 'opacity'] as const, + main: ({ gl, u, params }) => { + gl.uniform1f(u.angle, params.angle / 2); + gl.uniform1f(u.scale, params.scale * params.scale); + gl.uniform3f(u.color, params.color[0], params.color[1], params.color[2]); + gl.uniform1f(u.opacity, params.opacity); + }, +}); + +export const uiDefinition = { + name: i18n.ts._imageEffector._fxs.checker, params: { angle: { label: i18n.ts._imageEffector._fxProps.angle, @@ -45,10 +58,4 @@ export const FX_checker = defineImageEffectorFx({ toViewValue: v => Math.round(v * 100) + '%', }, }, - main: ({ gl, u, params }) => { - gl.uniform1f(u.angle, params.angle / 2); - gl.uniform1f(u.scale, params.scale * params.scale); - gl.uniform3f(u.color, params.color[0], params.color[1], params.color[2]); - gl.uniform1f(u.opacity, params.opacity); - }, -}); +} satisfies ImageEffectorUiDefinition; diff --git a/packages/frontend/src/utility/image-effector/fxs/chromaticAberration.glsl b/packages/frontend/src/utility/image-compositor-functions/chromaticAberration.glsl similarity index 100% rename from packages/frontend/src/utility/image-effector/fxs/chromaticAberration.glsl rename to packages/frontend/src/utility/image-compositor-functions/chromaticAberration.glsl diff --git a/packages/frontend/src/utility/image-effector/fxs/chromaticAberration.ts b/packages/frontend/src/utility/image-compositor-functions/chromaticAberration.ts similarity index 66% rename from packages/frontend/src/utility/image-effector/fxs/chromaticAberration.ts rename to packages/frontend/src/utility/image-compositor-functions/chromaticAberration.ts index ed4d134251..5e327dd6ac 100644 --- a/packages/frontend/src/utility/image-effector/fxs/chromaticAberration.ts +++ b/packages/frontend/src/utility/image-compositor-functions/chromaticAberration.ts @@ -3,15 +3,24 @@ * SPDX-License-Identifier: AGPL-3.0-only */ -import { defineImageEffectorFx } from '../ImageEffector.js'; import shader from './chromaticAberration.glsl'; +import type { ImageEffectorUiDefinition } from '../image-effector/ImageEffector.js'; +import { defineImageCompositorFunction } from '@/lib/ImageCompositor.js'; import { i18n } from '@/i18n.js'; -export const FX_chromaticAberration = defineImageEffectorFx({ - id: 'chromaticAberration', - name: i18n.ts._imageEffector._fxs.chromaticAberration, +export const fn = defineImageCompositorFunction<{ + normalize: boolean; + amount: number; +}>({ shader, - uniforms: ['amount', 'start', 'normalize'] as const, + main: ({ gl, u, params }) => { + gl.uniform1f(u.amount, params.amount); + gl.uniform1i(u.normalize, params.normalize ? 1 : 0); + }, +}); + +export const uiDefinition = { + name: i18n.ts._imageEffector._fxs.chromaticAberration, params: { normalize: { label: i18n.ts._imageEffector._fxProps.normalize, @@ -27,8 +36,4 @@ export const FX_chromaticAberration = defineImageEffectorFx({ step: 0.01, }, }, - main: ({ gl, u, params }) => { - gl.uniform1f(u.amount, params.amount); - gl.uniform1i(u.normalize, params.normalize ? 1 : 0); - }, -}); +} satisfies ImageEffectorUiDefinition; diff --git a/packages/frontend/src/utility/image-effector/fxs/colorAdjust.glsl b/packages/frontend/src/utility/image-compositor-functions/colorAdjust.glsl similarity index 100% rename from packages/frontend/src/utility/image-effector/fxs/colorAdjust.glsl rename to packages/frontend/src/utility/image-compositor-functions/colorAdjust.glsl diff --git a/packages/frontend/src/utility/image-effector/fxs/colorAdjust.ts b/packages/frontend/src/utility/image-compositor-functions/colorAdjust.ts similarity index 79% rename from packages/frontend/src/utility/image-effector/fxs/colorAdjust.ts rename to packages/frontend/src/utility/image-compositor-functions/colorAdjust.ts index 989ca79a2c..33ca05ace7 100644 --- a/packages/frontend/src/utility/image-effector/fxs/colorAdjust.ts +++ b/packages/frontend/src/utility/image-compositor-functions/colorAdjust.ts @@ -3,15 +3,30 @@ * SPDX-License-Identifier: AGPL-3.0-only */ -import { defineImageEffectorFx } from '../ImageEffector.js'; import shader from './colorAdjust.glsl'; +import type { ImageEffectorUiDefinition } from '../image-effector/ImageEffector.js'; +import { defineImageCompositorFunction } from '@/lib/ImageCompositor.js'; import { i18n } from '@/i18n.js'; -export const FX_colorAdjust = defineImageEffectorFx({ - id: 'colorAdjust', - name: i18n.ts._imageEffector._fxs.colorAdjust, +export const fn = defineImageCompositorFunction<{ + lightness: number; + contrast: number; + hue: number; + brightness: number; + saturation: number; +}>({ shader, - uniforms: ['lightness', 'contrast', 'hue', 'brightness', 'saturation'] as const, + main: ({ gl, u, params }) => { + gl.uniform1f(u.brightness, params.brightness); + gl.uniform1f(u.contrast, params.contrast); + gl.uniform1f(u.hue, params.hue / 2); + gl.uniform1f(u.lightness, params.lightness); + gl.uniform1f(u.saturation, params.saturation); + }, +}); + +export const uiDefinition = { + name: i18n.ts._imageEffector._fxs.colorAdjust, params: { lightness: { label: i18n.ts._imageEffector._fxProps.lightness, @@ -59,11 +74,4 @@ export const FX_colorAdjust = defineImageEffectorFx({ toViewValue: v => Math.round(v * 100) + '%', }, }, - main: ({ gl, u, params }) => { - gl.uniform1f(u.brightness, params.brightness); - gl.uniform1f(u.contrast, params.contrast); - gl.uniform1f(u.hue, params.hue / 2); - gl.uniform1f(u.lightness, params.lightness); - gl.uniform1f(u.saturation, params.saturation); - }, -}); +} satisfies ImageEffectorUiDefinition; diff --git a/packages/frontend/src/utility/image-effector/fxs/colorClamp.glsl b/packages/frontend/src/utility/image-compositor-functions/colorClamp.glsl similarity index 100% rename from packages/frontend/src/utility/image-effector/fxs/colorClamp.glsl rename to packages/frontend/src/utility/image-compositor-functions/colorClamp.glsl diff --git a/packages/frontend/src/utility/image-effector/fxs/colorClamp.ts b/packages/frontend/src/utility/image-compositor-functions/colorClamp.ts similarity index 73% rename from packages/frontend/src/utility/image-effector/fxs/colorClamp.ts rename to packages/frontend/src/utility/image-compositor-functions/colorClamp.ts index f3513011fa..d4e7b786d0 100644 --- a/packages/frontend/src/utility/image-effector/fxs/colorClamp.ts +++ b/packages/frontend/src/utility/image-compositor-functions/colorClamp.ts @@ -3,15 +3,28 @@ * SPDX-License-Identifier: AGPL-3.0-only */ -import { defineImageEffectorFx } from '../ImageEffector.js'; import shader from './colorClamp.glsl'; +import type { ImageEffectorUiDefinition } from '../image-effector/ImageEffector.js'; +import { defineImageCompositorFunction } from '@/lib/ImageCompositor.js'; import { i18n } from '@/i18n.js'; -export const FX_colorClamp = defineImageEffectorFx({ - id: 'colorClamp', - name: i18n.ts._imageEffector._fxs.colorClamp, +export const fn = defineImageCompositorFunction<{ + max: number; + min: number; +}>({ shader, - uniforms: ['rMax', 'rMin', 'gMax', 'gMin', 'bMax', 'bMin'] as const, + main: ({ gl, u, params }) => { + gl.uniform1f(u.rMax, params.max); + gl.uniform1f(u.rMin, 1.0 + params.min); + gl.uniform1f(u.gMax, params.max); + gl.uniform1f(u.gMin, 1.0 + params.min); + gl.uniform1f(u.bMax, params.max); + gl.uniform1f(u.bMin, 1.0 + params.min); + }, +}); + +export const uiDefinition = { + name: i18n.ts._imageEffector._fxs.colorClamp, params: { max: { label: i18n.ts._imageEffector._fxProps.max, @@ -32,12 +45,4 @@ export const FX_colorClamp = defineImageEffectorFx({ toViewValue: v => Math.round(v * 100) + '%', }, }, - main: ({ gl, u, params }) => { - gl.uniform1f(u.rMax, params.max); - gl.uniform1f(u.rMin, 1.0 + params.min); - gl.uniform1f(u.gMax, params.max); - gl.uniform1f(u.gMin, 1.0 + params.min); - gl.uniform1f(u.bMax, params.max); - gl.uniform1f(u.bMin, 1.0 + params.min); - }, -}); +} satisfies ImageEffectorUiDefinition; diff --git a/packages/frontend/src/utility/image-effector/fxs/colorClampAdvanced.ts b/packages/frontend/src/utility/image-compositor-functions/colorClampAdvanced.ts similarity index 83% rename from packages/frontend/src/utility/image-effector/fxs/colorClampAdvanced.ts rename to packages/frontend/src/utility/image-compositor-functions/colorClampAdvanced.ts index 397e16c1ba..492524ec06 100644 --- a/packages/frontend/src/utility/image-effector/fxs/colorClampAdvanced.ts +++ b/packages/frontend/src/utility/image-compositor-functions/colorClampAdvanced.ts @@ -3,15 +3,32 @@ * SPDX-License-Identifier: AGPL-3.0-only */ -import { defineImageEffectorFx } from '../ImageEffector.js'; import shader from './colorClamp.glsl'; +import type { ImageEffectorUiDefinition } from '../image-effector/ImageEffector.js'; +import { defineImageCompositorFunction } from '@/lib/ImageCompositor.js'; import { i18n } from '@/i18n.js'; -export const FX_colorClampAdvanced = defineImageEffectorFx({ - id: 'colorClampAdvanced', - name: i18n.ts._imageEffector._fxs.colorClampAdvanced, +export const fn = defineImageCompositorFunction<{ + rMax: number; + rMin: number; + gMax: number; + gMin: number; + bMax: number; + bMin: number; +}>({ shader, - uniforms: ['rMax', 'rMin', 'gMax', 'gMin', 'bMax', 'bMin'] as const, + main: ({ gl, u, params }) => { + gl.uniform1f(u.rMax, params.rMax); + gl.uniform1f(u.rMin, 1.0 + params.rMin); + gl.uniform1f(u.gMax, params.gMax); + gl.uniform1f(u.gMin, 1.0 + params.gMin); + gl.uniform1f(u.bMax, params.bMax); + gl.uniform1f(u.bMin, 1.0 + params.bMin); + }, +}); + +export const uiDefinition = { + name: i18n.ts._imageEffector._fxs.colorClampAdvanced, params: { rMax: { label: `${i18n.ts._imageEffector._fxProps.max} (${i18n.ts._imageEffector._fxProps.redComponent})`, @@ -68,12 +85,4 @@ export const FX_colorClampAdvanced = defineImageEffectorFx({ toViewValue: v => Math.round(v * 100) + '%', }, }, - main: ({ gl, u, params }) => { - gl.uniform1f(u.rMax, params.rMax); - gl.uniform1f(u.rMin, 1.0 + params.rMin); - gl.uniform1f(u.gMax, params.gMax); - gl.uniform1f(u.gMin, 1.0 + params.gMin); - gl.uniform1f(u.bMax, params.bMax); - gl.uniform1f(u.bMin, 1.0 + params.bMin); - }, -}); +} satisfies ImageEffectorUiDefinition; diff --git a/packages/frontend/src/utility/image-effector/fxs/distort.glsl b/packages/frontend/src/utility/image-compositor-functions/distort.glsl similarity index 100% rename from packages/frontend/src/utility/image-effector/fxs/distort.glsl rename to packages/frontend/src/utility/image-compositor-functions/distort.glsl diff --git a/packages/frontend/src/utility/image-effector/fxs/distort.ts b/packages/frontend/src/utility/image-compositor-functions/distort.ts similarity index 76% rename from packages/frontend/src/utility/image-effector/fxs/distort.ts rename to packages/frontend/src/utility/image-compositor-functions/distort.ts index 3ea93a0266..bd0fcdf42f 100644 --- a/packages/frontend/src/utility/image-effector/fxs/distort.ts +++ b/packages/frontend/src/utility/image-compositor-functions/distort.ts @@ -3,15 +3,28 @@ * SPDX-License-Identifier: AGPL-3.0-only */ -import { defineImageEffectorFx } from '../ImageEffector.js'; import shader from './distort.glsl'; +import type { ImageEffectorUiDefinition } from '../image-effector/ImageEffector.js'; +import { defineImageCompositorFunction } from '@/lib/ImageCompositor.js'; import { i18n } from '@/i18n.js'; -export const FX_distort = defineImageEffectorFx({ - id: 'distort', - name: i18n.ts._imageEffector._fxs.distort, +export const fn = defineImageCompositorFunction<{ + direction: number; + phase: number; + frequency: number; + strength: number; +}>({ shader, - uniforms: ['phase', 'frequency', 'strength', 'direction'] as const, + main: ({ gl, u, params }) => { + gl.uniform1f(u.phase, params.phase); + gl.uniform1f(u.frequency, params.frequency); + gl.uniform1f(u.strength, params.strength); + gl.uniform1i(u.direction, params.direction); + }, +}); + +export const uiDefinition = { + name: i18n.ts._imageEffector._fxs.distort, params: { direction: { label: i18n.ts._imageEffector._fxProps.direction, @@ -49,10 +62,4 @@ export const FX_distort = defineImageEffectorFx({ toViewValue: v => Math.round(v * 100) + '%', }, }, - main: ({ gl, u, params }) => { - gl.uniform1f(u.phase, params.phase); - gl.uniform1f(u.frequency, params.frequency); - gl.uniform1f(u.strength, params.strength); - gl.uniform1i(u.direction, params.direction); - }, -}); +} satisfies ImageEffectorUiDefinition; diff --git a/packages/frontend/src/utility/image-effector/fxs/fill.glsl b/packages/frontend/src/utility/image-compositor-functions/fill.glsl similarity index 100% rename from packages/frontend/src/utility/image-effector/fxs/fill.glsl rename to packages/frontend/src/utility/image-compositor-functions/fill.glsl diff --git a/packages/frontend/src/utility/image-effector/fxs/fill.ts b/packages/frontend/src/utility/image-compositor-functions/fill.ts similarity index 81% rename from packages/frontend/src/utility/image-effector/fxs/fill.ts rename to packages/frontend/src/utility/image-compositor-functions/fill.ts index 772cd76cf7..901bdadfe5 100644 --- a/packages/frontend/src/utility/image-effector/fxs/fill.ts +++ b/packages/frontend/src/utility/image-compositor-functions/fill.ts @@ -3,15 +3,34 @@ * SPDX-License-Identifier: AGPL-3.0-only */ -import { defineImageEffectorFx } from '../ImageEffector.js'; import shader from './fill.glsl'; +import type { ImageEffectorUiDefinition } from '../image-effector/ImageEffector.js'; +import { defineImageCompositorFunction } from '@/lib/ImageCompositor.js'; import { i18n } from '@/i18n.js'; -export const FX_fill = defineImageEffectorFx({ - id: 'fill', - name: i18n.ts._imageEffector._fxs.fill, +export const fn = defineImageCompositorFunction<{ + offsetX: number; + offsetY: number; + scaleX: number; + scaleY: number; + ellipse: boolean; + angle: number; + color: [number, number, number]; + opacity: number; +}>({ shader, - uniforms: ['offset', 'scale', 'ellipse', 'angle', 'color', 'opacity'] as const, + main: ({ gl, u, params }) => { + gl.uniform2f(u.offset, params.offsetX / 2, params.offsetY / 2); + gl.uniform2f(u.scale, params.scaleX / 2, params.scaleY / 2); + gl.uniform1i(u.ellipse, params.ellipse ? 1 : 0); + gl.uniform1f(u.angle, params.angle / 2); + gl.uniform3f(u.color, params.color[0], params.color[1], params.color[2]); + gl.uniform1f(u.opacity, params.opacity); + }, +}); + +export const uiDefinition = { + name: i18n.ts._imageEffector._fxs.fill, params: { offsetX: { label: i18n.ts._imageEffector._fxProps.offset + ' X', @@ -78,12 +97,4 @@ export const FX_fill = defineImageEffectorFx({ toViewValue: v => Math.round(v * 100) + '%', }, }, - main: ({ gl, u, params }) => { - gl.uniform2f(u.offset, params.offsetX / 2, params.offsetY / 2); - gl.uniform2f(u.scale, params.scaleX / 2, params.scaleY / 2); - gl.uniform1i(u.ellipse, params.ellipse ? 1 : 0); - gl.uniform1f(u.angle, params.angle / 2); - gl.uniform3f(u.color, params.color[0], params.color[1], params.color[2]); - gl.uniform1f(u.opacity, params.opacity); - }, -}); +} satisfies ImageEffectorUiDefinition; diff --git a/packages/frontend/src/utility/image-effector/fxs/grayscale.glsl b/packages/frontend/src/utility/image-compositor-functions/grayscale.glsl similarity index 100% rename from packages/frontend/src/utility/image-effector/fxs/grayscale.glsl rename to packages/frontend/src/utility/image-compositor-functions/grayscale.glsl diff --git a/packages/frontend/src/utility/image-compositor-functions/grayscale.ts b/packages/frontend/src/utility/image-compositor-functions/grayscale.ts new file mode 100644 index 0000000000..b6860de0a2 --- /dev/null +++ b/packages/frontend/src/utility/image-compositor-functions/grayscale.ts @@ -0,0 +1,21 @@ +/* + * SPDX-FileCopyrightText: syuilo and misskey-project + * SPDX-License-Identifier: AGPL-3.0-only + */ + +import shader from './grayscale.glsl'; +import type { ImageEffectorUiDefinition } from '../image-effector/ImageEffector.js'; +import { defineImageCompositorFunction } from '@/lib/ImageCompositor.js'; +import { i18n } from '@/i18n.js'; + +export const fn = defineImageCompositorFunction({ + shader, + main: ({ gl, u, params }) => { + }, +}); + +export const uiDefinition = { + name: i18n.ts._imageEffector._fxs.grayscale, + params: { + }, +} satisfies ImageEffectorUiDefinition; diff --git a/packages/frontend/src/utility/image-effector/fxs/invert.glsl b/packages/frontend/src/utility/image-compositor-functions/invert.glsl similarity index 100% rename from packages/frontend/src/utility/image-effector/fxs/invert.glsl rename to packages/frontend/src/utility/image-compositor-functions/invert.glsl diff --git a/packages/frontend/src/utility/image-effector/fxs/invert.ts b/packages/frontend/src/utility/image-compositor-functions/invert.ts similarity index 68% rename from packages/frontend/src/utility/image-effector/fxs/invert.ts rename to packages/frontend/src/utility/image-compositor-functions/invert.ts index 9417047931..f64e68034e 100644 --- a/packages/frontend/src/utility/image-effector/fxs/invert.ts +++ b/packages/frontend/src/utility/image-compositor-functions/invert.ts @@ -3,15 +3,26 @@ * SPDX-License-Identifier: AGPL-3.0-only */ -import { defineImageEffectorFx } from '../ImageEffector.js'; import shader from './invert.glsl'; +import type { ImageEffectorUiDefinition } from '../image-effector/ImageEffector.js'; +import { defineImageCompositorFunction } from '@/lib/ImageCompositor.js'; import { i18n } from '@/i18n.js'; -export const FX_invert = defineImageEffectorFx({ - id: 'invert', - name: i18n.ts._imageEffector._fxs.invert, +export const fn = defineImageCompositorFunction<{ + r: boolean; + g: boolean; + b: boolean; +}>({ shader, - uniforms: ['r', 'g', 'b'] as const, + main: ({ gl, u, params }) => { + gl.uniform1i(u.r, params.r ? 1 : 0); + gl.uniform1i(u.g, params.g ? 1 : 0); + gl.uniform1i(u.b, params.b ? 1 : 0); + }, +}); + +export const uiDefinition = { + name: i18n.ts._imageEffector._fxs.invert, params: { r: { label: i18n.ts._imageEffector._fxProps.redComponent, @@ -29,9 +40,4 @@ export const FX_invert = defineImageEffectorFx({ default: true, }, }, - main: ({ gl, u, params }) => { - gl.uniform1i(u.r, params.r ? 1 : 0); - gl.uniform1i(u.g, params.g ? 1 : 0); - gl.uniform1i(u.b, params.b ? 1 : 0); - }, -}); +} satisfies ImageEffectorUiDefinition; diff --git a/packages/frontend/src/utility/image-effector/fxs/mirror.glsl b/packages/frontend/src/utility/image-compositor-functions/mirror.glsl similarity index 100% rename from packages/frontend/src/utility/image-effector/fxs/mirror.glsl rename to packages/frontend/src/utility/image-compositor-functions/mirror.glsl diff --git a/packages/frontend/src/utility/image-effector/fxs/mirror.ts b/packages/frontend/src/utility/image-compositor-functions/mirror.ts similarity index 63% rename from packages/frontend/src/utility/image-effector/fxs/mirror.ts rename to packages/frontend/src/utility/image-compositor-functions/mirror.ts index 6515454ead..47d19c0553 100644 --- a/packages/frontend/src/utility/image-effector/fxs/mirror.ts +++ b/packages/frontend/src/utility/image-compositor-functions/mirror.ts @@ -3,15 +3,24 @@ * SPDX-License-Identifier: AGPL-3.0-only */ -import { defineImageEffectorFx } from '../ImageEffector.js'; import shader from './mirror.glsl'; +import type { ImageEffectorUiDefinition } from '../image-effector/ImageEffector.js'; +import { defineImageCompositorFunction } from '@/lib/ImageCompositor.js'; import { i18n } from '@/i18n.js'; -export const FX_mirror = defineImageEffectorFx({ - id: 'mirror', - name: i18n.ts._imageEffector._fxs.mirror, +export const fn = defineImageCompositorFunction<{ + h: number; + v: number; +}>({ shader, - uniforms: ['h', 'v'] as const, + main: ({ gl, u, params }) => { + gl.uniform1i(u.h, params.h); + gl.uniform1i(u.v, params.v); + }, +}); + +export const uiDefinition = { + name: i18n.ts._imageEffector._fxs.mirror, params: { h: { label: i18n.ts.horizontal, @@ -19,7 +28,7 @@ export const FX_mirror = defineImageEffectorFx({ enum: [ { value: -1 as const, icon: 'ti ti-arrow-bar-right' }, { value: 0 as const, icon: 'ti ti-minus-vertical' }, - { value: 1 as const, icon: 'ti ti-arrow-bar-left' } + { value: 1 as const, icon: 'ti ti-arrow-bar-left' }, ], default: -1, }, @@ -29,13 +38,9 @@ export const FX_mirror = defineImageEffectorFx({ enum: [ { value: -1 as const, icon: 'ti ti-arrow-bar-down' }, { value: 0 as const, icon: 'ti ti-minus' }, - { value: 1 as const, icon: 'ti ti-arrow-bar-up' } + { value: 1 as const, icon: 'ti ti-arrow-bar-up' }, ], default: 0, }, }, - main: ({ gl, u, params }) => { - gl.uniform1i(u.h, params.h); - gl.uniform1i(u.v, params.v); - }, -}); +} satisfies ImageEffectorUiDefinition; diff --git a/packages/frontend/src/utility/image-effector/fxs/pixelate.glsl b/packages/frontend/src/utility/image-compositor-functions/pixelate.glsl similarity index 100% rename from packages/frontend/src/utility/image-effector/fxs/pixelate.glsl rename to packages/frontend/src/utility/image-compositor-functions/pixelate.glsl diff --git a/packages/frontend/src/utility/image-effector/fxs/pixelate.ts b/packages/frontend/src/utility/image-compositor-functions/pixelate.ts similarity index 81% rename from packages/frontend/src/utility/image-effector/fxs/pixelate.ts rename to packages/frontend/src/utility/image-compositor-functions/pixelate.ts index e3eef49b23..249d272e7e 100644 --- a/packages/frontend/src/utility/image-effector/fxs/pixelate.ts +++ b/packages/frontend/src/utility/image-compositor-functions/pixelate.ts @@ -3,15 +3,33 @@ * SPDX-License-Identifier: AGPL-3.0-only */ -import { defineImageEffectorFx } from '../ImageEffector.js'; import shader from './pixelate.glsl'; +import type { ImageEffectorUiDefinition } from '../image-effector/ImageEffector.js'; +import { defineImageCompositorFunction } from '@/lib/ImageCompositor.js'; import { i18n } from '@/i18n.js'; -export const FX_pixelate = defineImageEffectorFx({ - id: 'pixelate', - name: i18n.ts._imageEffector._fxs.pixelate, +export const fn = defineImageCompositorFunction<{ + offsetX: number; + offsetY: number; + scaleX: number; + scaleY: number; + ellipse: boolean; + angle: number; + strength: number; +}>({ shader, - uniforms: ['offset', 'scale', 'ellipse', 'angle', 'strength', 'samples'] as const, + main: ({ gl, u, params }) => { + gl.uniform2f(u.offset, params.offsetX / 2, params.offsetY / 2); + gl.uniform2f(u.scale, params.scaleX / 2, params.scaleY / 2); + gl.uniform1i(u.ellipse, params.ellipse ? 1 : 0); + gl.uniform1f(u.angle, params.angle / 2); + gl.uniform1f(u.strength, params.strength * params.strength); + gl.uniform1i(u.samples, 256); + }, +}); + +export const uiDefinition = { + name: i18n.ts._imageEffector._fxs.pixelate, params: { offsetX: { label: i18n.ts._imageEffector._fxProps.offset + ' X', @@ -72,12 +90,4 @@ export const FX_pixelate = defineImageEffectorFx({ step: 0.01, }, }, - main: ({ gl, u, params }) => { - gl.uniform2f(u.offset, params.offsetX / 2, params.offsetY / 2); - gl.uniform2f(u.scale, params.scaleX / 2, params.scaleY / 2); - gl.uniform1i(u.ellipse, params.ellipse ? 1 : 0); - gl.uniform1f(u.angle, params.angle / 2); - gl.uniform1f(u.strength, params.strength * params.strength); - gl.uniform1i(u.samples, 256); - }, -}); +} satisfies ImageEffectorUiDefinition; diff --git a/packages/frontend/src/utility/image-effector/fxs/polkadot.glsl b/packages/frontend/src/utility/image-compositor-functions/polkadot.glsl similarity index 100% rename from packages/frontend/src/utility/image-effector/fxs/polkadot.glsl rename to packages/frontend/src/utility/image-compositor-functions/polkadot.glsl diff --git a/packages/frontend/src/utility/image-effector/fxs/polkadot.ts b/packages/frontend/src/utility/image-compositor-functions/polkadot.ts similarity index 81% rename from packages/frontend/src/utility/image-effector/fxs/polkadot.ts rename to packages/frontend/src/utility/image-compositor-functions/polkadot.ts index 521e08cc7b..d94d704be3 100644 --- a/packages/frontend/src/utility/image-effector/fxs/polkadot.ts +++ b/packages/frontend/src/utility/image-compositor-functions/polkadot.ts @@ -3,16 +3,36 @@ * SPDX-License-Identifier: AGPL-3.0-only */ -import { defineImageEffectorFx } from '../ImageEffector.js'; import shader from './polkadot.glsl'; +import type { ImageEffectorUiDefinition } from '../image-effector/ImageEffector.js'; +import { defineImageCompositorFunction } from '@/lib/ImageCompositor.js'; import { i18n } from '@/i18n.js'; -// Primarily used for watermark -export const FX_polkadot = defineImageEffectorFx({ - id: 'polkadot', - name: i18n.ts._imageEffector._fxs.polkadot, +export const fn = defineImageCompositorFunction<{ + angle: number; + scale: number; + majorRadius: number; + majorOpacity: number; + minorDivisions: number; + minorRadius: number; + minorOpacity: number; + color: [number, number, number]; +}>({ shader, - uniforms: ['angle', 'scale', 'major_radius', 'major_opacity', 'minor_divisions', 'minor_radius', 'minor_opacity', 'color'] as const, + main: ({ gl, u, params }) => { + gl.uniform1f(u.angle, params.angle / 2); + gl.uniform1f(u.scale, params.scale * params.scale); + gl.uniform1f(u.major_radius, params.majorRadius); + gl.uniform1f(u.major_opacity, params.majorOpacity); + gl.uniform1f(u.minor_divisions, params.minorDivisions); + gl.uniform1f(u.minor_radius, params.minorRadius); + gl.uniform3f(u.color, params.color[0], params.color[1], params.color[2]); + gl.uniform1f(u.minor_opacity, params.minorOpacity); + }, +}); + +export const uiDefinition = { + name: i18n.ts._imageEffector._fxs.polkadot, params: { angle: { label: i18n.ts._imageEffector._fxProps.angle, @@ -79,14 +99,4 @@ export const FX_polkadot = defineImageEffectorFx({ default: [1, 1, 1], }, }, - main: ({ gl, u, params }) => { - gl.uniform1f(u.angle, params.angle / 2); - gl.uniform1f(u.scale, params.scale * params.scale); - gl.uniform1f(u.major_radius, params.majorRadius); - gl.uniform1f(u.major_opacity, params.majorOpacity); - gl.uniform1f(u.minor_divisions, params.minorDivisions); - gl.uniform1f(u.minor_radius, params.minorRadius); - gl.uniform3f(u.color, params.color[0], params.color[1], params.color[2]); - gl.uniform1f(u.minor_opacity, params.minorOpacity); - }, -}); +} satisfies ImageEffectorUiDefinition; diff --git a/packages/frontend/src/utility/image-effector/fxs/stripe.glsl b/packages/frontend/src/utility/image-compositor-functions/stripe.glsl similarity index 100% rename from packages/frontend/src/utility/image-effector/fxs/stripe.glsl rename to packages/frontend/src/utility/image-compositor-functions/stripe.glsl diff --git a/packages/frontend/src/utility/image-effector/fxs/stripe.ts b/packages/frontend/src/utility/image-compositor-functions/stripe.ts similarity index 77% rename from packages/frontend/src/utility/image-effector/fxs/stripe.ts rename to packages/frontend/src/utility/image-compositor-functions/stripe.ts index 3a6ecf970c..d429a124bc 100644 --- a/packages/frontend/src/utility/image-effector/fxs/stripe.ts +++ b/packages/frontend/src/utility/image-compositor-functions/stripe.ts @@ -3,16 +3,31 @@ * SPDX-License-Identifier: AGPL-3.0-only */ -import { defineImageEffectorFx } from '../ImageEffector.js'; import shader from './stripe.glsl'; +import type { ImageEffectorUiDefinition } from '../image-effector/ImageEffector.js'; +import { defineImageCompositorFunction } from '@/lib/ImageCompositor.js'; import { i18n } from '@/i18n.js'; -// Primarily used for watermark -export const FX_stripe = defineImageEffectorFx({ - id: 'stripe', - name: i18n.ts._imageEffector._fxs.stripe, +export const fn = defineImageCompositorFunction<{ + angle: number; + frequency: number; + threshold: number; + color: [number, number, number]; + opacity: number; +}>({ shader, - uniforms: ['angle', 'frequency', 'phase', 'threshold', 'color', 'opacity'] as const, + main: ({ gl, u, params }) => { + gl.uniform1f(u.angle, params.angle / 2); + gl.uniform1f(u.frequency, params.frequency * params.frequency); + gl.uniform1f(u.phase, 0.0); + gl.uniform1f(u.threshold, params.threshold); + gl.uniform3f(u.color, params.color[0], params.color[1], params.color[2]); + gl.uniform1f(u.opacity, params.opacity); + }, +}); + +export const uiDefinition = { + name: i18n.ts._imageEffector._fxs.stripe, params: { angle: { label: i18n.ts._imageEffector._fxProps.angle, @@ -55,12 +70,4 @@ export const FX_stripe = defineImageEffectorFx({ toViewValue: v => Math.round(v * 100) + '%', }, }, - main: ({ gl, u, params }) => { - gl.uniform1f(u.angle, params.angle / 2); - gl.uniform1f(u.frequency, params.frequency * params.frequency); - gl.uniform1f(u.phase, 0.0); - gl.uniform1f(u.threshold, params.threshold); - gl.uniform3f(u.color, params.color[0], params.color[1], params.color[2]); - gl.uniform1f(u.opacity, params.opacity); - }, -}); +} satisfies ImageEffectorUiDefinition; diff --git a/packages/frontend/src/utility/image-effector/fxs/tearing.glsl b/packages/frontend/src/utility/image-compositor-functions/tearing.glsl similarity index 100% rename from packages/frontend/src/utility/image-effector/fxs/tearing.glsl rename to packages/frontend/src/utility/image-compositor-functions/tearing.glsl diff --git a/packages/frontend/src/utility/image-effector/fxs/tearing.ts b/packages/frontend/src/utility/image-compositor-functions/tearing.ts similarity index 82% rename from packages/frontend/src/utility/image-effector/fxs/tearing.ts rename to packages/frontend/src/utility/image-compositor-functions/tearing.ts index 453b16bb19..66c61b7ca8 100644 --- a/packages/frontend/src/utility/image-effector/fxs/tearing.ts +++ b/packages/frontend/src/utility/image-compositor-functions/tearing.ts @@ -5,14 +5,39 @@ import seedrandom from 'seedrandom'; import shader from './tearing.glsl'; -import { defineImageEffectorFx } from '../ImageEffector.js'; +import type { ImageEffectorUiDefinition } from '../image-effector/ImageEffector.js'; +import { defineImageCompositorFunction } from '@/lib/ImageCompositor.js'; import { i18n } from '@/i18n.js'; -export const FX_tearing = defineImageEffectorFx({ - id: 'tearing', - name: i18n.ts._imageEffector._fxs.glitch + ': ' + i18n.ts._imageEffector._fxs.tearing, +export const fn = defineImageCompositorFunction<{ + amount: number; + strength: number; + size: number; + channelShift: number; + seed: number; +}>({ shader, - uniforms: ['amount', 'channelShift'] as const, + 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); + } + }, +}); + +export const uiDefinition = { + name: i18n.ts._imageEffector._fxs.glitch + ': ' + i18n.ts._imageEffector._fxs.tearing, params: { amount: { label: i18n.ts._imageEffector._fxProps.amount, @@ -55,21 +80,4 @@ export const FX_tearing = defineImageEffectorFx({ 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); - } - }, -}); +} satisfies ImageEffectorUiDefinition; diff --git a/packages/frontend/src/utility/image-effector/fxs/threshold.glsl b/packages/frontend/src/utility/image-compositor-functions/threshold.glsl similarity index 100% rename from packages/frontend/src/utility/image-effector/fxs/threshold.glsl rename to packages/frontend/src/utility/image-compositor-functions/threshold.glsl diff --git a/packages/frontend/src/utility/image-effector/fxs/threshold.ts b/packages/frontend/src/utility/image-compositor-functions/threshold.ts similarity index 71% rename from packages/frontend/src/utility/image-effector/fxs/threshold.ts rename to packages/frontend/src/utility/image-compositor-functions/threshold.ts index d0bb8305ae..83ea788771 100644 --- a/packages/frontend/src/utility/image-effector/fxs/threshold.ts +++ b/packages/frontend/src/utility/image-compositor-functions/threshold.ts @@ -3,15 +3,26 @@ * SPDX-License-Identifier: AGPL-3.0-only */ -import { defineImageEffectorFx } from '../ImageEffector.js'; import shader from './threshold.glsl'; +import type { ImageEffectorUiDefinition } from '../image-effector/ImageEffector.js'; +import { defineImageCompositorFunction } from '@/lib/ImageCompositor.js'; import { i18n } from '@/i18n.js'; -export const FX_threshold = defineImageEffectorFx({ - id: 'threshold', - name: i18n.ts._imageEffector._fxs.threshold, +export const fn = defineImageCompositorFunction<{ + r: number; + g: number; + b: number; +}>({ shader, - uniforms: ['r', 'g', 'b'] as const, + main: ({ gl, u, params }) => { + gl.uniform1f(u.r, params.r); + gl.uniform1f(u.g, params.g); + gl.uniform1f(u.b, params.b); + }, +}); + +export const uiDefinition = { + name: i18n.ts._imageEffector._fxs.threshold, params: { r: { label: i18n.ts._imageEffector._fxProps.redComponent, @@ -38,9 +49,4 @@ export const FX_threshold = defineImageEffectorFx({ step: 0.01, }, }, - main: ({ gl, u, params }) => { - gl.uniform1f(u.r, params.r); - gl.uniform1f(u.g, params.g); - gl.uniform1f(u.b, params.b); - }, -}); +} satisfies ImageEffectorUiDefinition; diff --git a/packages/frontend/src/utility/image-effector/fxs/zoomLines.glsl b/packages/frontend/src/utility/image-compositor-functions/zoomLines.glsl similarity index 100% rename from packages/frontend/src/utility/image-effector/fxs/zoomLines.glsl rename to packages/frontend/src/utility/image-compositor-functions/zoomLines.glsl diff --git a/packages/frontend/src/utility/image-effector/fxs/zoomLines.ts b/packages/frontend/src/utility/image-compositor-functions/zoomLines.ts similarity index 80% rename from packages/frontend/src/utility/image-effector/fxs/zoomLines.ts rename to packages/frontend/src/utility/image-compositor-functions/zoomLines.ts index 8c0956d24e..f8768e4ec3 100644 --- a/packages/frontend/src/utility/image-effector/fxs/zoomLines.ts +++ b/packages/frontend/src/utility/image-compositor-functions/zoomLines.ts @@ -3,15 +3,34 @@ * SPDX-License-Identifier: AGPL-3.0-only */ -import { defineImageEffectorFx } from '../ImageEffector.js'; import shader from './zoomLines.glsl'; +import type { ImageEffectorUiDefinition } from '../image-effector/ImageEffector.js'; +import { defineImageCompositorFunction } from '@/lib/ImageCompositor.js'; import { i18n } from '@/i18n.js'; -export const FX_zoomLines = defineImageEffectorFx({ - id: 'zoomLines', - name: i18n.ts._imageEffector._fxs.zoomLines, +export const fn = defineImageCompositorFunction<{ + x: number; + y: number; + frequency: number; + smoothing: boolean; + threshold: number; + maskSize: number; + black: boolean; +}>({ shader, - uniforms: ['pos', 'frequency', 'thresholdEnabled', 'threshold', 'maskSize', 'black'] as const, + 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.maskSize, params.maskSize); + gl.uniform1i(u.black, params.black ? 1 : 0); + }, +}); + +export const uiDefinition = { + name: i18n.ts._imageEffector._fxs.zoomLines, params: { x: { label: i18n.ts._imageEffector._fxProps.centerX, @@ -65,13 +84,4 @@ export const FX_zoomLines = defineImageEffectorFx({ default: false, }, }, - 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.maskSize, params.maskSize); - gl.uniform1i(u.black, params.black ? 1 : 0); - }, -}); +} satisfies ImageEffectorUiDefinition; diff --git a/packages/frontend/src/utility/image-effector/ImageEffector.ts b/packages/frontend/src/utility/image-effector/ImageEffector.ts index 26c74bfae5..b4295c4637 100644 --- a/packages/frontend/src/utility/image-effector/ImageEffector.ts +++ b/packages/frontend/src/utility/image-effector/ImageEffector.ts @@ -3,18 +3,12 @@ * SPDX-License-Identifier: AGPL-3.0-only */ -import QRCodeStyling from 'qr-code-styling'; -import { url, host } from '@@/js/config.js'; -import { getProxiedImageUrl } from '../media-proxy.js'; -import { initShaderProgram } from '../webgl.js'; -import { ensureSignin } from '@/i.js'; +import { FXS } from './fxs.js'; +import type { ImageCompositorFunction, ImageCompositorLayer } from '@/lib/ImageCompositor.js'; +import { ImageCompositor } from '@/lib/ImageCompositor.js'; export type ImageEffectorRGB = [r: number, g: number, b: number]; -type ParamTypeToPrimitive = { - [K in ImageEffectorFxParamDef['type']]: (ImageEffectorFxParamDef & { type: K })['default']; -}; - interface CommonParamDef { type: string; label?: string; @@ -60,479 +54,77 @@ interface SeedParamDef extends CommonParamDef { default: number; }; -interface TextureParamDef extends CommonParamDef { - type: 'texture'; - default: { - type: 'text'; text: string | null; - } | { - type: 'url'; url: string | null; - } | { - type: 'qr'; data: string | null; - } | null; -}; - interface ColorParamDef extends CommonParamDef { type: 'color'; default: ImageEffectorRGB; }; -type ImageEffectorFxParamDef = NumberParamDef | NumberEnumParamDef | BooleanParamDef | AlignParamDef | SeedParamDef | TextureParamDef | ColorParamDef; +type ImageEffectorFxParamDef = NumberParamDef | NumberEnumParamDef | BooleanParamDef | AlignParamDef | SeedParamDef | ColorParamDef; export type ImageEffectorFxParamDefs = Record; -export type GetParamType = - T extends NumberEnumParamDef - ? T['enum'][number]['value'] - : ParamTypeToPrimitive[T['type']]; - -export type ParamsRecordTypeToDefRecord = { - [K in keyof PS]: GetParamType; -}; - -export function defineImageEffectorFx(fx: ImageEffectorFx) { - return fx; -} - -export type ImageEffectorFx = { - id: ID; - name: string; - shader: string; - uniforms: US; - params: PS, - main: (ctx: { - gl: WebGL2RenderingContext; - program: WebGLProgram; - params: ParamsRecordTypeToDefRecord; - u: Record; - width: number; - height: number; - textures: Record; - }) => void; -}; - export type ImageEffectorLayer = { - id: string; - fxId: string; - params: Record; + [K in keyof typeof FXS]: { + id: string; + fxId: K; + params: Parameters<(typeof FXS)[K]['fn']['main']>[0]['params']; + }; +}[keyof typeof FXS]; + +export type ImageEffectorUiDefinition = ImageCompositorFunction> = { + name: string; + params: Fn extends ImageCompositorFunction ? { + [K in keyof P]: ImageEffectorFxParamDef; + } : never; }; -function getValue(params: Record, k: string): ParamTypeToPrimitive[T] { - return params[k]; -} +type ImageEffectorImageCompositor = ImageCompositor<{ + [K in keyof typeof FXS]: typeof FXS[K]['fn']; +}>; -export class ImageEffector>> { - private gl: WebGL2RenderingContext; +export class ImageEffector { private canvas: HTMLCanvasElement | null = null; - private renderWidth: number; - private renderHeight: number; - private originalImage: ImageData | ImageBitmap | HTMLImageElement | HTMLCanvasElement; - private layers: ImageEffectorLayer[] = []; - private originalImageTexture: WebGLTexture; - private shaderCache: Map = new Map(); - private perLayerResultTextures: Map = new Map(); - private perLayerResultFrameBuffers: Map = new Map(); - private nopProgram: WebGLProgram; - private fxs: [...IEX]; - private paramTextures: Map = new Map(); + private compositor: ImageEffectorImageCompositor; constructor(options: { canvas: HTMLCanvasElement; renderWidth: number; renderHeight: number; - image: ImageData | ImageBitmap | HTMLImageElement | HTMLCanvasElement; - fxs: [...IEX]; + image: ImageData | ImageBitmap | HTMLImageElement | HTMLCanvasElement | null; }) { this.canvas = options.canvas; - this.renderWidth = options.renderWidth; - this.renderHeight = options.renderHeight; - this.originalImage = options.image; - this.fxs = options.fxs; - this.canvas.width = this.renderWidth; - this.canvas.height = this.renderHeight; - - const gl = this.canvas.getContext('webgl2', { - preserveDrawingBuffer: false, - alpha: true, - premultipliedAlpha: false, + this.compositor = new ImageCompositor({ + canvas: this.canvas, + renderWidth: options.renderWidth, + renderHeight: options.renderHeight, + image: options.image, + functions: Object.fromEntries(Object.entries(FXS).map(([fxId, fx]) => [fxId, fx.fn])), }); - - if (gl == null) { - throw new Error('Failed to initialize WebGL2 context'); - } - - this.gl = gl; - - gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight); - - const VERTICES = new Float32Array([-1, -1, -1, 1, 1, 1, -1, -1, 1, 1, 1, -1]); - const vertexBuffer = gl.createBuffer(); - gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); - gl.bufferData(gl.ARRAY_BUFFER, VERTICES, gl.STATIC_DRAW); - - this.originalImageTexture = createTexture(gl); - gl.activeTexture(gl.TEXTURE0); - gl.bindTexture(gl.TEXTURE_2D, this.originalImageTexture); - gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, this.originalImage.width, this.originalImage.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, this.originalImage); - gl.bindTexture(gl.TEXTURE_2D, null); - - this.nopProgram = initShaderProgram(this.gl, `#version 300 es - in vec2 position; - out vec2 in_uv; - - void main() { - in_uv = (position + 1.0) / 2.0; - gl_Position = vec4(position * vec2(1.0, -1.0), 0.0, 1.0); - } - `, `#version 300 es - precision mediump float; - - in vec2 in_uv; - uniform sampler2D u_texture; - out vec4 out_color; - - void main() { - out_color = texture(u_texture, in_uv); - } - `); - - // レジスタ番号はシェーダープログラムに属しているわけではなく、独立の存在なので、とりあえず nopProgram を使って設定する(その後は効果が持続する) - // ref. https://qiita.com/emadurandal/items/5966c8374f03d4de3266 - const positionLocation = gl.getAttribLocation(this.nopProgram, 'position'); - gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0); - gl.enableVertexAttribArray(positionLocation); } - private renderLayer(layer: ImageEffectorLayer, preTexture: WebGLTexture, invert = false) { - const gl = this.gl; - - const fx = this.fxs.find(fx => fx.id === layer.fxId); - if (fx == null) return; - - const cachedShader = this.shaderCache.get(fx.id); - const shaderProgram = cachedShader ?? initShaderProgram(this.gl, `#version 300 es - in vec2 position; - uniform bool u_invert; - out vec2 in_uv; - - void main() { - in_uv = (position + 1.0) / 2.0; - gl_Position = u_invert ? vec4(position * vec2(1.0, -1.0), 0.0, 1.0) : vec4(position, 0.0, 1.0); - } - `, fx.shader); - if (cachedShader == null) { - this.shaderCache.set(fx.id, shaderProgram); - } - - gl.useProgram(shaderProgram); - - const in_resolution = gl.getUniformLocation(shaderProgram, 'in_resolution'); - gl.uniform2fv(in_resolution, [this.renderWidth, this.renderHeight]); - - const u_invert = gl.getUniformLocation(shaderProgram, 'u_invert'); - gl.uniform1i(u_invert, invert ? 1 : 0); - - gl.activeTexture(gl.TEXTURE0); - gl.bindTexture(gl.TEXTURE_2D, preTexture); - const in_texture = gl.getUniformLocation(shaderProgram, 'in_texture'); - gl.uniform1i(in_texture, 0); - - fx.main({ - gl: gl, - program: shaderProgram, - params: Object.fromEntries( - Object.entries(fx.params as ImageEffectorFxParamDefs).map(([key, param]) => { - return [key, layer.params[key] ?? param.default]; - }), - ), - u: Object.fromEntries(fx.uniforms.map(u => [u, gl.getUniformLocation(shaderProgram, 'u_' + u)!])), - width: this.renderWidth, - height: this.renderHeight, - textures: Object.fromEntries( - Object.entries(fx.params as ImageEffectorFxParamDefs).map(([k, v]) => { - if (v.type !== 'texture') return [k, null]; - const param = getValue(layer.params, k); - if (param == null) return [k, null]; - const texture = this.paramTextures.get(this.getTextureKeyForParam(param)) ?? null; - return [k, texture]; - })), - }); - - gl.drawArrays(gl.TRIANGLES, 0, 6); - } - - public render() { - const gl = this.gl; - - // 入力をそのまま出力 - if (this.layers.length === 0) { - gl.activeTexture(gl.TEXTURE0); - gl.bindTexture(gl.TEXTURE_2D, this.originalImageTexture); - - gl.useProgram(this.nopProgram); - gl.uniform1i(gl.getUniformLocation(this.nopProgram, 'u_texture')!, 0); - - gl.drawArrays(gl.TRIANGLES, 0, 6); - return; - } - - let preTexture = this.originalImageTexture; - - for (const layer of this.layers) { - const isLast = layer === this.layers.at(-1); - - const cachedResultTexture = this.perLayerResultTextures.get(layer.id); - const resultTexture = cachedResultTexture ?? createTexture(gl); - if (cachedResultTexture == null) { - this.perLayerResultTextures.set(layer.id, resultTexture); - } - gl.bindTexture(gl.TEXTURE_2D, resultTexture); - gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, this.renderWidth, this.renderHeight, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); - gl.bindTexture(gl.TEXTURE_2D, null); - - if (isLast) { - gl.bindFramebuffer(gl.FRAMEBUFFER, null); - } else { - const cachedResultFrameBuffer = this.perLayerResultFrameBuffers.get(layer.id); - const resultFrameBuffer = cachedResultFrameBuffer ?? gl.createFramebuffer()!; - if (cachedResultFrameBuffer == null) { - this.perLayerResultFrameBuffers.set(layer.id, resultFrameBuffer); - } - gl.bindFramebuffer(gl.FRAMEBUFFER, resultFrameBuffer); - gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, resultTexture, 0); - } - - this.renderLayer(layer, preTexture, isLast); - - preTexture = resultTexture; - } - } - - public async setLayers(layers: ImageEffectorLayer[]) { - this.layers = layers; - - const unused = new Set(this.paramTextures.keys()); + public async render(layers: ImageEffectorLayer[]) { + const compositorLayers: Parameters['render']>[0] = []; for (const layer of layers) { - const fx = this.fxs.find(fx => fx.id === layer.fxId); - if (fx == null) continue; - - for (const k of Object.keys(layer.params)) { - const paramDef = fx.params[k]; - if (paramDef == null) continue; - if (paramDef.type !== 'texture') continue; - const v = getValue(layer.params, k); - if (v == null) continue; - - const textureKey = this.getTextureKeyForParam(v); - unused.delete(textureKey); - if (this.paramTextures.has(textureKey)) continue; - - if (_DEV_) console.log(`Baking texture of <${textureKey}>...`); - - const texture = - v.type === 'text' ? await createTextureFromText(this.gl, v.text) : - v.type === 'url' ? await createTextureFromUrl(this.gl, v.url) : - v.type === 'qr' ? await createTextureFromQr(this.gl, { data: v.data }) : - null; - if (texture == null) continue; - - this.paramTextures.set(textureKey, texture); - } + compositorLayers.push({ + id: layer.id, + functionId: layer.fxId, + params: layer.params, + }); } - for (const k of unused) { - if (_DEV_) console.log(`Dispose unused texture <${k}>...`); - this.gl.deleteTexture(this.paramTextures.get(k)!.texture); - this.paramTextures.delete(k); - } - - this.render(); + this.compositor.render(compositorLayers as Parameters[0]); } public changeResolution(width: number, height: number) { - this.renderWidth = width; - this.renderHeight = height; - if (this.canvas) { - this.canvas.width = this.renderWidth; - this.canvas.height = this.renderHeight; - } - this.gl.viewport(0, 0, this.renderWidth, this.renderHeight); - } - - private getTextureKeyForParam(v: ParamTypeToPrimitive['texture']) { - if (v == null) return ''; - return ( - v.type === 'text' ? `text:${v.text}` : - v.type === 'url' ? `url:${v.url}` : - v.type === 'qr' ? `qr:${v.data}` : - '' - ); + this.compositor.changeResolution(width, height); } /* * disposeCanvas = true だとloseContextを呼ぶため、コンストラクタで渡されたcanvasも再利用不可になるので注意 */ public destroy(disposeCanvas = true) { - this.gl.deleteProgram(this.nopProgram); - - for (const shader of this.shaderCache.values()) { - this.gl.deleteProgram(shader); - } - this.shaderCache.clear(); - - for (const texture of this.perLayerResultTextures.values()) { - this.gl.deleteTexture(texture); - } - this.perLayerResultTextures.clear(); - - for (const framebuffer of this.perLayerResultFrameBuffers.values()) { - this.gl.deleteFramebuffer(framebuffer); - } - this.perLayerResultFrameBuffers.clear(); - - for (const texture of this.paramTextures.values()) { - this.gl.deleteTexture(texture.texture); - } - this.paramTextures.clear(); - - this.gl.deleteTexture(this.originalImageTexture); - - if (disposeCanvas) { - const loseContextExt = this.gl.getExtension('WEBGL_lose_context'); - if (loseContextExt) loseContextExt.loseContext(); - } + this.compositor.destroy(disposeCanvas); } } - -function createTexture(gl: WebGL2RenderingContext): WebGLTexture { - const texture = gl.createTexture(); - gl.bindTexture(gl.TEXTURE_2D, texture); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.MIRRORED_REPEAT); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.MIRRORED_REPEAT); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); - gl.bindTexture(gl.TEXTURE_2D, null); - return texture; -} - -async function createTextureFromUrl(gl: WebGL2RenderingContext, imageUrl: string | null): Promise<{ texture: WebGLTexture, width: number, height: number } | null> { - if (imageUrl == null || imageUrl.trim() === '') return null; - - const image = await new Promise((resolve, reject) => { - const img = new Image(); - img.onload = () => resolve(img); - img.onerror = reject; - img.src = getProxiedImageUrl(imageUrl); // CORS対策 - }).catch(() => null); - - if (image == null) return null; - - const texture = createTexture(gl); - gl.activeTexture(gl.TEXTURE0); - gl.bindTexture(gl.TEXTURE_2D, texture); - gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, image.width, image.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, image); - gl.bindTexture(gl.TEXTURE_2D, null); - - return { - texture, - width: image.width, - height: image.height, - }; -} - -async function createTextureFromText(gl: WebGL2RenderingContext, text: string | null, resolution = 2048): Promise<{ texture: WebGLTexture, width: number, height: number } | null> { - if (text == null || text.trim() === '') return null; - - const ctx = window.document.createElement('canvas').getContext('2d')!; - ctx.canvas.width = resolution; - ctx.canvas.height = resolution / 4; - const fontSize = resolution / 32; - const margin = fontSize / 2; - ctx.shadowColor = '#000000'; - ctx.shadowBlur = fontSize / 4; - - //ctx.fillStyle = '#00ff00'; - //ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height); - - ctx.fillStyle = '#ffffff'; - ctx.font = `bold ${fontSize}px sans-serif`; - ctx.textBaseline = 'middle'; - - ctx.fillText(text, margin, ctx.canvas.height / 2); - - const textMetrics = ctx.measureText(text); - const cropWidth = (Math.ceil(textMetrics.actualBoundingBoxRight + textMetrics.actualBoundingBoxLeft) + margin + margin); - const cropHeight = (Math.ceil(textMetrics.actualBoundingBoxAscent + textMetrics.actualBoundingBoxDescent) + margin + margin); - const data = ctx.getImageData(0, (ctx.canvas.height / 2) - (cropHeight / 2), ctx.canvas.width, ctx.canvas.height); - - const texture = createTexture(gl); - gl.activeTexture(gl.TEXTURE0); - gl.bindTexture(gl.TEXTURE_2D, texture); - gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, cropWidth, cropHeight, 0, gl.RGBA, gl.UNSIGNED_BYTE, data); - gl.bindTexture(gl.TEXTURE_2D, null); - - const info = { - texture: texture, - width: cropWidth, - height: cropHeight, - }; - - ctx.canvas.remove(); - - return info; -} - -async function createTextureFromQr(gl: WebGL2RenderingContext, options: { data: string | null }, resolution = 512): Promise<{ texture: WebGLTexture, width: number, height: number } | null> { - const $i = ensureSignin(); - - const qrCodeInstance = new QRCodeStyling({ - width: resolution, - height: resolution, - margin: 42, - type: 'canvas', - data: options.data == null || options.data === '' ? `${url}/users/${$i.id}` : options.data, - image: $i.avatarUrl, - qrOptions: { - typeNumber: 0, - mode: 'Byte', - errorCorrectionLevel: 'H', - }, - imageOptions: { - hideBackgroundDots: true, - imageSize: 0.3, - margin: 16, - crossOrigin: 'anonymous', - }, - dotsOptions: { - type: 'dots', - }, - cornersDotOptions: { - type: 'dot', - }, - cornersSquareOptions: { - type: 'extra-rounded', - }, - }); - - const blob = await qrCodeInstance.getRawData('png') as Blob | null; - if (blob == null) return null; - - const image = await window.createImageBitmap(blob); - - const texture = createTexture(gl); - gl.activeTexture(gl.TEXTURE0); - gl.bindTexture(gl.TEXTURE_2D, texture); - gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, resolution, resolution, 0, gl.RGBA, gl.UNSIGNED_BYTE, image); - gl.bindTexture(gl.TEXTURE_2D, null); - - return { - texture, - width: resolution, - height: resolution, - }; -} diff --git a/packages/frontend/src/utility/image-effector/fxs.ts b/packages/frontend/src/utility/image-effector/fxs.ts index 2b20cc1f99..1fd0ad6ed7 100644 --- a/packages/frontend/src/utility/image-effector/fxs.ts +++ b/packages/frontend/src/utility/image-effector/fxs.ts @@ -3,43 +3,47 @@ * SPDX-License-Identifier: AGPL-3.0-only */ -import { FX_checker } from './fxs/checker.js'; -import { FX_chromaticAberration } from './fxs/chromaticAberration.js'; -import { FX_colorAdjust } from './fxs/colorAdjust.js'; -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_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_zoomLines } from './fxs/zoomLines.js'; -import { FX_blockNoise } from './fxs/blockNoise.js'; -import { FX_fill } from './fxs/fill.js'; -import { FX_blur } from './fxs/blur.js'; -import { FX_pixelate } from './fxs/pixelate.js'; -import type { ImageEffectorFx } from './ImageEffector.js'; +import * as checker from '../image-compositor-functions/checker.js'; +import * as chromaticAberration from '../image-compositor-functions/chromaticAberration.js'; +import * as colorAdjust from '../image-compositor-functions/colorAdjust.js'; +import * as colorClamp from '../image-compositor-functions/colorClamp.js'; +import * as colorClampAdvanced from '../image-compositor-functions/colorClampAdvanced.js'; +import * as distort from '../image-compositor-functions/distort.js'; +import * as polkadot from '../image-compositor-functions/polkadot.js'; +import * as tearing from '../image-compositor-functions/tearing.js'; +import * as grayscale from '../image-compositor-functions/grayscale.js'; +import * as invert from '../image-compositor-functions/invert.js'; +import * as mirror from '../image-compositor-functions/mirror.js'; +import * as stripe from '../image-compositor-functions/stripe.js'; +import * as threshold from '../image-compositor-functions/threshold.js'; +import * as zoomLines from '../image-compositor-functions/zoomLines.js'; +import * as blockNoise from '../image-compositor-functions/blockNoise.js'; +import * as fill from '../image-compositor-functions/fill.js'; +import * as blur from '../image-compositor-functions/blur.js'; +import * as pixelate from '../image-compositor-functions/pixelate.js'; +import type { ImageCompositorFunction } from '@/lib/ImageCompositor.js'; +import type { ImageEffectorUiDefinition } from './ImageEffector.js'; -export const FXS = [ - FX_mirror, - FX_invert, - FX_grayscale, - FX_colorAdjust, - FX_colorClamp, - FX_colorClampAdvanced, - FX_distort, - FX_threshold, - FX_zoomLines, - FX_stripe, - FX_polkadot, - FX_checker, - FX_chromaticAberration, - FX_tearing, - FX_blockNoise, - FX_fill, - FX_blur, - FX_pixelate, -] as const satisfies ImageEffectorFx[]; +export const FXS = { + checker, + chromaticAberration, + colorAdjust, + colorClamp, + colorClampAdvanced, + distort, + polkadot, + tearing, + grayscale, + invert, + mirror, + stripe, + threshold, + zoomLines, + blockNoise, + fill, + blur, + pixelate, +} as const satisfies Record; + readonly uiDefinition: ImageEffectorUiDefinition; +}>; diff --git a/packages/frontend/src/utility/image-effector/fxs/grayscale.ts b/packages/frontend/src/utility/image-effector/fxs/grayscale.ts deleted file mode 100644 index 055e8b4618..0000000000 --- a/packages/frontend/src/utility/image-effector/fxs/grayscale.ts +++ /dev/null @@ -1,19 +0,0 @@ -/* - * SPDX-FileCopyrightText: syuilo and misskey-project - * SPDX-License-Identifier: AGPL-3.0-only - */ - -import { defineImageEffectorFx } from '../ImageEffector.js'; -import shader from './grayscale.glsl'; -import { i18n } from '@/i18n.js'; - -export const FX_grayscale = defineImageEffectorFx({ - id: 'grayscale', - name: i18n.ts._imageEffector._fxs.grayscale, - shader, - uniforms: [] as const, - params: { - }, - main: ({ gl, params }) => { - }, -}); diff --git a/packages/frontend/src/utility/image-frame-renderer/ImageFrameRenderer.ts b/packages/frontend/src/utility/image-frame-renderer/ImageFrameRenderer.ts new file mode 100644 index 0000000000..9e97728785 --- /dev/null +++ b/packages/frontend/src/utility/image-frame-renderer/ImageFrameRenderer.ts @@ -0,0 +1,270 @@ +/* + * SPDX-FileCopyrightText: syuilo and misskey-project + * SPDX-License-Identifier: AGPL-3.0-only + */ + +import QRCodeStyling from 'qr-code-styling'; +import { url } from '@@/js/config.js'; +import ExifReader from 'exifreader'; +import { FN_frame } from './frame.js'; +import { ImageCompositor } from '@/lib/ImageCompositor.js'; +import { ensureSignin } from '@/i.js'; + +const $i = ensureSignin(); + +type LabelParams = { + enabled: boolean; + scale: number; + padding: number; + textBig: string; + textSmall: string; + centered: boolean; + withQrCode: boolean; +}; + +export type ImageFrameParams = { + borderThickness: number; + labelTop: LabelParams; + labelBottom: LabelParams; + bgColor: [r: number, g: number, b: number]; + fgColor: [r: number, g: number, b: number]; + font: 'serif' | 'sans-serif'; + borderRadius: number; // TODO +}; + +export type ImageFramePreset = { + id: string; + name: string; + params: ImageFrameParams; +}; + +export class ImageFrameRenderer { + private compositor: ImageCompositor<{ frame: typeof FN_frame }>; + private image: HTMLImageElement | ImageBitmap; + private exif: ExifReader.Tags | null; + private caption: string | null = null; + private filename: string | null = null; + private renderAsPreview = false; + + constructor(options: { + canvas: HTMLCanvasElement, + image: HTMLImageElement | ImageBitmap, + exif: ExifReader.Tags | null, + filename: string | null, + caption: string | null, + renderAsPreview?: boolean, + }) { + this.image = options.image; + this.exif = options.exif; + this.caption = options.caption ?? null; + this.filename = options.filename ?? null; + this.renderAsPreview = options.renderAsPreview ?? false; + + this.compositor = new ImageCompositor({ + canvas: options.canvas, + renderWidth: 1, + renderHeight: 1, + image: null, + functions: { frame: FN_frame }, + }); + + this.compositor.registerTexture('image', this.image); + } + + private interpolateTemplateText(text: string) { + const DateTimeOriginal = this.exif == null ? '2012:03:04 5:06:07' : this.exif.DateTimeOriginal?.description; + const Model = this.exif == null ? 'Example camera' : this.exif.Model?.description; + const LensModel = this.exif == null ? 'Example lens 123mm f/1.23' : this.exif.LensModel?.description; + const FocalLength = this.exif == null ? '123mm' : this.exif.FocalLength?.description; + const FocalLengthIn35mmFilm = this.exif == null ? '123mm' : this.exif.FocalLengthIn35mmFilm?.description; + const ExposureTime = this.exif == null ? '1/234' : this.exif.ExposureTime?.description; + const FNumber = this.exif == null ? '1.23' : this.exif.FNumber?.description; + const ISOSpeedRatings = this.exif == null ? '123' : this.exif.ISOSpeedRatings?.description; + const GPSLatitude = this.exif == null ? '123.000000000000123' : this.exif.GPSLatitude?.description; + const GPSLongitude = this.exif == null ? '456.000000000000123' : this.exif.GPSLongitude?.description; + return text.replaceAll(/\{(\w+)\}/g, (_: string, key: string) => { + const meta_date = DateTimeOriginal ?? '????:??:?? ??:??:??'; + const date = meta_date.split(' ')[0].replaceAll(':', '/'); + switch (key) { + case 'caption': return this.caption ?? '?'; + case 'filename': return this.filename ?? '?'; + case 'filename_without_ext': return this.filename?.replace(/\.[^/.]+$/, '') ?? '?'; + case 'year': return date.split('/')[0]; + case 'month': return date.split('/')[1].replace(/^0/, ''); + case 'day': return date.split('/')[2].replace(/^0/, ''); + case 'hour': return meta_date.split(' ')[1].split(':')[0].replace(/^0/, ''); + case 'minute': return meta_date.split(' ')[1].split(':')[1].replace(/^0/, ''); + case 'second': return meta_date.split(' ')[1].split(':')[2].replace(/^0/, ''); + case '0month': return date.split('/')[1]; + case '0day': return date.split('/')[2]; + case '0hour': return meta_date.split(' ')[1].split(':')[0]; + case '0minute': return meta_date.split(' ')[1].split(':')[1]; + case '0second': return meta_date.split(' ')[1].split(':')[2]; + case 'camera_model': return Model ?? '?'; + case 'camera_lens_model': return LensModel ?? '?'; + case 'camera_mm': return FocalLength?.replace(' mm', '').replace('mm', '') ?? '?'; + case 'camera_mm_35': return FocalLengthIn35mmFilm?.replace(' mm', '').replace('mm', '') ?? '?'; + case 'camera_f': return FNumber?.replace('f/', '') ?? '?'; + case 'camera_s': return ExposureTime ?? '?'; + case 'camera_iso': return ISOSpeedRatings ?? '?'; + case 'gps_lat': return GPSLatitude ?? '?'; + case 'gps_long': return GPSLongitude ?? '?'; + default: return '?'; + } + }); + } + + private async renderLabel(renderWidth: number, renderHeight: number, paddingLeft: number, paddingRight: number, imageAreaH: number, fgColor: [number, number, number], font: string, params: LabelParams) { + const scaleBase = imageAreaH * params.scale; + const labelCanvasCtx = window.document.createElement('canvas').getContext('2d')!; + labelCanvasCtx.canvas.width = renderWidth; + labelCanvasCtx.canvas.height = renderHeight; + const fontSize = scaleBase / 30; + const textsMarginLeft = Math.max(fontSize * 2, paddingLeft); + const textsMarginRight = textsMarginLeft; + const withQrCode = params.withQrCode; + const qrSize = scaleBase * 0.1; + const qrMarginRight = Math.max((labelCanvasCtx.canvas.height - qrSize) / 2, paddingRight); + + labelCanvasCtx.fillStyle = `rgb(${Math.floor(fgColor[0] * 255)}, ${Math.floor(fgColor[1] * 255)}, ${Math.floor(fgColor[2] * 255)})`; + labelCanvasCtx.font = `bold ${fontSize}px ${font}`; + labelCanvasCtx.textBaseline = 'middle'; + + const titleY = params.textSmall === '' ? (labelCanvasCtx.canvas.height / 2) : (labelCanvasCtx.canvas.height / 2) - (fontSize * 0.9); + if (params.centered) { + labelCanvasCtx.textAlign = 'center'; + labelCanvasCtx.fillText(this.interpolateTemplateText(params.textBig), labelCanvasCtx.canvas.width / 2, titleY, labelCanvasCtx.canvas.width - textsMarginLeft - textsMarginRight); + } else { + labelCanvasCtx.textAlign = 'left'; + labelCanvasCtx.fillText(this.interpolateTemplateText(params.textBig), textsMarginLeft, titleY, labelCanvasCtx.canvas.width - textsMarginLeft - (withQrCode ? (qrSize + qrMarginRight + (fontSize * 1)) : textsMarginRight)); + } + + labelCanvasCtx.fillStyle = `rgba(${Math.floor(fgColor[0] * 255)}, ${Math.floor(fgColor[1] * 255)}, ${Math.floor(fgColor[2] * 255)}, 0.5)`; + labelCanvasCtx.font = `${fontSize * 0.85}px ${font}`; + labelCanvasCtx.textBaseline = 'middle'; + + const textY = params.textBig === '' ? (labelCanvasCtx.canvas.height / 2) : (labelCanvasCtx.canvas.height / 2) + (fontSize * 0.9); + if (params.centered) { + labelCanvasCtx.textAlign = 'center'; + labelCanvasCtx.fillText(this.interpolateTemplateText(params.textSmall), labelCanvasCtx.canvas.width / 2, textY, labelCanvasCtx.canvas.width - textsMarginLeft - textsMarginRight); + } else { + labelCanvasCtx.textAlign = 'left'; + labelCanvasCtx.fillText(this.interpolateTemplateText(params.textSmall), textsMarginLeft, textY, labelCanvasCtx.canvas.width - textsMarginLeft - (withQrCode ? (qrSize + qrMarginRight + (fontSize * 1)) : textsMarginRight)); + } + + if (withQrCode) { + try { + const qrCodeInstance = new QRCodeStyling({ + width: labelCanvasCtx.canvas.height, + height: labelCanvasCtx.canvas.height, + margin: 0, + type: 'canvas', + data: `${url}/users/${$i.id}`, + //image: $i.avatarUrl, + qrOptions: { + typeNumber: 0, + mode: 'Byte', + errorCorrectionLevel: 'H', + }, + imageOptions: { + hideBackgroundDots: true, + imageSize: 0.3, + margin: 16, + crossOrigin: 'anonymous', + }, + dotsOptions: { + type: 'dots', + roundSize: false, + color: `rgb(${Math.floor(fgColor[0] * 255)}, ${Math.floor(fgColor[1] * 255)}, ${Math.floor(fgColor[2] * 255)})`, + }, + backgroundOptions: { + color: 'transparent', + }, + cornersDotOptions: { + type: 'dot', + }, + cornersSquareOptions: { + type: 'extra-rounded', + }, + }); + + const blob = await qrCodeInstance.getRawData('png') as Blob | null; + if (blob == null) throw new Error('Failed to generate QR code'); + + const qrImageBitmap = await window.createImageBitmap(blob); + + labelCanvasCtx.drawImage( + qrImageBitmap, + labelCanvasCtx.canvas.width - qrSize - qrMarginRight, + (labelCanvasCtx.canvas.height - qrSize) / 2, + qrSize, + qrSize, + ); + qrImageBitmap.close(); + } catch (err) { + // nop + } + } + + return labelCanvasCtx.getImageData(0, 0, labelCanvasCtx.canvas.width, labelCanvasCtx.canvas.height); ; + } + + public async render(params: ImageFrameParams): Promise { + let imageAreaW = this.image.width; + let imageAreaH = this.image.height; + + if (this.renderAsPreview) { + const MAX_W = 1000; + const MAX_H = 1000; + + if (imageAreaW > MAX_W || imageAreaH > MAX_H) { + const scale = Math.min(MAX_W / imageAreaW, MAX_H / imageAreaH); + imageAreaW = Math.floor(imageAreaW * scale); + imageAreaH = Math.floor(imageAreaH * scale); + } + } + + const paddingLeft = Math.floor(imageAreaH * params.borderThickness); + const paddingRight = Math.floor(imageAreaH * params.borderThickness); + const paddingTop = params.labelTop.enabled ? Math.floor(imageAreaH * params.labelTop.padding) : Math.floor(imageAreaH * params.borderThickness); + const paddingBottom = params.labelBottom.enabled ? Math.floor(imageAreaH * params.labelBottom.padding) : Math.floor(imageAreaH * params.borderThickness); + const renderWidth = imageAreaW + paddingLeft + paddingRight; + const renderHeight = imageAreaH + paddingTop + paddingBottom; + + if (params.labelTop.enabled) { + const topLabelImage = await this.renderLabel(renderWidth, paddingTop, paddingLeft, paddingRight, imageAreaH, params.fgColor, params.font, params.labelTop); + this.compositor.registerTexture('topLabel', topLabelImage); + } + + if (params.labelBottom.enabled) { + const bottomLabelImage = await this.renderLabel(renderWidth, paddingBottom, paddingLeft, paddingRight, imageAreaH, params.fgColor, params.font, params.labelBottom); + this.compositor.registerTexture('bottomLabel', bottomLabelImage); + } + + this.compositor.changeResolution(renderWidth, renderHeight); + + this.compositor.render([{ + functionId: 'frame', + id: 'a', + params: { + image: 'image', + topLabel: 'topLabel', + bottomLabel: 'bottomLabel', + topLabelEnabled: params.labelTop.enabled, + bottomLabelEnabled: params.labelBottom.enabled, + paddingLeft: paddingLeft / renderWidth, + paddingRight: paddingRight / renderWidth, + paddingTop: paddingTop / renderHeight, + paddingBottom: paddingBottom / renderHeight, + bg: params.bgColor, + }, + }]); + } + + /* + * disposeCanvas = true だとloseContextを呼ぶため、コンストラクタで渡されたcanvasも再利用不可になるので注意 + */ + public destroy(disposeCanvas = true): void { + this.compositor.destroy(disposeCanvas); + } +} diff --git a/packages/frontend/src/utility/image-frame-renderer/frame.glsl b/packages/frontend/src/utility/image-frame-renderer/frame.glsl new file mode 100644 index 0000000000..aa9dde5ad8 --- /dev/null +++ b/packages/frontend/src/utility/image-frame-renderer/frame.glsl @@ -0,0 +1,61 @@ +#version 300 es +precision mediump float; + +/* + * SPDX-FileCopyrightText: syuilo and misskey-project + * SPDX-License-Identifier: AGPL-3.0-only + */ + +in vec2 in_uv; +uniform sampler2D in_texture; +uniform vec2 in_resolution; +uniform sampler2D u_image; +uniform sampler2D u_topLabel; +uniform sampler2D u_bottomLabel; +uniform bool u_topLabelEnabled; +uniform bool u_bottomLabelEnabled; +uniform float u_paddingTop; +uniform float u_paddingBottom; +uniform float u_paddingLeft; +uniform float u_paddingRight; +uniform vec3 u_bg; +out vec4 out_color; + +float remap(float value, float inputMin, float inputMax, float outputMin, float outputMax) { + return outputMin + (outputMax - outputMin) * ((value - inputMin) / (inputMax - inputMin)); +} + +vec3 blendAlpha(vec3 bg, vec4 fg) { + return fg.a * fg.rgb + (1.0 - fg.a) * bg; +} + +void main() { + vec4 bg = vec4(u_bg, 1.0); + + vec4 image_color = texture(u_image, vec2( + remap(in_uv.x, u_paddingLeft, 1.0 - u_paddingRight, 0.0, 1.0), + remap(in_uv.y, u_paddingTop, 1.0 - u_paddingBottom, 0.0, 1.0) + )); + + vec4 topLabel_color = u_topLabelEnabled ? texture(u_topLabel, vec2( + in_uv.x, + remap(in_uv.y, 0.0, u_paddingTop, 0.0, 1.0) + )) : bg; + + vec4 bottomLabel_color = u_bottomLabelEnabled ? texture(u_bottomLabel, vec2( + in_uv.x, + remap(in_uv.y, 1.0 - u_paddingBottom, 1.0, 0.0, 1.0) + )) : bg; + + if (in_uv.y < u_paddingTop) { + out_color = vec4(blendAlpha(bg.rgb, topLabel_color), 1.0); + } else if (in_uv.y > (1.0 - u_paddingBottom)) { + out_color = vec4(blendAlpha(bg.rgb, bottomLabel_color), 1.0); + } else { + if (in_uv.y > u_paddingTop && in_uv.x > u_paddingLeft && in_uv.x < (1.0 - u_paddingRight)) { + out_color = image_color; + } else { + out_color = bg; + } + } +} diff --git a/packages/frontend/src/utility/image-frame-renderer/frame.ts b/packages/frontend/src/utility/image-frame-renderer/frame.ts new file mode 100644 index 0000000000..aeca45c1ec --- /dev/null +++ b/packages/frontend/src/utility/image-frame-renderer/frame.ts @@ -0,0 +1,57 @@ +/* + * SPDX-FileCopyrightText: syuilo and misskey-project + * SPDX-License-Identifier: AGPL-3.0-only + */ + +import shader from './frame.glsl'; +import { defineImageCompositorFunction } from '@/lib/ImageCompositor.js'; + +export const FN_frame = defineImageCompositorFunction<{ + image: string | null; + topLabel: string | null; + bottomLabel: string | null; + topLabelEnabled: boolean; + bottomLabelEnabled: boolean; + paddingTop: number; + paddingBottom: number; + paddingLeft: number; + paddingRight: number; + bg: [number, number, number]; +}>({ + shader, + main: ({ gl, u, params, textures }) => { + if (params.image == null) return; + const image = textures.get(params.image); + if (image == null) return; + + gl.activeTexture(gl.TEXTURE1); + gl.bindTexture(gl.TEXTURE_2D, image.texture); + gl.uniform1i(u.image, 1); + + gl.uniform1i(u.topLabelEnabled, params.topLabelEnabled ? 1 : 0); + gl.uniform1i(u.bottomLabelEnabled, params.bottomLabelEnabled ? 1 : 0); + gl.uniform1f(u.paddingTop, params.paddingTop); + gl.uniform1f(u.paddingBottom, params.paddingBottom); + gl.uniform1f(u.paddingLeft, params.paddingLeft); + gl.uniform1f(u.paddingRight, params.paddingRight); + gl.uniform3f(u.bg, params.bg[0], params.bg[1], params.bg[2]); + + if (params.topLabelEnabled && params.topLabel != null) { + const topLabel = textures.get(params.topLabel); + if (topLabel) { + gl.activeTexture(gl.TEXTURE2); + gl.bindTexture(gl.TEXTURE_2D, topLabel.texture); + gl.uniform1i(u.topLabel, 2); + } + } + + if (params.bottomLabelEnabled && params.bottomLabel != null) { + const bottomLabel = textures.get(params.bottomLabel); + if (bottomLabel) { + gl.activeTexture(gl.TEXTURE3); + gl.bindTexture(gl.TEXTURE_2D, bottomLabel.texture); + gl.uniform1i(u.bottomLabel, 3); + } + } + }, +}); diff --git a/packages/frontend/src/utility/watermark.ts b/packages/frontend/src/utility/watermark.ts deleted file mode 100644 index 1b46721a2b..0000000000 --- a/packages/frontend/src/utility/watermark.ts +++ /dev/null @@ -1,218 +0,0 @@ -/* - * SPDX-FileCopyrightText: syuilo and misskey-project - * SPDX-License-Identifier: AGPL-3.0-only - */ - -import type { ImageEffectorFx, ImageEffectorLayer } from '@/utility/image-effector/ImageEffector.js'; -import { FX_watermarkPlacement } from '@/utility/image-effector/fxs/watermarkPlacement.js'; -import { FX_stripe } from '@/utility/image-effector/fxs/stripe.js'; -import { FX_polkadot } from '@/utility/image-effector/fxs/polkadot.js'; -import { FX_checker } from '@/utility/image-effector/fxs/checker.js'; -import { ImageEffector } from '@/utility/image-effector/ImageEffector.js'; - -const WATERMARK_FXS = [ - FX_watermarkPlacement, - FX_stripe, - FX_polkadot, - FX_checker, -] as const satisfies ImageEffectorFx[]; - -type Align = { x: 'left' | 'center' | 'right'; y: 'top' | 'center' | 'bottom'; margin?: number; }; - -export type WatermarkPreset = { - id: string; - name: string; - layers: ({ - id: string; - type: 'text'; - text: string; - repeat: boolean; - noBoundingBoxExpansion: boolean; - scale: number; - angle: number; - align: Align; - opacity: number; - } | { - id: string; - type: 'image'; - imageUrl: string | null; - imageId: string | null; - cover: boolean; - repeat: boolean; - noBoundingBoxExpansion: boolean; - scale: number; - angle: number; - align: Align; - opacity: number; - } | { - id: string; - type: 'qr'; - data: string; - scale: number; - align: Align; - opacity: number; - } | { - id: string; - type: 'stripe'; - angle: number; - frequency: number; - threshold: number; - color: [r: number, g: number, b: number]; - opacity: number; - } | { - id: string; - type: 'polkadot'; - angle: number; - scale: number; - majorRadius: number; - majorOpacity: number; - minorDivisions: number; - minorRadius: number; - minorOpacity: number; - color: [r: number, g: number, b: number]; - opacity: number; - } | { - id: string; - type: 'checker'; - angle: number; - scale: number; - color: [r: number, g: number, b: number]; - opacity: number; - })[]; -}; - -export class WatermarkRenderer { - private effector: ImageEffector; - private layers: WatermarkPreset['layers'] = []; - - constructor(options: { - canvas: HTMLCanvasElement, - renderWidth: number, - renderHeight: number, - image: HTMLImageElement | ImageBitmap, - }) { - this.effector = new ImageEffector({ - canvas: options.canvas, - renderWidth: options.renderWidth, - renderHeight: options.renderHeight, - image: options.image, - fxs: WATERMARK_FXS, - }); - } - - private makeImageEffectorLayers(): ImageEffectorLayer[] { - return this.layers.map(layer => { - if (layer.type === 'text') { - return { - fxId: 'watermarkPlacement', - id: layer.id, - params: { - repeat: layer.repeat, - noBoundingBoxExpansion: layer.noBoundingBoxExpansion, - scale: layer.scale, - align: layer.align, - angle: layer.angle, - opacity: layer.opacity, - cover: false, - watermark: { - type: 'text', - text: layer.text, - }, - }, - }; - } else if (layer.type === 'image') { - return { - fxId: 'watermarkPlacement', - id: layer.id, - params: { - repeat: layer.repeat, - noBoundingBoxExpansion: layer.noBoundingBoxExpansion, - scale: layer.scale, - align: layer.align, - angle: layer.angle, - opacity: layer.opacity, - cover: layer.cover, - watermark: { - type: 'url', - url: layer.imageUrl, - }, - }, - }; - } else if (layer.type === 'qr') { - return { - fxId: 'watermarkPlacement', - id: layer.id, - params: { - repeat: false, - scale: layer.scale, - align: layer.align, - angle: 0, - opacity: layer.opacity, - cover: false, - watermark: { - type: 'qr', - data: layer.data, - }, - }, - }; - } else if (layer.type === 'stripe') { - return { - fxId: 'stripe', - id: layer.id, - params: { - angle: layer.angle, - frequency: layer.frequency, - threshold: layer.threshold, - color: layer.color, - opacity: layer.opacity, - }, - }; - } else if (layer.type === 'polkadot') { - return { - fxId: 'polkadot', - id: layer.id, - params: { - angle: layer.angle, - scale: layer.scale, - majorRadius: layer.majorRadius, - majorOpacity: layer.majorOpacity, - minorDivisions: layer.minorDivisions, - minorRadius: layer.minorRadius, - minorOpacity: layer.minorOpacity, - color: layer.color, - }, - }; - } else if (layer.type === 'checker') { - return { - fxId: 'checker', - id: layer.id, - params: { - angle: layer.angle, - scale: layer.scale, - color: layer.color, - opacity: layer.opacity, - }, - }; - } else { - throw new Error(`Unrecognized layer type: ${(layer as any).type}`); - } - }); - } - - public async setLayers(layers: WatermarkPreset['layers']) { - this.layers = layers; - await this.effector.setLayers(this.makeImageEffectorLayers()); - this.render(); - } - - public render(): void { - this.effector.render(); - } - - /* - * disposeCanvas = true だとloseContextを呼ぶため、コンストラクタで渡されたcanvasも再利用不可になるので注意 - */ - public destroy(disposeCanvas = true): void { - this.effector.destroy(disposeCanvas); - } -} diff --git a/packages/frontend/src/utility/watermark/WatermarkRenderer.ts b/packages/frontend/src/utility/watermark/WatermarkRenderer.ts new file mode 100644 index 0000000000..766d45148a --- /dev/null +++ b/packages/frontend/src/utility/watermark/WatermarkRenderer.ts @@ -0,0 +1,332 @@ +/* + * SPDX-FileCopyrightText: syuilo and misskey-project + * SPDX-License-Identifier: AGPL-3.0-only + */ + +import QRCodeStyling from 'qr-code-styling'; +import { url, host } from '@@/js/config.js'; +import { getProxiedImageUrl } from '../media-proxy.js'; +import { fn as fn_watermark } from './watermark.js'; +import { fn as fn_stripe } from '@/utility/image-compositor-functions/stripe.js'; +import { fn as fn_poladot } from '@/utility/image-compositor-functions/polkadot.js'; +import { fn as fn_checker } from '@/utility/image-compositor-functions/checker.js'; +import { ImageCompositor } from '@/lib/ImageCompositor.js'; +import { ensureSignin } from '@/i.js'; + +type Align = { x: 'left' | 'center' | 'right'; y: 'top' | 'center' | 'bottom'; margin?: number; }; + +export type WatermarkLayers = ({ + id: string; + type: 'text'; + text: string; + repeat: boolean; + noBoundingBoxExpansion: boolean; + scale: number; + angle: number; + align: Align; + opacity: number; +} | { + id: string; + type: 'image'; + imageUrl: string | null; + imageId: string | null; + cover: boolean; + repeat: boolean; + noBoundingBoxExpansion: boolean; + scale: number; + angle: number; + align: Align; + opacity: number; +} | { + id: string; + type: 'qr'; + data: string; + scale: number; + align: Align; + opacity: number; +} | { + id: string; + type: 'stripe'; + angle: number; + frequency: number; + threshold: number; + color: [r: number, g: number, b: number]; + opacity: number; +} | { + id: string; + type: 'polkadot'; + angle: number; + scale: number; + majorRadius: number; + majorOpacity: number; + minorDivisions: number; + minorRadius: number; + minorOpacity: number; + color: [r: number, g: number, b: number]; + opacity: number; +} | { + id: string; + type: 'checker'; + angle: number; + scale: number; + color: [r: number, g: number, b: number]; + opacity: number; +})[]; + +export type WatermarkPreset = { + id: string; + name: string; + layers: WatermarkLayers; +}; + +type WatermarkRendererImageCompositor = ImageCompositor<{ + watermark: typeof fn_watermark; + stripe: typeof fn_stripe; + polkadot: typeof fn_poladot; + checker: typeof fn_checker; +}>; + +export class WatermarkRenderer { + private compositor: WatermarkRendererImageCompositor; + + constructor(options: { + canvas: HTMLCanvasElement, + renderWidth: number, + renderHeight: number, + image: HTMLImageElement | ImageBitmap, + }) { + this.compositor = new ImageCompositor({ + canvas: options.canvas, + renderWidth: options.renderWidth, + renderHeight: options.renderHeight, + image: options.image, + functions: { + watermark: fn_watermark, + stripe: fn_stripe, + polkadot: fn_poladot, + checker: fn_checker, + }, + }); + } + + public async render(layers: WatermarkLayers) { + const compositorLayers: Parameters[0] = []; + + const unused = new Set(this.compositor.getKeysOfRegisteredTextures()); + + for (const layer of layers) { + if (layer.type === 'text') { + const textureKey = `text:${layer.text}`; + unused.delete(textureKey); + if (!this.compositor.hasTexture(textureKey)) { + if (_DEV_) console.log(`Baking text texture of <${textureKey}>...`); + const image = await createTextureFromText(layer.text); + if (image != null) this.compositor.registerTexture(textureKey, image); + } + + compositorLayers.push({ + functionId: 'watermark', + id: layer.id, + params: { + repeat: layer.repeat, + noBoundingBoxExpansion: layer.noBoundingBoxExpansion, + scale: layer.scale, + align: layer.align, + angle: layer.angle, + opacity: layer.opacity, + cover: false, + watermark: textureKey, + }, + }); + } else if (layer.type === 'image') { + const textureKey = `url:${layer.imageUrl}`; + unused.delete(textureKey); + if (!this.compositor.hasTexture(textureKey)) { + if (_DEV_) console.log(`Baking url image texture of <${textureKey}>...`); + const image = await createTextureFromUrl(layer.imageUrl); + if (image != null) this.compositor.registerTexture(textureKey, image); + } + + compositorLayers.push({ + functionId: 'watermark', + id: layer.id, + params: { + repeat: layer.repeat, + noBoundingBoxExpansion: layer.noBoundingBoxExpansion, + scale: layer.scale, + align: layer.align, + angle: layer.angle, + opacity: layer.opacity, + cover: layer.cover, + watermark: textureKey, + }, + }); + } else if (layer.type === 'qr') { + const textureKey = `qr:${layer.data}`; + unused.delete(textureKey); + if (!this.compositor.hasTexture(textureKey)) { + if (_DEV_) console.log(`Baking qr texture of <${textureKey}>...`); + const image = await createTextureFromQr({ data: layer.data }); + if (image != null) this.compositor.registerTexture(textureKey, image); + } + + compositorLayers.push({ + functionId: 'watermark', + id: layer.id, + params: { + repeat: false, + scale: layer.scale, + align: layer.align, + angle: 0, + opacity: layer.opacity, + cover: false, + watermark: textureKey, + }, + }); + } else if (layer.type === 'stripe') { + compositorLayers.push({ + functionId: 'stripe', + id: layer.id, + params: { + angle: layer.angle, + frequency: layer.frequency, + threshold: layer.threshold, + color: layer.color, + opacity: layer.opacity, + }, + }); + } else if (layer.type === 'polkadot') { + compositorLayers.push({ + functionId: 'polkadot', + id: layer.id, + params: { + angle: layer.angle, + scale: layer.scale, + majorRadius: layer.majorRadius, + majorOpacity: layer.majorOpacity, + minorDivisions: layer.minorDivisions, + minorRadius: layer.minorRadius, + minorOpacity: layer.minorOpacity, + color: layer.color, + }, + }); + } else if (layer.type === 'checker') { + compositorLayers.push({ + functionId: 'checker', + id: layer.id, + params: { + angle: layer.angle, + scale: layer.scale, + color: layer.color, + opacity: layer.opacity, + }, + }); + } else { + throw new Error(`Unrecognized layer type: ${(layer as any).type}`); + } + } + + for (const k of unused) { + if (_DEV_) console.log(`Dispose unused texture <${k}>...`); + this.compositor.unregisterTexture(k); + } + + this.compositor.render(compositorLayers); + } + + public changeResolution(width: number, height: number) { + this.compositor.changeResolution(width, height); + } + + /* + * disposeCanvas = true だとloseContextを呼ぶため、コンストラクタで渡されたcanvasも再利用不可になるので注意 + */ + public destroy(disposeCanvas = true): void { + this.compositor.destroy(disposeCanvas); + } +} + +async function createTextureFromUrl(imageUrl: string | null) { + if (imageUrl == null || imageUrl.trim() === '') return null; + + const image = await new Promise((resolve, reject) => { + const img = new Image(); + img.onload = () => resolve(img); + img.onerror = reject; + img.src = getProxiedImageUrl(imageUrl); // CORS対策 + }).catch(() => null); + + if (image == null) return null; + + return image; +} + +async function createTextureFromText(text: string | null, resolution = 2048) { + if (text == null || text.trim() === '') return null; + + const ctx = window.document.createElement('canvas').getContext('2d')!; + ctx.canvas.width = resolution; + ctx.canvas.height = resolution / 4; + const fontSize = resolution / 32; + const margin = fontSize / 2; + ctx.shadowColor = '#000000'; + ctx.shadowBlur = fontSize / 4; + + //ctx.fillStyle = '#00ff00'; + //ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height); + + ctx.fillStyle = '#ffffff'; + ctx.font = `bold ${fontSize}px sans-serif`; + ctx.textBaseline = 'middle'; + + ctx.fillText(text, margin, ctx.canvas.height / 2); + + const textMetrics = ctx.measureText(text); + const cropWidth = (Math.ceil(textMetrics.actualBoundingBoxRight + textMetrics.actualBoundingBoxLeft) + margin + margin); + const cropHeight = (Math.ceil(textMetrics.actualBoundingBoxAscent + textMetrics.actualBoundingBoxDescent) + margin + margin); + const data = ctx.getImageData(0, (ctx.canvas.height / 2) - (cropHeight / 2), cropWidth, cropHeight); + + ctx.canvas.remove(); + + return data; +} + +async function createTextureFromQr(options: { data: string | null }, resolution = 512) { + const $i = ensureSignin(); + + const qrCodeInstance = new QRCodeStyling({ + width: resolution, + height: resolution, + margin: 42, + type: 'canvas', + data: options.data == null || options.data === '' ? `${url}/users/${$i.id}` : options.data, + image: $i.avatarUrl, + qrOptions: { + typeNumber: 0, + mode: 'Byte', + errorCorrectionLevel: 'H', + }, + imageOptions: { + hideBackgroundDots: true, + imageSize: 0.3, + margin: 16, + crossOrigin: 'anonymous', + }, + dotsOptions: { + type: 'dots', + }, + cornersDotOptions: { + type: 'dot', + }, + cornersSquareOptions: { + type: 'extra-rounded', + }, + }); + + const blob = await qrCodeInstance.getRawData('png') as Blob | null; + if (blob == null) return null; + + const image = await window.createImageBitmap(blob); + + return image; +} diff --git a/packages/frontend/src/utility/image-effector/fxs/watermarkPlacement.glsl b/packages/frontend/src/utility/watermark/watermark.glsl similarity index 100% rename from packages/frontend/src/utility/image-effector/fxs/watermarkPlacement.glsl rename to packages/frontend/src/utility/watermark/watermark.glsl diff --git a/packages/frontend/src/utility/image-effector/fxs/watermarkPlacement.ts b/packages/frontend/src/utility/watermark/watermark.ts similarity index 59% rename from packages/frontend/src/utility/image-effector/fxs/watermarkPlacement.ts rename to packages/frontend/src/utility/watermark/watermark.ts index bb51ed796b..62efcd12b6 100644 --- a/packages/frontend/src/utility/image-effector/fxs/watermarkPlacement.ts +++ b/packages/frontend/src/utility/watermark/watermark.ts @@ -3,57 +3,20 @@ * SPDX-License-Identifier: AGPL-3.0-only */ -import { defineImageEffectorFx } from '../ImageEffector.js'; -import shader from './watermarkPlacement.glsl'; +import shader from './watermark.glsl'; +import { defineImageCompositorFunction } from '@/lib/ImageCompositor.js'; -export const FX_watermarkPlacement = defineImageEffectorFx({ - id: 'watermarkPlacement', - name: '(internal)', +export const fn = defineImageCompositorFunction>({ shader, - uniforms: ['opacity', 'scale', 'angle', 'cover', 'repeat', 'alignX', 'alignY', 'margin', 'repeatMargin', 'noBBoxExpansion', 'wmResolution', 'wmEnabled', 'watermark'] as const, - params: { - cover: { - type: 'boolean', - default: false, - }, - repeat: { - type: 'boolean', - default: false, - }, - scale: { - type: 'number', - default: 0.3, - min: 0.0, - max: 1.0, - step: 0.01, - }, - angle: { - type: 'number', - default: 0, - min: -1.0, - max: 1.0, - step: 0.01, - }, - align: { - type: 'align', - default: { x: 'right', y: 'bottom', margin: 0 }, - }, - opacity: { - type: 'number', - default: 0.75, - min: 0.0, - max: 1.0, - step: 0.01, - }, - noBoundingBoxExpansion: { - type: 'boolean', - default: false, - }, - watermark: { - type: 'texture', - default: null, - }, - }, main: ({ gl, u, params, textures }) => { // 基本パラメータ gl.uniform1f(u.opacity, params.opacity ?? 1.0); @@ -70,7 +33,7 @@ export const FX_watermarkPlacement = defineImageEffectorFx({ gl.uniform1i(u.noBBoxExpansion, params.noBoundingBoxExpansion ? 1 : 0); // ウォーターマークテクスチャ - const wm = textures.watermark; + const wm = textures.get(params.watermark); if (wm) { gl.activeTexture(gl.TEXTURE1); gl.bindTexture(gl.TEXTURE_2D, wm.texture); diff --git a/packages/frontend/src/utility/webgl.ts b/packages/frontend/src/utility/webgl.ts index ae595b605c..334663b1a1 100644 --- a/packages/frontend/src/utility/webgl.ts +++ b/packages/frontend/src/utility/webgl.ts @@ -38,3 +38,14 @@ export function initShaderProgram(gl: WebGL2RenderingContext, vsSource: string, return shaderProgram; } + +export function createTexture(gl: WebGL2RenderingContext): WebGLTexture { + const texture = gl.createTexture(); + gl.bindTexture(gl.TEXTURE_2D, texture); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.MIRRORED_REPEAT); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.MIRRORED_REPEAT); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); + gl.bindTexture(gl.TEXTURE_2D, null); + return texture; +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index b5ffd355e4..6e45b17726 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -797,6 +797,9 @@ importers: execa: specifier: 9.6.0 version: 9.6.0 + exifreader: + specifier: 4.32.0 + version: 4.32.0 frontend-shared: specifier: workspace:* version: link:../frontend-shared @@ -4973,6 +4976,10 @@ packages: resolution: {integrity: sha512-siPY6BD5dQ2SZPl3I0OZBHL27ZqZvLEosObsZRQ1NUB8qcxegwt0T9eKtV96JMFQpIz1elhkzqOg4c/Ri6Dp9A==} engines: {node: ^14.14.0 || >=16.0.0} + '@xmldom/xmldom@0.9.8': + resolution: {integrity: sha512-p96FSY54r+WJ50FIOsCOjyj/wavs8921hG5+kVMmZgKcvIKxMXHTrjNJvRgWa/zuX3B6t2lijLNFaOyuxUH+2A==} + engines: {node: '>=14.6'} + abbrev@1.1.1: resolution: {integrity: sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==} @@ -6505,6 +6512,9 @@ packages: resolution: {integrity: sha512-8iA79xD3uAch729dUG8xaaBBFGaEa0wdD2VkYLFHwlqosEj/jT66AzcreRDSgV7ehnNLBW2WR5jIXwGKjVdTLg==} engines: {node: '>=4'} + exifreader@4.32.0: + resolution: {integrity: sha512-sj1PzjpaPwSE/2MeUqoAYcfc2u7AZOGSby0FzmAkB4jjeCXgDryxzVgMwV+tJKGIkGdWkkWiUWoLSJoPHJ6V5Q==} + exit@0.1.2: resolution: {integrity: sha512-Zk/eNKV2zbjpKzrsQ+n1G6poVbErQxJ0LBOJXaKZ1EViLzH+hrLu9cdXI4zw9dBQJslwBEpbQ2P1oS7nDxs6jQ==} engines: {node: '>= 0.8.0'} @@ -7212,6 +7222,7 @@ packages: intersection-observer@0.12.2: resolution: {integrity: sha512-7m1vEcPCxXYI8HqnL8CKI6siDyD+eIWSwgB3DZA+ZTogxk9I4CDnj4wilt9x/+/QbHI4YG5YZNmC6458/e9Ktg==} + deprecated: The Intersection Observer polyfill is no longer needed and can safely be removed. Intersection Observer has been Baseline since 2019. ioredis@5.8.1: resolution: {integrity: sha512-Qho8TgIamqEPdgiMadJwzRMW3TudIg6vpg4YONokGDudy4eqRIJtDbVX72pfLBcWxvbn3qm/40TyGUObdW4tLQ==} @@ -15621,6 +15632,9 @@ snapshots: dependencies: arch: 3.0.0 + '@xmldom/xmldom@0.9.8': + optional: true + abbrev@1.1.1: {} abbrev@3.0.1: {} @@ -17465,6 +17479,10 @@ snapshots: dependencies: pify: 2.3.0 + exifreader@4.32.0: + optionalDependencies: + '@xmldom/xmldom': 0.9.8 + exit@0.1.2: {} expand-template@2.0.3: