@babylonjs/smart-filters 0.3.3-alpha → 0.3.4-alpha

package/src/runtime/renderTargetGenerator.ts

@@ -51,11 +51,11 @@ export class RenderTargetGenerator {
 
     /**
      * Sets the output textures for the ShaderBlocks of the smart filter.
-     * @param smart - The smart filter to generate the render targets for.
+     * @param smartFilter - The smart filter to generate the render targets for.
      * @param initializationData - The initialization data to use.
      */
-    public setOutputTextures(smart: SmartFilter, initializationData: InitializationData) {
-        smart.output.ownerBlock.visit(
+    public setOutputTextures(smartFilter: SmartFilter, initializationData: InitializationData) {
+        smartFilter.output.ownerBlock.visit(
             initializationData,
             (block: BaseBlock, initializationData: InitializationData) => {
                 if (!(block instanceof ShaderBlock)) {
@@ -66,8 +66,8 @@ export class RenderTargetGenerator {
 
                 // We assign a texture to the output of the block only if this is not the last block in the chain,
                 // i.e. not the block connected to the smart output block (in which case the output of the block is to the canvas and not a texture).
-                if (!block.output.endpoints.some((cp) => cp.ownerBlock === smart.output.ownerBlock)) {
-                    refCountedTexture = this._getTexture(initializationData.runtime, block.textureRatio);
+                if (!block.output.endpoints.some((cp) => cp.ownerBlock === smartFilter.output.ownerBlock)) {
+                    refCountedTexture = this._getTexture(initializationData.runtime, block.textureRatio, smartFilter);
 
                     if (!block.output.runtimeData) {
                         const runtimeOutput = createStrongRef(refCountedTexture.texture);
@@ -122,11 +122,15 @@ export class RenderTargetGenerator {
         return null;
     }
 
-    private _getTexture(runtime: InternalSmartFilterRuntime, ratio: number): RefCountedTexture {
+    private _getTexture(
+        runtime: InternalSmartFilterRuntime,
+        ratio: number,
+        smartFilter: SmartFilter
+    ): RefCountedTexture {
         if (!this._optimize) {
             this._numTargetsCreated++;
             return {
-                texture: this._createTexture(runtime, ratio),
+                texture: this._createTexture(runtime, smartFilter, ratio),
                 refCount: 0,
             };
         }
@@ -140,7 +144,7 @@ export class RenderTargetGenerator {
         let refCountedTexture = this._findAvailableTexture(ratio);
         if (!refCountedTexture) {
             refCountedTexture = {
-                texture: this._createTexture(runtime, ratio),
+                texture: this._createTexture(runtime, smartFilter, ratio),
                 refCount: 0,
             };
             refCountedTextures.add(refCountedTexture);
@@ -173,10 +177,15 @@ export class RenderTargetGenerator {
     /**
      * Creates an offscreen texture to hold on the result of the block rendering.
      * @param runtime - The current runtime we create the texture for
+     * @param smartFilter - The smart filter the texture is created for
      * @param ratio - The ratio of the texture to create compared to the final output
      * @returns The render target texture
      */
-    private _createTexture(runtime: InternalSmartFilterRuntime, ratio: number): ThinRenderTargetTexture {
+    private _createTexture(
+        runtime: InternalSmartFilterRuntime,
+        smartFilter: SmartFilter,
+        ratio: number
+    ): ThinRenderTargetTexture {
         const engine = runtime.engine;
 
         // We are only rendering full screen post process without depth or stencil information
@@ -187,12 +196,20 @@ export class RenderTargetGenerator {
             samplingMode: 2, // Babylon Constants.TEXTURE_LINEAR_LINEAR,
         };
 
-        // The size of the output is by default the current rendering size of the engine
-        const width = engine.getRenderWidth(true);
-        const height = engine.getRenderHeight(true);
+        // Get the smartFilter output size - either from the output block's renderTargetTexture or the engine's render size
+        let outputWidth: number;
+        let outputHeight: number;
+        const renderTargetTextureSize = smartFilter.outputBlock.renderTargetTexture?.getSize();
+        if (renderTargetTextureSize) {
+            outputWidth = renderTargetTextureSize.width;
+            outputHeight = renderTargetTextureSize.height;
+        } else {
+            outputWidth = engine.getRenderWidth(true);
+            outputHeight = engine.getRenderHeight(true);
+        }
         const size = {
-            width: Math.floor(width * ratio),
-            height: Math.floor(height * ratio),
+            width: Math.floor(outputWidth * ratio),
+            height: Math.floor(outputHeight * ratio),
         };
 
         // Creates frame buffers for effects

package/src/serialization/smartFilterDeserializer.ts

@@ -31,8 +31,8 @@ export class SmartFilterDeserializer {
         // Add in the core block deserializers - they are not delay loaded, so they are wrapped in Promise.resolve()
         this._blockDeserializersV1.set(
             InputBlock.ClassName,
-            (smartFilter: SmartFilter, serializedBlock: ISerializedBlockV1, engine: ThinEngine) =>
-                Promise.resolve(inputBlockDeserializer(smartFilter, serializedBlock, engine))
+            (smartFilter: SmartFilter, serializedBlock: ISerializedBlockV1) =>
+                Promise.resolve(inputBlockDeserializer(smartFilter, serializedBlock))
         );
 
         this._blockDeserializersV1.set(OutputBlock.ClassName, (smartFilter: SmartFilter) =>
@@ -59,7 +59,10 @@ export class SmartFilterDeserializer {
         serializedSmartFilter: SerializedSmartFilterV1
     ): Promise<SmartFilter> {
         const smartFilter = new SmartFilter(serializedSmartFilter.name);
-        const blockMap = new Map<string, BaseBlock>();
+        const blockIdMap = new Map<number, BaseBlock>();
+
+        // Only needed for smart filters saved before we started using uniqueIds for the maps, didn't warrant new version
+        const blockNameMap = new Map<string, BaseBlock>();
 
         // Deserialize the SmartFilter level data
         smartFilter.comments = serializedSmartFilter.comments;
@@ -85,7 +88,8 @@ export class SmartFilterDeserializer {
                     UniqueIdGenerator.EnsureIdsGreaterThan(newBlock.uniqueId);
 
                     // Save in the map
-                    blockMap.set(newBlock.name, newBlock);
+                    blockIdMap.set(newBlock.uniqueId, newBlock);
+                    blockNameMap.set(newBlock.name, newBlock);
                 })
             );
         });
@@ -94,7 +98,11 @@ export class SmartFilterDeserializer {
         // Deserialize the connections
         serializedSmartFilter.connections.forEach((connection: ISerializedConnectionV1) => {
             // Find the source block and its connection point's connectTo function
-            const sourceBlock = blockMap.get(connection.outputBlock);
+            const sourceBlock =
+                typeof connection.outputBlock === "string"
+                    ? blockNameMap.get(connection.outputBlock)
+                    : blockIdMap.get(connection.outputBlock);
+
             if (!sourceBlock) {
                 throw new Error(`Source block ${connection.outputBlock} not found`);
             }
@@ -107,7 +115,10 @@ export class SmartFilterDeserializer {
             const sourceConnectToFunction = sourceConnectionPoint.connectTo.bind(sourceConnectionPoint);
 
             // Find the target block and its connection point
-            const targetBlock = blockMap.get(connection.inputBlock);
+            const targetBlock =
+                typeof connection.inputBlock === "string"
+                    ? blockNameMap.get(connection.inputBlock)
+                    : blockIdMap.get(connection.inputBlock);
             if (!targetBlock) {
                 throw new Error(`Target block ${connection.inputBlock} not found`);
             }

package/src/serialization/smartFilterSerializer.ts

@@ -72,9 +72,9 @@ export class SmartFilterSerializer {
                 const connectedTo = input.connectedTo;
                 if (connectedTo) {
                     const newConnection: ISerializedConnectionV1 = {
-                        inputBlock: block.name,
+                        inputBlock: block.uniqueId,
                         inputConnectionPoint: input.name,
-                        outputBlock: connectedTo.ownerBlock.name,
+                        outputBlock: connectedTo.ownerBlock.uniqueId,
                         outputConnectionPoint: connectedTo.name,
                     };
                     if (!connections.find((other) => serializedConnectionPointsEqual(newConnection, other))) {
@@ -87,9 +87,9 @@ export class SmartFilterSerializer {
             block.outputs.forEach((output: ConnectionPoint) => {
                 output.endpoints.forEach((input: ConnectionPoint) => {
                     const newConnection: ISerializedConnectionV1 = {
-                        inputBlock: input.ownerBlock.name,
+                        inputBlock: input.ownerBlock.uniqueId,
                         inputConnectionPoint: input.name,
-                        outputBlock: block.name,
+                        outputBlock: block.uniqueId,
                         outputConnectionPoint: output.name,
                     };
                     if (!connections.find((other) => serializedConnectionPointsEqual(newConnection, other))) {

package/src/serialization/v1/serialization.types.ts

@@ -57,14 +57,14 @@ export interface ISerializedBlockV1 {
  * V1 Serialized Connection
  */
 export interface ISerializedConnectionV1 {
-    /** The name of the block that the connection is to */
-    outputBlock: string;
+    /** The uniqueId of the block that the connection is to */
+    outputBlock: number;
 
     /** The name of the connectionPoint on the outputBlock */
     outputConnectionPoint: string;
 
-    /** The name of the block that the connection is from */
-    inputBlock: string;
+    /** The uniqueId of the block that the connection is from */
+    inputBlock: number;
 
     /** The name of the connectionPoint on the inputBlock */
     inputConnectionPoint: string;

package/src/smartFilter.ts

@@ -55,6 +55,11 @@ export class SmartFilter {
      */
     public readonly output: ConnectionPoint<ConnectionPointType.Texture>;
 
+    /**
+     * The output block of the smart filter.
+     */
+    public readonly outputBlock: OutputBlock;
+
     /**
      * User defined comments to describe the current smart filter.
      */
@@ -66,8 +71,6 @@ export class SmartFilter {
     public editorData: Nullable<IEditorData> = null;
 
     private readonly _attachedBlocks: Array<BaseBlock>;
-    private readonly _outputBlock: OutputBlock;
-
     /**
      * Creates a new instance of a @see SmartFilter.
      * @param name - The friendly name of the smart filter
@@ -76,8 +79,8 @@ export class SmartFilter {
         this.name = name;
 
         this._attachedBlocks = new Array<BaseBlock>();
-        this._outputBlock = new OutputBlock(this);
-        this.output = this._outputBlock.input;
+        this.outputBlock = new OutputBlock(this);
+        this.output = this.outputBlock.input;
     }
 
     /**
@@ -136,7 +139,7 @@ export class SmartFilter {
     }
 
     private _generateCommandsAndGatherInitPromises(initializationData: InitializationData): void {
-        const outputBlock = this._outputBlock;
+        const outputBlock = this.outputBlock;
 
         outputBlock.visit(initializationData, (block: BaseBlock, initializationData: InitializationData) => {
             // If the block is the output block,
@@ -173,17 +176,17 @@ export class SmartFilter {
 
         const initializationData: InitializationData = {
             runtime,
-            outputBlock: this._outputBlock,
+            outputBlock: this.outputBlock,
             initializationPromises: [],
         };
 
         this._workWithAggregateFreeGraph(() => {
-            this._outputBlock.prepareForRuntime();
+            this.outputBlock.prepareForRuntime();
 
             renderTargetGenerator = renderTargetGenerator ?? new RenderTargetGenerator(false);
             renderTargetGenerator.setOutputTextures(this, initializationData);
 
-            this._outputBlock.propagateRuntimeData();
+            this.outputBlock.propagateRuntimeData();
 
             this._generateCommandsAndGatherInitPromises(initializationData);
         });
@@ -210,7 +213,7 @@ export class SmartFilter {
         const mergedAggregateBlocks: AggregateBlock[] = [];
 
         // Merge all aggregate blocks
-        this._outputBlock.visit({}, (block: BaseBlock, _extraData: Object) => {
+        this.outputBlock.visit({}, (block: BaseBlock, _extraData: Object) => {
             if (block instanceof AggregateBlock) {
                 block._mergeIntoSmartFilter(mergedAggregateBlocks);
             }

package/src/utils/buildTools/shaderConverter.ts

@@ -182,8 +182,8 @@ function processFragmentShaderV1(fragmentShader: string): FragmentShaderInfo {
     const symbolsToDecorate = [...uniforms, ...consts, ...functionNames];
     let fragmentShaderWithRenamedSymbols = fragmentShader;
     for (const symbol of symbolsToDecorate) {
-        const regex = new RegExp(`(\\S*(?:\\s|;|,|\\)|\\()+)${symbol}((\\s|;|,|\\)|\\()+)`, "gs");
-        fragmentShaderWithRenamedSymbols = fragmentShaderWithRenamedSymbols.replace(regex, `$1_${symbol}_$2`);
+        const regex = new RegExp(`(?<=\\W+)${symbol}(?=\\W+)`, "gs");
+        fragmentShaderWithRenamedSymbols = fragmentShaderWithRenamedSymbols.replace(regex, `_${symbol}_`);
     }
     console.log(`${symbolsToDecorate.length} symbol(s) renamed`);
     const uniformNames = uniforms.map((uniform) => `${uniform}: "${uniform}",`);

package/src/utils/renderTargetUtils.ts

@@ -0,0 +1,56 @@
+import type { RenderTargetWrapper } from "@babylonjs/core/Engines/renderTargetWrapper";
+import type { ThinRenderTargetTexture } from "@babylonjs/core/Materials/Textures/thinRenderTargetTexture";
+import type { Nullable } from "@babylonjs/core/types";
+import { createCommand } from "../command/command.js";
+import type { BaseBlock } from "../blocks/baseBlock";
+import type { ShaderRuntime } from "../runtime/shaderRuntime";
+import type { InternalSmartFilterRuntime } from "../runtime/smartFilterRuntime";
+
+/**
+ * Tries to get a renderTarget from a renderTargetTexture, throws an error if it fails.
+ * @param renderTargetTexture - The renderTargetTexture to get the renderTarget from.
+ * @param callerName - The name of the component calling this one, used for a more descriptive error message.
+ * @returns - The renderTarget or throws an Error if it fails.
+ */
+export function getRenderTarget(
+    renderTargetTexture: Nullable<ThinRenderTargetTexture>,
+    callerName: string
+): RenderTargetWrapper {
+    const renderTarget = renderTargetTexture?.renderTarget;
+    if (!renderTarget) {
+        throw new Error(`${callerName} could not get a renderTarget it needed.`);
+    }
+    return renderTarget;
+}
+
+/**
+ * Registers the final command of the command queue - the one that draws to either the canvas or
+ * renderTargetTexture.
+ * @param renderTargetTexture - If non-null, the render target texture to render to, otherwise the command will
+ * render to the canvas.
+ * @param runtime - The smart filter runtime to use.
+ * @param commandOwner - The owner of the command.
+ * @param shaderBlockRuntime - The shader block runtime to use.
+ */
+export function registerFinalRenderCommand(
+    renderTargetTexture: Nullable<ThinRenderTargetTexture>,
+    runtime: InternalSmartFilterRuntime,
+    commandOwner: BaseBlock,
+    shaderBlockRuntime: ShaderRuntime
+): void {
+    const commandOwnerClassName = commandOwner.getClassName();
+    if (renderTargetTexture) {
+        const renderTarget = getRenderTarget(renderTargetTexture, commandOwnerClassName);
+        runtime.registerCommand(
+            createCommand(`${commandOwnerClassName}.renderToFinalTexture`, commandOwner, () => {
+                shaderBlockRuntime.renderToTexture(renderTarget);
+            })
+        );
+    } else {
+        runtime.registerCommand(
+            createCommand(`${commandOwnerClassName}.renderToCanvas`, commandOwner, () => {
+                shaderBlockRuntime.renderToCanvas();
+            })
+        );
+    }
+}