wip

packages/frontend/src/components/MkImageEffectorDialog.vue

@@ -94,7 +94,7 @@ const layers = reactive<ImageEffectorLayer[]>([]);
 
 watch(layers, async () => {
 	if (renderer != null) {
-		renderer.setLayersAndRender(layers);
+		renderer.render(layers);
 	}
 }, { deep: true });
 
@@ -167,7 +167,7 @@ onMounted(async () => {
 		fxs: FXS,
 	});
 
-	await renderer.setLayersAndRender(layers);
+	await renderer.render(layers);
 
 	closeWaiting();
 });
@@ -194,7 +194,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();
@@ -206,9 +206,9 @@ const enabled = ref(true);
 watch(enabled, () => {
 	if (renderer != null) {
 		if (enabled.value) {
-			renderer.setLayersAndRender(layers);
+			renderer.render(layers);
 		} else {
-			renderer.setLayersAndRender([]);
+			renderer.render([]);
 		}
 	}
 });

packages/frontend/src/components/MkImageFrameEditorDialog.vue

@@ -206,7 +206,7 @@ async function cancel() {
 
 const updateThrottled = throttle(50, () => {
 	if (renderer != null) {
-		renderer.updateAndRender(frame);
+		renderer.render(frame);
 	}
 });
 
@@ -285,7 +285,7 @@ async function initRenderer() {
 		});
 	}
 
-	await renderer!.updateAndRender(frame);
+	await renderer!.render(frame);
 }
 
 onMounted(async () => {

packages/frontend/src/components/MkWatermarkEditorDialog.vue

@@ -193,7 +193,7 @@ async function cancel() {
 
 watch(preset, async (newValue, oldValue) => {
 	if (renderer != null) {
-		renderer.setLayersAndRender(preset.layers);
+		renderer.render(preset.layers);
 	}
 }, { deep: true });
 
@@ -277,7 +277,7 @@ async function initRenderer() {
 		});
 	}
 
-	await renderer!.setLayersAndRender(preset.layers);
+	await renderer!.render(preset.layers);
 }
 
 onMounted(async () => {

packages/frontend/src/composables/use-uploader.ts

@@ -612,7 +612,7 @@ export function useUploader(options: {
 				image: imageBitmap,
 			});
 
-			await renderer.setLayersAndRender(item.watermarkPreset.layers);
+			await renderer.render(item.watermarkPreset.layers);
 
 			preprocessedFile = await new Promise<Blob>((resolve) => {
 				canvas.toBlob((blob) => {
@@ -638,13 +638,11 @@ export function useUploader(options: {
 		//	title: `${meta_model} + ${meta_lensModel}`,
 		//	text: `${date}   ${meta_mm}mm   f/${meta_f}   ${meta_s}s   ISO${meta_iso}`,
 		//});
-		await frameRenderer.updateAndRender({
+		await frameRenderer.render({
 			title: 'aaaaaaaaaaaaa',
 			text: 'bbbbbbbbbbbbbbbbbbbb',
 		});
 
-		frameRenderer.render();
-
 		preprocessedFile = await new Promise<Blob>((resolve) => {
 			canvas.toBlob((blob) => {
 				if (blob == null) {

packages/frontend/src/pages/settings/drive.WatermarkItem.vue

@@ -78,7 +78,7 @@ onMounted(() => {
 				image: sampleImage,
 			});
 
-			await renderer.setLayersAndRender(props.preset.layers);
+			await renderer.render(props.preset.layers);
 		}, { immediate: true });
 	};
 });
@@ -92,7 +92,7 @@ onUnmounted(() => {
 
 watch(() => props.preset, async () => {
 	if (renderer != null) {
-		await renderer.setLayersAndRender(props.preset.layers);
+		await renderer.render(props.preset.layers);
 	}
 }, { deep: true });
 </script>

packages/frontend/src/utility/image-effector/ImageEffector.ts

@@ -159,7 +159,9 @@ export class ImageEffector {
 		}
 	}
 
-	public async setLayersAndRender(layers: ImageEffectorLayer[]) {
+	public async render(layers: ImageEffectorLayer[]) {
+		const fnParams: Record<string, any> = {};
+
 		const unused = new Set(this.compositor.getKeysOfRegisteredTextures());
 
 		for (const layer of layers) {
@@ -198,7 +200,7 @@ export class ImageEffector {
 		this.compositor.render(layers.map(layer => ({
 			id: layer.id,
 			functionId: layer.fxId,
-			params: layer.params,
+			params: fnParams,
 		})));
 	}
 

packages/frontend/src/utility/image-effector/fxs/watermarkPlacement.ts

@@ -69,7 +69,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);

packages/frontend/src/utility/watermark.ts

@@ -83,7 +83,7 @@ export type WatermarkPreset = {
 };
 
 export class WatermarkRenderer {
-	private effector: ImageEffector<typeof WATERMARK_FXS>;
+	private effector: ImageEffector;
 	private layers: WatermarkPreset['layers'] = [];
 
 	constructor(options: {
@@ -200,13 +200,9 @@ export class WatermarkRenderer {
 		});
 	}
 
-	public async setLayersAndRender(layers: WatermarkPreset['layers']) {
+	public async render(layers: WatermarkPreset['layers']) {
 		this.layers = layers;
-		await this.effector.setLayersAndRender(this.makeImageEffectorLayers());
-	}
-
-	public render(): void {
-		this.effector.render();
+		await this.effector.render(this.makeImageEffectorLayers());
 	}
 
 	/*