LiveShade

A Clojure-like DSL that compiles to GLSL fragment shaders, with an interactive web-based IDE for live coding.

Features

🎨 Interactive IDE

• Monaco Editor with syntax highlighting for the LiveShade DSL
• Live Preview - see your shaders update in real-time
• Split Pane Layout - code editor on left, shader output on right
• Interactive Console - compilation errors with line numbers
• Example Gallery - load built-in shader examples
• Resizable Console - adjust console height to your preference

🚀 DSL Features

• Shader Definitions - (defshader name [params] body)
• Gradient Palettes - (defpalette name (gradient ...))
• Let Bindings - Local variable declarations
• Property Access - (.-x uv) → uv.x
• Vector Literals - [x y] → vec2(x, y)
• Variadic Operators - (+ a b c) → ((a + b) + c)
• Built-in GLSL Functions - sin, cos, distance, mix, etc.
• Type Inference - Automatic GLSL type detection

Quick Start

# Install dependencies
npm install

# Start development server
npm run dev

# Open http://localhost:5173 in your browser

Example: Plasma Shader

(defshader plasma
  "Classic plasma effect"
  [uv time resolution]

  (let [x (* (.-x uv) (.-x resolution))
        y (* (.-y uv) (.-y resolution))

        v1 (sin (+ (/ x 16.0) time))
        v2 (sin (+ (/ y 8.0) (* time 1.3)))
        v3 (sin (/ (+ x y) 16.0))
        v4 (sin (/ (distance uv [0.5 0.5]) 8.0))

        color (/ (+ v1 v2 v3 v4) 4.0)
        color (+ (* color 0.5) 0.5)]

    (palette-lookup plasma-pal color)))

(defpalette plasma-pal
  (gradient 0.0 1.0
    [0.0 [0 0 0]]
    [0.25 [0 0 255]]
    [0.5 [255 255 255]]
    [0.75 [255 255 0]]
    [1.0 [255 0 0]]))

Language Reference

Shader Definitions

(defshader name
  "Optional docstring"
  [uv time resolution]
  body)

Parameters:

• uv - vec2: UV coordinates (0-1)
• time - float: Current time in seconds
• resolution - vec2: Canvas resolution in pixels

Palette Definitions

(defpalette name
  (gradient start end
    [position1 [r g b]]
    [position2 [r g b]]
    ...))

Colors are specified as RGB values (0-255).

Let Bindings

(let [x 1.0
      y (+ x 2.0)
      z (* x y)]
  (+ x y z))

Variables can shadow previous declarations.

Property Access

(.-x uv)    ; uv.x
(.-y uv)    ; uv.y

Vector Literals

[0.5 0.5]          ; vec2(0.5, 0.5)
[1.0 0.0 0.0]      ; vec3(1.0, 0.0, 0.0)
[1.0 1.0 1.0 1.0]  ; vec4(1.0, 1.0, 1.0, 1.0)

Operators

(+ a b c)    ; ((a + b) + c)
(- a b)      ; (a - b)
(* a b c)    ; ((a * b) * c)
(/ a b)      ; (a / b)

All operators are variadic and left-associative.

Built-in Functions

Math:

• sin, cos, tan, asin, acos, atan
• pow, exp, log, sqrt, abs
• floor, ceil, fract, mod
• min, max, clamp, mix, step, smoothstep

Vector:

• length, distance, dot, cross
• normalize, reflect, refract

Special:

• palette-lookup - Look up color in a palette

Project Structure

liveshade/
├── src/
│   ├── parser/
│   │   ├── ast.ts          # AST type definitions
│   │   ├── tokenizer.ts    # S-expression tokenizer
│   │   └── parser.ts       # DSL parser
│   ├── compiler/
│   │   ├── type-checker.ts # Type inference
│   │   └── codegen.ts      # GLSL code generation
│   ├── runtime/
│   │   └── shader-runner.ts # WebGL 2.0 runtime
│   ├── ide/
│   │   ├── editor.ts       # Monaco Editor integration
│   │   ├── console.ts      # Console with error display
│   │   └── examples.ts     # Example shaders
│   └── main.ts             # Application entry point
├── index.html              # IDE UI
├── vite.config.ts          # Vite configuration
├── tsconfig.json           # TypeScript configuration
└── package.json            # Dependencies

Development Roadmap

✅ Phase 1: Core Pipeline (Complete)

• Tokenizer and parser
• Type inference system
• GLSL code generation
• WebGL runtime
• Plasma shader working

✅ Phase 2: Web IDE (Complete)

• Monaco Editor integration
• Syntax highlighting
• Live code editing
• Error console with line numbers
• Example gallery
• Split pane layout

🔮 Phase 3: Extended Features (Planned)

• Shader composition
• Multi-shader definitions
• Blend modes (add, multiply, screen, overlay)
• For-loop unrolling
• Texture sampling and feedback buffers
• Custom vector operators (vec+, vec-, etc.)
• Standard library (noise, patterns, etc.)

Technology Stack

• TypeScript - Type-safe development
• Vite - Fast dev server with HMR
• Monaco Editor - VS Code editor component
• WebGL 2.0 - Hardware-accelerated graphics

License

MIT

Contributing

Contributions are welcome! Please see PLAN.md for the full development roadmap.