Filters and ShaderToy

Clone and filter a source

Available filters

All filters are performed in real-time on GPU at every frame (e.g., at 60 FPS).

Depending on your hardware (graphics card in your computer), performance can be highly impacted by filtering (cause low FPS).

The main factors impacting performance are:

• resolution of the image (high resolution images are slow to process)
• two-pass filters are slower than single-pass filters
• larger values of parameters (e.g., radius, iterations, etc.) means higher GPU usage

Delay

Add a delay between time of input (original source) and output (rendering of clone).

Delay: can be up to 2 seconds (120 frames).

/!\ Hardware limitation of delay can be caused by limited RAM available in your graphics card: vimix will report a warning and limit the delay if the GPU does not have enough RAM to buffer the images.

Resample

Change the resolution of the input (original source) to a larger or smaller output (rendering of clone).

Double resolution Extend resolution and apply pixel interpolation with Catmull-rom technique (single-pass)

Half resolution Reduce resolution and apply optimized lowpass 2X downsampling filter (single-pass)

Quarter resolution Iterate Half resolution on the half resolution (two-pass)

Example of quarter-resolution resampling:

Blur

Gaussian Adjustable Gaussian filter (two-pass)

Radius: change the size of the Gaussian kernel (1.0 means half image height)

/!\ Large radius highly impacts GPU usage

Scattered Hashed blur (random dispatch of pixels inside an area) (single-pass)

Radius: change the size of the hashing area (1.0 means half image height)

Iterations: from 0.0 (1 iteration) to 1.0 (30 iterations) for extra shuffling of scattered pixels

Opening Scattered blur with morphological operator Opening (two-pass)

Radius: change the size of the circular structuring element (1.0 means half image height)

Closing Scattered blur with morphological operator Closing (two-pass)

Radius: change the size of the circular structuring element (1.0 means half image height)

Fast Speed-optimized [5 x 5] non-configurable Gaussian blur (single-pass)

Sharpen

Unsharp mask Sharpen image with unsharp masking technique (two-pass)

Amount: affects the size and intensity of the effect (how much to enhance the difference between the image and a blurred version).

Convolution Apply a [3 x 3] convolution kernel (single-pass)

Amount: affects the blending of sharpen image (how much to multiply image color with sharpen filter)

Edge Strengthen the contrast at the edges (detected by Laplacian) (single-pass)

Amount: affects the contrast enhancement (how much to add contrast, i.e., black at the edges in the image)

Black hat Adds the difference between the closing of the input image and input image (two-pass)

Radius: Size of the circular morphological operator (0.0 for [3x3] and 1.0 for [10x10] pixels)

White hat Add the difference between input image and Opening of the image (Top hat) (two-pass)

Radius: Size of the circular morphological operator (0.0 for [3x3] and 1.0 for [10x10] pixels)

Smooth and noise

Bilateral Convolution filter [7x7] kernel with bilinear smoothing (single-pass)

Factor: percent of intensity of effect (1.0 is 100%)

Kuwahara Apply Kuwahara filter to apply smoothing while preserving edge

Radius: size of the kuwahara kernel (1.0 for 10 pixels radius); produces a 'paint' effect with large radius.

Opening Performs a morphological opening (two-pass)

Radius: size of the circular structuring element (1.0 for 10 pixels diameter)

Closing Performs a morphological closing (two-pass)

Radius: size of the circular structuring element (1.0 for 10 pixels diameter)

Erosion Performs a morphological erosion (single-pass)

Radius: size of the circular structuring element (1.0 for 10 pixels diameter)

Dilation Performs a morphological dilation (single-pass)

Radius: size of the circular structuring element (1.0 for 10 pixels diameter)

Remove noise Use a specific smart denoising technique

Threshold: affects the amount of denoising.

Add noise Blends a dynamic pixel noise based on luminance (single-pass)

Amount: affects the amount of noise to add

Add grain Blends a dynamic 'film grain' like color noise (single-pass)

Amount: affects the amount of grain to add

Edge

Sobel Convolution filter with Sobel operator (single-pass, 2 masks)

Factor: Affects the luminance / contrast of the effect.

Freichen Convolution filter with Frei-Chen operator (single-pass, 9 masks)

Factor: Affects the luminance / contrast of the effect.

Threshold Scharr filter on a pre-smoothed image (two-pass)

Threshold: Affects the level of edge detection for producing black vs. white pixels.

Contour Subtract the luminance of the blurred image to the sharpened image (two-pass)

Amount: controls the radius of blurring (max 10% of image height).

Alpha

Chromakey Make pixels transparent based on their color Hue (also called green screen)

Threshold: level of discrimination between the pixel color and the key color.

Tolerance: how much to attenuate the key color (e.g., make borders less green)

Color: RGB of the color to consider transparent (e.g., green)

Lumakey Make pixels transparent based on their color Luma

Threshold: level of discrimination between the pixel and black.

Tolerance: how much to attenuate black background

Fill transparency Make transparent pixels opaque

Color: RGB of to blend using alpha (transparency) of the pixel (i.e., replace transparent by an opaque color background).

Custom filter with ShaderToy GLSL coding

Select 'Custom shader' in the Clone panel, and Open the editor:

Enter your code and clic 'Build' to recompile the shader:

ShaderToy compatibility

Only single-pass ShaderToy effects are supported (i.e., only one tab in ShaderToy).

The following shader inputs are compatible with vimix:

vec3      iResolution;           // viewport resolution (in pixels)
float     iTime;                 // shader playback time (in seconds)
float     iTimeDelta;            // render time (in seconds)
int       iFrame;                // shader playback frame
vec3      iChannelResolution[2]; // input channels resolution (in pixels)
sampler2D iChannel0;             // input channel 0 (texture).
sampler2D iChannel1;             // input channel 1 (texture).
vec4      iDate;                 // (year, month, day, time in seconds)
vec4      iMouse;                // simulate mouse input with sliders

Declare a uniform variable

In the ShaderEditor, if a variable is declared as a GLSL uniform, it becomes accessible from vimix source panel and from OSC.

Example:

 uniform float pix = 0.7;

vimix_uniform_customGLSL.trimmed.mp4

Example to create a source with code generating graphics:

1. Create a source with appropriate resolution and clone it;

2. Open the Shader code editor

3. Go to a ShaderToy filter page and copy the code:

4. Back in the shader editor of vimix, paste the code and hit 'Build' :

Chain multiple filters

Cloning a clone source allows applying a second level of filter on top of the first filtered clone. No limitation in the number of clones or the combination of filters.