SkSL Shader

簡介

SkSL（“Skia Shading Language”）是 GLSL 的一種變體，用作 Skia 的內部著色語言。只需進行少量修改，來自 https://www.shadertoy.com/ 等站點的 GLSL 程式碼即可轉換供 Cavalry 使用。

有關 GLSL 和 SkSL 之間差異的更多詳細資訊，請參閱 Skia documentation。

SkSL Shader 不接受整數 uniform，請改用浮點數。

UI

Blend Mode - 參見 Blend Modes。

Shader Code - 在此處貼上/編輯 SkSL 程式碼。

Inputs - 點擊 + 按鈕選擇 uniform 類型並新增。Uniform 可以透過右鍵點擊屬性並選擇 Rename… 來重新命名。此名稱可在 SkSL Code 中用作變數。

要取樣輸入 shader，請使用 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

內建 Uniforms 可以新增到 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 的值。