Inspector V2: Tools Pane Init

packages/dev/inspector-v2/package.json

@@ -21,6 +21,7 @@
         "@dev/gui": "^1.0.0",
         "@dev/loaders": "1.0.0",
         "@dev/materials": "^1.0.0",
+        "@dev/serializers": "1.0.0",
         "@fluentui/react-components": "^9.62.0",
         "@fluentui/react-icons": "^2.0.271",
         "@pmmmwh/react-refresh-webpack-plugin": "^0.6.0",

packages/dev/inspector-v2/src/components/tools/captureTools.tsx

@@ -0,0 +1,100 @@
+import { ButtonLine } from "shared-ui-components/fluent/hoc/buttonLine";
+import { useState, useRef, useCallback } from "react";
+import type { FunctionComponent } from "react";
+import { Tools } from "core/Misc/tools";
+import type { Scene } from "core/scene";
+import { SyncedSliderPropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/syncedSliderPropertyLine";
+import type { IScreenshotSize } from "core/Misc/interfaces/screenshotSize";
+import { SwitchPropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/switchPropertyLine";
+import { VideoRecorder } from "core/Misc/videoRecorder";
+import { captureEquirectangularFromScene } from "core/Misc/equirectangularCapture";
+import { Collapse } from "shared-ui-components/fluent/primitives/collapse";
+import { CameraRegular, RecordRegular, RecordStopRegular } from "@fluentui/react-icons";
+
+export const CaptureRttTools: FunctionComponent<{ scene: Scene }> = ({ scene }) => {
+    const [useWidthHeight, setUseWidthHeight] = useState(false);
+    const [screenshotSize, setScreenshotSize] = useState<IScreenshotSize>({ precision: 1 });
+
+    const captureRender = useCallback(async () => {
+        const sizeToUse: IScreenshotSize = { ...screenshotSize };
+        if (!useWidthHeight) {
+            sizeToUse.width = undefined;
+            sizeToUse.height = undefined;
+        }
+
+        if (scene.activeCamera) {
+            Tools.CreateScreenshotUsingRenderTarget(scene.getEngine(), scene.activeCamera, sizeToUse, undefined, undefined, 4);
+        }
+    }, [scene, screenshotSize, useWidthHeight]);
+
+    return (
+        <>
+            <ButtonLine label="Capture" icon={CameraRegular} onClick={captureRender} />
+            <SyncedSliderPropertyLine
+                label="Precision"
+                value={screenshotSize.precision ?? 1}
+                onChange={(value) => setScreenshotSize({ ...screenshotSize, precision: value ?? 1 })}
+                min={0.1}
+                max={10}
+                step={0.1}
+            />
+            <SwitchPropertyLine label="Use Custom Width/Height" value={useWidthHeight} onChange={(value) => setUseWidthHeight(value)} />
+            <Collapse visible={useWidthHeight}>
+                <SyncedSliderPropertyLine
+                    label="Width"
+                    value={screenshotSize.width ?? 512}
+                    onChange={(data) => setScreenshotSize({ ...screenshotSize, width: data ?? 512 })}
+                    min={1}
+                    step={1}
+                />
+                <SyncedSliderPropertyLine
+                    label="Height"
+                    value={screenshotSize.height ?? 512}
+                    onChange={(data) => setScreenshotSize({ ...screenshotSize, height: data ?? 512 })}
+                    min={1}
+                    step={1}
+                />
+            </Collapse>
+        </>
+    );
+};
+
+export const CaptureScreenshotTools: FunctionComponent<{ scene: Scene }> = ({ scene }) => {
+    const [isRecording, setIsRecording] = useState(false);
+    const videoRecorder = useRef<VideoRecorder>();
+
+    const captureScreenshot = useCallback(() => {
+        if (scene.activeCamera) {
+            Tools.CreateScreenshot(scene.getEngine(), scene.activeCamera, { precision: 1 });
+        }
+    }, [scene]);
+
+    const captureEquirectangularAsync = useCallback(async () => {
+        if (scene.activeCamera) {
+            await captureEquirectangularFromScene(scene, { size: 1024, filename: "equirectangular_capture.png" });
+        }
+    }, [scene]);
+
+    const recordVideoAsync = useCallback(async () => {
+        if (videoRecorder.current && videoRecorder.current.isRecording) {
+            videoRecorder.current.stopRecording();
+            setIsRecording(false);
+            return;
+        }
+
+        if (!videoRecorder.current) {
+            videoRecorder.current = new VideoRecorder(scene.getEngine());
+        }
+
+        void videoRecorder.current.startRecording();
+        setIsRecording(true);
+    }, [scene]);
+
+    return (
+        <>
+            <ButtonLine label="Capture" icon={CameraRegular} onClick={captureScreenshot} />
+            <ButtonLine label="Capture Equirectangular" icon={CameraRegular} onClick={captureEquirectangularAsync} />
+            <ButtonLine label={isRecording ? "Stop Recording" : "Record Video"} icon={isRecording ? RecordStopRegular : RecordRegular} onClick={recordVideoAsync} />
+        </>
+    );
+};

packages/dev/inspector-v2/src/components/tools/exportTools.tsx

@@ -0,0 +1,210 @@
+import { NumberDropdownPropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/dropdownPropertyLine";
+import { SceneSerializer } from "core/Misc/sceneSerializer";
+import { Tools } from "core/Misc/tools";
+import { EnvironmentTextureTools } from "core/Misc/environmentTextureTools";
+import type { CubeTexture } from "core/Materials/Textures/cubeTexture";
+import { Logger } from "core/Misc/logger";
+import { useCallback, useState } from "react";
+import type { FunctionComponent } from "react";
+import type { Scene } from "core/scene";
+import { ButtonLine } from "shared-ui-components/fluent/hoc/buttonLine";
+import { SyncedSliderPropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/syncedSliderPropertyLine";
+import type { Node } from "core/node";
+import { Mesh } from "core/Meshes/mesh";
+import type { PBRMaterial } from "core/Materials/PBR/pbrMaterial";
+import type { StandardMaterial } from "core/Materials/standardMaterial";
+import type { BackgroundMaterial } from "core/Materials/Background/backgroundMaterial";
+import { Texture } from "core/Materials/Textures/texture";
+import { Camera } from "core/Cameras/camera";
+import { Light } from "core/Lights/light";
+import { SwitchPropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/switchPropertyLine";
+
+import { MakeLazyComponent } from "shared-ui-components/fluent/primitives/lazyComponent";
+import { Collapse } from "shared-ui-components/fluent/primitives/collapse";
+import { ArrowDownloadRegular } from "@fluentui/react-icons";
+
+const EnvExportImageTypes = [
+    { label: "PNG", value: 0, imageType: "image/png" },
+    { label: "WebP", value: 1, imageType: "image/webp" },
+] as const;
+
+interface IBabylonExportOptionsState {
+    imageTypeIndex: number;
+    imageQuality: number;
+    iblDiffuse: boolean;
+}
+
+export const ExportBabylonTools: FunctionComponent<{ scene: Scene }> = ({ scene }) => {
+    const [babylonExportOptions, setBabylonExportOptions] = useState<Readonly<IBabylonExportOptionsState>>({
+        imageTypeIndex: 0,
+        imageQuality: 0.8,
+        iblDiffuse: false,
+    });
+
+    const exportBabylon = useCallback(async () => {
+        const strScene = JSON.stringify(SceneSerializer.Serialize(scene));
+        const blob = new Blob([strScene], { type: "octet/stream" });
+        Tools.Download(blob, "scene.babylon");
+    }, [scene]);
+
+    const createEnvTexture = useCallback(async () => {
+        if (!scene.environmentTexture) {
+            return;
+        }
+
+        try {
+            const buffer = await EnvironmentTextureTools.CreateEnvTextureAsync(scene.environmentTexture as CubeTexture, {
+                imageType: EnvExportImageTypes[babylonExportOptions.imageTypeIndex].imageType,
+                imageQuality: babylonExportOptions.imageQuality,
+                disableIrradianceTexture: !babylonExportOptions.iblDiffuse,
+            });
+            const blob = new Blob([buffer], { type: "octet/stream" });
+            Tools.Download(blob, "environment.env");
+        } catch (error: any) {
+            Logger.Error(error);
+            alert(error);
+        }
+    }, [scene, babylonExportOptions]);
+
+    return (
+        <>
+            <ButtonLine label="Export to Babylon" icon={ArrowDownloadRegular} onClick={exportBabylon} />
+            {!scene.getEngine().premultipliedAlpha && scene.environmentTexture && scene.environmentTexture._prefiltered && scene.activeCamera && (
+                <>
+                    <ButtonLine label="Generate .env texture" icon={ArrowDownloadRegular} onClick={createEnvTexture} />
+                    {scene.environmentTexture.irradianceTexture && (
+                        <SwitchPropertyLine
+                            key="iblDiffuse"
+                            label="Diffuse Texture"
+                            description="Export diffuse texture for IBL"
+                            value={babylonExportOptions.iblDiffuse}
+                            onChange={(value: boolean) => {
+                                setBabylonExportOptions((prev) => ({ ...prev, iblDiffuse: value }));
+                            }}
+                        />
+                    )}
+                    <NumberDropdownPropertyLine
+                        label="Image type"
+                        options={EnvExportImageTypes}
+                        value={babylonExportOptions.imageTypeIndex}
+                        onChange={(val) => {
+                            setBabylonExportOptions((prev) => ({ ...prev, imageTypeIndex: val as number }));
+                        }}
+                    />
+                    <Collapse visible={babylonExportOptions.imageTypeIndex > 0}>
+                        <SyncedSliderPropertyLine
+                            label="Quality"
+                            value={babylonExportOptions.imageQuality}
+                            onChange={(value) => setBabylonExportOptions((prev) => ({ ...prev, imageQuality: value }))}
+                            min={0}
+                            max={1}
+                        />
+                    </Collapse>
+                </>
+            )}
+        </>
+    );
+};
+
+interface IGltfExportOptionsState {
+    exportDisabledNodes: boolean;
+    exportSkyboxes: boolean;
+    exportCameras: boolean;
+    exportLights: boolean;
+}
+
+export const ExportGltfTools = MakeLazyComponent(async () => {
+    // Defer importing anything from the serializers package until this component is actually mounted.
+    const { GLTF2Export } = await import("serializers/glTF/2.0/glTFSerializer");
+
+    return (props: { scene: Scene }) => {
+        const [isExportingGltf, setIsExportingGltf] = useState(false);
+        const [gltfExportOptions, setGltfExportOptions] = useState<Readonly<IGltfExportOptionsState>>({
+            exportDisabledNodes: false,
+            exportSkyboxes: false,
+            exportCameras: false,
+            exportLights: false,
+        });
+
+        const exportGLTF = useCallback(async () => {
+            setIsExportingGltf(true);
+
+            const shouldExport = (node: Node): boolean => {
+                if (!gltfExportOptions.exportDisabledNodes) {
+                    if (!node.isEnabled()) {
+                        return false;
+                    }
+                }
+
+                if (!gltfExportOptions.exportSkyboxes) {
+                    if (node instanceof Mesh) {
+                        if (node.material) {
+                            const material = node.material as PBRMaterial | StandardMaterial | BackgroundMaterial;
+                            const reflectionTexture = material.reflectionTexture;
+                            if (reflectionTexture && reflectionTexture.coordinatesMode === Texture.SKYBOX_MODE) {
+                                return false;
+                            }
+                        }
+                    }
+                }
+
+                if (!gltfExportOptions.exportCameras) {
+                    if (node instanceof Camera) {
+                        return false;
+                    }
+                }
+
+                if (!gltfExportOptions.exportLights) {
+                    if (node instanceof Light) {
+                        return false;
+                    }
+                }
+
+                return true;
+            };
+
+            try {
+                const glb = await GLTF2Export.GLBAsync(props.scene, "scene", { shouldExportNode: (node) => shouldExport(node) });
+                glb.downloadFiles();
+            } catch (reason) {
+                Logger.Error(`Failed to export GLB: ${reason}`);
+            } finally {
+                setIsExportingGltf(false);
+            }
+        }, [gltfExportOptions, props.scene]);
+
+        return (
+            <>
+                <SwitchPropertyLine
+                    key="GLTFExportDisabledNodes"
+                    label="Export Disabled Nodes"
+                    description="Whether to export nodes that are disabled in the scene."
+                    value={gltfExportOptions.exportDisabledNodes}
+                    onChange={(checked: boolean) => setGltfExportOptions({ ...gltfExportOptions, exportDisabledNodes: checked })}
+                />
+                <SwitchPropertyLine
+                    key="GLTFExportSkyboxes"
+                    label="Export Skyboxes"
+                    description="Whether to export skybox nodes in the scene."
+                    value={gltfExportOptions.exportSkyboxes}
+                    onChange={(checked: boolean) => setGltfExportOptions({ ...gltfExportOptions, exportSkyboxes: checked })}
+                />
+                <SwitchPropertyLine
+                    key="GLTFExportCameras"
+                    label="Export Cameras"
+                    description="Whether to export cameras in the scene."
+                    value={gltfExportOptions.exportCameras}
+                    onChange={(checked: boolean) => setGltfExportOptions({ ...gltfExportOptions, exportCameras: checked })}
+                />
+                <SwitchPropertyLine
+                    key="GLTFExportLights"
+                    label="Export Lights"
+                    description="Whether to export lights in the scene."
+                    value={gltfExportOptions.exportLights}
+                    onChange={(checked: boolean) => setGltfExportOptions({ ...gltfExportOptions, exportLights: checked })}
+                />
+                <ButtonLine label="Export to GLB" icon={ArrowDownloadRegular} onClick={exportGLTF} disabled={isExportingGltf} />
+            </>
+        );
+    };
+});

packages/dev/inspector-v2/src/components/tools/importTools.tsx

@@ -0,0 +1,72 @@
+import { useState } from "react";
+import type { FunctionComponent } from "react";
+import type { Scene } from "core/scene";
+import type { DropdownOption } from "shared-ui-components/fluent/primitives/dropdown";
+import { ImportAnimationsAsync, SceneLoaderAnimationGroupLoadingMode } from "core/Loading/sceneLoader";
+import { FilesInput } from "core/Misc/filesInput";
+import { Logger } from "core/Misc";
+import { SwitchPropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/switchPropertyLine";
+import { NumberDropdownPropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/dropdownPropertyLine";
+import { FileUploadLine } from "shared-ui-components/fluent/hoc/fileUploadLine";
+import { Collapse } from "shared-ui-components/fluent/primitives/collapse";
+
+const AnimationGroupLoadingModes = [
+    { label: "Clean", value: SceneLoaderAnimationGroupLoadingMode.Clean },
+    { label: "Stop", value: SceneLoaderAnimationGroupLoadingMode.Stop },
+    { label: "Sync", value: SceneLoaderAnimationGroupLoadingMode.Sync },
+    { label: "NoSync", value: SceneLoaderAnimationGroupLoadingMode.NoSync },
+] as const satisfies DropdownOption<number>[];
+
+export const ImportAnimationsTools: FunctionComponent<{ scene: Scene }> = ({ scene }) => {
+    const [importDefaults, setImportDefaults] = useState({
+        overwriteAnimations: true,
+        animationGroupLoadingMode: SceneLoaderAnimationGroupLoadingMode.Clean,
+    });
+
+    const importAnimations = (event: FileList) => {
+        const reloadAsync = async function (sceneFile: File) {
+            if (sceneFile) {
+                try {
+                    await ImportAnimationsAsync(sceneFile, scene, {
+                        overwriteAnimations: importDefaults.overwriteAnimations,
+                        animationGroupLoadingMode: importDefaults.animationGroupLoadingMode,
+                    });
+
+                    if (scene.animationGroups.length > 0) {
+                        const currentGroup = scene.animationGroups[0];
+                        currentGroup.play(true);
+                    }
+                } catch (error) {
+                    Logger.Error(`Error importing animations: ${error}`);
+                }
+            }
+        };
+
+        const filesInputAnimation = new FilesInput(scene.getEngine(), scene, null, null, null, null, null, reloadAsync, null);
+        filesInputAnimation.loadFiles(event);
+        filesInputAnimation.dispose();
+    };
+
+    return (
+        <>
+            <FileUploadLine label="Import Animations" accept="gltf" onClick={(evt: FileList) => importAnimations(evt)} />
+            <SwitchPropertyLine
+                label="Overwrite Animations"
+                value={importDefaults.overwriteAnimations}
+                onChange={(value) => {
+                    setImportDefaults({ ...importDefaults, overwriteAnimations: value });
+                }}
+            />
+            <Collapse visible={!importDefaults.overwriteAnimations}>
+                <NumberDropdownPropertyLine
+                    label="Animation Merge Mode"
+                    options={AnimationGroupLoadingModes}
+                    value={importDefaults.animationGroupLoadingMode}
+                    onChange={(value) => {
+                        setImportDefaults({ ...importDefaults, animationGroupLoadingMode: value });
+                    }}
+                />
+            </Collapse>
+        </>
+    );
+};

packages/dev/inspector-v2/src/components/tools/toolsPane.tsx

@@ -0,0 +1,6 @@
+import { ExtensibleAccordion } from "../extensibleAccordion";
+import type { Scene } from "core/scene";
+
+export const ToolsPane: typeof ExtensibleAccordion<Scene> = (props) => {
+    return <ExtensibleAccordion {...props} />;
+};