1. 版本
kanzi默认支持Opengl ES 2.0,在qnx平台可以支持到ES 3.0
2. 着色器
kanzi只支持【顶点着色器】和【片段着色器】
3. kanzi studio
无法直接使用shader,需要通过画刷和材质间接使用
- 在【普通节点】上设置背景画刷-【材质画刷】
- 在【材质画刷】上设置材质-【材质】
- 在【材质】上设置材质类型-【材质类型】
- 【材质类型】里有顶点和片段着色器
4. shader内容
参考:shader系列教程 - shader tutorial series
kzPosition等是kanzi自动映射好的,本质是节点的4个顶点等
修改颜色
修改透明度
需要先设置【混合模式】
- 【材质类型】提供了【混合模式】Input
- 【材质】里设置为Mixed
4分之一圆
另一种实现方法
precision mediump float;
varying mediump vec2 vTexCoord;
uniform mediump vec2 u_resolution;
float circleshape(vec2 position, float radius)
{
return step(radius, length(position));
}
void main()
{
vec2 position = vTexCoord;
vec3 color = vec3(0.0);
float circle = circleshape(position, 0.5);
color = vec3(circle);
gl_FragColor = vec4(color, 1.0);
}
中心全圆
另一种实现方法
precision mediump float;
varying mediump vec2 vTexCoord;
uniform mediump vec2 u_resolution;
float circleshape(vec2 position, float radius)
{
return step(radius, length(position-0.5));
}
void main()
{
vec2 position = vTexCoord;
vec3 color = vec3(0.0);
float circle = circleshape(position, 0.2);
color = vec3(circle);
gl_FragColor = vec4(color, 1.0);
}
方形
precision mediump float;
varying mediump vec2 vTexCoord;
uniform mediump vec2 u_resolution;
float rectshape(vec2 position, vec2 scale)
{
scale = vec2(0.5) - scale * 0.5;
vec2 shaper = vec2(step(scale.x, position.x), step(scale.y, position.y));
shaper *= vec2(step(scale.x, 1.0 - position.x), step(scale.y, 1.0 - position.y));
return shaper.x * shaper.y;
}
void main()
{
vec2 position = vTexCoord;
vec3 color = vec3(0.0);
float rectangle = rectshape(position, vec2(0.3, 0.3));
color = vec3(rectangle);
gl_FragColor = vec4(color, 1.0);
}
多边形
precision mediump float;
varying mediump vec2 vTexCoord;
uniform mediump vec2 u_resolution;
const float PI = 3.1415926535;
float polygonshape(vec2 position, float radius, float sides)
{
position = position * 2.0 - 1.0;
float angle = atan(position.x, position.y);
float slice = PI * 2.0 / sides;
return step(radius, cos(floor(0.5 + angle / slice) * slice - angle) * length(position));
}
void main()
{
vec2 position = vTexCoord;
vec3 color = vec3(0.0);
float polygon = polygonshape(position, 0.5, 6.0);
color = vec3(polygon);
gl_FragColor = vec4(color, 1.0);
}
位移
precision mediump float;
varying mediump vec2 vTexCoord;
uniform mediump vec2 u_resolution;
float circleshape(vec2 position, float radius)
{
return step(radius, length(position-0.5));
}
void main()
{
vec2 coord = vTexCoord;
vec3 color = vec3(0.0);
vec2 translate = vec2(1.0, -1.0);
coord += translate * 0.5;
float circle = circleshape(coord, 0.2);
color = vec3(circle);
gl_FragColor = vec4(color, 1.0);
}
正弦余弦
precision mediump float;
varying mediump vec2 vTexCoord;
uniform mediump vec2 u_resolution;
uniform float u_time;
float circleshape(vec2 position, float radius)
{
return step(radius, length(position-0.5));
}
void main()
{
vec2 coord = vTexCoord;
vec3 color = vec3(0.0);
vec2 translate = vec2(sin(u_time / 10.0), cos(u_time));
coord += translate * 0.5;
float circle = circleshape(coord, 0.2);
color = vec3(circle);
gl_FragColor = vec4(color, 1.0);
}
缩放
precision mediump float;
varying mediump vec2 vTexCoord;
uniform mediump vec2 u_resolution;
uniform float u_time;
mat2 scale(vec2 scale)
{
return mat2(scale.x, 0.0, 0.0, scale.y);
}
float circleshape(vec2 position, float radius)
{
return step(radius, length(position-0.5));
}
void main()
{
vec2 coord = vTexCoord;
vec3 color = vec3(0.0);
coord -= vec2(0.5);
coord = scale(vec2(2.0 + sin(u_time), 2.0 + sin(u_time))) * coord;
coord += vec2(0.5);
float circle = circleshape(coord, 0.5);
color = vec3(circle);
gl_FragColor = vec4(color, 1.0);
}
旋转
precision mediump float;
varying mediump vec2 vTexCoord;
uniform mediump vec2 u_resolution;
uniform float u_time;
float rectshape(vec2 position, vec2 scale)
{
scale = vec2(0.5) - scale * 0.5;
vec2 shaper = vec2(step(scale.x, position.x), step(scale.y, position.y));
shaper *= vec2(step(scale.x, 1.0 - position.x), step(scale.y, 1.0 - position.y));
return shaper.x * shaper.y;
}
mat2 rotate(float angle){
return mat2(cos(angle), -sin(angle), sin(angle), cos(angle));
}
void main()
{
vec2 coord = vTexCoord;
vec3 color = vec3(0.0);
coord -= vec2(0.5);
coord = rotate(sin(u_time)) * coord;
coord += vec2(0.5);
float rectangle = rectshape(coord, vec2(0.3, 0.3));
color = vec3(rectangle);
gl_FragColor = vec4(color, 1.0);
}
warp grid
precision mediump float;
varying mediump vec2 vTexCoord;
uniform mediump vec2 u_resolution;
uniform float u_time;
void main()
{
vec2 coord = vTexCoord;
vec3 color = vec3(0.0);
color += sin(coord.x * cos(u_time / 60.0) * 60.0) + sin(coord.y * cos(u_time / 60.0) * 10.0);
color += cos(coord.y * sin(u_time / 30.0) * 10.0) + cos(coord.x * sin(u_time / 20.0) * 10.0);
color += sin(u_time / 10.0) * 0.5;
gl_FragColor = vec4(color, 1.0);
}
water color
precision mediump float;
varying mediump vec2 vTexCoord;
uniform mediump vec2 u_resolution;
uniform float u_time;
void main()
{
vec2 coord = 6.0 * vTexCoord;
vec3 color = vec3(0.0);
for(int n = 1; n < 8; n++){
float i = float(n);
coord += vec2(0.7 / i * sin(i * coord.y + u_time + 0.3*i) + 0.8, 0.4 / i * sin(coord.x + u_time + 0.3 * i) + 1.6);
}
//coord *= vec2(0.7 / sin(coord.y + u_time + 0.3) + 0.8, 0.4 / sin(coord.x + u_time + 0.3) + 1.6);
color = vec3(0.5 * sin(coord.x) + 0.5, 0.5 * sin(coord.y) + 0.5, sin(coord.x + coord.y));
gl_FragColor = vec4(color, 1.0);
}
water color2
precision mediump float;
varying mediump vec2 vTexCoord;
uniform mediump vec2 u_resolution;
uniform float u_time;
const int AMOUNT = 12;
void main()
{
vec2 coord = 20.0 * (vTexCoord - 0.5);
vec3 color = vec3(0.0);
float len;
for(int i = 0; i < AMOUNT; i++){
len = length(vec2(coord.x, coord.y));
coord.x = coord.x - cos(coord.y + sin(len)) + cos(u_time / 9.0);
coord.y = coord.y - sin(coord.x + cos(len)) + sin(u_time / 12.0);
}
//coord *= vec2(0.7 / sin(coord.y + u_time + 0.3) + 0.8, 0.4 / sin(coord.x + u_time + 0.3) + 1.6);
color = vec3(0.5 * sin(coord.x) + 0.5, 0.5 * sin(coord.y) + 0.5, sin(coord.x + coord.y));
gl_FragColor = vec4(cos(len * 2.0), cos(len * 3.0), cos(len * 1.0), 1.0);
}
warp line
precision mediump float;
varying mediump vec2 vTexCoord;
uniform mediump vec2 u_resolution;
uniform float u_time;
void main()
{
vec2 coord = vTexCoord;
float color = 0.0;
color += sin(coord.x * 50.0 + cos(u_time + coord.y * 10.0 + sin(coord.x * 50.0 + u_time * 2.0))) * 2.0;
color += cos(coord.x * 20.0 + sin(u_time + coord.y * 10.0 + cos(coord.x * 50.0 + u_time * 2.0))) * 2.0;
color += sin(coord.x * 30.0 + cos(u_time + coord.y * 10.0 + sin(coord.x * 50.0 + u_time * 2.0))) * 2.0;
color += cos(coord.x * 10.0 + sin(u_time + coord.y * 10.0 + cos(coord.x * 50.0 + u_time * 2.0))) * 2.0;
gl_FragColor = vec4(color + coord.x, color + coord.y, color, 1.0);
}
wave draw lines
precision mediump float;
varying mediump vec2 vTexCoord;
uniform float u_time;
void main()
{
vec2 coord = vTexCoord;
float color = 0.0;
color += sin(coord.x * 6.0 + sin(u_time + coord.y * 90.0 + cos(coord.x * 30.0 + u_time * 2.0))) * 0.5;
gl_FragColor = vec4(color + coord.x, color + coord.x, color, 1.0);
}
正态分布
precision mediump float;
varying mediump vec2 vTexCoord;
uniform float u_time;
// x [-5.0~5.0]
float gaussian(float x, float mean, float stddev) {
const float pi = 3.14159265358979323846; // 定义pi常量
// 计算高斯分布的概率密度函数
return exp(-1.0 * pow(x - mean, 2.0) / (2.0 * pow(stddev, 2.0))) / sqrt(2.0 * pi * pow(stddev, 2.0));
}
float getK(float index, float size)
{
float k = index / size;
k = gaussian(k * 20.0 * 0.5-5.0, 0.0, 1.0) / 2.0;
return k;
}
void main()
{
float range = 50.0;
vec2 coord = range * vTexCoord;
float color = 0.0;
// for(float i=0.0;i<coord.x;i++){
color = getK(coord.x+sin(u_time)*10.0, range);
color = step(color, vTexCoord.y);
// }
gl_FragColor = vec4(color, color, color, 1.0);
}
修改方差的效果
float getK(float index, float size)
{
float k = index / size;
k = gaussian(k * 20.0 * 0.5-5.0, 0.0, 1.0+sin(u_time) / 2.0) / 2.0;
return k;
}
rainbow swirl 彩虹漩涡
precision mediump float;
varying mediump vec2 vTexCoord;
uniform float u_time;
void main()
{
vec2 coord = vTexCoord;
vec3 color = vec3(0.0);
float angle = atan(-coord.y + 0.5, coord.x - 0.5) * 0.1;
float len = length(coord - vec2(0.5, 0.5));
color.r += sin(len * 40.0 + angle * 40.0 + u_time * 1.0);
color.g += cos(len * 30.0 + angle * 60.0 - u_time * 1.0);
color.b += sin(len * 50.0 + angle * 50.0 + 6.0);
gl_FragColor = vec4(color, 1.0);
}
scanning lines 扫描线
precision mediump float;
varying mediump vec2 vTexCoord;
uniform float u_time;
void main()
{
vec2 coord = vTexCoord;
vec3 color = vec3(1.0);
float size = 12.0;
float alpha = sin(floor(coord.x * size) + u_time * 4.0) + 1.0 / 2.0;
gl_FragColor = vec4(color, alpha);
}
moving light
precision mediump float;
varying mediump vec2 vTexCoord;
uniform float u_time;
void main()
{
vec2 coord = vTexCoord;
coord -= vec2(0.5);
coord.x += sin(u_time) + cos(u_time * 2.1);
coord.y += cos(u_time) + sin(u_time * 1.6);
float color = 0.0;
color += 0.1 * (abs(sin(u_time)) + 0.1) / length(coord);
gl_FragColor = vec4(vec3(color), 1.0);
}
circle of lights
precision mediump float;
varying mediump vec2 vTexCoord;
uniform float u_time;
void main()
{
float range = 1.0;
vec2 coord = range * vTexCoord;
vec3 color = vec3(0.0);
vec2 translate = vec2(-0.5, -0.5);
coord += translate;
for(int i=0;i<40;i++){
float radius = 0.3;
float rad = radians(360.0 / 20.0) * float(i);
color += 0.003 / length(coord + vec2(radius * cos(rad), radius * sin(rad)));
}
gl_FragColor = vec4(color, 1.0);
}
morping grid boxes
precision mediump float;
varying mediump vec2 vTexCoord;
uniform float u_time;
void main()
{
float range = 50.0;
vec2 coord = range * vTexCoord;
vec3 color = vec3(0.0);
color += abs(cos(coord.x / 1.0) + sin(coord.y / 1.0) - cos(u_time));
gl_FragColor = vec4(color, 1.0);
}
morph grid
precision mediump float;
varying mediump vec2 vTexCoord;
uniform float u_time;
float random2d(vec2 coord){
return fract(sin(dot(coord.xy, vec2(12.9898, 78.233))) * 43758.5453);
}
void main()
{
float range = 20.0;
vec2 coord = range * vTexCoord;
coord -= u_time + vec2(sin(coord.y), cos(coord.x));
vec3 color = vec3(0.0);
float rand01 = fract(random2d(floor(coord)) + u_time / 60.0);
float rand02 = fract(random2d(floor(coord)) + u_time / 40.0);
rand01 += -0.4 - length(fract(coord));
gl_FragColor = vec4(rand01 * 4.0, rand02 * rand01 * 4.0, 0.0, 1.0);
}
circle color pulse 圆形彩色脉冲
precision mediump float;
varying mediump vec2 vTexCoord;
uniform float u_time;
float random2d(vec2 coord){
return fract(sin(dot(coord.xy, vec2(12.9898, 78.233))) * 43758.5453);
}
void main()
{
float range = 1.0;
vec2 coord = range * vTexCoord;
vec3 color = vec3(0.0);
vec2 translate = vec2(-0.5);
coord += translate;
color.r += abs(0.1 + length(coord) - 0.6 * abs(sin(u_time * 1.9 / 12.0)));
color.g += abs(0.1 + length(coord) - 0.6 * abs(sin(u_time * 1.6 / 4.0)));
color.b += abs(0.1 + length(coord) - 0.6 * abs(sin(u_time * 1.3 / 9.0)));
gl_FragColor = vec4(0.1 / color, 1.0);
}
noise 1d
precision mediump float;
varying mediump vec2 vTexCoord;
uniform float u_time;
float noise1d(float value){
return cos(value + cos(value * 90.0) * 100.0) * 0.5 + 0.5;
}
void main()
{
float range = 1.0;
vec2 coord = range * vTexCoord;
vec3 color = vec3(0.0);
color.r += noise1d(u_time);
gl_FragColor = vec4(color, 1.0);
}
image
precision mediump float;
varying mediump vec2 vTexCoord;
uniform float u_time;
uniform sampler2D u_tex0;
void main()
{
float range = 1.0;
vec2 coord = range * vTexCoord;
coord.x += sin(u_time);
gl_FragColor = texture2D(u_tex0, coord);
}
image color
precision mediump float;
varying mediump vec2 vTexCoord;
uniform float u_time;
uniform sampler2D u_tex0;
void main()
{
float range = 1.0;
vec2 coord = range * vTexCoord;
vec4 image = texture2D(u_tex0, coord);
image.r += 0.3;
image.b += sin(u_time);
gl_FragColor = vec4(image);
}
image manipulate
precision mediump float;
varying mediump vec2 vTexCoord;
uniform float u_time;
uniform sampler2D u_tex0;
void main()
{
float range = 1.0;
vec2 coord = range * vTexCoord;
vec4 image = texture2D(u_tex0, coord);
image.r += sin(coord.x * 50.0);
image.r += cos(coord.y * 50.0);
gl_FragColor = vec4(image);
}
image color mix
precision mediump float;
varying mediump vec2 vTexCoord;
uniform float u_time;
uniform sampler2D u_tex0;
void main()
{
float range = 1.0;
vec2 coord = range * vTexCoord;
vec3 color = vec3(1.0, 0.0, 1.0);
vec4 image = texture2D(u_tex0, coord);
color = mix(color, image.rgb, image.a);
gl_FragColor = vec4(color, 1.0);
}
white noise
precision mediump float;
varying mediump vec2 vTexCoord;
uniform float u_time;
float random2d(vec2 coord){
return fract(sin(dot(coord.xy, vec2(12.9898, 78.233))) * 43758.5453);
}
void main()
{
float range = 1.0;
vec2 coord = range * vTexCoord;
vec3 color = vec3(0.0);
float grain = 0.0;
grain = random2d(vec2(sin(coord) / 999999.9) * u_time);
color = vec3(grain);
gl_FragColor = vec4(color, 1.0);
}
scan image
precision mediump float;
varying mediump vec2 vTexCoord;
uniform float u_time;
uniform sampler2D u_tex0;
void main()
{
float range = 1.0;
vec2 coord = range * vTexCoord;
vec3 color = vec3(0.0);
vec4 image = texture2D(u_tex0, coord);
image.a = sin(floor(coord.x * 3.0) - u_time * 9.0);
gl_FragColor = image;
}
noise image
precision mediump float;
varying mediump vec2 vTexCoord;
uniform float u_time;
uniform sampler2D u_tex0;
float amount = 0.5;
float random2d(vec2 coord){
return fract(sin(dot(coord.xy, vec2(12.9898, 78.233))) * 43758.5453);
}
void main()
{
float range = 1.0;
vec2 coord = range * vTexCoord;
vec3 color = vec3(0.0);
vec4 image = texture2D(u_tex0, coord);
float noise = (random2d(coord) - 0.5) * amount;
image.r += noise;
image.g += noise;
image.b += noise;
gl_FragColor = image;
}
高斯模糊
precision mediump float;
uniform lowp float BlendIntensity;
uniform lowp vec4 Ambient;
varying lowp vec3 vNormal;
varying mediump vec3 vViewDirection;
uniform mediump vec2 kzTextureSize0;
uniform mediump vec2 BlurDirection;
uniform lowp float BlurRadius;
varying mediump vec2 vTexCoord;
uniform sampler2D Texture;
vec4 gaussianBlur(mediump vec2 coord, lowp vec2 dir)
{
// Defines the one-dimensional Gaussian Kernel with 9 samples.
float GAUSSIAN_KERNEL[9];
GAUSSIAN_KERNEL[0] = 0.028532;
GAUSSIAN_KERNEL[1] = 0.067234;
GAUSSIAN_KERNEL[2] = 0.124009;
GAUSSIAN_KERNEL[3] = 0.179044;
GAUSSIAN_KERNEL[4] = 0.20236;
GAUSSIAN_KERNEL[5] = 0.179044;
GAUSSIAN_KERNEL[6] = 0.124009;
GAUSSIAN_KERNEL[7] = 0.067234;
GAUSSIAN_KERNEL[8] = 0.028532;
vec2 texel = 1.0/kzTextureSize0;
vec4 sum = vec4(0.0);
// Get the original texture coordinate for this fragment.
vec2 tc = coord;
// Get the amount to blur.
float blur = BlurRadius;
// Set the amount of blur in the horizontal direction.
float hstep = dir.x*texel.x;
// Set the amount of blur in the vertical direction.
float vstep = dir.y*texel.y;
// Sample the texture 9 times for every fragment.
for(int i = 0; i < 9; i++)
{
float pixelOffset = (float(i) - floor(9.0 * 0.5));
mediump vec2 coord = vec2(tc.x + pixelOffset * blur * hstep, tc.y + pixelOffset * blur * vstep);
#if KANZI_SHADER_USE_BASECOLOR_TEXTURE
sum += texture2D(Texture, coord) * GAUSSIAN_KERNEL[i];
#endif
}
return sum;
}
void main()
{
precision lowp float;
lowp vec3 color = vec3(0.0);
lowp vec4 baseColor = texture2D(Texture, vTexCoord).rgba;
color += baseColor.rgb;
//gl_FragColor = vec4(color, baseColor.a) * BlendIntensity;
gl_FragColor = gaussianBlur(vTexCoord, BlurDirection) * BlendIntensity;
}
水波纹
uniform lowp float radius;
precision lowp float;
lowp float getCircle(lowp vec2 uv, lowp float r)
{
float distance = length(uv);
float range1 = smoothstep(r, r - 0.01, distance);
float range2 = 1.0-smoothstep(r-0.01, r-0.01 - 0.1, distance);
return range1 * range2;
}
void main()
{
float radiusInside = fract(radius);
float radiusInside2 = fract((radius+0.5));
//float radiusInside3 = fract((radius+0.5));
lowp vec4 color = vec4(1.0);
vec2 uv = vTexCoord * 2.0 - 1.0;
uv *= 2.0;
float strength = 2.0;
float r1 = getCircle(uv, radiusInside)*(1.0-radiusInside) * strength;
float r2 = getCircle(uv, radiusInside2)*(1.0-radiusInside2) * strength;
//float r3 = getCircle(uv, radiusInside3)*(1.0-radiusInside3) * strength;
color.a = r1 + r2;
gl_FragColor = color;
}