Kanzi Shader入门

物联网 2023-07-15 16:26:58 阅读次数: 0

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

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/chen_227/article/details/128031507
今日推荐
Linus “吃狗粮”最积极！
开源日报 | Winamp播放器即将开源；生成式AI之战升级第二轮；Linus“吃狗粮”最积极；AI进入泡沫前期；吴泳铭为阿里云带来了什么？
NetBSD 禁止提交由 AI 生成的代码
Apache Doris 2.0.10 版本正式发布！
开源日报 | 大模型开战；大模型独角兽被曝卖身；周鸿祎建议谷歌开源所有产品；最大开源AI社区提供1000万美元共享GPU
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
周排行
SVN服务端安装在阿里云
实战 | 相机标定
webpack核心概念
note20——》只要肯低头吃苦，人生就会有救
PAT甲级 1062 Talent and Virtue （25 分）排序
NG Toolset开发笔记--5GNR Resource Grid（26）
如何对待上司
oracle命令
第9章 STL迭代器
logstash使用es映射模板
每日归档
更多
2024-05-20(36)
2024-05-19(0)
2024-05-18(4)
2024-05-17(34)
2024-05-16(6)
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022