SkSL Shader

概要

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

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

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

UI

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

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

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

入力シェーダーをサンプリングするには inputShader.eval(p) を使用します。ここで inputShader は uniform の名前、p はサンプリングする座標です。

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

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

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

Examples

Create > Demo Scenes > Custom Shaders and Filters メニューから複数の例をロードできます。

Rectangle を作成します。
Attribute Editor の Fill タブで、Shaders 属性を右クリック > Add Shader > SkSL Shader を選択します。
SkSL Shader をダブルクリックして Attribute Editor UI をロードします。
n0 uniform を右クリックし、Rename… を選択して time に名前変更します。
デフォルトの Shader Code を以下のサンプルコードに置き換えます。

Rectangle に青い炎が表示されます。Frame Behaviour を time uniform に接続してみてください。

// Created by Anatole Duprat - XT95/2013// License Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.float noise(vec3 p) //Thx to Las^Mercury{  vec3 i = floor(p);  vec4 a = dot(i, vec3(1., 57., 21.)) + vec4(0., 57., 21., 78.);  vec3 f = cos((p-i)*acos(-1.))*(-.5)+.5;  a = mix(sin(cos(a)*a),sin(cos(1.+a)*(1.+a)), f.x);  a.xy = mix(a.xz, a.yw, f.y);  return mix(a.x, a.y, f.z);}float sphere(vec3 p, vec4 spr){  return length(spr.xyz-p) - spr.w;}float flame(vec3 p){  float d = sphere(p*vec3(1.,.3,1.), vec4(.0,-1.,.0,1.));  return d + (noise(p+vec3(.0,time*0.1,.0)) + noise(p*3.)*.5)*.25*(p.y) ;}float scene(vec3 p){  return min(100.-length(p) , abs(flame(p)) );}vec4 raymarch(vec3 org, vec3 dir){  float d = 0.0, glow = 0.0, eps = 0.02;  vec3  p = org;  bool glowed = false;    for(int i=0; i<64; i++)  {    d = scene(p) + eps;    p += d * dir;    if( d>eps )    {      if(flame(p) < .0)        glowed=true;      if(glowed)             glow = float(i)/64.;    }  }  return vec4(p,glow);}half4 main(vec2 fragCoord){  vec2 uv = 4.0 * fragCoord.xy / resolution.xy;  uv.x *= resolution.x / resolution.y;    vec3 org = vec3(0., -4.5, 4.);  vec3 dir = normalize(vec3(uv.x*1.6, -uv.y, -1.5));    vec4 p = raymarch(org, dir);  float glow = p.w;    half4 col = mix(half4(1.,.5,.1,1.), half4(0.1,.5,1.,1.), p.y*.02+.4);    return half4(mix(half4(0.), col, pow(glow*2.,4.)));}

Flat colour

デフォルトの n0 uniform を削除します。属性を右クリックして Delete Selected Attribute を選択します。
+ ボタンを使用して Color (half4) uniform を追加します。
以下のコードを Shader Code 入力に貼り付けます：
```
 half4 main(float2 fragCoord) { return n0; }
```
uniform 上の色の値を調整します。

Cycling colour

既存の n0 uniform を time に名前変更します。属性を右クリックして Rename… を選択します。

以下のコードを Shader Code 入力に貼り付けます：

 vec3 colorA = vec3(0.149,0.141,0.912); vec3 colorB = vec3(1.000,0.833,0.224); half4 main(vec2 fragCoord) { vec3 color = vec3(0.0); float percent = abs(sin(time*.01)); // Mix uses percent (a value from 0–1) to... // ...mix the two colors color = mix(colorA, colorB, percent); return half4(color,1.0); }

time uniform をスクラブします。

Pixels

既存の n0 uniform を scale に名前変更します。属性を右クリックして Rename… を選択します。

以下のコードを Shader Code 入力に貼り付けます：

 float random (vec2 uv) { return fract(sin(dot(uv.xy , vec2(12.9898,78.233))) * 43758.5453); } half4 main(vec2 fragCoord) { vec2 uv = fragCoord / resolution.xy; uv *= max(1.0, scale); // Scale the coordinate vec2 ipos = floor(uv); // get the integer coords vec2 fpos = fract(uv); // get the fractional coords  // Assign a random value based on the integer coord vec3 color = vec3(random(ipos)); return half4(color,1.0); }

uniform の値を増やします。

Fractal Brownian motion

既存の n0 uniform を time に名前変更します。属性を右クリックして Rename… を選択します。

以下のコードを Shader Code 入力に貼り付けます：

 float random (vec2 uv) {     return fract(sin(dot(uv.xy, vec2(12.9898,78.233))) * 43758.5453123); } // Based on Morgan McGuire @morgan3d // https://www.shadertoy.com/view/4dS3Wd float noise (vec2 uv) {     vec2 i = floor(uv);     // Four corners in 2D of a tile     vec2 f = fract(uv);     float a = random(i);     float b = random(i + vec2(1.0, 0.0));     float c = random(i + vec2(0.0, 1.0));     float d = random(i + vec2(1.0, 1.0));     vec2 u = (f * f * (3.0 - 2.0 * f));     return mix(a, b, u.x) + (c - a) * u.y * (1.0 - u.x) +         (d - b) * u.x * u.y; } float fbm (vec2 uv) {     float v = 0.0;     float a = 0.5;     vec2 shift = vec2(100.0);     // Rotate to reduce axial bias     float2x2 rot = float2x2(cos(0.5), sin(0.5), -sin(0.5), cos(0.50));     for (int i = 0; i < 5; ++i) {         v += a * noise(uv);         uv = rot * uv * 2.0 + shift;         a *= 0.5;     }     return v; } half4 main(vec2 fragCoord) {     float2 uv = fragCoord.xy/resolution.xy*3.;     // uv += uv * abs(sin(time*0.1)*3.0);     vec3 color = vec3(0.0);vec2 q = vec2(0.);     q.x = fbm( uv + 0.00*time);     q.y = fbm( uv + vec2(1.0));vec2 r = vec2(0.);     r.x = fbm( uv + 1.0*q + vec2(1.7,9.2)+ 0.15*time );     r.y = fbm( uv + 1.0*q + vec2(8.3,2.8)+ 0.126*time);     float f = fbm(uv+r);     color = mix(vec3(0.101961,0.619608,0.666667), vec3(0.666667,0.666667,0.498039),         clamp((f*f)*4.0,0.0,1.0));     color = mix(color,     vec3(0,0,0.164706), clamp(length(q),0.0,1.0));     color = mix(color,vec3(0.666667,1,1),clamp(length(r.x),0.0,1.0));     return half4((f*f*f+.6*f*f+.5*f)*color,1.); }

uniform の値を増やします。