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

package/src/blocks/outputBlock.ts

@@ -3,7 +3,9 @@ import { ConnectionPointType } from "../connection/connectionPointType.js";
 import { BaseBlock } from "./baseBlock.js";
 import { CopyBlock } from "./copyBlock.js";
 import { ShaderRuntime } from "../runtime/shaderRuntime.js";
-import { createCommand } from "../command/command.js";
+import type { Nullable } from "@babylonjs/core/types";
+import type { ThinRenderTargetTexture } from "@babylonjs/core/Materials/Textures/thinRenderTargetTexture";
+import { registerFinalRenderCommand } from "../utils/renderTargetUtils.js";
 
 /**
  * The output block of a smart filter.
@@ -23,6 +25,12 @@ export class OutputBlock extends BaseBlock {
      */
     public readonly input = this._registerInput("input", ConnectionPointType.Texture);
 
+    /**
+     * If supplied, the Smart Filter will render into this texture. Otherwise, it renders
+     * into the the canvas or WebGL context the ThinEngine is using for rendering.
+     */
+    public renderTargetTexture: Nullable<ThinRenderTargetTexture> = null;
+
     private _copyBlock: CopyBlock | null;
 
     /**
@@ -86,11 +94,7 @@ export class OutputBlock extends BaseBlock {
         initializationData.initializationPromises.push(shaderBlockRuntime.onReadyAsync);
         runtime.registerResource(shaderBlockRuntime);
 
-        runtime.registerCommand(
-            createCommand(`${this.getClassName()}.renderToCanvas`, this, () => {
-                shaderBlockRuntime.renderToCanvas();
-            })
-        );
+        registerFinalRenderCommand(this.renderTargetTexture, runtime, this, shaderBlockRuntime);
 
         super.generateCommandsAndGatherInitPromises(initializationData, finalOutput);
     }

package/src/blocks/shaderBlock.ts

@@ -10,6 +10,7 @@ import { ConnectionPointType } from "../connection/connectionPointType.js";
 import { createCommand } from "../command/command.js";
 import { DisableableBlock } from "./disableableBlock.js";
 import { undecorateSymbol } from "../utils/shaderCodeUtils.js";
+import { getRenderTarget, registerFinalRenderCommand } from "../utils/renderTargetUtils.js";
 
 /**
  * This is the base class for all shader blocks.
@@ -121,21 +122,21 @@ export abstract class ShaderBlock extends DisableableBlock {
         runtime.registerResource(shaderBlockRuntime);
 
         if (finalOutput) {
-            runtime.registerCommand(
-                createCommand(`${this.getClassName()}.renderToCanvas`, this, () => {
-                    shaderBlockRuntime.renderToCanvas();
-                })
+            registerFinalRenderCommand(
+                initializationData.outputBlock.renderTargetTexture,
+                runtime,
+                this,
+                shaderBlockRuntime
             );
         } else {
-            const rtt =
-                this.output.runtimeData && (this.output.runtimeData.value as ThinRenderTargetTexture).renderTarget;
-            if (!rtt) {
-                throw new Error("ShaderBlock does not have a render target texture.");
-            }
+            const renderTarget = getRenderTarget(
+                this.output.runtimeData?.value as ThinRenderTargetTexture,
+                this.getClassName()
+            );
 
             runtime.registerCommand(
                 createCommand(`${this.getClassName()}.render`, this, () => {
-                    shaderBlockRuntime.renderToTexture(rtt);
+                    shaderBlockRuntime.renderToTexture(renderTarget);
                 })
             );
         }

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/buildShaders.ts

@@ -0,0 +1,13 @@
+/**
+ * Builds all .glsl files under <shaderPath>.
+ * @param shaderPath - The path to the shaders to watch
+ * @param importPath - The path to import the converted shaders
+ * @example node buildShaders.js <shaderPath> <importPath>
+ */
+
+import { convertShaders } from "./shaderConverter.js";
+
+const externalArguments = process.argv.slice(2);
+if (externalArguments.length >= 2 && externalArguments[0] && externalArguments[1]) {
+    convertShaders(externalArguments[0], externalArguments[1]);
+}

package/src/utils/buildTools/shaderConverter.ts

@@ -63,7 +63,7 @@ const GetFunctionNamesRegEx = /\S*\w+\s+(\w+)\s*\(/g;
  * @param fragmentShaderPath - The path to the fragment file for the shader
  * @param importPath - The path to import the ShaderProgram type from
  */
-function convertShader(fragmentShaderPath: string, importPath: string): void {
+export function convertShader(fragmentShaderPath: string, importPath: string): void {
     console.log(`Processing fragment shader: ${fragmentShaderPath}`);
 
     // See if there is a corresponding vertex shader
@@ -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}",`);
@@ -376,7 +376,7 @@ function removeFunctionBodies(input: string): string {
  * @param shaderPath - The path to the .glsl files to convert.
  * @param importPath - The path to import the ShaderProgram type from.
  */
-function convertShaders(shaderPath: string, importPath: string) {
+export function convertShaders(shaderPath: string, importPath: string) {
     // Get all files in the path
     const allFiles = fs.readdirSync(shaderPath, { withFileTypes: true, recursive: true });
 
@@ -391,9 +391,4 @@ function convertShaders(shaderPath: string, importPath: string) {
     }
 }
 
-const externalArguments = process.argv.slice(2);
-if (externalArguments.length >= 2 && externalArguments[0] && externalArguments[1]) {
-    convertShaders(externalArguments[0], externalArguments[1]);
-}
-
 // TODO: simple copy from shader file to .ts, get it to build (including import trick)

package/src/utils/buildTools/watchShaders.ts

@@ -0,0 +1,40 @@
+/* eslint-disable no-console */
+/**
+ * Watches all .glsl files under <shaderPath> and rebuilds them when changed.
+ * @param shaderPath - The path to the shaders to watch
+ * @param importPath - The path to import the converted shaders
+ * @example node watchShaders.js <shaderPath> <importPath>
+ */
+
+import { convertShader } from "./shaderConverter.js";
+import { watch } from "chokidar";
+import { extname } from "path";
+
+const externalArguments = process.argv.slice(2);
+if (externalArguments.length >= 2 && externalArguments[0] && externalArguments[1]) {
+    const shaderPath = externalArguments[0];
+    const importPath = externalArguments[1];
+
+    watch(shaderPath).on("all", (event, file) => {
+        // Only process file changes and added files
+        if (event !== "change" && event !== "add") {
+            return;
+        }
+
+        // Only process .glsl files
+        if (extname(file) !== ".glsl") {
+            return;
+        }
+
+        // Wrap in try-catch to prevent the watcher from crashing
+        // if the new shader changes are invalid
+        try {
+            convertShader(file, importPath);
+            console.log(`Successfully updated shader ${file}`);
+        } catch (error) {
+            console.error(`Failed to convert shader ${file}: ${error}`);
+        }
+    });
+
+    console.log(`Watching for shader changes in ${shaderPath}`);
+}

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();
+            })
+        );
+    }
+}