コンテンツにスキップ
Cavalry 中文文档

SkSL Filter

概要

「概要」という見出しのセクション

SkSL（“Skia Shading Language”）でカスタムフィルターを作成します。

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

SkSL（“Skia Shading Language”）は GLSL の派生言語で、Skia の内部シェーディング言語として使用されています。わずかな修正で、https://www.shadertoy.com/ などのサイトの GLSL コードを Cavalry 用に変換できます。

GLSL と SkSL の違いの詳細については、Skia documentation を参照してください。

SkSL Filter は整数 uniform を受け付けません。代わりに float を使用してください。

UI

「UI」という見出しのセクション

Blend Mode - Blend Modes を参照してください。

Filter Code - ここに SkSL コードを記述/貼り付け/編集します。

Padding - Filter が元の Shape の境界外にピクセルを生成する場合に、それを拡張するために使用します。

Inputs - + ボタンをクリックして uniform タイプを選択し、追加します。Uniform は、属性を右クリックして Rename… を選択することで名前を変更できます。この名前は Filter Code で変数として使用できます。

Export to Plugin

「Export to Plugin」という見出しのセクション

Export to Plugin... をクリックするとエクスポートウィンドウが開き、Layer を Plugin としてエクスポートできます。

Author - definitions.json の "author" キーに設定する文字列。このフィールドはセッション間で記憶されます。

Plugin Name - strings.json の "niceName" キーに設定する文字列

Encrypt - チェック時、エクスポートされたファイルは暗号化されます。

Export… - Export をクリックしてファイルのエクスポート先を選択します。Author と Plugin Name フィールドは必須です。

エクスポートされたファイルにはいくつかの調整が必要になる可能性があります。例えば、アイコンやツールチップなどの追加が必要な場合があります。

Built in Uniforms

「Built in Uniforms」という見出しのセクション

組み込み Uniform を Filter Code に追加できます：

必須

  • layer - このシェーダーオブジェクトに対して eval(float2) を呼び出して Shape をサンプリングします。Filter コードの先頭に uniform shader layer; を含める必要があります。

オプション

  • resolution - レンダリングされる Shape のサイズで、コンテンツに合わせてスケーリングする Filters を生成するために使用できます。Create > Demo Scenes > Custom Shaders and Filters > Emboss Filter の例を参照してください。

Create > Demo Scenes > Custom Shaders and Filters > で以下の例を確認してください：

  • Emboss Filter
  • Green Screen Filter
  • Scatter Filter
  1. Rectangle を作成します。
  2. SkSL Filter を作成します。
  3. 以下を 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. skslFilter.id→rectangle.filters を接続します。
  2. SkSL Filter の n0 と Padding 属性を増やします。

これで Scatter エフェクトが作成されます