From e06f37a7d453ca581858252eae422d8a9e470dc3 Mon Sep 17 00:00:00 2001 From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com> Date: Tue, 3 Jun 2025 23:57:40 +0900 Subject: [PATCH] =?UTF-8?q?fix:=20=E3=82=B7=E3=82=A7=E3=83=BC=E3=83=80?= =?UTF-8?q?=E3=83=BC=E3=81=AE=E8=AA=AD=E3=81=BF=E8=BE=BC=E3=81=BF=E3=81=8C?= =?UTF-8?q?=E5=AE=8C=E4=BA=86=E3=81=97=E3=81=A6=E3=81=8B=E3=82=89=E3=83=AC?= =?UTF-8?q?=E3=83=B3=E3=83=80=E3=83=AA=E3=83=B3=E3=82=B0=E3=82=92=E8=A1=8C?= =?UTF-8?q?=E3=81=86=E3=82=88=E3=81=86=E3=81=AB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/MkImageEffectorDialog.vue | 7 ++- .../components/MkWatermarkEditorDialog.vue | 14 ++++- .../utility/image-effector/ImageEffector.ts | 62 ++++++++++--------- 3 files changed, 51 insertions(+), 32 deletions(-) diff --git a/packages/frontend/src/components/MkImageEffectorDialog.vue b/packages/frontend/src/components/MkImageEffectorDialog.vue index de2c92bbd6..5605baff51 100644 --- a/packages/frontend/src/components/MkImageEffectorDialog.vue +++ b/packages/frontend/src/components/MkImageEffectorDialog.vue @@ -20,6 +20,7 @@ SPDX-License-Identifier: AGPL-3.0-only
+
{{ i18n.ts.preview }}
@@ -74,6 +75,8 @@ const emit = defineEmits<{ const dialog = useTemplateRef('dialog'); +const canvasLoading = ref(false); + async function cancel() { if (layers.length > 0) { const { canceled } = await os.confirm({ @@ -91,7 +94,9 @@ const layers = reactive([]); watch(layers, async () => { if (renderer != null) { - renderer.setLayers(layers); + canvasLoading.value = true; + await renderer.setLayers(layers); + canvasLoading.value = false; } }, { deep: true }); diff --git a/packages/frontend/src/components/MkWatermarkEditorDialog.vue b/packages/frontend/src/components/MkWatermarkEditorDialog.vue index db231f90d7..46d952ce90 100644 --- a/packages/frontend/src/components/MkWatermarkEditorDialog.vue +++ b/packages/frontend/src/components/MkWatermarkEditorDialog.vue @@ -20,6 +20,7 @@ SPDX-License-Identifier: AGPL-3.0-only
+
{{ i18n.ts.preview }}
@@ -89,6 +90,8 @@ import { genId } from '@/utility/id.js'; const $i = ensureSignin(); +const canvasLoading = ref(true); + function createTextLayer(): WatermarkPreset['layers'][number] { return { id: genId(), @@ -232,6 +235,13 @@ let imageBitmap: ImageBitmap | null = null; async function initRenderer() { if (canvasEl.value == null) return; + canvasLoading.value = true; + + await Promise.all([ + sampleImage_3_2_loading, + sampleImage_2_3_loading, + ]); + if (sampleImageType.value === '3_2') { renderer = new WatermarkRenderer({ canvas: canvasEl.value, @@ -270,7 +280,9 @@ async function initRenderer() { await renderer!.setLayers(preset.layers); - renderer!.render(); + await renderer!.render(); + + canvasLoading.value = false; } onMounted(async () => { diff --git a/packages/frontend/src/utility/image-effector/ImageEffector.ts b/packages/frontend/src/utility/image-effector/ImageEffector.ts index 282f36778f..63f5d6fa4b 100644 --- a/packages/frontend/src/utility/image-effector/ImageEffector.ts +++ b/packages/frontend/src/utility/image-effector/ImageEffector.ts @@ -196,40 +196,35 @@ export class ImageEffector { + let shaderProgram = this.shaderCache.get(fx.id); + if (shaderProgram) return shaderProgram; + + let shaderSource: string; + if (typeof fx.shader === 'string') { + shaderSource = fx.shader; + } else { + shaderSource = await fx.shader(); + } + shaderProgram = this.initShaderProgram(`#version 300 es + in vec2 position; + out vec2 in_uv; + + void main() { + in_uv = (position + 1.0) / 2.0; + gl_Position = vec4(position, 0.0, 1.0); + } + `, shaderSource); + this.shaderCache.set(fx.id, shaderProgram); + return shaderProgram; + } + private async renderLayer(layer: ImageEffectorLayer, preTexture: WebGLTexture) { 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); - let shaderProgram: WebGLProgram; - - if (cachedShader != null) { - shaderProgram = cachedShader; - } else { - let shaderSource: string; - - if (typeof fx.shader === 'string') { - shaderSource = fx.shader; - } else { - shaderSource = await fx.shader(); - } - - shaderProgram = this.initShaderProgram(`#version 300 es - in vec2 position; - out vec2 in_uv; - - void main() { - in_uv = (position + 1.0) / 2.0; - gl_Position = vec4(position, 0.0, 1.0); - } - `, shaderSource); - } - - if (cachedShader == null) { - this.shaderCache.set(fx.id, shaderProgram); - } + const shaderProgram = await this.getOrLoadShaderProgram(fx); gl.useProgram(shaderProgram); @@ -268,6 +263,13 @@ export class ImageEffector { + const fx = this.fxs.find(fx => fx.id === layer.fxId); + if (!fx) return; + await this.getOrLoadShaderProgram(fx); + })); + { gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, this.originalImageTexture); @@ -359,7 +361,7 @@ export class ImageEffector