Filters

Our filters use Lookup Tables (LUTs), offering precise control over the color grading process. LUTs are widely used in the cinematic industry and can be exported from tools like Adobe Photoshop.

Adding Filters

Before applying a filter to a clip, you must first add it to the Library:

import { Engine } from "@rendley/sdk";

const libraryFilterId = await Engine.getInstance().getLibrary().addFilter({
  id: "randomId",
  name: "filterName",
  lutUrl: "/path/to/lut.jpeg",
  serializable: true,
});

Once added to the Library, the filter can be applied to any clip by referencing its ID:

clip.addFilter(libraryFilterId);

Runnable example

// Load a photo and apply the first filter from Rendley's public filter pack.
const mediaId = await Engine.getInstance()
  .getLibrary()
  .addMedia(
    "https://images.pexels.com/photos/24253539/pexels-photo-24253539/free-photo-of-a-bridge-over-a-river-with-a-city-in-the-background.jpeg?auto=compress&cs=tinysrgb&w=1600",
  );

const clip = await layer.addClip({
  mediaDataId: mediaId,
  startTime: 0,
  duration: 5,
});
clip.style.setPosition(960, 540);
clip.style.setScale(0.6, 0.6);

// Fetch the filter manifest and use the first entry.
const filtersRoot = "https://cdn.rendleysdk.com/sdk/assets/filters/";
const manifest = await fetch(filtersRoot + "filters.json").then((r) =>
  r.json(),
);
const first = manifest.filters[0];

const filterId = await Engine.getInstance()
  .getLibrary()
  .addFilter({
    id: first.id,
    name: first.name,
    lutUrl: filtersRoot + first.path + "lut.png",
    serializable: true,
  });

clip.addFilter(filterId);

Full runnable example

import { Engine } from "@rendley/sdk";

await Engine.getInstance().init({
  license: {
    licenseName: "DOCS_PLAYGROUND",
    licenseKey: "DOCS_KEY",
  },
  display: {
    width: 1920,
    height: 1080,
    backgroundColor: "#000000",
    view: document.getElementById("rendley-canvas") as HTMLCanvasElement,
  },
});

const layer = Engine.getInstance().getTimeline().createLayer();

// Load a photo and apply the first filter from Rendley's public filter pack.
const mediaId = await Engine.getInstance()
  .getLibrary()
  .addMedia(
    "https://images.pexels.com/photos/24253539/pexels-photo-24253539/free-photo-of-a-bridge-over-a-river-with-a-city-in-the-background.jpeg?auto=compress&cs=tinysrgb&w=1600",
  );

const clip = await layer.addClip({
  mediaDataId: mediaId,
  startTime: 0,
  duration: 5,
});
clip.style.setPosition(960, 540);
clip.style.setScale(0.6, 0.6);

// Fetch the filter manifest and use the first entry.
const filtersRoot = "https://cdn.rendleysdk.com/sdk/assets/filters/";
const manifest = await fetch(filtersRoot + "filters.json").then((r) =>
  r.json(),
);
const first = manifest.filters[0];

const filterId = await Engine.getInstance()
  .getLibrary()
  .addFilter({
    id: first.id,
    name: first.name,
    lutUrl: filtersRoot + first.path + "lut.png",
    serializable: true,
  });

clip.addFilter(filterId);

await Engine.getInstance().getTimeline().play();

Removing Filters

removeFilter takes the filter instance id (returned by addFilter on the clip or via getFilters()[index].getId()):

const instanceId = clip.getFilters()[0].getId();
clip.removeFilter(instanceId);

Adjust Filter Intensity

To adjust the strength of the applied filter, use the setIntensity method:

const filter = clip.getFilters()[0];
filter.setIntensity(0.5);

Filter intensity is animatable through the Property Animator using the filter:{instanceId}:intensity track key.