Supported Filters and Effects

import Foundation
import IMGLYEngine

@MainActor
func supportedFiltersAndEffects(engine: Engine) async throws {
  let scene = try engine.scene.create()

  let page = try engine.block.create(.page)
  try engine.block.setWidth(page, value: 800)
  try engine.block.setHeight(page, value: 600)
  try engine.block.appendChild(to: scene, child: page)

  // Resolve sample assets against the bundled asset base URL.
  let baseURL = try engine.guidesBaseURL
  let imageURL = baseURL.appendingPathComponent("ly.img.image/images/sample_1.jpg")

  let imageBlock = try engine.block.create(.graphic)
  try engine.block.setShape(imageBlock, shape: engine.block.createShape(.rect))
  try engine.block.setWidth(imageBlock, value: 600)
  try engine.block.setHeight(imageBlock, value: 450)
  try engine.block.setPositionX(imageBlock, value: 100)
  try engine.block.setPositionY(imageBlock, value: 75)
  try engine.block.appendChild(to: page, child: imageBlock)

  let imageFill = try engine.block.createFill(.image)
  try engine.block.setURL(imageFill, property: "fill/image/imageFileURI", value: imageURL)
  try engine.block.setFill(imageBlock, fill: imageFill)

  let canHaveEffects = try engine.block.supportsEffects(imageBlock)
  print("Block supports effects: \(canHaveEffects)")

  let duotoneEffect = try engine.block.createEffect(.duotoneFilter)
  try engine.block.appendEffect(imageBlock, effectID: duotoneEffect)

  try engine.block.setColor(
    duotoneEffect,
    property: "effect/duotone_filter/darkColor",
    color: .rgba(r: 0.02, g: 0.04, b: 0.12, a: 1.0),
  )
  try engine.block.setColor(
    duotoneEffect,
    property: "effect/duotone_filter/lightColor",
    color: .rgba(r: 0.5, g: 0.7, b: 1.0, a: 1.0),
  )
  try engine.block.setFloat(duotoneEffect, property: "effect/duotone_filter/intensity", value: 0.8)

  let appliedEffects = try engine.block.getEffects(imageBlock)
  print("Number of applied effects: \(appliedEffects.count)")

  for (index, effect) in appliedEffects.enumerated() {
    let effectType = try engine.block.getType(effect)
    print("Effect \(index): \(effectType)")
  }
}

CE.SDK provides 22 built-in effect types for visual transformations including color adjustments, blur effects, artistic filters, and distortion effects. This reference guide shows how to check effect support and add effects programmatically, followed by detailed property tables for each effect type.

This guide covers checking effect support on blocks, adding effects programmatically, and the complete list of available effect types with their properties. For detailed tutorials on configuring and combining multiple effects, see the Apply Filters and Effects guide.

Check Effect Support#

Before applying effects to a block, verify whether it supports them using supportsEffects(_:). Not all block types can have effects applied. The snippet below creates a graphic block with an image fill, then checks support.

let imageBlock = try engine.block.create(.graphic)
try engine.block.setShape(imageBlock, shape: engine.block.createShape(.rect))
try engine.block.setWidth(imageBlock, value: 600)
try engine.block.setHeight(imageBlock, value: 450)
try engine.block.setPositionX(imageBlock, value: 100)
try engine.block.setPositionY(imageBlock, value: 75)
try engine.block.appendChild(to: page, child: imageBlock)

let imageFill = try engine.block.createFill(.image)
try engine.block.setURL(imageFill, property: "fill/image/imageFileURI", value: imageURL)
try engine.block.setFill(imageBlock, fill: imageFill)

let canHaveEffects = try engine.block.supportsEffects(imageBlock)
print("Block supports effects: \(canHaveEffects)")

Effect support is available for:

• Graphic blocks — including those displaying images, videos, shapes, or solid colors
• Page blocks — to apply an effect to the whole page

Other block types, such as groups, return false.

Add an Effect#

Create an effect with createEffect(_:) using an EffectType value, then attach it to a block’s effect stack with appendEffect(_:effectID:).

let duotoneEffect = try engine.block.createEffect(.duotoneFilter)
try engine.block.appendEffect(imageBlock, effectID: duotoneEffect)

Configure Effect Properties#

Configure effect parameters using the typed setter methods. Property paths follow the format effect/{effect-type}/{property-name}.

try engine.block.setColor(
  duotoneEffect,
  property: "effect/duotone_filter/darkColor",
  color: .rgba(r: 0.02, g: 0.04, b: 0.12, a: 1.0),
)
try engine.block.setColor(
  duotoneEffect,
  property: "effect/duotone_filter/lightColor",
  color: .rgba(r: 0.5, g: 0.7, b: 1.0, a: 1.0),
)
try engine.block.setFloat(duotoneEffect, property: "effect/duotone_filter/intensity", value: 0.8)

CE.SDK provides typed setter methods for different parameter types:

• setFloat(_:property:value:) - For intensity, amount, and decimal values
• setInt(_:property:value:) - For discrete values like pixel sizes
• setString(_:property:value:) - For file URIs (LUT files)
• setBool(_:property:value:) - For enabling or disabling features
• setColor(_:property:color:) - For color values

Retrieve Applied Effects#

Use getEffects(_:) to retrieve all effects applied to a block, in the order they are applied.

let appliedEffects = try engine.block.getEffects(imageBlock)
print("Number of applied effects: \(appliedEffects.count)")

for (index, effect) in appliedEffects.enumerated() {
  let effectType = try engine.block.getType(effect)
  print("Effect \(index): \(effectType)")
}

Effects#

The following tables document all available effect types and their configurable properties.

Adjustments Type#

An effect block for basic image adjustments.

This section describes the properties available for the Adjustments Type (//ly.img.ubq/effect/adjustments) block type.

Cross Cut Type#

An effect that distorts the image with horizontal slices.

This section describes the properties available for the Cross Cut Type (//ly.img.ubq/effect/cross_cut) block type.

Dot Pattern Type#

An effect that displays the image using a dot matrix.

This section describes the properties available for the Dot Pattern Type (//ly.img.ubq/effect/dot_pattern) block type.

Duotone Filter Type#

An effect that applies a two-tone color mapping.

This section describes the properties available for the Duotone Filter Type (//ly.img.ubq/effect/duotone_filter) block type.

Extrude Blur Type#

An effect that applies a radial extrude blur.

This section describes the properties available for the Extrude Blur Type (//ly.img.ubq/effect/extrude_blur) block type.

Glow Type#

An effect that applies an artificial glow.

This section describes the properties available for the Glow Type (//ly.img.ubq/effect/glow) block type.

Green Screen Type#

An effect that replaces a specific color with transparency.

This section describes the properties available for the Green Screen Type (//ly.img.ubq/effect/green_screen) block type.

Half Tone Type#

An effect that overlays a halftone pattern.

This section describes the properties available for the Half Tone Type (//ly.img.ubq/effect/half_tone) block type.

Linocut Type#

An effect that overlays a linocut pattern.

This section describes the properties available for the Linocut Type (//ly.img.ubq/effect/linocut) block type.

Liquid Type#

An effect that applies a liquefy distortion.

This section describes the properties available for the Liquid Type (//ly.img.ubq/effect/liquid) block type.

Lut Filter Type#

An effect that applies a color lookup table (LUT).

This section describes the properties available for the Lut Filter Type (//ly.img.ubq/effect/lut_filter) block type.

Mirror Type#

An effect that mirrors the image along a central axis.

This section describes the properties available for the Mirror Type (//ly.img.ubq/effect/mirror) block type.

Outliner Type#

An effect that highlights the outlines in an image.

This section describes the properties available for the Outliner Type (//ly.img.ubq/effect/outliner) block type.

Pixelize Type#

An effect that pixelizes the image.

This section describes the properties available for the Pixelize Type (//ly.img.ubq/effect/pixelize) block type.

Posterize Type#

An effect that reduces the number of colors in the image.

This section describes the properties available for the Posterize Type (//ly.img.ubq/effect/posterize) block type.

Radial Pixel Type#

An effect that reduces the image into radial pixel rows.

This section describes the properties available for the Radial Pixel Type (//ly.img.ubq/effect/radial_pixel) block type.

Recolor Type#

An effect that replaces one color with another.

This section describes the properties available for the Recolor Type (//ly.img.ubq/effect/recolor) block type.

Sharpie Type#

Cartoon-like effect.

This section describes the properties available for the Sharpie Type (//ly.img.ubq/effect/sharpie) block type.

Shifter Type#

An effect that shifts individual color channels.

This section describes the properties available for the Shifter Type (//ly.img.ubq/effect/shifter) block type.

Tilt Shift Type#

An effect that applies a tilt-shift blur.

This section describes the properties available for the Tilt Shift Type (//ly.img.ubq/effect/tilt_shift) block type.

Tv Glitch Type#

An effect that mimics TV banding and distortion.

This section describes the properties available for the Tv Glitch Type (//ly.img.ubq/effect/tv_glitch) block type.

Vignette Type#

An effect that adds a vignette (darkened corners).

This section describes the properties available for the Vignette Type (//ly.img.ubq/effect/vignette) block type.

Next Steps#

• Apply Filters and Effects - Learn how to configure, combine, and manage multiple effects