Revert "fix: シェーダーの読み込みが完了してからレンダリングを行うように"

This reverts commit e06f37a7d4.

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;
+		renderer.setLayers(layers);
-		await renderer.setLayers(layers);
-		canvasLoading.value = false;
 	}
 }, { deep: true });
 

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();
+	renderer!.render();
-
-	canvasLoading.value = false;
 }
 
 onMounted(async () => {

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) {