@shaderfrog/core 1.2.0 → 1.3.0

package/esm/graph/data-nodes.d.ts

@@ -0,0 +1,83 @@
+import { BaseNode, NodeInput, NodeOutput, NodePosition } from './base-node';
+type ArrayType = 'array';
+type Vector = 'vector2' | 'vector3' | 'vector4';
+type Color = 'rgb' | 'rgba';
+type Mat = 'mat2' | 'mat3' | 'mat4' | 'mat2x2' | 'mat2x3' | 'mat2x4' | 'mat3x2' | 'mat3x3' | 'mat3x4' | 'mat4x2' | 'mat4x3' | 'mat4x4';
+export type GraphDataType = Vector | Color | Mat | 'texture' | 'samplerCube' | 'number' | ArrayType;
+export interface NumberNode extends BaseNode {
+    type: 'number';
+    value: string;
+    range?: [number, number];
+    stepper?: number;
+}
+export declare const numberNode: (id: string, name: string, position: NodePosition, value: string, optionals?: {
+    range?: [number, number];
+    stepper?: number;
+    inputs?: NodeInput[];
+    outputs?: NodeOutput[];
+}) => NumberNode;
+export type NumberDataUniform = Pick<NumberNode, 'type' | 'value' | 'name' | 'range' | 'stepper'>;
+export declare const numberUniformData: (name: string, value: string, range?: [number, number], stepper?: number) => NumberDataUniform;
+export interface TextureNode extends BaseNode {
+    type: 'texture';
+    value: string | number;
+}
+export declare const textureNode: (id: string, name: string, position: NodePosition, value: string | number) => TextureNode;
+export type TextureDataUniform = Pick<TextureNode, 'type' | 'value' | 'name'>;
+export declare const textureUniformData: (name: string, value: string | number) => TextureDataUniform;
+export interface SamplerCubeNode extends BaseNode {
+    type: 'samplerCube';
+    value: string;
+}
+export declare const samplerCubeNode: (id: string, name: string, position: NodePosition, value: string) => SamplerCubeNode;
+export type SamplerCubeDataUniform = Pick<SamplerCubeNode, 'type' | 'value' | 'name'>;
+export declare const samplerCubeUniformData: (name: string, value: string) => SamplerCubeDataUniform;
+export type ArrayValue = string[];
+export interface ArrayNode extends BaseNode {
+    type: 'array';
+    dimensions: number;
+    value: ArrayValue;
+}
+export declare function arrayNode(id: string, name: string, position: NodePosition, value: ArrayValue): ArrayNode;
+export type Vector2 = [string, string];
+export type Vector3 = [string, string, string];
+export type Vector4 = [string, string, string, string];
+export interface Vector2Node extends BaseNode {
+    type: 'vector2';
+    dimensions: 2;
+    value: Vector2;
+}
+export interface Vector3Node extends BaseNode {
+    type: 'vector3';
+    dimensions: 3;
+    value: Vector3;
+}
+export interface Vector4Node extends BaseNode {
+    type: 'vector4';
+    dimensions: 4;
+    value: Vector4;
+}
+export declare function vectorNode(id: string, name: string, position: NodePosition, value: Vector2 | Vector3 | Vector4): Vector2Node | Vector3Node | Vector4Node;
+export type ArrayDataUniform = Pick<ArrayNode, 'type' | 'value' | 'name' | 'dimensions'>;
+export declare const arrayUniformData: (name: string, value: ArrayValue) => ArrayDataUniform;
+export type Vector2DataUniform = Pick<Vector2Node, 'type' | 'value' | 'name' | 'dimensions'>;
+export type Vector3DataUniform = Pick<Vector3Node, 'type' | 'value' | 'name' | 'dimensions'>;
+export type Vector4DataUniform = Pick<Vector4Node, 'type' | 'value' | 'name' | 'dimensions'>;
+export declare const vectorUniformData: (name: string, value: Vector2 | Vector3 | Vector4) => Vector2DataUniform | Vector3DataUniform | Vector4DataUniform;
+export interface RgbNode extends BaseNode {
+    type: 'rgb';
+    dimensions: 3;
+    value: Vector3;
+}
+export interface RgbaNode extends BaseNode {
+    type: 'rgba';
+    dimensions: 4;
+    value: Vector4;
+}
+export declare function colorNode(id: string, name: string, position: NodePosition, value: Vector3 | Vector4): RgbNode | RgbaNode;
+export type RgbDataUniform = Omit<RgbNode, 'id' | 'inputs' | 'outputs' | 'position' | 'parentId'>;
+export type RgbaDataUniform = Omit<RgbaNode, 'id' | 'inputs' | 'outputs' | 'position' | 'parentId'>;
+export declare const colorUniformData: (name: string, value: Vector3 | Vector4) => RgbDataUniform | RgbaDataUniform;
+export type UniformDataType = TextureDataUniform | SamplerCubeDataUniform | NumberDataUniform | Vector2DataUniform | Vector3DataUniform | Vector4DataUniform | RgbDataUniform | RgbaDataUniform;
+export type DataNode = TextureNode | SamplerCubeNode | NumberNode | Vector2Node | Vector3Node | Vector4Node | ArrayNode | RgbNode | RgbaNode;
+export {};

package/esm/graph/data-nodes.js

@@ -0,0 +1,131 @@
+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);
+};
+export var numberNode = function (id, name, position, value, optionals) { return ({
+    type: 'number',
+    id: id,
+    name: name,
+    position: position,
+    value: value,
+    inputs: (optionals === null || optionals === void 0 ? void 0 : optionals.inputs) || [],
+    outputs: (optionals === null || optionals === void 0 ? void 0 : optionals.outputs) || [
+        {
+            name: 'float',
+            id: '1',
+            dataType: 'number',
+            category: 'data',
+        },
+    ],
+    range: optionals === null || optionals === void 0 ? void 0 : optionals.range,
+    stepper: optionals === null || optionals === void 0 ? void 0 : optionals.stepper,
+}); };
+export var numberUniformData = function (name, value, range, stepper) { return ({
+    type: 'number',
+    name: name,
+    value: value,
+    range: range,
+    stepper: stepper,
+}); };
+export var textureNode = function (id, name, position, value) { return ({
+    type: 'texture',
+    id: id,
+    name: name,
+    position: position,
+    value: value,
+    inputs: [],
+    outputs: [
+        {
+            name: 'texture',
+            id: '1',
+            dataType: 'vector4',
+            category: 'data',
+        },
+    ],
+}); };
+export var textureUniformData = function (name, value) { return ({ type: 'texture', name: name, value: value }); };
+export var samplerCubeNode = function (id, name, position, value) { return ({
+    type: 'samplerCube',
+    id: id,
+    name: name,
+    position: position,
+    value: value,
+    inputs: [],
+    outputs: [
+        {
+            name: 'samplerCube',
+            id: '1',
+            dataType: 'vector4',
+            category: 'data',
+        },
+    ],
+}); };
+export var samplerCubeUniformData = function (name, value) { return ({ type: 'samplerCube', name: name, value: value }); };
+export function arrayNode(id, name, position, value) {
+    return {
+        id: id,
+        name: name,
+        position: position,
+        inputs: [],
+        outputs: [
+            {
+                name: 'array',
+                id: '1',
+                dataType: 'array',
+                category: 'data',
+            },
+        ],
+        value: value,
+        dimensions: value.length,
+        type: 'array',
+    };
+}
+export function vectorNode(id, name, position, value) {
+    var dataType = value.length === 2 ? 'vector2' : value.length === 3 ? 'vector3' : 'vector4';
+    return __assign({ id: id, name: name, position: position, inputs: [], outputs: [
+            {
+                name: "vector".concat(value.length),
+                id: '1',
+                category: 'data',
+                dataType: dataType,
+            },
+        ] }, (value.length === 2
+        ? { value: value, dimensions: 2, type: 'vector2' }
+        : value.length === 3
+            ? { value: value, dimensions: 3, type: 'vector3' }
+            : { value: value, dimensions: 4, type: 'vector4' }));
+}
+export var arrayUniformData = function (name, value) { return ({
+    name: name,
+    value: value,
+    dimensions: value.length,
+    type: 'array',
+}); };
+export var vectorUniformData = function (name, value) { return (__assign({ name: name }, (value.length === 2
+    ? { value: value, dimensions: 2, type: 'vector2' }
+    : value.length === 3
+        ? { value: value, dimensions: 3, type: 'vector3' }
+        : { value: value, dimensions: 4, type: 'vector4' }))); };
+export function colorNode(id, name, position, value) {
+    var dataType = value.length === 3 ? 'rgb' : 'rgba';
+    return __assign({ id: id, name: name, position: position, inputs: [], outputs: [
+            {
+                name: dataType,
+                id: '1',
+                dataType: dataType,
+                category: 'data',
+            },
+        ] }, (value.length === 3
+        ? { value: value, dimensions: 3, type: 'rgb' }
+        : { value: value, dimensions: 4, type: 'rgba' }));
+}
+export var colorUniformData = function (name, value) { return (__assign({ name: name }, (value.length === 3
+    ? { value: value, dimensions: 3, type: 'rgb' }
+    : { value: value, dimensions: 4, type: 'rgba' }))); };

package/esm/graph/edge.d.ts

@@ -0,0 +1,13 @@
+import { EdgeLink, ShaderStage } from './graph-types';
+import { GraphDataType } from './data-nodes';
+export type EdgeType = ShaderStage | GraphDataType | EdgeLink;
+export type Edge = {
+    id: string;
+    from: string;
+    to: string;
+    output: string;
+    input: string;
+    type?: EdgeType;
+};
+export declare const makeEdge: (id: string, from: string, to: string, output: string, input: string, type?: EdgeType) => Edge;
+export declare const linkFromVertToFrag: (id: string, vertId: string, fragId: string) => Edge;

package/esm/graph/edge.js

@@ -0,0 +1,7 @@
+import { EdgeLink, LinkHandle } from './graph-types';
+export var makeEdge = function (id, from, to, output, input, type) { return ({ id: id, from: from, to: to, output: output, input: input, type: type }); };
+export var linkFromVertToFrag = function (id, vertId, fragId) {
+    return makeEdge(id, vertId, fragId, LinkHandle.NEXT_STAGE, // output from next_stage
+    LinkHandle.PREVIOUS_STAGE, // input to previous_stage
+    EdgeLink.NEXT_STAGE);
+};

package/esm/graph/evaluate.d.ts

@@ -0,0 +1,9 @@
+import { Engine } from '../engine';
+import { Edge } from './edge';
+import { SourceNode } from './code-nodes';
+import { Graph, GraphNode } from './graph-types';
+import { DataNode } from './data-nodes';
+export type Evaluator = (node: GraphNode) => any;
+export type Evaluate = (node: SourceNode, inputEdges: Edge[], inputNodes: GraphNode[], evaluate: Evaluator) => any;
+export declare const toGlsl: (node: DataNode) => string;
+export declare const evaluateNode: (engine: Engine, graph: Graph, node: GraphNode) => any;

package/esm/graph/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/esm/graph/graph-node.d.ts

@@ -0,0 +1,8 @@
+import { ShaderStage } from './graph-types';
+import { BinaryNode, CodeNode, NodeConfig } from './code-nodes';
+import { NodePosition } from './base-node';
+export declare const sourceNode: (id: string, name: string, position: NodePosition, config: NodeConfig, source: string, stage: ShaderStage, originalEngine?: string) => CodeNode;
+export declare const outputNode: (id: string, name: string, position: NodePosition, stage: ShaderStage) => CodeNode;
+export declare const expressionNode: (id: string, name: string, position: NodePosition, source: string) => CodeNode;
+export declare const addNode: (id: string, position: NodePosition) => BinaryNode;
+export declare const multiplyNode: (id: string, position: NodePosition) => BinaryNode;

package/esm/graph/graph-node.js

@@ -0,0 +1,135 @@
+import { NodeType } from './graph-types';
+import { assignemntToStrategy, variableStrategy } from '../strategy';
+import { SourceType } from './code-nodes';
+export var sourceNode = function (id, name, position, config, source, stage, originalEngine) { return ({
+    id: id,
+    name: name,
+    type: NodeType.SOURCE,
+    sourceType: SourceType.SHADER_PROGRAM,
+    engine: false,
+    config: config,
+    position: position,
+    inputs: [],
+    outputs: [
+        {
+            name: 'vector4',
+            dataType: 'vector4',
+            category: 'data',
+            id: '1',
+        },
+    ],
+    source: source,
+    stage: stage,
+    originalEngine: originalEngine,
+}); };
+export var outputNode = function (id, name, position, stage) { return ({
+    id: id,
+    name: name,
+    position: position,
+    type: NodeType.OUTPUT,
+    sourceType: SourceType.SHADER_PROGRAM,
+    engine: false,
+    config: {
+        version: 3,
+        mangle: false,
+        preprocess: false,
+        uniforms: [],
+        inputMapping: stage === 'fragment'
+            ? {
+                filler_frogFragOut: 'Color',
+            }
+            : {
+                filler_gl_Position: 'Position',
+            },
+        strategies: [
+            assignemntToStrategy(stage === 'fragment' ? 'frogFragOut' : 'gl_Position'),
+        ],
+    },
+    inputs: [],
+    outputs: [],
+    // Consumed by findVec4Constructo4
+    source: stage === 'fragment'
+        ? "\n#version 300 es\nprecision highp float;\n\nout vec4 frogFragOut;\nvoid main() {\n  frogFragOut = vec4(1.0);\n}\n"
+        : // gl_Position isn't "out"-able apparently https://stackoverflow.com/a/24425436/743464
+            "\n#version 300 es\nprecision highp float;\n\nvoid main() {\n  gl_Position = vec4(1.0);\n}\n",
+    stage: stage,
+}); };
+export var expressionNode = function (id, name, position, source) { return ({
+    id: id,
+    name: name,
+    position: position,
+    type: NodeType.SOURCE,
+    engine: false,
+    sourceType: SourceType.EXPRESSION,
+    stage: undefined,
+    config: {
+        uniforms: [],
+        version: 3,
+        preprocess: false,
+        inputMapping: {},
+        strategies: [variableStrategy()],
+    },
+    inputs: [],
+    outputs: [
+        {
+            name: 'expression',
+            category: 'data',
+            id: '1',
+        },
+    ],
+    source: source,
+}); };
+export var addNode = function (id, position) { return ({
+    id: id,
+    name: 'add',
+    position: position,
+    type: NodeType.BINARY,
+    engine: false,
+    stage: undefined,
+    config: {
+        mangle: false,
+        version: 3,
+        preprocess: true,
+        strategies: [],
+        uniforms: [],
+    },
+    inputs: [],
+    outputs: [
+        {
+            name: 'sum',
+            category: 'data',
+            id: '1',
+        },
+    ],
+    source: "a + b",
+    operator: '+',
+    sourceType: SourceType.EXPRESSION,
+    biStage: true,
+}); };
+export var multiplyNode = function (id, position) { return ({
+    id: id,
+    name: 'multiply',
+    type: NodeType.BINARY,
+    engine: false,
+    stage: undefined,
+    position: position,
+    config: {
+        version: 3,
+        uniforms: [],
+        mangle: false,
+        preprocess: true,
+        strategies: [],
+    },
+    inputs: [],
+    outputs: [
+        {
+            name: 'product',
+            category: 'data',
+            id: '1',
+        },
+    ],
+    source: "a * b",
+    operator: '*',
+    sourceType: SourceType.EXPRESSION,
+    biStage: true,
+}); };

package/esm/graph/graph-types.d.ts

@@ -0,0 +1,38 @@
+import { DataNode } from './data-nodes';
+import { Edge } from './edge';
+import { SourceNode } from './code-nodes';
+/**
+ * Core graph types.
+ *
+ * Originally abstracted out of graph.ts to avoid a circular
+ * dependency between graph.ts and parsers.ts. Both files need these types at
+ * module initialization time, and without this third file, the types will be
+ * undefined in either graph/parsers.ts at init time. If the types were only
+ * used at runtime it would be fine, because the circular depenency is resolved
+ * by then.
+ */
+export type ShaderStage = 'fragment' | 'vertex';
+/**
+ * The type applied to the edge representing a link between node stages
+ */
+export declare enum EdgeLink {
+    NEXT_STAGE = "next_stage"
+}
+/**
+ * The handle types for links. These become <Handle /> ids
+ */
+export declare enum LinkHandle {
+    NEXT_STAGE = "next_stage",
+    PREVIOUS_STAGE = "previous_stage"
+}
+export declare enum NodeType {
+    OUTPUT = "output",
+    BINARY = "binary",
+    SOURCE = "source"
+}
+export type GraphNode = SourceNode | DataNode;
+export interface Graph {
+    nodes: GraphNode[];
+    edges: Edge[];
+}
+export declare const MAGIC_OUTPUT_STMTS = "mainStmts";

package/esm/graph/graph-types.js

@@ -0,0 +1,22 @@
+/**
+ * The type applied to the edge representing a link between node stages
+ */
+export var EdgeLink;
+(function (EdgeLink) {
+    EdgeLink["NEXT_STAGE"] = "next_stage";
+})(EdgeLink || (EdgeLink = {}));
+/**
+ * The handle types for links. These become <Handle /> ids
+ */
+export var LinkHandle;
+(function (LinkHandle) {
+    LinkHandle["NEXT_STAGE"] = "next_stage";
+    LinkHandle["PREVIOUS_STAGE"] = "previous_stage";
+})(LinkHandle || (LinkHandle = {}));
+export var NodeType;
+(function (NodeType) {
+    NodeType["OUTPUT"] = "output";
+    NodeType["BINARY"] = "binary";
+    NodeType["SOURCE"] = "source";
+})(NodeType || (NodeType = {}));
+export var MAGIC_OUTPUT_STMTS = 'mainStmts';

package/esm/graph/graph.d.ts

@@ -0,0 +1,89 @@
+import { Program } from '@shaderfrog/glsl-parser/ast';
+import { Engine, EngineContext } from '../engine';
+import { NodeErrors } from './context';
+import { ShaderSections } from './shader-sections';
+import { DataNode } from './data-nodes';
+import { Edge } from './edge';
+import { CodeNode, SourceNode } from './code-nodes';
+import { NodeInput } from './base-node';
+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;
+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 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: Program, node: GraphNode, sibling?: GraphNode) => void;
+export declare const mangleMainFn: (ast: Program, node: GraphNode, sibling?: GraphNode) => void;
+export declare const ensureFromNode: (graph: Graph, inputEdge: Edge) => GraphNode;
+export declare const resetGraphIds: (graph: Graph) => Graph;
+export declare const findLinkedNode: (graph: Graph, id: string) => GraphNode;
+/**
+ * Find any unconnected vertex nodes linked to collected fragment nodes
+ */
+export declare const findLinkedVertexNodes: (graph: Graph, existingIds?: NodeIds) => GraphNode[];
+export type Predicates = {
+    node?: (node: GraphNode, inputEdges: Edge[], lastResult: SearchResult) => boolean;
+    edge?: (input: NodeInput | undefined, node: GraphNode, inputEdge: Edge | undefined, fromNode: GraphNode | undefined, lastResult: SearchResult) => boolean;
+    input?: (input: NodeInput, node: GraphNode, inputEdge: Edge | undefined, fromNode: GraphNode | undefined, lastResult: SearchResult) => boolean;
+};
+export type SearchResult = {
+    nodes: Record<string, GraphNode>;
+    inputs: Record<string, NodeInput[]>;
+    edges: Edge[];
+};
+export declare const consSearchResult: () => SearchResult;
+export declare const mergeSearchResults: (a: SearchResult, b: SearchResult) => SearchResult;
+/**
+ * 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 declare const prepopulatePropertyInputs: (node: CodeNode) => CodeNode;
+/**
+ * Recursively filter the graph, starting from a specific node, looking for
+ * nodes and edges that match predicates.
+ *
+ * Inputs can only be filtered if the graph context has been computed, since
+ * inputs aren't created until then.
+ */
+export declare const filterGraphFromNode: (graph: Graph, node: GraphNode, predicates: Predicates, depth?: number, lastResult?: SearchResult) => SearchResult;
+export declare const collectConnectedNodes: (graph: Graph, node: GraphNode) => NodeIds;
+export declare const filterGraphNodes: (graph: Graph, nodes: GraphNode[], filter: Predicates, depth?: number) => SearchResult;
+type NodeIds = Record<string, GraphNode>;
+export type CompileNodeResult = [
+    compiledSections: ShaderSections,
+    filler: ReturnType<ProduceNodeFiller>,
+    compiledIds: NodeIds
+];
+export declare const isDataInput: (input: NodeInput) => boolean;
+export declare const compileNode: (engine: Engine, graph: Graph, edges: Edge[], engineContext: EngineContext, node: GraphNode, activeIds?: NodeIds) => CompileNodeResult;
+export type CompileGraphResult = {
+    fragment: ShaderSections;
+    vertex: ShaderSections;
+    outputFrag: GraphNode;
+    outputVert: GraphNode;
+    orphanNodes: GraphNode[];
+    activeNodeIds: Set<string>;
+};
+export declare const compileGraph: (engineContext: EngineContext, engine: Engine, graph: Graph) => CompileGraphResult;
+/**
+ * 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 declare const collectNodeProperties: (graph: Graph) => SearchResult;
+export type IndexedDataInputs = Record<string, NodeInput[]>;
+export type CompileResult = {
+    fragmentResult: string;
+    vertexResult: string;
+    compileResult: CompileGraphResult;
+    dataNodes: Record<string, GraphNode>;
+    dataInputs: IndexedDataInputs;
+};
+export declare const compileSource: (graph: Graph, engine: Engine, ctx: EngineContext) => Promise<CompileResult | NodeErrors>;
+export {};