From c921aa56d9d409b4b5652dd26fde291ed53bef1f Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Wed, 4 Jun 2025 12:52:53 +0900
Subject: [PATCH] =?UTF-8?q?Revert=20"fix:=20=E3=82=B7=E3=82=A7=E3=83=BC?=
 =?UTF-8?q?=E3=83=80=E3=83=BC=E3=81=AE=E8=AA=AD=E3=81=BF=E8=BE=BC=E3=81=BF?=
 =?UTF-8?q?=E3=81=8C=E5=AE=8C=E4=BA=86=E3=81=97=E3=81=A6=E3=81=8B=E3=82=89?=
 =?UTF-8?q?=E3=83=AC=E3=83=B3=E3=83=80=E3=83=AA=E3=83=B3=E3=82=B0=E3=82=92?=
 =?UTF-8?q?=E8=A1=8C=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

This reverts commit e06f37a7d453ca581858252eae422d8a9e470dc3.
---
 .../src/components/MkImageEffectorDialog.vue  |  7 +--
 .../components/MkWatermarkEditorDialog.vue    | 14 +----
 .../utility/image-effector/ImageEffector.ts   | 62 +++++++++----------
 3 files changed, 32 insertions(+), 51 deletions(-)

diff --git a/packages/frontend/src/components/MkImageEffectorDialog.vue b/packages/frontend/src/components/MkImageEffectorDialog.vue
index 5605baff51..de2c92bbd6 100644
--- a/packages/frontend/src/components/MkImageEffectorDialog.vue
+++ b/packages/frontend/src/components/MkImageEffectorDialog.vue
@@ -20,7 +20,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<div :class="$style.container">
 			<div :class="$style.preview">
 				<canvas ref="canvasEl" :class="$style.previewCanvas"></canvas>
-				<MkLoading v-if="canvasLoading" :class="$style.previewSpinner"/>
 				<div :class="$style.previewContainer">
 					<div class="_acrylic" :class="$style.previewTitle">{{ i18n.ts.preview }}</div>
 					<div class="_acrylic" :class="$style.previewControls">
@@ -75,8 +74,6 @@ const emit = defineEmits<{
 
 const dialog = useTemplateRef('dialog');
 
-const canvasLoading = ref(false);
-
 async function cancel() {
 	if (layers.length > 0) {
 		const { canceled } = await os.confirm({
@@ -94,9 +91,7 @@ const layers = reactive<ImageEffectorLayer[]>([]);
 
 watch(layers, async () => {
 	if (renderer != null) {
-		canvasLoading.value = true;
-		await renderer.setLayers(layers);
-		canvasLoading.value = false;
+		renderer.setLayers(layers);
 	}
 }, { deep: true });
 
diff --git a/packages/frontend/src/components/MkWatermarkEditorDialog.vue b/packages/frontend/src/components/MkWatermarkEditorDialog.vue
index 46d952ce90..db231f90d7 100644
--- a/packages/frontend/src/components/MkWatermarkEditorDialog.vue
+++ b/packages/frontend/src/components/MkWatermarkEditorDialog.vue
@@ -20,7 +20,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<div :class="$style.container">
 			<div :class="$style.preview">
 				<canvas ref="canvasEl" :class="$style.previewCanvas"></canvas>
-				<MkLoading v-if="canvasLoading" :class="$style.previewSpinner"/>
 				<div :class="$style.previewContainer">
 					<div class="_acrylic" :class="$style.previewTitle">{{ i18n.ts.preview }}</div>
 					<div v-if="props.image == null" class="_acrylic" :class="$style.previewControls">
@@ -90,8 +89,6 @@ import { genId } from '@/utility/id.js';
 
 const $i = ensureSignin();
 
-const canvasLoading = ref(true);
-
 function createTextLayer(): WatermarkPreset['layers'][number] {
 	return {
 		id: genId(),
@@ -235,13 +232,6 @@ 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,
@@ -280,9 +270,7 @@ async function initRenderer() {
 
 	await renderer!.setLayers(preset.layers);
 
-	await renderer!.render();
-
-	canvasLoading.value = false;
+	renderer!.render();
 }
 
 onMounted(async () => {
diff --git a/packages/frontend/src/utility/image-effector/ImageEffector.ts b/packages/frontend/src/utility/image-effector/ImageEffector.ts
index 63f5d6fa4b..282f36778f 100644
--- a/packages/frontend/src/utility/image-effector/ImageEffector.ts
+++ b/packages/frontend/src/utility/image-effector/ImageEffector.ts
@@ -196,35 +196,40 @@ export class ImageEffector<IEX extends ReadonlyArray<ImageEffectorFx<any, any, a
 		return shaderProgram;
 	}
 
-	private async getOrLoadShaderProgram(fx: ImageEffectorFx): Promise<WebGLProgram> {
-		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 shaderProgram = await this.getOrLoadShaderProgram(fx);
+		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);
+		}
 
 		gl.useProgram(shaderProgram);
 
@@ -263,13 +268,6 @@ export class ImageEffector<IEX extends ReadonlyArray<ImageEffectorFx<any, any, a
 	public async render() {
 		const gl = this.gl;
 
-		// 全レイヤーのshaderロードを事前に完了させる
-		await Promise.all(this.layers.map(async (layer) => {
-			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);
@@ -361,7 +359,7 @@ export class ImageEffector<IEX extends ReadonlyArray<ImageEffectorFx<any, any, a
 			this.paramTextures.delete(k);
 		}
 
-		await this.render();
+		this.render();
 	}
 
 	public changeResolution(width: number, height: number) {