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.
Note - our SkSL shader currently only takes float uniforms. We will be expanding this functionality soon.
On the Shaders attribute, right click > Add Shader > SkSL Shader.
Double click the SkSL Shader to load its Attribute Editor UI.
Copy and paste the example code below into the Shader Code attribute.
Rename the existing uniform n0 to Time. To do this, right click on the attribute and choose Rename.
Click the + button to create a new uniform. Choose Add Double 2 (float2).
Rename it Resolution.
Ensure all values are > 0.
You should see a blue flame appear on the Rectangle. You can now start to play with connecting Behaviours (Noise, Sound etc) into each of the inputs. Try connecting a Frame Behaviour to the Time uniform.😎
Delete the default n0 uniform. To do this, right click on the attribute and choose Delete Selected Attribute.
Use the + button to add a Color (half4) uniform.
Paste the code below into the Shader Code box.
Adjust the color values on the uniform.
half4 main(float2 fragCoord) {
return n0;
}
Cycling colour
Rename the existing n0 uniform to Time. To do this, right click on the attribute and choose Rename.
Paste the code below into the Shader Code box.
Scrub the Time uniform.
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);
}
Pixels
Rename the existing n0 uniform to Time. To do this, right click on the attribute and choose Rename.
Use the + button and choose Add Double 2 (float2) to add a new uniform.
Rename the uniform to Resolution.
Paste the code below into the Shader Code box.
Increase the uniform's values.
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, Time); // Scale the coordinate system by 10
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);
}
Fractal Brownian motion
Rename the existing n0 uniform to Time. To do this, right click on the attribute and choose Rename.
Use the + button and choose Add Double 2 (float2) to add a new uniform.
Rename the uniform to Resolution.
Paste the code below into the Shader Code box.
Increase the uniform's values.
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.);
}