︎ ︎ ︎ ︎
WORK IN PROGRESS
WIP TOOL (FILTR)
Here you can try out a new tool I'm currently developing. This is a work in progress, so you may encounter bugs, unfinished features, or quirky controls along the way — it’s all part of the process!

Your feedback, bug reports, or ideas for improvement would be greatly appreciated and can help refine the tool before its release. Feel free to share your thoughts with me using the contact form.


About the Tool:


FILTR (working title) is a web-based tool built with p5.js, designed for processing graphics (images or video) using a variety of WebGL shader filters. The tool also supports masks, which can be used to softly limit or modulate the influence of effects.

At its core, FILTR uses a classic rendering scheme with two framebuffers (ping-pong pipeline). In this process, two FBOs alternate roles on each step: one serves as the input (source), and the other as the output (target). Each module in the stack (pass) reads from the current FBO, applies the selected effect or mask, and writes the result into the other FBO. On the next step, their roles are swapped, and the sequence continues. This mechanism enables the safe and consistent construction of a stack of effects, where the output of one pass becomes the input for the next. The order of modules in the stack defines the order in which effects are applied.

Modules

Modules can be selected from the Module List in the Modules Section panel and added to the Stack Sequence. In this main area, modules appear as collapsible blocks with adjustable parameters. Each module can be reordered via drag-and-drop, toggled on/off, cloned, or removed.

Currently, 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. The system generates an auxiliary FBO for the mask, which is blended into the rendering pipeline for a specified number of passes, influencing the effects applied below it in the stack.

Key Features

  • A library of ready-made filter modules that can be quickly added to the Stack Sequence as adjustable blocks, with support for drag-and-drop reordering, and quick access buttons for toggling, cloning, resetting to defaults, and removal.

  • Media Pool — a built-in class for managing media files, supporting drag-and-drop import of any number of images or videos for use in modules.

  • 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 — a toggle for pausing and resuming animation on the canvas. Useful for working in a static mode when animation is not needed, and also for resource optimization: when paused, rendering is performed only when parameters are changed. Includes a Frame Seek parameter, which allows jumping to and previewing a specific frame in the animation.

  • A preset system that allows saving the current configuration of filters and parameters, as well as loading user-created presets.

  • An interactive canvas with configurable aspect ratios and resolution in the Canvas panel, along with flexible zoom controls via menu options and hotkeys.

Workflow Notes

  • The modules in the stack are executed in sequence, where each pass processes the result of the previous one. This makes the order of modules critical, as it directly defines how effects are layered and combined. Use drag-and-drop to rearrange the stack, and toggle modules on or off to preview their influence on the final result.

  • To optimize performance, it is recommended to work with moderate canvas resolutions during editing and only switch to a higher resolution before exporting the final output. When working with static images or when animation is not required, you can pause the canvas animation — this reduces energy consumption and makes it easier to preview and export graphics at high resolutions.

  • Some effects are resolution-dependent and may change when the canvas size is increased. For example, blur strength is measured in pixels, so the same settings can look much stronger or softer if the canvas is scaled up. For consistent results, it’s best to preview effects at the resolution intended for export.

  • Media files can be added via drag-and-drop onto the canvas (or with the Open Media Pool button). For consistent quality, it is recommended to use media with the same resolution and aspect ratio.

  • User media files are not persisted between sessions and are not embedded in custom presets. Presets keep only references (file names). After you reload the tool, re-import your media; once the referenced files are loaded, the preset will automatically pick them up.

  • Video can be imported into the tool and used in modules just like images — either as a source or as a texture for masking. However, this feature is still unstable: depending on the format, size, duration, and browser, video playback may lead to glitches such as slowdowns, stuttering, freezes, or even crashes.

Mask

Masks are special modules that control how strongly the following effects in the stack are applied to different areas of the image. A mask uses an image or video as a texture, where the brightness of each pixel determines the level of influence:

  • Black areas completely block the effect, preventing it from altering those regions.
  • White areas let the effect pass through fully, leaving the image unchanged in those regions.
  • Gray values create smooth transitions, partially blending the effect depending on brightness.

Technically, FILTR allows you to choose which channel of the mask texture is used to calculate its influence. The following options are available: Luma, Alpha, R, G, or B. By default, brightness (Luma) is often the most intuitive, but other channels can be selected for more specific control, depending on the content of the image or video.

When a mask is added to the stack, it affects all non-mask modules located below it for the number of passes specified in its Passes Count parameter. These affected modules are visually marked in the stack with the symbol (↳) next to their titles. If another mask appears further down in the stack while the first one is still active, the new mask takes over, and the previous one no longer influences subsequent layers.

If a mask module is disabled, its effect on the non-mask modules below it is also removed. The overall intensity of masking can be adjusted using the Mix Strength parameter, which blends between the unmasked and masked results.

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 Pass: Media File or Mask: Texture, 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.5–2.5× faster than real-time playback, depending on parameters.
  • Preserves correct color representation.
  • Uses adaptive bitrate, adjusting to image detail and motion; quality may fluctuate (occasional artifacts or brief stutter), but overall remains high with relatively small file sizes.
  • 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.



Change Log:


0.18b (October 7-8, 2025)
  • UI: reworked module layouts, moved control buttons for easier access
  • UI: added visual markers when using masks on modules
  • Mask Module: fixed the issue with multiple masks behavior
  • Minor changes (names/presets)

0.18 (October 2, 2025)
  • Canvas: added animation control module and improved status window
  • Export: new class for exporting graphics (MP4 video, frame sequence, single frame)
  • UI: updated tool menu, reorganized into functional blocks, and positioned on both sides of the canvas

0.17b (September 30, 2025)
  • Presets: updated parameter application logic
  • Presets: added export class
  • Minor fixes

0.17a (September 17, 2025)
  • Mask Module: added option to use various channels as mask sources
  • Updated assets: symbols now come with transparent backgrounds

0.17 (September 15, 2025)
  • Released as a WIP tool

0.10-0.16 (July 14 - September 14, 2025)
  • Initial prototype development
2025 ︎︎︎ ANATOLII BABII