SFE: Display optimizer and runtime creation performance in SFE, and add an optimizer toggle (#127)

AmoebaChant · web-flow · commit 6f7b10f9b704 · 2025-04-22T16:24:12.000-07:00
diff --git a/packages/editor/src/components/propertyTab/propertyTabComponent.tsx b/packages/editor/src/components/propertyTab/propertyTabComponent.tsx
@@ -37,21 +37,27 @@ interface IPropertyTabComponentState {
     currentFrameNodePort: Nullable<FrameNodePort>;
     currentNodePort: Nullable<NodePort>;
     uploadInProgress: boolean;
+    optimize: Nullable<boolean>;
 }
 
 export class PropertyTabComponent extends react.Component<IPropertyTabComponentProps, IPropertyTabComponentState> {
     private _onResetRequiredObserver?: Observer<boolean>;
+    private _onOptimizerEnabledChangedObserver?: Observer<boolean>;
+
     // private _modeSelect: React.RefObject<OptionsLineComponent>;
 
     constructor(props: IPropertyTabComponentProps) {
         super(props);
 
+        const optimize = this.props.globalState.optimizerEnabled?.value || null;
+
         this.state = {
             currentNode: null,
             currentFrame: null,
             currentFrameNodePort: null,
             currentNodePort: null,
             uploadInProgress: false,
+            optimize,
         };
 
         // this._modeSelect = React.createRef();
@@ -103,12 +109,23 @@ export class PropertyTabComponent extends react.Component<IPropertyTabComponentP
         this._onResetRequiredObserver = this.props.globalState.onResetRequiredObservable?.add(() => {
             this.forceUpdate();
         });
+
+        if (this.props.globalState.optimizerEnabled) {
+            this._onOptimizerEnabledChangedObserver = this.props.globalState.optimizerEnabled.onChangedObservable.add(
+                (value: boolean) => {
+                    this.setState({ optimize: value });
+                }
+            );
+        }
     }
 
     override componentWillUnmount() {
         if (this._onResetRequiredObserver) {
             this._onResetRequiredObserver.remove();
         }
+        if (this._onOptimizerEnabledChangedObserver) {
+            this._onOptimizerEnabledChangedObserver.remove();
+        }
     }
 
     processInputBlockUpdate(ib: AnyInputBlock) {
@@ -317,6 +334,17 @@ export class PropertyTabComponent extends react.Component<IPropertyTabComponentP
                                 this.props.globalState.onlyShowCustomBlocksObservable.notifyObservers(value);
                             }}
                         />
+                        {this.props.globalState.optimizerEnabled && (
+                            <CheckBoxLineComponent
+                                label="Optimize Smart Filter"
+                                isSelected={() => !!this.state.optimize}
+                                onSelect={(value: boolean) => {
+                                    if (this.props.globalState.optimizerEnabled) {
+                                        this.props.globalState.optimizerEnabled.value = value;
+                                    }
+                                }}
+                            />
+                        )}
                     </LineContainerComponent>
                     {(this.props.globalState.loadSmartFilter ||
                         this.props.globalState.downloadSmartFilter ||
diff --git a/packages/editor/src/globalState.ts b/packages/editor/src/globalState.ts
@@ -13,6 +13,7 @@ import type { GraphNode } from "@babylonjs/shared-ui-components/nodeGraphSystem/
 import type { BlockEditorRegistration } from "./configuration/blockEditorRegistration.js";
 import type { IPortData } from "@babylonjs/shared-ui-components/nodeGraphSystem/interfaces/portData.js";
 import { BlockTools } from "./blockTools.js";
+import type { ObservableProperty } from "./helpers/observableProperty.js";
 
 export type TexturePreset = {
     name: string;
@@ -30,6 +31,8 @@ export class GlobalState {
 
     onSmartFilterLoadedObservable: Nullable<Observable<SmartFilter>>;
 
+    optimizerEnabled: Nullable<ObservableProperty<boolean>>;
+
     smartFilter: SmartFilter;
 
     blockEditorRegistration: BlockEditorRegistration;
@@ -95,6 +98,7 @@ export class GlobalState {
         engine: Nullable<ThinEngine>,
         onNewEngine: Nullable<(engine: ThinEngine) => void>,
         onSmartFilterLoadedObservable: Nullable<Observable<SmartFilter>>,
+        optimizerEnabled: Nullable<ObservableProperty<boolean>>,
         smartFilter: Nullable<SmartFilter>,
         blockEditorRegistration: BlockEditorRegistration,
         hostElement: HTMLElement,
@@ -124,6 +128,7 @@ export class GlobalState {
         this.engine = engine;
         this.onNewEngine = onNewEngine;
         this.onSmartFilterLoadedObservable = onSmartFilterLoadedObservable;
+        this.optimizerEnabled = optimizerEnabled;
         this.smartFilter = smartFilter ?? new SmartFilter("New Filter");
         this.blockEditorRegistration = blockEditorRegistration;
         this.hostElement = hostElement;
diff --git a/packages/editor/src/helpers/observableProperty.ts b/packages/editor/src/helpers/observableProperty.ts
@@ -0,0 +1,32 @@
+import { Observable } from "@babylonjs/core/Misc/observable.js";
+
+/**
+ * An Observable that doesn't allow you to notify observers.
+ */
+export type ReadOnlyObservable<T> = Omit<Observable<T>, "notifyObserver" | "notifyObservers">;
+
+/**
+ * Represents a property that can be observed for changes. The setter of the value property
+ * will notify observers of the onChangedObservable about the change.
+ */
+export class ObservableProperty<T> {
+    private _value: T;
+    private _onChangedObservable: Observable<T> = new Observable<T>();
+
+    public get value(): T {
+        return this._value;
+    }
+
+    public set value(newValue: T) {
+        if (this._value !== newValue) {
+            this._value = newValue;
+            this._onChangedObservable.notifyObservers(this._value);
+        }
+    }
+    public readonly onChangedObservable: ReadOnlyObservable<T>;
+
+    public constructor(value: T) {
+        this._value = value;
+        this.onChangedObservable = this._onChangedObservable;
+    }
+}
diff --git a/packages/editor/src/index.ts b/packages/editor/src/index.ts
@@ -17,3 +17,4 @@ export * from "./configuration/editorBlocks/inputBlockDeserializer.js";
 export * from "./configuration/editorBlocks/webCamInputBlock/webCamInputBlock.js";
 export * from "./helpers/registerAnimations.js";
 export * from "./configuration/constants.js";
+export * from "./helpers/observableProperty.js";
diff --git a/packages/editor/src/initializePreview.ts b/packages/editor/src/initializePreview.ts
@@ -18,5 +18,6 @@ export function initializePreview(canvas: HTMLCanvasElement): ThinEngine {
         },
         false
     );
+    engine.getCaps().parallelShaderCompile = undefined;
     return engine;
 }
diff --git a/packages/editor/src/smartFilterEditorControl.ts b/packages/editor/src/smartFilterEditorControl.ts
@@ -13,6 +13,7 @@ import { CreatePopup } from "@babylonjs/shared-ui-components/popupHelper.js";
 import type { IBlockRegistration } from "@babylonjs/smart-filters-blocks";
 import type { LogEntry } from "./components/log/logComponent.js";
 import type { BlockEditorRegistration } from "./configuration/blockEditorRegistration.js";
+import type { ObservableProperty } from "./helpers/observableProperty.js";
 
 /**
  * Options to configure the Smart Filter Editor
@@ -37,6 +38,11 @@ export type SmartFilterEditorOptions = {
      */
     onSmartFilterLoadedObservable?: Observable<SmartFilter>;
 
+    /**
+     * If supplied, the editor will display a toggle to enable or disable the optimizer, and update this property when it changes.
+     */
+    optimizerEnabled?: ObservableProperty<boolean>;
+
     /**
      * A BlockEditorRegistration object which is responsible for providing the information
      * required for the Editor to be able to display and work with the Smart Filter
@@ -151,6 +157,7 @@ export class SmartFilterEditorControl {
             options.engine ?? null,
             options.onNewEngine ?? null,
             options.onSmartFilterLoadedObservable ?? null,
+            options.optimizerEnabled ?? null,
             options.filter ?? null,
             options.blockEditorRegistration,
             hostElement,
diff --git a/packages/sfe/src/app.ts b/packages/sfe/src/app.ts
@@ -1,5 +1,4 @@
 import "@babylonjs/core/Engines/Extensions/engine.rawTexture.js";
-
 import type { ThinEngine } from "@babylonjs/core/Engines/thinEngine";
 import { Observable, type Observer } from "@babylonjs/core/Misc/observable.js";
 import type { Nullable } from "@babylonjs/core/types";
@@ -10,6 +9,7 @@ import {
     getBlockEditorRegistration,
     inputBlockDeserializer,
     LogEntry,
+    ObservableProperty,
     SmartFilterEditorControl,
     type SmartFilterEditorOptions,
 } from "@babylonjs/smart-filters-editor-control";
@@ -29,6 +29,8 @@ import { loadSmartFilterFromFile } from "./smartFilterLoadSave/loadSmartFilterFr
 import { texturePresets } from "./texturePresets.js";
 import { serializeSmartFilter } from "./smartFilterLoadSave/serializeSmartFilter.js";
 
+const LocalStorageOptimizeName = "OptimizeSmartFilter";
+
 /**
  * The main entry point for the Smart Filter editor.
  */
@@ -39,15 +41,26 @@ async function main(): Promise<void> {
     }
 
     // Services and options to keep around for the lifetime of the page
-    const optimize = false;
     let currentSmartFilter: Nullable<SmartFilter> = null;
     let renderer: Nullable<SmartFilterRenderer> = null;
     const onSmartFilterLoadedObservable = new Observable<SmartFilter>();
+    const optimizerEnabled = new ObservableProperty<boolean>(
+        localStorage.getItem(LocalStorageOptimizeName) === "true" || false
+    );
     const onSaveEditorDataRequiredObservable = new Observable<void>();
     let afterEngineResizerObserver: Nullable<Observer<ThinEngine>> = null;
     const onLogRequiredObservable = new Observable<LogEntry>();
     let engine: Nullable<ThinEngine> = null;
 
+    // Set up optimize property change behavior
+    optimizerEnabled.onChangedObservable.add(async (value: boolean) => {
+        localStorage.setItem(LocalStorageOptimizeName, value ? "true" : "false");
+        if (renderer && renderer.optimize !== value) {
+            renderer.optimize = value;
+            await startRendering();
+        }
+    });
+
     // Create the Smart Filter deserializer
     const smartFilterDeserializer = new SmartFilterDeserializer(
         (
@@ -125,7 +138,7 @@ async function main(): Promise<void> {
             }
         }
 
-        renderer = new SmartFilterRenderer(newEngine, optimize);
+        renderer = new SmartFilterRenderer(newEngine, optimizerEnabled.value);
         await startRendering();
 
         if (justLoadedSmartFilter) {
@@ -135,8 +148,24 @@ async function main(): Promise<void> {
 
     const startRendering = async () => {
         if (renderer && currentSmartFilter) {
-            if (await renderer.startRendering(currentSmartFilter, onLogRequiredObservable)) {
-                onLogRequiredObservable.notifyObservers(new LogEntry("Smart Filter built successfully", false));
+            const renderResult = await renderer.startRendering(currentSmartFilter, onLogRequiredObservable);
+            if (renderResult.succeeded) {
+                let statsString = "";
+                const stats: string[] = [];
+                if (renderResult.optimizationTimeMs !== null) {
+                    stats.push(`Optimizer: ${Math.floor(renderResult.optimizationTimeMs).toLocaleString()}ms`);
+                }
+                if (renderResult.runtimeCreationTimeMs !== null) {
+                    stats.push(
+                        `Runtime Creation: ${Math.floor(renderResult.runtimeCreationTimeMs).toLocaleString()}ms`
+                    );
+                }
+                if (stats.length > 0) {
+                    statsString = ` [${stats.join(", ")}]`;
+                }
+                onLogRequiredObservable.notifyObservers(
+                    new LogEntry("Smart Filter built successfully" + statsString, false)
+                );
             }
         }
     };
@@ -158,6 +187,7 @@ async function main(): Promise<void> {
     const options: SmartFilterEditorOptions = {
         onNewEngine,
         onSmartFilterLoadedObservable,
+        optimizerEnabled,
         blockEditorRegistration: blockEditorRegistration,
         hostElement,
         downloadSmartFilter: () => {
@@ -170,9 +200,8 @@ async function main(): Promise<void> {
             try {
                 if (renderer) {
                     currentSmartFilter = await loadSmartFilterFromFile(smartFilterDeserializer, engine, file);
-                    if (await renderer.startRendering(currentSmartFilter, onLogRequiredObservable)) {
-                        onLogRequiredObservable.notifyObservers(new LogEntry("Loaded Smart Filter from JSON", false));
-                    }
+                    onLogRequiredObservable.notifyObservers(new LogEntry("Loaded Smart Filter from JSON", false));
+                    startRendering();
                     return currentSmartFilter;
                 }
             } catch (err: unknown) {
diff --git a/packages/sfe/src/smartFilterRenderer.ts b/packages/sfe/src/smartFilterRenderer.ts
@@ -12,6 +12,26 @@ import {
 import { RenderTargetGenerator } from "@babylonjs/smart-filters";
 import { LogEntry, registerAnimations, TextureAssetCache } from "@babylonjs/smart-filters-editor-control";
 
+/**
+ * Describes the result of rendering a Smart Filter
+ */
+export type RenderResult = {
+    /**
+     * Indicates if the Smart Filter was rendered successfully
+     */
+    succeeded: boolean;
+
+    /**
+     * The time it took to optimize the Smart Filter (null if not applicable)
+     */
+    optimizationTimeMs: Nullable<number>;
+
+    /**
+     * The time it took to compile the Smart Filter (null if not applicable)
+     */
+    runtimeCreationTimeMs: Nullable<number>;
+};
+
 /**
  * Simple example of rendering a Smart Filter
  */
@@ -70,13 +90,27 @@ export class SmartFilterRenderer {
      * @param onLogRequiredObservable - The observable to use to notify when a log entry is required
      * @returns A promise that resolves as true if the rendering started successfully, false otherwise
      */
-    public async startRendering(filter: SmartFilter, onLogRequiredObservable: Observable<LogEntry>): Promise<boolean> {
+    public async startRendering(
+        filter: SmartFilter,
+        onLogRequiredObservable: Observable<LogEntry>
+    ): Promise<RenderResult> {
+        let optimizationTimeMs: Nullable<number> = null;
+        let runtimeCreationTimeMs: Nullable<number> = null;
+
         try {
             this._lastRenderedSmartFilter = filter;
-            const filterToRender = this.optimize ? this._optimize(filter) : filter;
+            const filterToRender = filter;
+            if (this.optimize) {
+                const optimizeStartTime = performance.now();
+                this._optimize(filter);
+                optimizationTimeMs = performance.now() - optimizeStartTime;
+            }
 
             const rtg = new RenderTargetGenerator(this.optimize);
+
+            const createRuntimeStartTime = performance.now();
             const runtime = await filterToRender.createRuntimeAsync(this.engine, rtg);
+            runtimeCreationTimeMs = performance.now() - createRuntimeStartTime;
 
             // NOTE: Always load assets and animations from the unoptimized filter because it has all the metadata needed to load assets and
             //       shares runtime data with the optimized filter so loading assets for it will work for the optimized filter as well
@@ -87,11 +121,19 @@ export class SmartFilterRenderer {
 
             this._setRuntime(runtime);
 
-            return true;
+            return {
+                succeeded: true,
+                optimizationTimeMs,
+                runtimeCreationTimeMs,
+            };
         } catch (err: any) {
             const message = err["message"] || err["_compilationError"] || err;
             onLogRequiredObservable.notifyObservers(new LogEntry(`Could not render Smart Filter:\n${message}`, true));
-            return false;
+            return {
+                succeeded: false,
+                optimizationTimeMs: null,
+                runtimeCreationTimeMs: null,
+            };
         }
     }
 

Original file line number	Diff line number	Diff line change
`@@ -18,5 +18,6 @@ export function initializePreview(canvas: HTMLCanvasElement): ThinEngine {`
`18`	`18`	`},`
`19`	`19`	`false`
`20`	`20`	`);`
	`21`	`+ engine.getCaps().parallelShaderCompile = undefined;`
`21`	`22`	`return engine;`
`22`	`23`	`}`