大家好，我是讯享网，很高兴认识大家。

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.; 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.; // 定义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) / .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; }