Skip to main content

SkSL Filter

Intro​

Write custom filters in SkSL ("Skia Shading Language").

Example SkSL Filters. Photo by Davies Designs Studio on Unsplash.

SkSL ("Skia Shading Language") is a variant of GLSL which is used as Skia's internal shading language. With some minor modifications, GLSL code from sites like https://www.shadertoy.com/ can be converted for use in Cavalry.

For more detail on the differences between GLSL and SkSL see the Skia documentation.

Integer Uniforms

The SkSL Filter does not accept integer uniforms, please use floats instead.

UI​

Blend Mode - See Blend Modes.

Filter Code - Write/paste/edit SkSL code here.

Padding - Where a Filter produces pixels that fall outside of the original Shape's boundary this can be used to expand it.

Inputs - Click the + button to to choose a uniform type and add one. Uniforms can be renamed by right clicking on an attribute and choosing Rename.... This name can then be used as a variable in the Filter Code.

Built in Uniforms​

Built in Uniforms can be added to the Filter Code:

Required

  • layer - call eval(float2) on this shader object to sample the Shape. uniform shader layer; must be included at the top of the Filter's code.

Optional

  • resolution - the size of the Shape being rendered which can be used to produce Filters that scale to their contents. See the example in Create > Demo Scenes > Custom Shaders and Filters > Emboss Filter.
Examples

See the following examples in Create > Demo Scenes > Custom Shaders and Filters > :

  • Emboss Filter
  • Green Screen Filter
  • Scatter Filter
Example
  1. Create a Rectangle.
  2. Create an SkSL Filter.
  3. Paste the below into the Filter Code:
uniform shader layer;

half random(half2 co) {
    return fract(sin(dot(co, half2(12.9898, 78.233))) * 43758.5453);
}

half2 randomOffset(half2 p) {
    half angle = random(p) * 6.283185;  
    half radius = random(p + half2(1.0, 1.0)) * n0;
    return half2(cos(angle) * radius, sin(angle) * radius);
}

half4 main(float2 p) {
    half2 baseOffset = randomOffset(p);
    return layer.eval(p + baseOffset);
}
  1. Connect skslFilter.id→rectangle.filters.
  2. Increase the SkSL Filter's n0 and Padding attributes.

This will create a Scatter effect