fix: extract node material textures only when exporting scene

#763

Author: julien-moreau

editor/src/editor/layout/assets-browser/events/material.ts

@@ -1,9 +1,6 @@
-import { join } from "path/posix";
 import { ipcRenderer } from "electron";
 
-import { createDirectoryIfNotExist } from "../../../../tools/fs";
 import { isNodeMaterial } from "../../../../tools/guards/material";
-import { extractNodeMaterialTextures } from "../../../../tools/material/extract";
 import { normalizeNodeMaterialUniqueIds } from "../../../../tools/material/material";
 
 import { getProjectAssetsRootUrl } from "../../../../project/configuration";
@@ -22,20 +19,8 @@ export function listenMaterialAssetsEvents(editor: Editor) {
 		}
 
 		if (isNodeMaterial(material)) {
-			const rootUrl = getProjectAssetsRootUrl();
-
-			if (rootUrl) {
-				const outputPath = join(rootUrl, "assets", "editor-generated_extracted-textures");
-
-				await createDirectoryIfNotExist(outputPath);
-				await extractNodeMaterialTextures(editor, {
-					materialData,
-					assetsDirectory: outputPath,
-				});
-			}
-
 			material.clear();
-			material.parseSerializedObject(materialData, rootUrl ?? undefined);
+			material.parseSerializedObject(materialData, getProjectAssetsRootUrl() ?? undefined);
 			material.build(false);
 
 			normalizeNodeMaterialUniqueIds(material, materialData);

editor/src/project/export/assets.ts

@@ -7,6 +7,7 @@ import { Editor } from "../../editor/main";
 
 import { compressFileToKtx } from "./ktx";
 import { processExportedTexture } from "./texture";
+import { processExportedMaterial } from "./materials";
 
 const supportedImagesExtensions: string[] = [".jpg", ".jpeg", ".webp", ".png", ".bmp"];
 
@@ -85,10 +86,18 @@ export async function processAssetFile(editor: Editor, file: string, options: Pr
 		});
 	}
 
-	if (options.optimize && supportedImagesExtensions.includes(extension)) {
-		await processExportedTexture(editor, finalPath, {
-			force: isNewFile,
-			exportedAssets: options.exportedAssets,
-		});
+	if (options.optimize) {
+		if (supportedImagesExtensions.includes(extension)) {
+			await processExportedTexture(editor, finalPath, {
+				force: isNewFile,
+				exportedAssets: options.exportedAssets,
+			});
+		} else if (extension === ".material") {
+			await processExportedMaterial(editor, finalPath, {
+				force: isNewFile,
+				scenePath: options.scenePath,
+				exportedAssets: options.exportedAssets,
+			});
+		}
 	}
 }

editor/src/project/export/materials.ts

@@ -1,3 +1,13 @@
+import { join } from "path/posix";
+import { readJSON, writeJSON } from "fs-extra";
+
+import { createDirectoryIfNotExist } from "../../tools/fs";
+import { extractNodeMaterialTextures } from "../../tools/material/extract";
+
+import { Editor } from "../../editor/main";
+
+import { compressFileToKtx } from "./ktx";
+
 export function configureMaterials(data: any) {
 	if (!data.materials) {
 		return;
@@ -11,3 +21,42 @@ export function configureMaterials(data: any) {
 		return true;
 	});
 }
+
+export type ComputeExportedMaterialOptions = {
+	force: boolean;
+	scenePath: string;
+	exportedAssets: string[];
+};
+
+export async function processExportedMaterial(editor: Editor, absolutePath: string, options: ComputeExportedMaterialOptions) {
+	const materialData = await readJSON(absolutePath);
+	if (materialData.customType !== "BABYLON.NodeMaterial") {
+		return;
+	}
+
+	const extractedTexturesOutputPath = join(options.scenePath, "assets", "editor-generated_extracted-textures");
+
+	await createDirectoryIfNotExist(extractedTexturesOutputPath);
+
+	const relativePaths = await extractNodeMaterialTextures(editor, {
+		materialData,
+		assetsDirectory: join(options.scenePath, "assets", "editor-generated_extracted-textures"),
+	});
+
+	await writeJSON(absolutePath, materialData, {
+		encoding: "utf-8",
+	});
+
+	await Promise.all(
+		relativePaths.map(async (relativePath) => {
+			const finalPath = join(options.scenePath, relativePath);
+
+			options.exportedAssets.push(finalPath);
+
+			await compressFileToKtx(editor, finalPath, {
+				force: options.force,
+				exportedAssets: options.exportedAssets,
+			});
+		})
+	);
+}

editor/src/tools/material/extract.ts

@@ -12,6 +12,8 @@ export async function extractNodeMaterialTextures(editor: Editor, options: IExtr
 		(block: any) => (block.customType === "BABYLON.TextureBlock" || block.customType === "BABYLON.ImageSourceBlock") && block.texture?.name
 	);
 
+	const relativePaths: string[] = [];
+
 	await Promise.all(
 		blocks.map(async (block: any) => {
 			if (block.texture?.name?.startsWith("http://") || block.texture.name.startsWith("https://")) {
@@ -21,6 +23,7 @@ export async function extractNodeMaterialTextures(editor: Editor, options: IExtr
 				});
 
 				if (relativePath) {
+					relativePaths.push(relativePath);
 					block.texture.name = block.texture.url = relativePath;
 				}
 			}
@@ -32,9 +35,12 @@ export async function extractNodeMaterialTextures(editor: Editor, options: IExtr
 				});
 
 				if (relativePath) {
+					relativePaths.push(relativePath);
 					block.texture.name = block.texture.url = relativePath;
 				}
 			}
 		})
 	);
+
+	return relativePaths;
 }