@shaderfrog/core 0.1.0 → 1.0.0

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

@@ -0,0 +1,83 @@
+import { CoreNode, 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 CoreNode {
+    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 = Omit<NumberNode, 'id' | 'inputs' | 'outputs' | 'position'>;
+export declare const numberUniformData: (name: string, value: string, range?: [number, number], stepper?: number) => NumberDataUniform;
+export interface TextureNode extends CoreNode {
+    type: 'texture';
+    value: string;
+}
+export declare const textureNode: (id: string, name: string, position: NodePosition, value: string) => TextureNode;
+export type TextureDataUniform = Omit<TextureNode, 'id' | 'inputs' | 'outputs' | 'position'>;
+export declare const textureUniformData: (name: string, value: string) => TextureDataUniform;
+export interface SamplerCubeNode extends CoreNode {
+    type: 'samplerCube';
+    value: string;
+}
+export declare const samplerCubeNode: (id: string, name: string, position: NodePosition, value: string) => SamplerCubeNode;
+export type SamplerCubeDataUniform = Omit<SamplerCubeNode, 'id' | 'inputs' | 'outputs' | 'position'>;
+export declare const samplerCubeUniformData: (name: string, value: string) => SamplerCubeDataUniform;
+export type ArrayValue = string[];
+export interface ArrayNode extends CoreNode {
+    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 CoreNode {
+    type: 'vector2';
+    dimensions: 2;
+    value: Vector2;
+}
+export interface Vector3Node extends CoreNode {
+    type: 'vector3';
+    dimensions: 3;
+    value: Vector3;
+}
+export interface Vector4Node extends CoreNode {
+    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 = Omit<ArrayNode, 'id' | 'inputs' | 'outputs' | 'position'>;
+export declare const arrayUniformData: (name: string, value: ArrayValue) => ArrayDataUniform;
+export type Vector2DataUniform = Omit<Vector2Node, 'id' | 'inputs' | 'outputs' | 'position'>;
+export type Vector3DataUniform = Omit<Vector3Node, 'id' | 'inputs' | 'outputs' | 'position'>;
+export type Vector4DataUniform = Omit<Vector4Node, 'id' | 'inputs' | 'outputs' | 'position'>;
+export declare const vectorUniformData: (name: string, value: Vector2 | Vector3 | Vector4) => Vector2DataUniform | Vector3DataUniform | Vector4DataUniform;
+export interface RgbNode extends CoreNode {
+    type: 'rgb';
+    dimensions: 3;
+    value: Vector3;
+}
+export interface RgbaNode extends CoreNode {
+    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'>;
+export type RgbaDataUniform = Omit<RgbaNode, 'id' | 'inputs' | 'outputs' | 'position'>;
+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/dist/graph/data-nodes.js

@@ -0,0 +1,123 @@
+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',
+            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',
+            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',
+            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',
+                category: 'data',
+            },
+        ],
+        value: value,
+        dimensions: value.length,
+        type: 'array',
+    };
+}
+export function vectorNode(id, name, position, value) {
+    return __assign({ id: id, name: name, position: position, inputs: [], outputs: [
+            {
+                name: "vector".concat(value.length),
+                id: '1',
+                category: 'data',
+            },
+        ] }, (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) {
+    return __assign({ id: id, name: name, position: position, inputs: [], outputs: [
+            {
+                name: value.length === 3 ? 'rgb' : 'rgba',
+                id: '1',
+                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/dist/graph/edge.d.ts

@@ -0,0 +1,12 @@
+import { ShaderStage } from './graph-types';
+import { GraphDataType } from './data-nodes';
+export type EdgeType = ShaderStage | GraphDataType;
+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;

package/dist/graph/edge.js

@@ -0,0 +1 @@
+export var makeEdge = function (id, from, to, output, input, type) { return ({ id: id, from: from, to: to, output: output, input: input, type: type }); };

package/dist/graph/engine-node.d.ts

@@ -0,0 +1,15 @@
+import { ShaderStage } from './graph-types';
+import { BinaryNode, CodeNode, NodeConfig } from './code-nodes';
+import { NodePosition } from './base-node';
+/**
+ * TODO: These definitions should live outside of core since I'm trying to
+ * refactor out this core folder to only know about nodes with config config,
+ * where nodes like output/phong/physical are all configured at the
+ * implementation level. "phong" shouldn't be in the core
+ */
+export declare const sourceNode: (id: string, name: string, position: NodePosition, config: NodeConfig, source: string, stage: ShaderStage, originalEngine?: string, nextStageNodeId?: 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 phongNode: (id: string, name: string, groupId: string, position: NodePosition, stage: ShaderStage, nextStageNodeId?: string) => CodeNode;
+export declare const addNode: (id: string, position: NodePosition) => BinaryNode;
+export declare const multiplyNode: (id: string, position: NodePosition) => BinaryNode;

package/dist/graph/engine-node.js

@@ -0,0 +1,189 @@
+import { EngineNodeType } from '../engine';
+import { prepopulatePropertyInputs } from './graph';
+import { NodeType } from './graph-types';
+import { assignemntToStrategy, namedAttributeStrategy, texture2DStrategy, uniformStrategy, variableStrategy, } from '../strategy';
+import { SourceType, property, } from './code-nodes';
+/**
+ * TODO: These definitions should live outside of core since I'm trying to
+ * refactor out this core folder to only know about nodes with config config,
+ * where nodes like output/phong/physical are all configured at the
+ * implementation level. "phong" shouldn't be in the core
+ */
+export var sourceNode = function (id, name, position, config, source, stage, originalEngine, nextStageNodeId) { return ({
+    id: id,
+    name: name,
+    groupId: undefined,
+    type: NodeType.SOURCE,
+    config: config,
+    position: position,
+    inputs: [],
+    outputs: [
+        {
+            name: 'vector4',
+            category: 'data',
+            id: '1',
+        },
+    ],
+    source: source,
+    stage: stage,
+    originalEngine: originalEngine,
+    nextStageNodeId: nextStageNodeId,
+}); };
+export var outputNode = function (id, name, position, stage) { return ({
+    id: id,
+    name: name,
+    position: position,
+    groupId: undefined,
+    type: NodeType.OUTPUT,
+    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,
+    sourceType: SourceType.EXPRESSION,
+    groupId: undefined,
+    stage: undefined,
+    config: {
+        uniforms: [],
+        version: 3,
+        preprocess: false,
+        inputMapping: {},
+        strategies: [variableStrategy()],
+    },
+    inputs: [],
+    outputs: [
+        {
+            name: 'expression',
+            category: 'data',
+            id: '1',
+        },
+    ],
+    source: source,
+}); };
+export var phongNode = function (id, name, groupId, position, stage, nextStageNodeId) {
+    return prepopulatePropertyInputs({
+        id: id,
+        name: name,
+        groupId: groupId,
+        position: position,
+        type: EngineNodeType.phong,
+        config: {
+            version: 3,
+            uniforms: [],
+            preprocess: true,
+            mangle: false,
+            properties: [
+                property('Color', 'color', 'rgb', 'uniform_diffuse'),
+                property('Emissive', 'emissive', 'rgb', 'uniform_emissive'),
+                property('Emissive Map', 'emissiveMap', 'texture', 'filler_emissiveMap'),
+                property('Emissive Intensity', 'emissiveIntensity', 'number', 'uniform_emissive'),
+                property('Texture', 'map', 'texture', 'filler_map'),
+                property('Normal Map', 'normalMap', 'texture', 'filler_normalMap'),
+                property('Normal Scale', 'normalScale', 'vector2'),
+                property('Shininess', 'shininess', 'number'),
+                property('Reflectivity', 'reflectivity', 'number'),
+                property('Refraction Ratio', 'refractionRatio', 'number'),
+                property('Specular', 'specular', 'rgb', 'uniform_specular'),
+                property('Specular Map', 'specularMap', 'texture', 'filler_specularMap'),
+                property('Displacement Map', 'displacementMap', 'texture'),
+                property('Env Map', 'envMap', 'samplerCube'),
+            ],
+            strategies: [
+                uniformStrategy(),
+                stage === 'fragment'
+                    ? texture2DStrategy()
+                    : namedAttributeStrategy('position'),
+            ],
+        },
+        inputs: [],
+        outputs: [
+            {
+                name: 'vector4',
+                category: 'data',
+                id: '1',
+            },
+        ],
+        source: '',
+        stage: stage,
+        nextStageNodeId: nextStageNodeId,
+    });
+};
+export var addNode = function (id, position) { return ({
+    id: id,
+    name: 'add',
+    position: position,
+    type: NodeType.BINARY,
+    groupId: undefined,
+    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,
+    groupId: undefined,
+    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/dist/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/dist/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/dist/graph/graph-types.d.ts

@@ -0,0 +1,25 @@
+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';
+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/dist/graph/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/graph.d.ts

@@ -0,0 +1,70 @@
+import { Program } from '@shaderfrog/glsl-parser/ast';
+import { Engine, EngineContext } from '../engine';
+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) => string;
+export declare const mangleVar: (name: string, engine: Engine, node: GraphNode) => string;
+export declare const mangleEntireProgram: (ast: Program, node: SourceNode, engine: Engine) => void;
+export declare const mangleMainFn: (ast: Program, node: SourceNode) => void;
+type Predicates = {
+    node?: (node: GraphNode, inputEdges: Edge[]) => boolean;
+    input?: (input: NodeInput, node: GraphNode, inputEdge: Edge | undefined, fromNode: GraphNode | undefined) => boolean;
+};
+export type SearchResult = {
+    nodes: Record<string, GraphNode>;
+    inputs: Record<string, NodeInput[]>;
+};
+/**
+ * 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. 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 declare const filterGraphFromNode: (graph: Graph, node: GraphNode, predicates: Predicates, depth?: number) => 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 {};