Kanzi Shader入门

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);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

中心全圆

另一种实现方法

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);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

方形

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);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

多边形

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);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

位移

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);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

正弦余弦

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);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

缩放

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);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

旋转

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);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

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);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

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);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

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);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

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);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

正态分布

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

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;
}
1
2
3
4
5
6

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);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

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);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

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);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

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);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

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);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

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);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

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);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31