︎ ︎ ︎



WORK IN PROGRESS
WIP TOOL (FILTR)
Welcome to the page where 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 using 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 makes it possible to safely and consistently build a stack of effects, where the output of one pass directly 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 of the control panel and added to the Stack Sequence — the main area where 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, cloning, toggling, 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.

  • 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

  • Rendering is performed sequentially: each module processes the result of the previous one. If an image is distorted in one pass, that distorted output is what the next pass receives.

  • The order of modules in the stack is critical, as it directly determines the order in which effects are applied. Use drag-and-drop to adjust the sequence, and toggle modules on/off to preview their impact.

  • 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.

  • To optimize performance, it is recommended to work with moderate canvas resolutions and only switch to high resolution before exporting the final output. Note that some effects (e.g., blur) may look slightly different depending on the canvas size.

  • Video support is under development. Depending on the video formats (as well as size and duration) and the browser used, slowdowns, freezes, and even crashes may occur.

Mask

Masks are special modules that control how strongly next effects in the stack are applied to different parts 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 of the mask 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 reads the red channel (R) of the mask texture to calculate these values. The mask can be active for a set number of passes (Passes Count), meaning it continues to influence multiple effects below it in the stack. The overall strength of the masking can be adjusted with the Mix Strength parameter, which blends between the unmasked and masked results.

Texture Wrapping Modes

Additionally, the some modules feature a “Texture Wrap” mode, which defined 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.



Change Log:


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