aiden/video-shader-toys
1
0
Fork 0
Code Issues Pull Requests Actions Releases 5 Wiki Activity
Page: Operator Interface
Pages
Home Making Shaders OSC Control Operator Interface REST API Runtime Host Configuration Shader 3D LUT Apply Shader Anamorphic Desqueeze Shader Balatro Swirl Shader Black and White Shader Broken Shader Example Shader Composition Guides Shader DVD Bounce Shader Data Mosh Shader Ether Shader False Color Shader Fisheye Equirectangular Mirror Shader Fisheye Reproject Shader Gaussian Blur Shader Greenscreen Key Shader Happy Accident Shader Lift Gamma Gain Shader Multipass Test Shader Pixelate Shader SMPTE Color Bars Shader Safe Area Guides Shader Singularity Shader Solid Color Shader Temporal Echo Shader Temporal Ghost Trail Shader Temporal Low FPS Shader Text Overlay Shader Trigger Ripple Shader UTC Clock Shader VHS Shader Video Cube Shader Video Transform Shader Waveform Overlay Shader XYLA Exposure Chart Shaders
Clone
2
Operator Interface
Aiden edited this page 2026-05-08 19:03:26 +10:00
Table of Contents

Operator Interface

The operator interface is the local browser control surface served by the native host. By default it is available at:

http://127.0.0.1:8080

If serverPort is changed in config/runtime-host.json, use that port instead. If the preferred port is busy, the host may bind to a nearby port.

What You See

The top summary shows shader count, layer count, signal state, and current render time. The status area shows runtime state, video mode, output mode, render budget use, and compiler output. The compiler panel is the first place to look if a shader does not load.

Shader Library

The shader library is searchable. It searches shader name, package ID, category, description, and error text.

Unavailable packages can appear with an error label. They are shown for diagnostics, but cannot be added to the stack. broken-shader-example is intentionally invalid and exists to test this behavior.

Layer Stack

Layers process from top to bottom. Each layer receives the output of the layer above it, applies its shader, then passes the result to the next layer.

Common actions:

Action How
Add a layer Search the shader library and click the add button beside an available shader.
Reorder layers Drag a layer by its drag handle.
Open controls Click Controls or the layer title.
Bypass a layer Toggle Bypass.
Remove a layer Click the remove button.
Reset all parameters Expand the layer and click the layer Reset button.
Reset one parameter Use the reset button in that parameter row.

Changing order, bypass state, or shader assignment may reset temporal history. That is expected for temporal effects.

Parameters

Shader parameters are generated from each shader's shader.json manifest. Parameter rows may include short helper text from the manifest.

Parameter Type UI Control
float Slider plus numeric input.
vec2 Two numeric inputs.
color Swatch, color wheel, RGBA numeric inputs, and value slider.
bool Toggle.
enum Dropdown.
text Text input.
trigger Momentary trigger button.

Each row has an OSC button that copies the parameter's OSC route, such as:

/VideoShaderToys/vhs/wiggle

Use that route in an OSC controller when you want live external control.

Stack Presets

Stack presets save the current layer chain, including layer order, shader assignments, bypass state, and parameter values.

Use Save stack to create a named preset. Use Recall stack to load one. Presets are stored under:

runtime/stack_presets/

The runtime also autosaves the latest working state to:

runtime/runtime_state.json

Autosave is for restoring the local machine after restart. Named presets are for looks you intentionally want to recall.

Reload Shaders

The Reload shaders button rescans the shader library, re-reads manifests, queues shader compilation, and refreshes shader availability/errors. Use it after changing a shader package when auto reload is off, or when you want to force a clean refresh.

If a changed shader fails, the previous working stack should keep running where possible while the error appears in the UI.

Screenshots

The Screenshot button queues a PNG capture of the final output render target. Screenshots are written under:

runtime/screenshots/

Reading Errors

If the UI says Compile Error, open the compiler panel. Common causes are:

  • Invalid shader.json.
  • A parameter, texture, font, pass, or entry point name that is not a valid shader identifier.
  • A missing texture or font file.
  • Slang code that does not compile.
  • A shader that references a parameter not declared in the manifest.
  • An intentionally broken diagnostics package.

With auto reload enabled, fixing the file should cause the host to try again automatically.