@shaderfrog/core 0.0.1

package/src/core/nodes/code-nodes.ts

@@ -0,0 +1,66 @@
+import { ShaderStage } from '../graph';
+import { Strategy } from '../strategy';
+import { GraphDataType, UniformDataType } from './data-nodes';
+import { CoreNode, NodeInput } from './core-node';
+
+export const mapInputName = (
+  node: CodeNode,
+  { id, displayName }: NodeInput
+): string => node.config?.inputMapping?.[id] || displayName;
+
+export type InputMapping = { [original: string]: string };
+export type NodeConfig = {
+  version: 2 | 3;
+  mangle?: boolean;
+  preprocess: boolean;
+  inputMapping?: InputMapping;
+  strategies: Strategy[];
+  uniforms: UniformDataType[];
+  properties?: NodeProperty[];
+  hardCodedProperties?: Record<string, any>;
+};
+
+export interface NodeProperty {
+  // Display name, like "albedo"
+  displayName: string;
+  // Type in the engine, like "texture"
+  type: GraphDataType;
+  // Property name to apply to the material, like "map"
+  property: string;
+  // The name of the filler this property introduces, aka the GLSL source code
+  // to be replaced, if this property is present.
+  fillerName?: string;
+  defaultValue?: any;
+}
+
+export const property = (
+  displayName: string,
+  property: string,
+  type: GraphDataType,
+  fillerName?: string,
+  defaultValue?: any
+): NodeProperty => ({
+  displayName,
+  type,
+  property,
+  fillerName,
+  defaultValue,
+});
+
+export interface CodeNode extends CoreNode {
+  config: NodeConfig;
+  source: string;
+  expressionOnly?: boolean;
+  stage: ShaderStage | undefined;
+  biStage?: boolean;
+  groupId: string | null | undefined;
+  nextStageNodeId?: string;
+  prevStageNodeId?: string;
+  originalEngine?: string;
+}
+
+export interface BinaryNode extends CodeNode {
+  operator: string;
+}
+
+export type SourceNode = BinaryNode | CodeNode;

package/src/core/nodes/core-node.ts

@@ -0,0 +1,48 @@
+import { GraphDataType } from './data-nodes';
+
+export type InputCategory = 'data' | 'code';
+export type InputType = 'uniform' | 'property' | 'filler';
+
+export interface NodeInput {
+  displayName: string;
+  id: string;
+  type: InputType;
+  dataType?: GraphDataType;
+  accepts: Set<InputCategory>;
+  baked?: boolean;
+  bakeable: boolean;
+  property?: string;
+}
+export const nodeInput = (
+  displayName: string,
+  id: string,
+  type: InputType,
+  dataType: GraphDataType | undefined,
+  accepts: Set<InputCategory>,
+  bakeable: boolean,
+  property?: string
+): NodeInput => ({
+  displayName,
+  id,
+  type,
+  dataType,
+  accepts,
+  bakeable,
+  property,
+});
+
+export interface NodeOutput {
+  name: string;
+  id: string;
+  category: InputCategory;
+}
+
+export type NodePosition = { x: number; y: number };
+export interface CoreNode {
+  id: string;
+  name: string;
+  type: string;
+  inputs: NodeInput[];
+  outputs: NodeOutput[];
+  position: NodePosition;
+}

package/src/core/nodes/data-nodes.ts

@@ -0,0 +1,344 @@
+import { CoreNode, NodeInput, NodeOutput, NodePosition } from './core-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 const numberNode = (
+  id: string,
+  name: string,
+  position: NodePosition,
+  value: string,
+  optionals?: {
+    range?: [number, number];
+    stepper?: number;
+    inputs?: NodeInput[];
+    outputs?: NodeOutput[];
+  }
+): NumberNode => ({
+  type: 'number',
+  id,
+  name,
+  position,
+  value,
+  inputs: optionals?.inputs || [],
+  outputs: optionals?.outputs || [
+    {
+      name: 'float',
+      id: '1',
+      category: 'data',
+    },
+  ],
+  range: optionals?.range,
+  stepper: optionals?.stepper,
+});
+
+export type NumberDataUniform = Omit<
+  NumberNode,
+  'id' | 'inputs' | 'outputs' | 'position'
+>;
+
+export const numberUniformData = (
+  name: string,
+  value: string,
+  range?: [number, number],
+  stepper?: number
+): NumberDataUniform => ({
+  type: 'number',
+  name,
+  value,
+  range,
+  stepper,
+});
+
+export interface TextureNode extends CoreNode {
+  type: 'texture';
+  value: string;
+}
+export const textureNode = (
+  id: string,
+  name: string,
+  position: NodePosition,
+  value: string
+): TextureNode => ({
+  type: 'texture',
+  id,
+  name,
+  position,
+  value,
+  inputs: [],
+  outputs: [
+    {
+      name: 'texture',
+      id: '1',
+      category: 'data',
+    },
+  ],
+});
+
+export type TextureDataUniform = Omit<
+  TextureNode,
+  'id' | 'inputs' | 'outputs' | 'position'
+>;
+
+export const textureUniformData = (
+  name: string,
+  value: string
+): TextureDataUniform => ({ type: 'texture', name, value });
+
+export interface SamplerCubeNode extends CoreNode {
+  type: 'samplerCube';
+  value: string;
+}
+export const samplerCubeNode = (
+  id: string,
+  name: string,
+  position: NodePosition,
+  value: string
+): SamplerCubeNode => ({
+  type: 'samplerCube',
+  id,
+  name,
+  position,
+  value,
+  inputs: [],
+  outputs: [
+    {
+      name: 'samplerCube',
+      id: '1',
+      category: 'data',
+    },
+  ],
+});
+
+export type SamplerCubeDataUniform = Omit<
+  SamplerCubeNode,
+  'id' | 'inputs' | 'outputs' | 'position'
+>;
+
+export const samplerCubeUniformData = (
+  name: string,
+  value: string
+): SamplerCubeDataUniform => ({ type: 'samplerCube', name, value });
+
+export type ArrayValue = string[];
+
+export interface ArrayNode extends CoreNode {
+  type: 'array';
+  dimensions: number;
+  value: ArrayValue;
+}
+
+export function arrayNode(
+  id: string,
+  name: string,
+  position: NodePosition,
+  value: ArrayValue
+): ArrayNode {
+  return {
+    id,
+    name,
+    position,
+    inputs: [],
+    outputs: [
+      {
+        name: 'array',
+        id: '1',
+        category: 'data',
+      },
+    ],
+    value,
+    dimensions: value.length,
+    type: 'array',
+  };
+}
+
+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 function vectorNode(
+  id: string,
+  name: string,
+  position: NodePosition,
+  value: Vector2 | Vector3 | Vector4
+): Vector2Node | Vector3Node | Vector4Node {
+  return {
+    id,
+    name,
+    position,
+    inputs: [],
+    outputs: [
+      {
+        name: `vector${value.length}`,
+        id: '1',
+        category: 'data',
+      },
+    ],
+    ...(value.length === 2
+      ? { value, dimensions: 2, type: 'vector2' }
+      : value.length === 3
+      ? { value, dimensions: 3, type: 'vector3' }
+      : { value, dimensions: 4, type: 'vector4' }),
+  };
+}
+
+export type ArrayDataUniform = Omit<
+  ArrayNode,
+  'id' | 'inputs' | 'outputs' | 'position'
+>;
+
+export const arrayUniformData = (
+  name: string,
+  value: ArrayValue
+): ArrayDataUniform => ({
+  name,
+  value,
+  dimensions: value.length,
+  type: 'array',
+});
+
+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 const vectorUniformData = (
+  name: string,
+  value: Vector2 | Vector3 | Vector4
+): Vector2DataUniform | Vector3DataUniform | Vector4DataUniform => ({
+  name,
+  ...(value.length === 2
+    ? { value, dimensions: 2, type: 'vector2' }
+    : value.length === 3
+    ? { value, dimensions: 3, type: 'vector3' }
+    : { value, dimensions: 4, type: 'vector4' }),
+});
+
+export interface RgbNode extends CoreNode {
+  type: 'rgb';
+  dimensions: 3;
+  value: Vector3;
+}
+export interface RgbaNode extends CoreNode {
+  type: 'rgba';
+  dimensions: 4;
+  value: Vector4;
+}
+
+export function colorNode(
+  id: string,
+  name: string,
+  position: NodePosition,
+  value: Vector3 | Vector4
+): RgbNode | RgbaNode {
+  return {
+    id,
+    name,
+    position,
+    inputs: [],
+    outputs: [
+      {
+        name: value.length === 3 ? 'rgb' : 'rgba',
+        id: '1',
+        category: 'data',
+      },
+    ],
+    ...(value.length === 3
+      ? { value, dimensions: 3, type: 'rgb' }
+      : { value, dimensions: 4, type: 'rgba' }),
+  };
+}
+
+export type RgbDataUniform = Omit<
+  RgbNode,
+  'id' | 'inputs' | 'outputs' | 'position'
+>;
+export type RgbaDataUniform = Omit<
+  RgbaNode,
+  'id' | 'inputs' | 'outputs' | 'position'
+>;
+
+export const colorUniformData = (
+  name: string,
+  value: Vector3 | Vector4
+): RgbDataUniform | RgbaDataUniform => ({
+  name,
+  ...(value.length === 3
+    ? { value, dimensions: 3, type: 'rgb' }
+    : { value, dimensions: 4, type: 'rgba' }),
+});
+
+// When defining nodes, these are the types allowed in uniforms
+export type UniformDataType =
+  | TextureDataUniform
+  | SamplerCubeDataUniform
+  | NumberDataUniform
+  | Vector2DataUniform
+  | Vector3DataUniform
+  | Vector4DataUniform
+  | RgbDataUniform
+  | RgbaDataUniform;
+
+export type DataNode =
+  | TextureNode
+  | SamplerCubeNode
+  | NumberNode
+  | Vector2Node
+  | Vector3Node
+  | Vector4Node
+  | ArrayNode
+  | RgbNode
+  | RgbaNode;

package/src/core/nodes/edge.ts

@@ -0,0 +1,23 @@
+import { ShaderStage } from '../graph';
+import { GraphDataType } from './data-nodes';
+
+export type EdgeType = ShaderStage | GraphDataType;
+export type Edge = {
+  id: string;
+  from: string;
+  to: string;
+  output: string;
+  // The ID of the input of the node this edge connects to
+  input: string;
+  // Fragment, vertex, or any of the data types
+  type?: EdgeType;
+};
+
+export const makeEdge = (
+  id: string,
+  from: string,
+  to: string,
+  output: string,
+  input: string,
+  type?: EdgeType
+): Edge => ({ id, from, to, output, input, type });