junkpile

15 · Tauri v2 Multipass Compositor

A standalone Tauri v2 + raw WebGL 1 example demonstrating a reusable multipass post-processing architecture with reorderable shader passes, reusable ping-pong work buffers, persistent previous-frame history, native PNG saving, and fullscreen preview.

The renderer first draws a procedural source into an offscreen framebuffer. Enabled effects then execute in user-defined order through two alternating work targets. The completed frame is displayed and optionally copied into a separate A/B history pair for feedback on the next frame.

What this example demonstrates

• Raw WebGL 1 rendering inside a Tauri v2 WebView
• Rendering into framebuffer-backed textures
• Reusing two work buffers for an arbitrary ordered pass chain
• Persistent previous-frame A/B history buffers
• Reordering the real GPU execution sequence at runtime
• Per-pass enable, effect selection, two parameters, and wet/dry mix
• Pipeline bypass without destroying settings
• Frozen or cleared feedback history
• Adjustable internal render scale
• Native Tauri v2 PNG save dialog
• Rust binary-file writing command
• Native fullscreen preview
• Browser download/fullscreen fallbacks outside Tauri
• Scroll-safe controls inherited from the corrected v2 layout pattern

Signal flow

Procedural source shader
        │
        ▼
Source framebuffer
        │
        ▼
Pass 1 ──► Work A
        │
Pass 2 ──► Work B
        │
Pass 3 ──► Work A
        │
Pass 4 ──► Work B
        │
Pass 5 ──► Work A
        │
        ├──────────────► Screen
        │
        └──────────────► History write buffer
                              │
                       swap A/B next frame

Only two work framebuffers are required regardless of pass count. The history buffers are separate because the work targets are overwritten several times during the current frame.

Included effects

Effect	Purpose
Feedback trails	Mixes the current image with the previous completed frame
Kaleidoscope	Mirrored polar segmentation
Edge isolate	Four-tap luminance-gradient extraction
RGB split	Chromatic channel displacement
Pixelate	Quantized texture coordinates
Wave displace	Animated two-axis UV deformation
Directional blur	Nine-tap blur along an adjustable direction
Color grade	Hue rotation and contrast adjustment
Solarize	Threshold-based channel inversion

Each of the five stack slots can use any effect. The arrows change actual execution order, so moving an effect earlier or later changes which processed texture it receives.

Source generators

• Fluid field
• Infinite tunnel
• Cellular lattice
• Signal bands

The source remains procedural so the project is self-contained. The compositor can later accept image, video, webcam, FFT, or scene-render textures.

Run

npm install
npm run dev

An explicit [workspace] boundary in src-tauri/Cargo.toml prevents unrelated parent Cargo workspaces from absorbing the project.

First test

1. Launch the project and confirm the default four active passes.
2. Select a pass row and change its effect.
3. Move the pass earlier or later with the arrow buttons.
4. Enable Freeze feedback history, then disable it.
5. Try the Analog echo and Meltdown presets.
6. Press Save PNG and choose a native destination.
7. Press Fullscreen preview.

Controls

Pipeline

• Bypass skips all effects while retaining their settings.
• Clear history resets both persistent history buffers to black.
• Reset restores the default five-slot chain.
• Save PNG exports the current composited frame.
• Fullscreen preview toggles the Tauri window fullscreen state.
• Freeze feedback history prevents the completed frame from replacing history.
• Render scale changes internal framebuffer resolution independently from CSS size.

Pass editor

Select a pass to edit:

• Effect
• Primary parameter
• Secondary parameter
• Wet/dry mix

The parameter labels change to match the selected effect.

Presets

• Analog echo
• Prism
• Scanline
• Meltdown
• Clean chain

Presets replace the complete stack and clear stale history.

Tauri v2 native layer

The official dialog plugin supplies the PNG save dialog:

tauri-plugin-dialog = "2"

The capability grants only core IPC and save-dialog access:

[
  "core:default",
  "dialog:allow-save"
]

After the user chooses a destination, the PNG bytes are sent to the narrowly scoped Rust write_binary command. toggle_fullscreen addresses only the main WebView window.

WebGL 1 constraints

The offscreen targets use RGBA8 textures for broad WebGL 1 compatibility. Repeated passes therefore clamp values to the normalized color range. HDR processing would require compatible float-texture/color-buffer extensions or a WebGL 2 implementation.

PNG capture enables preserveDrawingBuffer for reliable snapshot export. A production compositor focused only on maximum presentation performance may choose a dedicated export target instead.

Project structure

15-tauri-v2-multipass-compositor/
├── 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

Useful extensions

• Replace the procedural source with Example 12’s video texture
• Drive pass parameters from Example 13’s FFT bands
• Record the completed canvas with Example 14’s recorder
• Add per-pass masks or a second input texture
• Load external fragment shaders
• Add project/preset JSON persistence
• Port the pass graph to WebGL 2 or WebGPU

This site is open source. Improve this page.