Examples / Shader Editor Graphics · GPU

Shader Editor

A real shader IDE in one widget: a syntax-highlighted code editor on the left, a live GPU preview on the right, and a preset picker on top. WGSL presets give you a starting point; pick the Shadertoy preset to paste a GLSL shader (mainImage / iTime / iResolution) and Vel translates it to WGSL on Run. Editing updates a draft and only recompiles on Run, so it never flashes while you type.

Syntax-highlighted WGSL + GLSL editor (Code)
Preset dropdown → editor via match
Paste Shadertoy GLSL → auto-translated to WGSL
Composed in .vel from generic primitives

shader.vel vel

 #App
  @draft = "..."   # WGSL shade() body (or Shadertoy GLSL)
  @code  = "..."
  V f=1
    H            # toolbar
      Select options="plasma:Plasma,rings:Rings,…"
        -> change => $draft = match $value { "plasma" => "…", … }
      Btn "Run ▸" -> click => $code = $draft
    H f=1
      Code   f=1 lang=auto value=$draft   # highlighted editor
      Shader f=1 src=$code                # auto-translates GLSL → WGSL

← Previous

3D Scene Editor

20,000 Photos