Bilateral

Blurs while preserving edges based on spatial and intensity (color) differences.

Parameters

tex0 Texture: The input texture to be filtered. Default: The entire canvas
sigmaSpace Float: Spatial standard deviation for calculating spatial differences. Default: 0.0
sigmaColor Float: Intensity (color) standard deviation for calculating color differences. Default: 0.0

Example

let bird, bilateral;

async function setup() {
  createCanvas(600, 600, WEBGL); // Use WEBGL mode to use the shader
  bilateral = createFilterShader(fip.bilateral); // Load the shader
  bird = await loadImage("bird.jpg");
}

function draw() {
  background(0);
  imageMode(CENTER);
  image(bird, 0, 0, width, height);

  // Set the shader uniforms
  bilateral.setUniform('sigmaSpace', 1.0);
  bilateral.setUniform('sigmaColor', 0.8);

  // Apply the shader
  filter(bilateral);
}