@shaderfrog/core 0.0.2 → 0.1.1

package/dist/engine.js

@@ -0,0 +1,209 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import preprocess from '@shaderfrog/glsl-parser/preprocessor';
+import { generate, parser } from '@shaderfrog/glsl-parser';
+import { NodeType } from './graph-types';
+import groupBy from 'lodash.groupby';
+import { collectNodeProperties } from './graph';
+import { evaluateNode } from './evaluate';
+var log = function () {
+    var _a;
+    var args = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        args[_i] = arguments[_i];
+    }
+    return (_a = console.log).call.apply(_a, __spreadArray([console, '\x1b[32m(core)\x1b[0m'], __read(args), false));
+};
+export var EngineNodeType;
+(function (EngineNodeType) {
+    EngineNodeType["toon"] = "toon";
+    EngineNodeType["phong"] = "phong";
+    EngineNodeType["physical"] = "physical";
+    EngineNodeType["shader"] = "shader";
+    EngineNodeType["binary"] = "binary";
+})(EngineNodeType || (EngineNodeType = {}));
+// type EdgeUpdates = { [edgeId: string]: { oldInput: string; newInput: string } };
+export var convertNode = function (node, converter) {
+    log("Converting ".concat(node.name, " (").concat(node.id, ")"));
+    var preprocessed = preprocess(node.source, {
+        preserveComments: true,
+        preserve: {
+            version: function () { return true; },
+            define: function () { return true; },
+        },
+    });
+    var ast = parser.parse(preprocessed);
+    converter.convertAst(ast, node.stage);
+    var source = generate(ast);
+    return __assign(__assign({}, node), { source: source });
+};
+export var convertToEngine = function (oldEngine, newEngine, graph) {
+    var converter = newEngine.importers[oldEngine.name];
+    if (!converter) {
+        throw new Error("The engine ".concat(newEngine.name, " has no importer for ").concat(oldEngine.name));
+    }
+    log("Attempting to convert from ".concat(newEngine.name, " to ").concat(oldEngine.name));
+    // const edgeUpdates: EdgeUpdates = {};
+    var edgesByNodeId = groupBy(graph.edges, 'to');
+    var edgeUpdates = {};
+    var nodeUpdates = {};
+    graph.nodes.forEach(function (node) {
+        // Convert engine nodes
+        if (node.type in EngineNodeType) {
+            if (node.type in newEngine.constructors) {
+                var source = node;
+                nodeUpdates[source.id] = // @ts-ignore
+                    newEngine.constructors[source.type](source.id, source.name, source.groupId, source.position, source.config.uniforms, source.stage, source.nextStageNodeId);
+                // Bail if no conversion
+            }
+            else {
+                throw new Error("Can't convert ".concat(oldEngine.name, " to ").concat(newEngine.name, " because ").concat(newEngine.name, " does not have a \"").concat(node.type, "\" constructor"));
+            }
+        }
+        else if (NodeType.SOURCE === node.type) {
+            nodeUpdates[node.id] = convertNode(node, converter);
+        }
+        // Then update input edges. We only care about engine nodes
+        if (node.type in converter.nodeInputMap) {
+            var map_1 = converter.nodeInputMap[node.type];
+            (edgesByNodeId[node.id] || []).forEach(function (edge) {
+                if (edge.input in map_1) {
+                    var mapped = map_1[edge.input];
+                    log('Converting edge', edge.input, 'to', map_1[edge.input]);
+                    edgeUpdates[edge.id] = __assign(__assign({}, edge), { input: mapped });
+                }
+                else {
+                    log('Discarding', edge.input, 'as there is no edge mapping in the', newEngine.name, 'importer');
+                    edgeUpdates[edge.id] = null;
+                }
+            });
+        }
+    });
+    graph.edges = graph.edges.reduce(function (edges, edge) {
+        if (edge.id in edgeUpdates) {
+            var res = edgeUpdates[edge.id];
+            if (res === null) {
+                return edges;
+            }
+            else {
+                return __spreadArray(__spreadArray([], __read(edges), false), [res], false);
+            }
+        }
+        return __spreadArray(__spreadArray([], __read(edges), false), [edge], false);
+    }, []);
+    graph.nodes = graph.nodes.reduce(function (nodes, node) {
+        if (node.id in nodeUpdates) {
+            var res = nodeUpdates[node.id];
+            if (res === null) {
+                return nodes;
+            }
+            else {
+                return __spreadArray(__spreadArray([], __read(nodes), false), [res], false);
+            }
+        }
+        return __spreadArray(__spreadArray([], __read(nodes), false), [node], false);
+    }, []);
+    log('Created converted graph', graph);
+    return graph;
+};
+/**
+ * Create the initial engine node properties for a plugin to create its initial
+ * material with. This finds all engine nodes in the graph, finds all their
+ * properties, evalutes them, and returns an object with initial properties to
+ * set on the new plugin material, like a three.RawShaderMaterial().
+ *
+ * Currently only PlayCanvas uses this. It's at odds with the compileResult.dataInputs
+ * code path. That path uses isDataNode() to check for inputs, which excludes
+ * baked inputs. PlayCanvas requires (at least diffusesMap?) baked input properties
+ * to be set to a pc.Texture() at runtime, otherwise there's an error about
+ * vertex_texCoord0.
+ */
+export var collectInitialEvaluatedGraphProperties = function (engine, graph, defaultPropertySetting) {
+    var graphProperties = {};
+    // Get all the nodes with properties, meaning engine nodes, and the inputs
+    // for each property (property is like "diffuseMap").
+    var _a = collectNodeProperties(graph), nodes = _a.nodes, inputs = _a.inputs;
+    Object.entries(inputs).forEach(function (_a) {
+        var _b = __read(_a, 2), nodeId = _b[0], nodeInputs = _b[1];
+        // For every node with properties... There might be mulitple if there are
+        // uniforms plugged into both frag and vertex engine nodes, which
+        var node = nodes[nodeId];
+        nodeInputs.forEach(function (i) {
+            // Cast this to an input with a property specified on it, which the
+            // predicate search enforces
+            var input = i;
+            var edge = graph.edges.find(function (_a) {
+                var to = _a.to, i = _a.input;
+                return to === node.id && i === input.id;
+            });
+            // In the case where a node has been deleted from the graph,
+            // dataInputs won't have been udpated until a recompile completes
+            var fromNode = edge && graph.nodes.find(function (_a) {
+                var id = _a.id;
+                return id === edge.from;
+            });
+            if (fromNode) {
+                // If this is a baked input, we need to set the engine property to force
+                // whatever we're baking to generate.
+                if (input.baked) {
+                    // Find the corresponding property on the node and get the default
+                    // setting
+                    var property = (node.config.properties || []).find(function (p) { return p.property === input.property; });
+                    if (property) {
+                        graphProperties[input.property] = defaultPropertySetting(property);
+                    }
+                    else {
+                        console.error('Property not found on input node', node, input);
+                        throw new Error('Property not found on input node');
+                    }
+                    // Other inputs should(?) be data if not baked
+                }
+                else {
+                    try {
+                        graphProperties[input.property] = evaluateNode(engine, graph, fromNode);
+                    }
+                    catch (err) {
+                        console.error('Tried to evaluate a non-data node!', {
+                            err: err,
+                        });
+                    }
+                }
+            }
+        });
+    });
+    return graphProperties;
+};

package/dist/evaluate.js

@@ -0,0 +1,27 @@
+import { coreParsers } from './parsers';
+export var toGlsl = function (node) {
+    var type = node.type, value = node.value;
+    if (type === 'vector2') {
+        return "vec2(".concat(value[0], ", ").concat(value[1], ")");
+    }
+    if (type === 'vector3' || type === 'rgb') {
+        return "vec3(".concat(value[0], ", ").concat(value[1], ", ").concat(value[2], ")");
+    }
+    if (type === 'vector4' || type === 'rgba') {
+        return "vec4(".concat(value[0], ", ").concat(value[1], ", ").concat(value[2], ", ").concat(value[3], ")");
+    }
+    throw new Error("Unknown GLSL inline type: \"".concat(node.type, "\""));
+};
+export var evaluateNode = function (engine, graph, node) {
+    // TODO: Data nodes themselves should have evaluators
+    if ('value' in node) {
+        return engine.evaluateNode(node);
+    }
+    var evaluate = coreParsers[node.type].evaluate;
+    if (!evaluate) {
+        throw new Error("No evaluator for node ".concat(node.name, " (type: ").concat(node.type, ", id: ").concat(node.id, ")"));
+    }
+    var inputEdges = graph.edges.filter(function (edge) { return edge.to === node.id; });
+    var inputNodes = inputEdges.map(function (edge) { return graph.nodes.find(function (node) { return node.id === edge.from; }); });
+    return evaluate(node, inputEdges, inputNodes, evaluateNode.bind(null, engine, graph));
+};

package/dist/graph-types.js

@@ -0,0 +1,7 @@
+export var NodeType;
+(function (NodeType) {
+    NodeType["OUTPUT"] = "output";
+    NodeType["BINARY"] = "binary";
+    NodeType["SOURCE"] = "source";
+})(NodeType || (NodeType = {}));
+export var MAGIC_OUTPUT_STMTS = 'mainStmts';

package/dist/graph.js

@@ -0,0 +1,381 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { renameBindings, renameFunctions, } from '@shaderfrog/glsl-parser/parser/utils';
+import { emptyShaderSections, findShaderSections, mergeShaderSections, } from './ast/shader-sections';
+import { makeExpression } from './ast/manipulate';
+import { ensure } from './util/ensure';
+import { SourceType } from './nodes/code-nodes';
+import { nodeInput } from './nodes/core-node';
+import { makeId } from './util/id';
+import { coreParsers } from './parsers';
+import { toGlsl } from './evaluate';
+import { MAGIC_OUTPUT_STMTS, NodeType } from './graph-types';
+var log = function () {
+    var _a;
+    var args = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        args[_i] = arguments[_i];
+    }
+    return (_a = console.log).call.apply(_a, __spreadArray([console, '\x1b[31m(core.graph)\x1b[0m'], __read(args), false));
+};
+export var isDataNode = function (node) {
+    return 'value' in node;
+};
+export var isSourceNode = function (node) {
+    return !isDataNode(node);
+};
+export var findNode = function (graph, id) {
+    return ensure(graph.nodes.find(function (node) { return node.id === id; }));
+};
+export var doesLinkThruShader = function (graph, node) {
+    var edges = graph.edges.filter(function (edge) { return edge.from === node.id; });
+    if (edges.length === 0) {
+        return false;
+    }
+    return edges.reduce(function (foundShader, edge) {
+        var upstreamNode = ensure(graph.nodes.find(function (node) { return node.id === edge.to; }));
+        return (foundShader ||
+            // TODO: LARD this probably will introduce some insidius hard to track
+            // down bug, as I try to pull toon and phong up out of core, I need to
+            // know if a graph links through a "shader" which now means somehting
+            // different... does a config object need isShader? Can we compute it from
+            // inputs/ outputs/source?
+            (upstreamNode.sourceType !== SourceType.EXPRESSION &&
+                upstreamNode.type !== NodeType.OUTPUT) ||
+            doesLinkThruShader(graph, upstreamNode));
+    }, false);
+};
+export var nodeName = function (node) {
+    return 'main_' + node.name.replace(/[^a-zA-Z0-9]/g, ' ').replace(/ +/g, '_');
+};
+export var mangleName = function (name, node) {
+    // Mangle names by using the next stage id, if present
+    var id = ('nextStageNodeId' in node && node.nextStageNodeId) || node.id;
+    return "".concat(name, "_").concat(id);
+};
+export var mangleVar = function (name, engine, node) {
+    return engine.preserve.has(name) ? name : mangleName(name, node);
+};
+export var mangleEntireProgram = function (ast, node, engine) {
+    renameBindings(ast.scopes[0], function (name, n) {
+        return n.doNotDescope ? name : mangleVar(name, engine, node);
+    });
+    mangleMainFn(ast, node);
+};
+export var mangleMainFn = function (ast, node) {
+    renameFunctions(ast.scopes[0], function (name) {
+        return name === 'main' ? nodeName(node) : mangleName(name, node);
+    });
+};
+/**
+ * Create the inputs on a node from the properties. This used to be done at
+ * context time. Doing it at node creation time lets us auto-bake edges into
+ * the node at initial graph creation time.
+ */
+export var prepopulatePropertyInputs = function (node) { return (__assign(__assign({}, node), { inputs: __spreadArray(__spreadArray([], __read(node.inputs), false), __read((node.config.properties || []).map(function (property) {
+        return nodeInput(property.displayName, "property_".concat(property.property), 'property', property.type, new Set(['data']), !!property.fillerName, // bakeable
+        property.property);
+    })), false) })); };
+/**
+ * Recursively filter the graph, starting from a specific node, looking for
+ * nodes and edges that match predicates. This function returns the inputs for
+ * matched edges, not the edges themselves, as a convenience for the only
+ * consumer of this function, which is finding input names to use as uniforms.
+ *
+ * Inputs can only be filtered if the graph context has been computed, since
+ * inputs aren't created until then.
+ */
+export var filterGraphFromNode = function (graph, node, predicates, depth) {
+    var _a;
+    if (depth === void 0) { depth = Infinity; }
+    var inputs = node.inputs;
+    var inputEdges = graph.edges.filter(function (edge) { return edge.to === node.id; });
+    var nodeAcc = __assign({}, (predicates.node && predicates.node(node, inputEdges)
+        ? (_a = {}, _a[node.id] = node, _a) : {}));
+    return inputEdges.reduce(function (acc, inputEdge) {
+        var _a;
+        var input = inputs.find(function (i) { return i.id === inputEdge.input; });
+        var fromNode = inputEdge
+            ? ensure(graph.nodes.find(function (_a) {
+                var id = _a.id;
+                return id === inputEdge.from;
+            }))
+            : undefined;
+        var inputAcc = __assign(__assign({}, acc.inputs), (input &&
+            predicates.input &&
+            predicates.input(input, node, inputEdge, fromNode)
+            ? (_a = {}, _a[node.id] = __spreadArray(__spreadArray([], __read((acc.inputs[node.id] || [])), false), [input], false), _a) : {}));
+        if (inputEdge && fromNode && depth > 1) {
+            var result = filterGraphFromNode(graph, fromNode, predicates, depth - 1);
+            return {
+                nodes: __assign(__assign({}, acc.nodes), result.nodes),
+                inputs: __assign(__assign(__assign({}, acc.inputs), inputAcc), result.inputs),
+            };
+        }
+        return __assign(__assign({}, acc), { inputs: __assign(__assign({}, acc.inputs), inputAcc) });
+    }, { inputs: {}, nodes: nodeAcc });
+};
+export var collectConnectedNodes = function (graph, node) {
+    return filterGraphFromNode(graph, node, { node: function () { return true; } }).nodes;
+};
+export var filterGraphNodes = function (graph, nodes, filter, depth) {
+    if (depth === void 0) { depth = Infinity; }
+    return nodes.reduce(function (acc, node) {
+        var result = filterGraphFromNode(graph, node, filter, depth);
+        return {
+            nodes: __assign(__assign({}, acc.nodes), result.nodes),
+            inputs: __assign(__assign({}, acc.inputs), result.inputs),
+        };
+    }, {
+        nodes: {},
+        inputs: {},
+    });
+};
+// before data inputs were known by the input.category being node or data. I
+// tried updating inputs to have acepts: [code|data] and "baked" now is there a
+// way to know if we're plugging in code or data?
+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;
+    if (activeIds === void 0) { activeIds = {}; }
+    // THIS DUPLICATES OTHER LINE
+    var parser = __assign(__assign({}, (coreParsers[node.type] || coreParsers[NodeType.SOURCE])), (engine.parsers[node.type] || {}));
+    var inputs = node.inputs;
+    if (!parser) {
+        console.error(node);
+        throw new Error("No parser found for ".concat(node.name, " (").concat(node.type, ", id ").concat(node.id, ")"));
+    }
+    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;
+    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
+            .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, "\" 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);
+        })
+            .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, "\" 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, function (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);
+            }
+            // 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))];
+    }
+};
+export var compileGraph = function (engineContext, engine, graph) {
+    // computeGraphContext(engineContext, engine, graph);
+    var outputFrag = graph.nodes.find(function (node) { return node.type === 'output' && node.stage === 'fragment'; });
+    if (!outputFrag) {
+        throw new Error('No fragment output in graph');
+    }
+    var _a = __read(compileNode(engine, graph, graph.edges, engineContext, outputFrag), 3), fragment = _a[0], fragmentIds = _a[2];
+    var outputVert = graph.nodes.find(function (node) { return node.type === 'output' && node.stage === 'vertex'; });
+    if (!outputVert) {
+        throw new Error('No vertex output in graph');
+    }
+    var vertexIds = collectConnectedNodes(graph, outputVert);
+    // Some fragment shaders reference vertex shaders which may not have been
+    // given edges in the graph. Build invisible edges from these vertex nodes to
+    // the hidden "mainStmts" input on the output node, which inlines the function
+    // calls to those vertex main() statements and includes them in the output
+    var orphanNodes = graph.nodes.filter(function (node) {
+        return isSourceNode(node) &&
+            node.stage === 'vertex' &&
+            node.nextStageNodeId &&
+            fragmentIds[node.nextStageNodeId] &&
+            !vertexIds[node.id];
+    });
+    var orphanEdges = orphanNodes.map(function (node) { return ({
+        id: makeId(),
+        from: node.id,
+        to: outputVert.id,
+        output: 'main',
+        input: "filler_".concat(MAGIC_OUTPUT_STMTS),
+        stage: 'vertex',
+        category: 'code',
+    }); });
+    var _b = __read(compileNode(engine, graph, __spreadArray(__spreadArray([], __read(graph.edges), false), __read(orphanEdges), false), engineContext, outputVert), 2), vertex = _b[0];
+    // Every compileNode returns the AST so far, as well as the filler for the
+    // next node with inputs. On the final step, we discard the filler
+    return {
+        fragment: fragment,
+        vertex: vertex,
+        outputFrag: outputFrag,
+        outputVert: outputVert,
+        orphanNodes: orphanNodes,
+        activeNodeIds: new Set(__spreadArray(__spreadArray(__spreadArray([], __read(Object.keys(vertexIds)), false), __read(Object.keys(fragmentIds)), false), __read(orphanNodes.map(function (node) { return node.id; })), false)),
+    };
+};
+/**
+ * Find engine nodes to set properties on, like find a Physical node so
+ * consumers can set physicalNode.myProperty = 123.
+ *
+ * Finds all active nodes in the graph that have inputs that are properties,
+ * which currently means it will find all active engine nodes.
+ */
+export var collectNodeProperties = function (graph) {
+    var nodesWithProperties = {
+        node: function (node) {
+            var _a;
+            return 'config' in node &&
+                'properties' in node.config &&
+                !!((_a = node.config.properties) === null || _a === void 0 ? void 0 : _a.length);
+        },
+        input: function (input) { return !!input.property; },
+    };
+    var outputFrag = graph.nodes.find(function (node) { return node.type === 'output' && node.stage === 'fragment'; });
+    var outputVert = graph.nodes.find(function (node) { return node.type === 'output' && node.stage === 'vertex'; });
+    var fragProperties = filterGraphFromNode(graph, outputFrag, nodesWithProperties);
+    var vertProperties = filterGraphFromNode(graph, outputVert, nodesWithProperties);
+    return {
+        nodes: __assign(__assign({}, fragProperties.nodes), vertProperties.nodes),
+        inputs: __assign(__assign({}, fragProperties.inputs), vertProperties.inputs),
+    };
+};