FILTR Tool

About the Tool:

FILTR is a web-based tool built with p5.js and WebGL, designed for processing images and video using a modular stack of GPU-accelerated shader effects. It allows you to build complex visual pipelines by combining passes, masks, and animated parameters in a clear, structured workflow.

At its core, FILTR uses a classic ping-pong framebuffer pipeline with two framebuffers (FBOs). Each module in the stack reads from the current framebuffer, applies its effect or mask, and writes the result into the other framebuffer. On the next step, the buffers swap roles, and the process continues. This approach ensures a stable and predictable stack, where the output of one module becomes the input for the next, and the order of modules fully defines the final result.

Modules

Modules can be selected from the Module List in the Modules Section panel and added to the Module Stack. The Module Stack (left) is where you organize the processing sequence: add modules, reorder them via drag-and-drop, toggle visibility, clone, or remove items.

To edit parameters, select a module in the Module Stack — its settings appear in the Module Controls panel (right). This panel shows only the controls for the currently selected module and includes a Reset button to restore that module’s default settings.

There are two types of modules:

• Pass — the main type, responsible for generating or processing effects. Each pass takes input from the previous FBO, applies a shader operation, and writes the result into the next FBO.
• Mask — a special type of module that uses an image or video as a texture mask. A mask is rendered into its own offscreen buffer and used to control how strongly the modules assigned to that mask affect different areas of the image.

Key Features

• Modular stack workflow — a growing library of ready-made modules that cover common image/video processing tasks and building blocks. Modules can be quickly added to a top-to-bottom Module Stack, where each module processes the result of the previous one — so the stack order defines the final output. Supports drag-and-drop reordering and quick actions for toggling, cloning, and removal, while module parameters and resets are handled in the Module Controls panel.
• Module Controls — select any module in the stack to edit its parameters in a dedicated right-side panel, with a Reset button to restore defaults for the selected module.
• Masks — masks use an image or video to generate a per-pixel influence map that controls how strongly the assigned modules are applied across the canvas. Masks can group modules directly in the stack via drag-and-drop, similar to grouping in design tools. Grouped modules are visually marked with a purple indicator and a counter for clarity, and the UI highlights valid drop positions while dragging.
• Media Pool — manage media files and import any number of images (and supported videos) via drag-and-drop for use as sources or masks in compatible modules. Safari: video sources are currently not supported.
• Export System — a dedicated class for capturing output from the canvas, supporting multiple export formats: rendered video (MP4), frame sequences (PNG, JPG, WEBP), and single still frames. Includes convenient controls and statistics for monitoring the export process.
• Animation Control — pause/resume animation. Pause switches FILTR to “render-on-change” mode: no continuous redraw, only updates on parameter changes. This reduces CPU/GPU usage and energy consumption, and is ideal for static work or high-resolution preview/export. Includes Frame Seek for previewing a specific frame.
• Presets — save and load the full stack configuration and parameters. User media files are not persisted between sessions and are not embedded in presets. Presets store only file references (names) and reconnect once matching files are re-imported.
• Canvas — An interactive canvas with configurable aspect ratios and resolution in the Canvas panel, along with flexible zoom controls via menu options and hotkeys.

Mask

Masks are special modules that provide a per-pixel influence map (a weight in the 0–1 range) for the modules assigned to that mask. For every affected module, the mask is used as a blend factor between the unmodified input and the module’s result:

• Black (0) — the module has no influence in that area (the input passes through).
• White (1) — the module is applied fully.
• Gray values — partial influence with smooth transitions.

This makes masks work as a general “modulator” for the whole module output. For distortion and processing effects, it scales the strength of the effect per pixel, and for modules that introduce or composite imagery, it also controls how strongly that module contributes to the final image in each area (including transparency/visibility when the module output contains alpha).

Technically, FILTR lets you choose which channel of the mask texture is used to compute the influence map: Luma, Alpha, R, G, or B. The overall masking intensity can be adjusted with the Mask Threshold parameter, which remaps/blends the mask values to make the influence softer or more pronounced.

Texture Wrapping Modes

Additionally, some modules feature a “Texture Wrap” mode, which defines how an image or video behaves when it is scaled or when its texture coordinates extend beyond the original bounds. This setting is especially important in modules like Fill: Media File or Mask: Media File, where the texture may not fully match the canvas size.

FILTR supports four modes:

• CLAMP – stretches the edge pixels of the texture outward to fill the scaled area. This avoids hard borders but can create visible “smearing” at the edges.
• REPEAT – tiles the texture repeatedly in both directions. Works well for patterns or when seamless repetition is desired.
• MIRROR – similar to Repeat, but every alternate tile is flipped like a mirror, producing a more continuous tiling effect.
• TRANSPARENT – leaves areas outside the original texture empty (transparent). This mode is useful when you want to preserve the texture’s native size during scaling without stretching or repeating, while still keeping alpha for compositing.

Video Export (MP4)

FILTR supports exporting animations as MP4 video files with two encoder options: WebCodecs and H.264 Encoder. Both are available in Chrome, Firefox, and Edge, while Safari supports only H.264. Each option has its own strengths and limitations:

WebCodecs:

• Fast — rendering usually runs 1.25–2.5× faster than real-time playback, depending on parameters.
• Preserves correct color representation.
• Image quality can fluctuate depending on codec level support and scene complexity, even with the maximum bitrate set. Very detailed or fast-moving content may show brief softness and blocky “square” artifacts between keyframes (around every 10 frames).
• Limited by maximum frame size, typically up to 4K, but the exact cap depends on your hardware/drivers and the browser’s current state/load, and it can change during a session.
• Not supported in Safari.

H.264 Encoder:

• Slow — rendering typically runs at 0.2× or less of real-time playback speed.
• Color reproduction may differ visually (slight desaturation) due to color space differences
• Bitrate is controlled by compression settings (sweet spot: 18–22). At minimal compression, quality is excellent, but file sizes can be very large.
• Virtually no frame size limitations, making it suitable for high-resolution exports
• Supported in all major browsers, including Safari.

Your feedback, bug reports, or ideas for improvement would be greatly appreciated. Feel free to share your thoughts with me using the contact form.