junkpile

18 · Tauri v1 Texture Mixer

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

The exact folder name is:

18-tauri-v1-texture-mixer

What this example teaches

• Loading local image and video files into WebView media elements
• Uploading two independent sources to WebGL textures
• Updating video textures on every render frame
• Applying separate framing and transforms to each layer
• Implementing common blend modes in GLSL ES 1.00
• Creating procedural, luminance-driven, and animated masks
• Inspecting the composite, each source, or the mask itself
• Exporting the current mixed frame through Tauri’s native save dialog

Run

npm install
npm run dev

The project includes an explicit Cargo workspace boundary, so it remains independent from any Cargo.toml above its folder.

Inputs

Layer A and Layer B each accept WebView-supported:

• PNG
• JPEG
• WebP
• GIF first-frame or animated decoding, depending on the WebView
• MP4
• MOV
• M4V
• WebM
• Other image/video formats supported by the operating-system WebView

Videos are muted, looped, and played inline. This avoids accidental audio monitoring and keeps the example focused on texture compositing. Each video has independent play/pause and playback-speed controls.

The app launches with two generated images, so every blend and mask control can be tested before loading media.

Per-layer controls

Select Layer A or Layer B in the transform section, then adjust:

• Contain, cover, or stretch framing
• Opacity
• Zoom
• Horizontal and vertical pan
• Rotation
• Horizontal and vertical mirroring

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

Blend modes

The fragment shader includes:

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 replaces the fixed mix amount with a sinusoidal animation. The crossfade happens in the shader; the slider itself does not move or produce a jumpy interface.

Masks

Layer B can be limited by:

• No mask
• Linear wipe
• Radial mask
• Layer A luminance
• Layer B luminance
• Checker pattern
• Stripe pattern
• Animated value noise

Mask controls include threshold, feathering, scale, angle, center position, and inversion.

The Mask preview mode renders the final mask as grayscale, which makes it easier to understand why part of Layer B is or is not visible.

Render path

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

Both sources are sampled in one WebGL 1 fragment shader. No CPU pixel compositing occurs during normal rendering.

For video sources, the current decoded frame is uploaded with texImage2D() before drawing. Images are uploaded once and reused.

Preview modes

• Composite — final mixed result
• Layer A — transformed Layer A over the selected background
• Layer B — transformed Layer B over the selected background
• Mask — grayscale mask inspection

Background choices are transparent, black, white, and checkerboard.

Export

The app exports the current decoded frame as:

• PNG
• JPEG with adjustable quality

Available sizes:

• Current preview resolution
• 1920 × 1080
• 3840 × 2160
• Custom dimensions up to 8192 × 8192, subject to the GPU’s MAX_VIEWPORT_DIMS

The export is rendered at the selected dimensions rather than scaling a screenshot of the window. The currently selected background is included.

Tauri permissions are intentionally limited to:

• Native save dialog
• Binary file writing

If the Tauri global APIs are unavailable, the frontend falls back to a normal browser download.

Presets

• Ghost screen — slow animated screen blend through a soft linear mask
• Hard cut — near-zero-feather normal wipe
• Print mask — multiply blend through a checker pattern
• Signal noise — animated difference blend through value noise

Project structure

18-tauri-v1-texture-mixer/
├── package.json
├── README.md
├── V1-FOLDER-MAP.md
├── src/
│   ├── index.html
│   ├── styles.css
│   └── app.js
└── src-tauri/
    ├── Cargo.toml
    ├── build.rs
    ├── tauri.conf.json
    ├── icons/
    └── src/
        └── main.rs

Notes

• Media format support is determined by the operating-system WebView.
• Video audio is intentionally muted.
• Very large export dimensions may exceed the GPU viewport limit or available memory.
• Transparent JPEG exports are flattened by JPEG encoding; choose a black, white, or checker background for predictable JPEG output.
• This is a WebView/WebGL application. It does not create a native wgpu surface.

This site is open source. Improve this page.