Master Documentation

The UI Shell Anatomy

Shadyr is built on a four-dock layout designed for maximum focus and rapid iteration.

Independent Authoring Lanes

A core architectural principle of Shadyr is Lane Separation. We believe your professional GLSL should be safe while you experiment with visual blocks.

The Three Modes

• Code Mode: Direct fragment authoring. Powerful, precise, and professional.
• Node Mode: Visual graph building. Procedural, organic, and perfect for discovery.
• Learn Mode: Guided onboarding. Interactive lessons for fundamentals.

Important: Lanes are separate. Work in Node Mode does not overwrite your work in Code Mode. Whichever mode is currently active in the toolbar is what drives the live preview.

The Node Environment

The Node Graph is a flow-based visual builder. It translates connections into high-performance GLSL under the hood.

Node Families

• Source: Starting data like Time, UV, and Mouse.
• Utility: Mathematical transformers like Lerp, Noise, and Split.
• Material: High-level visual blocks like 3D Sphere Scene or Chrome FX.
• Sink: The Shader Output node. Every valid graph must end here.

Best Practices

• Resizing: Every node can be resized from the corner handle to make logic readable.
• Parameters: Selecting a node highlights its controls in the Workspace sidebar.
• Validation: The graph enforces type-safety. You cannot plug a float into a vec3 without a conversion node.

Render Pipeline Logic

Shadyr moves beyond single-image shaders with a robust multi-pass rendering engine.

Passes & Buffers

A shader project can contain multiple Passes. Use "Buffer" passes to handle heavy math, accumulate light, or store previous frames for feedback effects.

Channels (iChannel0..7)

Channels are the data inputs for your passes. You can assign:

• Static Images: High resolution textures.
• Video / Audio: Dynamic temporal signals.
• Pass Feedback: Connect the output of one pass into the input of another.
• Self-Feedback: Target the current pass to create persistent simulation logic.

Post-Process Layers

Layers are high-quality effects applied to the final image. Shadyr includes production-grade Bloom, Grain, and Chromatic Aberration that run on the final composite.

Persistence & Files

Your work stays with you, whether in the browser or on your desktop.

The .shdr Project File

The shared file format for Shadyr is .shdr. This single file contains:

• Full GLSL source for all passes.
• Visual node graph structure and layout.
• Channel assignments and metadata.
• Parameter slider values and ranges.

The Internal Library

Hitting Add to Presets stores your current project in the browser's persistent storage. This makes it instantly accessible across sessions in the Left Dock.

Reference & Shortcuts

Speed is everything when you're in the flow.

Built-in Uniforms

uniform float u_time;        // Elapsed time in seconds
uniform vec2  u_resolution;  // Canvas resolution in pixels
uniform vec2  u_mouse;       // Normalized mouse coordinates
uniform float u_audio;       // Audio FFT signal (if enabled)

Keyboard Shortcuts

• Ctrl + S: Add to library presets.
• Ctrl + O: Import a .shdr project.
• Ctrl + E: Export current state.
• Space: Search/Add Node (Node Graph only).
• R: Reset preview time.