Node Editor

Unity Shader Graph-style visual programming interface using React Flow for node-based editing

🚧

Under Construction

This documentation is currently being developed and will be available soon.

Overview

The Node Editor provides a Unity Shader Graph-style visual programming interface built on React Flow. It enables node-based editing for workflows, data processing pipelines, and scene object control through an intuitive drag-and-drop interface with real-time synchronization.

Node Types

Regular Nodes

Math Operations

  • • Add, Subtract, Multiply, Divide
  • • Power, Sqrt, Abs
  • • Lerp, Clamp

Constants

  • • Float
  • • Vector2, Vector3, Vector4
  • • Bool

Input Nodes

  • • Time
  • • UV, Position, Normal
  • • Color

Utility

  • • Split, Combine
  • • Swizzle
  • • Fragment shader output

Special Nodes

Object Node

  • • Drag from Hierarchy: Drag scene objects to create nodes
  • • Display: Shows object name and type
  • • Components: Collapsible component groups
  • • Ports: Typed input/output ports for each field
  • • Sync: Real-time property synchronization
  • • Width: 320px

Object Group Node

  • • Filter: By Name (wildcards supported) or Tag
  • • Toggle: Circular buttons for filter type selection
  • • Components: Add/remove components via dropdown
  • • Count: Shows number of filtered objects
  • • Batch Control: Control multiple objects at once
  • • Width: 320px

Group Node

  • • Purpose: Visual organization container
  • • Header: Draggable with grip indicators (⋮⋮)
  • • Rename: Double-click header to edit name
  • • Resize: Draggable invisible borders
  • • Hierarchy: Support parent-child relationships
  • • Style: Semi-transparent background
  • • Size: Default 400x300px, Min 300x200px

Note Node

  • • Purpose: Sticky note for comments
  • • Edit: Double-click to edit (selects all text)
  • • Resize: Triangle handle at bottom-right
  • • Theme: Yellow in light mode, dark gray in dark
  • • Size: Default 250x150px, Min 150x100px

Parameter Node

  • • Link: Linked to Hyper Parameters panel
  • • Create: Drag from panel to canvas
  • • Sync: Synchronized with parameter list
  • • Delete: Removing parameter deletes all linked nodes

Canvas Controls

Mouse Controls

  • •Left Click + Drag: Box selection
  • •Middle Mouse + Drag: Pan canvas
  • •Right Click: Context menu
  • •Scroll: Zoom in/out

Hyper Parameters Panel

Located on the left side of the editor, this panel manages differentiable parameters for optimization workflows.

Features

  • •Add Parameters: Float, Vector2, Vector3, Vector4, Color, Bool
  • •Inline Editing: Edit parameter names directly
  • •Drag to Canvas: Create parameter nodes by dragging
  • •Delete: Remove parameters and all linked nodes

Differentiable Toggle (∂)

Mark parameters as differentiable for gradient-based optimization:

  • • Visual Indicator: Connected edges show animated blue dashed outline
  • • Edge Width: 8px for differentiable connections
  • • Animation: Backward flow animation (from output to input)
  • • Color: Preserves original edge color with blue dashed overlay

Real-time Sync System

Architecture

User Action → Local State → Store → WebSocket → Other Clients

Key Principles

  • • Local-First Updates: Immediate UI response
  • • Debounced Sync: Batch rapid changes (300ms)
  • • Interaction Protection: Block sync during drag operations
  • • Unidirectional Flow: Clear data flow path

State Layers

1.
React Flow State: Immediate UI state for responsiveness
2.
Node Editor Store: Coordination layer for state management
3.
WebSocket Service: Network communication for multi-client sync
4.
Backend Scene: Persistent storage and authoritative state

Debouncing Delays

Normal changes300ms
Drag end50-100ms
ResizerequestAnimationFrame
Store to backend500ms

Visual Styling

Port Colors

Following Unity conventions:

  • Float - Light gray
  • Vector2 - Green
  • Vector3 - Yellow
  • Vector4 - Pink
  • Boolean - Purple
  • Color - Gradient

Theme Support

  • • Dark Theme: Default theme
  • • Light Theme: Compatible with light mode
  • • Theme-Aware: Colors adapt to theme

Selection Styling

  • • Highlight: #4a9eff
  • • No Bounding Box: Cleaner look
  • • Border: Blue border on selected

Keyboard Shortcuts

DeleteRemove selected nodes
Ctrl + DDuplicate selected
EscapeCancel operations

Usage Examples

Creating a Parameter Node

  1. 1. Open Hyper Parameters panel
  2. 2. Add a new parameter
  3. 3. Drag parameter to canvas
  4. 4. Connect to other nodes

Organizing with Groups

  1. 1. Right-click → Add Group
  2. 2. Drag nodes into group
  3. 3. Double-click header to rename
  4. 4. Resize by dragging borders

Object Control

  1. 1. Drag object from Hierarchy
  2. 2. Connect field outputs to inputs
  3. 3. Modifications sync to scene

Batch Object Control

  1. 1. Add Object Group node
  2. 2. Set filter (Name/Tag)
  3. 3. Add/remove components
  4. 4. Control multiple objects