junkpile

17 · Tauri v2 GLSL Shader Playground

A standalone Tauri v2 + raw WebGL 1 example for editing complete fragment shaders, compiling them live, inspecting a terminal-style diagnostic stream, controlling shared uniforms, loading/saving shader files through native dialogs, and exporting PNG snapshots.

What this example teaches

• Creating and replacing WebGL shader programs at runtime
• Compiling GLSL ES 1.00 inside a Tauri v2 WebView
• Preserving the last valid GPU program when a new shader fails
• Converting WebGL compiler logs into readable line diagnostics
• Debouncing automatic compilation while source text changes
• Passing reusable time, resolution, mouse, color, and generic uniforms
• Loading UTF-8 shader source through Rust, browser file input, or native drag/drop
• Saving shader text and PNG snapshots with Tauri v2 native dialogs
• Using explicit Tauri v2 capabilities and commands

Mini shader terminal

The terminal records:

• Fragment compile and program-link stages
• Clickable errors tied to source lines
• The last valid program retained after a failed compile
• Native dialog, browser file, drag/drop, paste, save, and snapshot events
• WebView runtime errors and unhandled promise rejections
• Compatibility guidance for common pasted shader formats

The preflight inspection recognizes:

• #version 300 es
• WebGL 2 out vec4 fragment outputs
• texture() instead of WebGL 1 texture2D()
• ShaderToy mainImage()
• ShaderToy iTime, iResolution, and iMouse
• layout(...) qualifiers
• Unsupported #include directives
• Missing void main()
• Missing float precision

A .frag or .glsl extension does not determine shader compatibility. The terminal explains the actual GLSL dialect or contract mismatch.

Shader contract

Every fragment shader receives:

precision highp float;

varying vec2 v_uv;

uniform float u_time;
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform vec3 u_color_a;
uniform vec3 u_color_b;
uniform float u_param0;
uniform float u_param1;
uniform float u_param2;
uniform float u_param3;

Compile lifecycle

Editor source
     │
     ├── automatic: 650 ms debounce
     └── manual: Compile / Cmd+Enter / Ctrl+Enter
                     │
                     ▼
              compile + link
                     │
          ┌──────────┴──────────┐
          │                     │
       success                failure
          │                     │
 replace active         retain previous
  GPU program            valid program
          │                     │
          ▼                     ▼
       preview           terminal diagnostics

Included presets

Preset	Technique
Domain warp	Layered value noise and fractional Brownian motion
Orbital rings	Polar coordinates, repetition, and radial glow
Cellular field	Animated nearest-point / Voronoi-style distances
Spectral plasma	Interfering sine fields and spectral color mixing
Minimal gradient	Small readable starter shader

Tauri v2 file flow

Native open / OS file drop
          │
          ▼
Rust read_shader_file command
          │ UTF-8 source string
          ▼
Editor → compile terminal → WebGL

Browser file input remains available as a fallback. Native and dropped shader files are limited to .frag, .glsl, .fs, and .txt, with an 8 MiB source safety limit.

Native permissions are limited to core IPC and open/save dialogs. The Rust backend exposes:

• read_shader_file
• write_binary
• toggle_fullscreen

Run

npm install
npm run dev

Build

npm run build

Project structure

17-tauri-v2-glsl-shader-playground/
├── package.json
├── README.md
├── V2-FOLDER-MAP.md
├── src/
│   ├── index.html
│   ├── styles.css
│   └── app.js
└── src-tauri/
    ├── Cargo.toml
    ├── build.rs
    ├── tauri.conf.json
    ├── capabilities/
    │   └── default.json
    ├── icons/
    └── src/
        └── main.rs

WebGL 1 constraints

• Use attribute and varying, not WebGL 2 in and out
• Write fragment output through gl_FragColor
• Declare float precision in the fragment shader
• Prefer compile-time-constant loop bounds
• Avoid WebGL 2-only language and texture features

Unused uniforms may be optimized out. The playground safely skips uploads to missing uniform locations.

This site is open source. Improve this page.