@shaderfrog/core 2.0.0-beta.3 → 2.0.1

package/README.md

@@ -119,9 +119,9 @@ export interface Engine {
 
 Shaderfrog works by searching each node's AST for certain patterns, like
 `uniform` variables, and creating an interface where you can replace each
-`uniform` variable with the output of another node. 
+`uniform` variable with the output of another node.
 
-Each fillable part of the AST is called a __hole__. Holes are found by executing
+Each fillable part of the AST is called a **hole**. Holes are found by executing
 user defined _strategies_ against an AST. With a program such as:
 
 ```glsl

package/engine.d.ts

@@ -47,6 +47,7 @@ export type EngineImporter = {
     edgeMap: {
         [oldInput: string]: string;
     };
+    code?: Record<string, string>;
 };
 export type EngineImporters = {
     [engine: string]: EngineImporter;

package/graph/code-nodes.d.ts

@@ -26,17 +26,23 @@ export interface NodeProperty {
 export declare const property: (displayName: string, property: string, type: GraphDataType, fillerName?: string, defaultValue?: any) => NodeProperty;
 export declare enum SourceType {
     SHADER_PROGRAM = "Shader Program",
-    EXPRESSION = "Expression",
-    FN_BODY_FRAGMENT = "Function Body Fragment"
+    FN_BODY_FRAGMENT = "Function Body Fragment",
+    EXPRESSION = "Expression"
 }
+export type Backfillers = Record<string, {
+    argType: string;
+    targetVariable: string;
+}[]>;
 export interface CodeNode extends BaseNode {
     config: NodeConfig;
+    type: string;
     engine: boolean;
     source: string;
     sourceType?: SourceType;
     stage?: ShaderStage;
     biStage?: boolean;
     originalEngine?: string;
+    backfillers?: Backfillers;
 }
 export interface BinaryNode extends CodeNode {
     operator: string;

package/graph/code-nodes.js

@@ -13,6 +13,10 @@ export var property = function (displayName, property, type, fillerName, default
 export var SourceType;
 (function (SourceType) {
     SourceType["SHADER_PROGRAM"] = "Shader Program";
-    SourceType["EXPRESSION"] = "Expression";
+    // Function body fragments are parsed, and parsed differently than shader
+    // programs. This confuses me all the time. TODO: Remove fn_body_framgent
+    // and just try/catch parsing a program, then try fn body fragment?
     SourceType["FN_BODY_FRAGMENT"] = "Function Body Fragment";
+    // Expressions are inlined as is
+    SourceType["EXPRESSION"] = "Expression";
 })(SourceType || (SourceType = {}));

package/graph/context.d.ts

@@ -1,9 +1,9 @@
 import { type GlslSyntaxError } from '@shaderfrog/glsl-parser';
-import { AstNode, Program } from '@shaderfrog/glsl-parser/ast';
+import { AstNode, FunctionNode, Program } from '@shaderfrog/glsl-parser/ast';
 import { Engine, EngineContext } from '../engine';
 import { NodeInput } from './base-node';
 import { Graph, GraphNode } from './graph-types';
-import { InputFillers } from './parsers';
+import { InputFillers } from '../strategy';
 /**
  * A node's context is the runtime / in-memory computed data associated with a
  * graph node. It includes the parsed AST representation of the node, as well as
@@ -17,6 +17,7 @@ export type NodeContext = {
     inputs?: NodeInput[];
     inputFillers: InputFillers;
     errors?: NodeErrors;
+    mainFn?: FunctionNode;
 };
 export type NodeErrors = {
     type: 'errors';

package/graph/context.js

@@ -73,8 +73,9 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 import groupBy from 'lodash.groupby';
 import { mapInputName, SourceType } from './code-nodes';
 import { NodeType } from './graph-types';
-import { collectConnectedNodes, filterGraphFromNode, findLinkedNode, findLinkedVertexNodes, isSourceNode, mangleEntireProgram, } from './graph';
+import { collectConnectedNodes, filterGraphFromNode, findLinkedNode, findLinkedVertexNodes, isSourceNode, mangleEntireProgram, shouldNodeHaveMainFn, } from './graph';
 import { coreParsers } from './parsers';
+import { findMain } from '../util/ast';
 var makeError = function (nodeId) {
     var errors = [];
     for (var _i = 1; _i < arguments.length; _i++) {
@@ -97,7 +98,7 @@ var collapseNodeInputs = function (node, updatedInputs) {
     return Object.values(groupBy(__spreadArray(__spreadArray([], __read(updatedInputs), false), __read(node.inputs), false), function (i) { return i.id; })).map(function (dupes) { return dupes.reduce(function (node, dupe) { return (__assign(__assign({}, node), dupe)); }); });
 };
 var computeNodeContext = function (engineContext, engine, graph, node) { return __awaiter(void 0, void 0, void 0, function () {
-    var parser, sibling, onBeforeCompile, manipulateAst, inputEdges, ast, dataInputs, computedInputs, nodeContext;
+    var parser, sibling, onBeforeCompile, manipulateAst, inputEdges, mainFn, ast, dataInputs, computedInputs, nodeContext;
     return __generator(this, function (_a) {
         switch (_a.label) {
             case 0:
@@ -113,6 +114,10 @@ var computeNodeContext = function (engineContext, engine, graph, node) { return
                 inputEdges = graph.edges.filter(function (edge) { return edge.to === node.id; });
                 try {
                     ast = parser.produceAst(engineContext, engine, graph, node, inputEdges);
+                    // Find the main function before mangling
+                    if (shouldNodeHaveMainFn(node)) {
+                        mainFn = findMain(ast);
+                    }
                     if (manipulateAst) {
                         ast = manipulateAst(engineContext, engine, graph, ast, inputEdges, node, sibling);
                     }
@@ -134,13 +139,20 @@ var computeNodeContext = function (engineContext, engine, graph, node) { return
                 nodeContext = {
                     ast: ast,
                     id: node.id,
+                    mainFn: mainFn,
                     inputFillers: computedInputs.reduce(function (acc, _a) {
                         var _b;
-                        var _c = __read(_a, 3), input = _c[0], filler = _c[1], args = _c[2];
-                        return (__assign(__assign({}, acc), (_b = {}, _b[input.id] = {
+                        var _c = __read(_a, 4), input = _c[0], filler = _c[1], fillerArgs = _c[2], fillerStmt = _c[3];
+                        // This is intentionally broken out into an explicit return to force
+                        // this type declaration. Inlining the object in [input.id]: {...}
+                        // doesn't force it to be an InputFillerGroup, and it can contain extra
+                        // arguments by accident
+                        var fillerGroup = {
                             filler: filler,
-                            args: args,
-                        }, _b)));
+                            fillerArgs: fillerArgs,
+                            fillerStmt: fillerStmt,
+                        };
+                        return __assign(__assign({}, acc), (_b = {}, _b[input.id] = fillerGroup, _b));
                     }, {}),
                 };
                 // Skip mangling if the node tells us to, which probably means it's an engine
@@ -206,7 +218,7 @@ export var computeAllContexts = function (engineContext, engine, graph) { return
  * Used to only (re)-compute context for any actively used nodes
  */
 export var computeGraphContext = function (engineContext, engine, graph) { return __awaiter(void 0, void 0, void 0, function () {
-    var outputFrag, outputVert, vertexIds, fragmentIds, unlinkedNodes, vertNodesOrError, fragNodesOrError;
+    var outputFrag, outputVert, vertexes, fragments, vertexIds, unlinkedNodes, vertNodesOrError, fragNodesOrError;
     return __generator(this, function (_a) {
         switch (_a.label) {
             case 0:
@@ -218,12 +230,13 @@ export var computeGraphContext = function (engineContext, engine, graph) { retur
                 if (!outputVert) {
                     throw new Error('No vertex output in graph');
                 }
-                vertexIds = collectConnectedNodes(graph, outputVert);
-                fragmentIds = collectConnectedNodes(graph, outputFrag);
-                unlinkedNodes = findLinkedVertexNodes(graph, vertexIds);
+                vertexes = collectConnectedNodes(graph, outputVert);
+                fragments = collectConnectedNodes(graph, outputFrag);
+                vertexIds = new Set(Object.keys(vertexes));
+                unlinkedNodes = findLinkedVertexNodes(graph, vertexes);
                 return [4 /*yield*/, computeContextForNodes(engineContext, engine, graph, __spreadArray(__spreadArray([
                         outputVert
-                    ], __read(Object.values(vertexIds).filter(function (node) { return node.id !== outputVert.id; })), false), __read(unlinkedNodes), false))];
+                    ], __read(Object.values(vertexes).filter(function (node) { return node.id !== outputVert.id; })), false), __read(unlinkedNodes), false))];
             case 1:
                 vertNodesOrError = _a.sent();
                 if (isError(vertNodesOrError)) {
@@ -231,7 +244,7 @@ export var computeGraphContext = function (engineContext, engine, graph) { retur
                 }
                 return [4 /*yield*/, computeContextForNodes(engineContext, engine, graph, __spreadArray([
                         outputFrag
-                    ], __read(Object.values(fragmentIds).filter(function (node) { return node.id !== outputFrag.id; })), false))];
+                    ], __read(Object.values(fragments).filter(function (node) { return node.id !== outputFrag.id && !vertexIds.has(node.id); })), false))];
             case 2:
                 fragNodesOrError = _a.sent();
                 if (isError(fragNodesOrError)) {

package/graph/evaluate.js

@@ -1,6 +1,9 @@
 import { coreParsers } from './parsers';
 export var toGlsl = function (node) {
     var type = node.type, value = node.value;
+    if (type === 'number') {
+        return value;
+    }
     if (type === 'vector2') {
         return "vec2(".concat(value[0], ", ").concat(value[1], ")");
     }
@@ -10,6 +13,10 @@ export var toGlsl = function (node) {
     if (type === 'vector4' || type === 'rgba') {
         return "vec4(".concat(value[0], ", ").concat(value[1], ", ").concat(value[2], ", ").concat(value[3], ")");
     }
+    // Right now hard coding that an array is floats. Need type from node later.
+    if (type === 'array') {
+        return "float[".concat(value.length, "](").concat(value.join(', '), ")");
+    }
     throw new Error("Unknown GLSL inline type: \"".concat(node.type, "\""));
 };
 export var evaluateNode = function (engine, graph, node) {

package/graph/graph.d.ts

@@ -11,16 +11,22 @@ import { ProduceNodeFiller } from './parsers';
 import { Graph, GraphNode } from './graph-types';
 export declare const isDataNode: (node: GraphNode) => node is DataNode;
 export declare const isSourceNode: (node: GraphNode) => node is SourceNode;
+/**
+ * Determine if a node's source code / AST should have a main function. Essentially
+ * check if the source code is a full program or not.
+ */
+export declare const shouldNodeHaveMainFn: (node: GraphNode) => node is SourceNode;
 export declare const findNode: (graph: Graph, id: string) => GraphNode;
 export declare const doesLinkThruShader: (graph: Graph, node: GraphNode) => boolean;
 export declare const nodeName: (node: GraphNode) => string;
+export declare const resultName: (node: GraphNode) => string;
 export declare const mangleName: (name: string, node: GraphNode, nextSibling?: GraphNode) => string;
 export declare const mangleVar: (name: string, engine: Engine, node: GraphNode, sibling?: GraphNode) => string;
 export declare const mangleEntireProgram: (engine: Engine, ast: FrogProgram, node: GraphNode, sibling?: GraphNode) => void;
 export declare const mangleMainFn: (ast: Program, node: GraphNode, sibling?: GraphNode) => void;
-export declare const ensureFromNode: (graph: Graph, inputEdge: Edge) => import("./data-nodes").NumberNode | import("./data-nodes").TextureNode | import("./data-nodes").SamplerCubeNode | import("./data-nodes").ArrayNode | import("./data-nodes").Vector2Node | import("./data-nodes").Vector3Node | import("./data-nodes").Vector4Node | import("./data-nodes").RgbNode | import("./data-nodes").RgbaNode | CodeNode | import("./code-nodes").BinaryNode;
+export declare const ensureFromNode: (graph: Graph, inputEdge: Edge) => import("./data-nodes").NumberNode | import("./data-nodes").TextureNode | import("./data-nodes").SamplerCubeNode | import("./data-nodes").ArrayNode | import("./data-nodes").Vector2Node | import("./data-nodes").Vector3Node | import("./data-nodes").Vector4Node | import("./data-nodes").RgbNode | import("./data-nodes").RgbaNode | import("./code-nodes").BinaryNode | CodeNode;
 export declare const resetGraphIds: (graph: Graph) => Graph;
-export declare const findLinkedNode: (graph: Graph, id: string) => GraphNode | undefined;
+export declare const findLinkedNode: (graph: Graph, id: string) => SourceNode | undefined;
 /**
  * Find any unconnected vertex nodes linked to collected fragment nodes
  */

package/graph/graph.js

@@ -72,8 +72,8 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 import { renameBindings, renameFunctions, } from '@shaderfrog/glsl-parser/parser/utils';
 import { computeGraphContext, isError, } from './context';
-import { emptyShaderSections, findShaderSections, mergeShaderSections, shaderSectionsToProgram, } from './shader-sections';
-import { makeExpression } from '../util/ast';
+import { shaderSectionsCons, findShaderSections, mergeShaderSections, shaderSectionsToProgram, } from './shader-sections';
+import { backfillAst, makeExpression, } from '../util/ast';
 import { ensure } from '../util/ensure';
 import { SourceType } from './code-nodes';
 import { nodeInput } from './base-node';
@@ -96,6 +96,21 @@ export var isDataNode = function (node) {
 export var isSourceNode = function (node) {
     return !isDataNode(node);
 };
+/**
+ * Determine if a node's source code / AST should have a main function. Essentially
+ * check if the source code is a full program or not.
+ */
+export var shouldNodeHaveMainFn = function (node) {
+    // Some legacy shaders have an output node that does not have a sourceType,
+    // otherwise the sourceType second check would always work
+    return node.type === NodeType.OUTPUT ||
+        // Same for code nodes :(
+        (isSourceNode(node) && !node.sourceType) ||
+        node.sourceType === SourceType.SHADER_PROGRAM ||
+        // Engine nodes can have rando types like "physical", so if they are engine
+        // nodes, assume they have a main fn.
+        node.engine;
+};
 export var findNode = function (graph, id) {
     return ensure(graph.nodes.find(function (node) { return node.id === id; }));
 };
@@ -120,6 +135,7 @@ export var doesLinkThruShader = function (graph, node) {
 export var nodeName = function (node) {
     return 'main_' + node.name.replace(/[^a-zA-Z0-9]/g, ' ').replace(/ +/g, '_');
 };
+export var resultName = function (node) { return nodeName(node) + '_out'; };
 export var mangleName = function (name, node, nextSibling) {
     // Mangle a name to its next stage node, so the vertex suffix becomes the
     // fragment id, but not the other way around.
@@ -160,6 +176,7 @@ export var resetGraphIds = function (graph) {
 export var findLinkedNode = function (graph, id) {
     var edgeLink = graph.edges.find(function (e) { return e.type === EdgeLink.NEXT_STAGE && (e.from === id || e.to === id); });
     var otherId = (edgeLink === null || edgeLink === void 0 ? void 0 : edgeLink.from) === id ? edgeLink === null || edgeLink === void 0 ? void 0 : edgeLink.to : edgeLink === null || edgeLink === void 0 ? void 0 : edgeLink.from;
+    // Only source nodes can be linked, so cast it
     return graph.nodes.find(function (node) { return node.id === otherId; });
 };
 /**
@@ -264,10 +281,11 @@ export var isDataInput = function (input) {
     return (input.type === 'uniform' || input.type === 'property') && !input.baked;
 };
 export var compileNode = function (engine, graph, edges, engineContext, node, activeIds) {
-    var _a, _b;
+    var _a;
     if (activeIds === void 0) { activeIds = {}; }
     // THIS DUPLICATES OTHER LINE
     var parser = __assign(__assign({}, (coreParsers[node.type] || coreParsers[NodeType.SOURCE])), (engine.parsers[node.type] || {}));
+    var codeNode = node;
     var inputs = node.inputs;
     if (!parser) {
         console.error(node);
@@ -276,135 +294,97 @@ export var compileNode = function (engine, graph, edges, engineContext, node, ac
     var nodeContext = isDataNode(node)
         ? null
         : ensure(engineContext.nodes[node.id], "No node context found for \"".concat(node.name, "\" (id ").concat(node.id, ")!"));
-    var _c = (nodeContext || {}), ast = _c.ast, inputFillers = _c.inputFillers;
+    var _b = (nodeContext || {}), ast = _b.ast, inputFillers = _b.inputFillers;
     if (!inputs) {
         throw new Error("I'm drunk and I think this case should be impossible");
     }
     var compiledIds = activeIds;
     var inputEdges = edges.filter(function (edge) { return edge.to === node.id; });
-    if (inputEdges.length) {
-        var continuation_1 = emptyShaderSections();
-        inputEdges
-            .filter(function (edge) { return edge.type !== EdgeLink.NEXT_STAGE; })
-            .map(function (edge) { return ({
-            edge: edge,
-            fromNode: ensure(graph.nodes.find(function (node) { return edge.from === node.id; }), "GraphNode for edge ".concat(edge.from, " not found")),
-            input: ensure(inputs.find(function (_a) {
-                var id = _a.id;
-                return id == edge.input;
-            }), "GraphNode \"".concat(node.name, "\"").concat(node.stage ? " (".concat(node.stage, ")") : '', " has no input ").concat(edge.input, "!\nAvailable:").concat(inputs
-                .map(function (_a) {
-                var id = _a.id;
-                return id;
-            })
-                .join(', '))),
-        }); })
-            .filter(function (_a) {
-            var input = _a.input;
-            return !isDataInput(input);
+    var continuation = shaderSectionsCons();
+    // Compile children recursively
+    inputEdges
+        .filter(function (edge) { return edge.type !== EdgeLink.NEXT_STAGE; })
+        .map(function (edge) { return ({
+        edge: edge,
+        fromNode: ensure(graph.nodes.find(function (node) { return edge.from === node.id; }), "GraphNode for edge ".concat(edge.from, " not found")),
+        input: ensure(inputs.find(function (_a) {
+            var id = _a.id;
+            return id == edge.input;
+        }), "GraphNode \"".concat(node.name, "\"").concat(node.stage ? " (".concat(node.stage, ")") : '', " has no input ").concat(edge.input, "!\nAvailable:").concat(inputs
+            .map(function (_a) {
+            var id = _a.id;
+            return id;
         })
-            .forEach(function (_a) {
-            var _b;
-            var fromNode = _a.fromNode, edge = _a.edge, input = _a.input;
-            var _c = __read(compileNode(engine, graph, edges, engineContext, fromNode, activeIds), 3), inputSections = _c[0], fillerAst = _c[1], childIds = _c[2];
-            if (!fillerAst) {
-                throw new TypeError("Expected a filler ast from node ID ".concat(fromNode.id, " (").concat(fromNode.type, ") but none was returned"));
-            }
-            continuation_1 = mergeShaderSections(continuation_1, inputSections);
-            compiledIds = __assign(__assign({}, compiledIds), childIds);
-            var filler;
-            var fillerName;
-            if (nodeContext) {
-                if (input.property) {
-                    fillerName = ensure((_b = (node.config.properties || []).find(function (p) { return p.property === input.property; })) === null || _b === void 0 ? void 0 : _b.fillerName, "Node \"".concat(node.name, "\" has no property named \"").concat(input.property, "\" to find the filler for"));
-                    filler = inputFillers[fillerName];
-                }
-                else {
-                    filler = inputFillers[input.id];
-                }
-                if (!filler) {
-                    console.error('No filler for property', {
-                        input: input,
-                        node: node,
-                        inputFillers: inputFillers,
-                        fillerName: fillerName,
-                    });
-                    throw new Error("Node \"".concat(node.name, "\"").concat(node.stage
-                        ? " (".concat(node.stage, ")")
-                        : '', " has no filler for input \"").concat(input.displayName, "\" named ").concat(fillerName));
-                }
-                /**
-                 *      +------+    +------+
-                 * a -- o add  o -- o tex  |
-                 * b -- o      |    +------+
-                 *      +------+
-                 *
-                 * This could produce:
-                 *     main_a(v1) + main_b(v2)
-                 * I guess it has to? or it could produce
-                 *     function add(v1) { return main_a(v1) + main_b(v2); }
-                 * It can't replace the arg _expression_ in the from shaders, because
-                 * the expression isn't available there.
-                 */
-                // TODO: This is a hard coded hack for vUv backfilling. It works in
-                // the simple case. Doesn't work for hell (based on world position).
-                if (filler.backfillArgs &&
-                    !Array.isArray(fillerAst) &&
-                    fillerAst.type === 'function_call') {
-                    // Object.values(filterGraphFromNode(graph, node, {
-                    //   node: (n) => n.type === 'source'
-                    // }).nodes).forEach(sourceNode => {
-                    if (fromNode.type === 'source') {
-                        // @ts-ignore
-                        fillerAst.args = filler.backfillArgs;
-                        // const fc = engineContext.nodes[sourceNode.id];
-                        var fc = engineContext.nodes[fromNode.id];
-                        var main = Object.values(fc.ast.scopes[0].functions.main)[0].declaration;
-                        main.prototype.parameters = [
-                            'vec2 vv',
-                        ];
-                        // @ts-ignore
-                        var scope = fc.ast.scopes[0];
-                        // renameBindings(scope, (name, node) => {
-                        //   return node.type !== 'declaration' && name === 'vUv'
-                        //     ? 'vv'
-                        //     : name;
-                        // });
-                    }
-                    // })
-                }
-                // Fill in the input! The return value is the new AST of the filled in
-                // fromNode.
-                nodeContext.ast = filler.filler(fillerAst);
+            .join(', '))),
+    }); })
+        .filter(function (_a) {
+        var input = _a.input;
+        return !isDataInput(input);
+    })
+        .forEach(function (_a) {
+        var _b, _c;
+        var fromNode = _a.fromNode, input = _a.input;
+        // const [inputSections, fillerFn, childIds, childDeps] = compileNode(
+        var _d = __read(compileNode(engine, graph, edges, engineContext, fromNode, activeIds), 3), inputSections = _d[0], fillerFn = _d[1], childIds = _d[2];
+        if (!fillerFn) {
+            throw new TypeError("Expected a filler ast from node ID ".concat(fromNode.id, " (").concat(fromNode.type, ") but none was returned"));
+        }
+        continuation = mergeShaderSections(continuation, inputSections);
+        compiledIds = __assign(__assign({}, compiledIds), childIds);
+        // Continue on if there's no context I don't know what case causes this
+        if (!nodeContext) {
+            return;
+        }
+        // Produce the input filler
+        var filler;
+        var fillerName;
+        if (input.property) {
+            fillerName = ensure((_b = (codeNode.config.properties || []).find(function (p) { return p.property === input.property; })) === null || _b === void 0 ? void 0 : _b.fillerName, "Node \"".concat(node.name, "\" has no property named \"").concat(input.property, "\" to find the filler for"));
+            filler = inputFillers[fillerName];
+        }
+        else {
+            filler = inputFillers[input.id];
+        }
+        if (!filler) {
+            console.error('No filler for property', {
+                input: input,
+                node: node,
+                inputFillers: inputFillers,
+                fillerName: fillerName,
+            });
+            throw new Error("Node \"".concat(node.name, "\"").concat(node.stage ? " (".concat(node.stage, ")") : '', " has no filler for input \"").concat(input.displayName, "\" named ").concat(fillerName));
+        }
+        // Test if it needs to be backfilled - this only goes one level deep
+        // because we're only backfilling fromNode
+        var backfillers = (_c = codeNode.backfillers) === null || _c === void 0 ? void 0 : _c[input.id];
+        if (backfillers && shouldNodeHaveMainFn(fromNode)) {
+            var childAst_1 = engineContext.nodes[fromNode.id].ast;
+            // For now we can only backfill programs
+            if (childAst_1.type === 'program') {
+                backfillers.forEach(function (backfiller) {
+                    // This is where the variable name gets injected into the main
+                    // function parameter of the backfilled child
+                    backfillAst(childAst_1, backfiller.argType, backfiller.targetVariable, engineContext.nodes[fromNode.id].mainFn);
+                });
             }
-            // log(generate(ast.program));
-        });
-        // Order matters here! *Prepend* the input nodes to this one, because
-        // you have to declare functions in order of use in GLSL
-        var sections = mergeShaderSections(continuation_1, isDataNode(node) ||
-            node.sourceType === SourceType.EXPRESSION ||
-            node.sourceType === SourceType.FN_BODY_FRAGMENT
-            ? emptyShaderSections()
-            : findShaderSections(ast));
-        var filler = isDataNode(node)
-            ? makeExpression(toGlsl(node))
-            : parser.produceFiller(node, ast);
-        return [sections, filler, __assign(__assign({}, compiledIds), (_a = {}, _a[node.id] = node, _a))];
-    }
-    else {
-        // TODO: This duplicates the above branch, and also does this mean we
-        // recalculate the shader sections and filler for every edge? Can I move
-        // these lines above the loop?
-        var sections = isDataNode(node) ||
-            node.sourceType === SourceType.EXPRESSION ||
-            node.sourceType === SourceType.FN_BODY_FRAGMENT
-            ? emptyShaderSections()
-            : findShaderSections(ast);
-        var filler = isDataNode(node)
-            ? makeExpression(toGlsl(node))
-            : parser.produceFiller(node, ast);
-        return [sections, filler, __assign(__assign({}, compiledIds), (_b = {}, _b[node.id] = node, _b))];
-    }
+            nodeContext.ast = filler.filler(fillerFn);
+        }
+        else {
+            // Don't backfill by discarding the backfiller args
+            nodeContext.ast = filler.filler(function () { return fillerFn(); });
+        }
+    });
+    // Order matters here! *Prepend* the input nodes to this one, because
+    // you have to declare functions in order of use in GLSL
+    var sections = mergeShaderSections(continuation, isDataNode(node) ||
+        codeNode.sourceType === SourceType.EXPRESSION ||
+        codeNode.sourceType === SourceType.FN_BODY_FRAGMENT
+        ? shaderSectionsCons()
+        : findShaderSections(ast));
+    var filler = isDataNode(node)
+        ? function () { return makeExpression(toGlsl(node)); }
+        : parser.produceFiller(node, ast);
+    return [sections, filler, __assign(__assign({}, compiledIds), (_a = {}, _a[node.id] = node, _a))];
 };
 export var compileGraph = function (engineContext, engine, graph) {
     // computeGraphContext(engineContext, engine, graph);