junkpile

18 · Tauri v2 Texture Mixer

A standalone Tauri v2 + raw WebGL example for compositing two independent image or video sources in one fragment-shader pass.

The exact folder name is:

18-tauri-v2-texture-mixer

What this example teaches

• Loading local images and videos through Tauri v2 native dialogs
• Handling native operating-system drag and drop
• Returning image bytes through Tauri IPC so WebGL receives origin-clean Blob URLs
• Authorizing local video paths for Tauri’s asset protocol
• Uploading two independent sources to WebGL textures
• Applying separate framing and transforms to each layer
• Implementing common blend modes and masks in GLSL ES 1.00
• Exporting a current mixed frame through native save dialogs

Run

npm install
npm run dev

The project contains an explicit Cargo workspace boundary, so it remains independent from any parent Cargo.toml.

Inputs

Layer A and Layer B each support images or videos. Use Native open, Browser open, or drop a file onto the corresponding layer card. When a native drop occurs outside a card, it is routed to the currently active layer.

Supported extensions include:

• PNG, JPEG, WebP, GIF, BMP, TIFF, AVIF
• MP4, MOV, M4V, WebM, MKV, AVI, OGV, OGG

Actual decoding support is determined by the operating-system WebView.

Images and videos use different secure loading paths:

Native image → Rust binary read → IPC Response → Blob URL → WebGL texture
Native video → runtime asset authorization → convertFileSrc() → HTML video → WebGL texture

This prevents the WebKit SecurityError: The operation is insecure problem that can occur when an asset-protocol image is uploaded directly to WebGL.

Videos are muted, looped, and played inline. Each video has independent play/pause and playback-speed controls.

The app launches with two generated images, so the complete mixer can be tested before loading media.

Per-layer controls

Select Layer A or Layer B, then adjust:

• Contain, cover, or stretch framing
• Opacity
• Zoom
• Pan X/Y
• Rotation
• Horizontal and vertical mirroring

Swap A ↔ B exchanges the complete source state, including media, transform, opacity, and video transport.

Blend modes

1. Normal
2. Add
3. Multiply
4. Screen
5. Overlay
6. Hard light
7. Difference
8. Exclusion
9. Lighten
10. Darken
11. Color dodge

The Mix control determines how strongly Layer B and the selected blend operation affect the result. Auto crossfade animates that amount in the shader without moving the slider.

Masks

Layer B can be limited by:

• None
• Linear
• Radial
• Layer A luminance
• Layer B luminance
• Checker
• Stripes
• Animated noise

Mask controls include threshold, feathering, scale, angle, center position, and inversion. The mask inspection view displays the final mask in grayscale.

Render path

Layer A image/video ─► texture A ─► transform A ─┐
                                                  ├─► blend ─► mask ─► canvas
Layer B image/video ─► texture B ─► transform B ─┘

No CPU pixel compositing occurs during normal rendering. Video frames are uploaded before drawing; still images remain resident as GPU textures.

Export

The current composition can be exported as PNG or JPEG at:

• Preview resolution
• 1920 × 1080
• 3840 × 2160
• Custom dimensions up to 8192 × 8192, subject to GPU limits

Large exports are written to Rust in sequential 1 MiB chunks. Browser download is retained as a fallback outside Tauri.

Tauri v2 architecture

• withGlobalTauri exposes the vanilla JavaScript APIs
• The official dialog plugin supplies native open/save dialogs
• A capability file explicitly grants only core IPC and dialog permissions
• Native image bytes use tauri::ipc::Response
• Native videos are authorized per file for the asset protocol
• Fullscreen is controlled through a Rust command

Project structure

18-tauri-v2-texture-mixer/
├── 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

Notes

• Video audio is intentionally muted.
• Very large exports may exceed GPU viewport or memory limits.
• Large or unusually encoded videos can expose WebKit duration/codec limitations.
• Transparent JPEG output is flattened by the JPEG encoder.
• This remains a WebView/WebGL application; it does not create a native wgpu surface.

This site is open source. Improve this page.