GLSL——常用内建函数与应用

STEP函数

step(a, b);当b > a时，返回1；当b < a时，返回0。

函数原型

float step(float a, float x)
{if (a < x){return x;}else{return a;}
}

应用

对控件着色时，x坐标小于0.5时，使用黑色渲染；x坐标大于0.5时，使用红色渲染。

代码段

varying mediump vec2 texCoord0;void main()
{precision mediump float;float color = 0.;
//  使用step函数原型实现
//  if (texCoord0.x > 0.5)
//  {
//      color = 1.;
//  }
//  else
//  {
//      color = 0.;
//  }//使用step函数实现color = step(0.5, texCoord0.x);gl_FragColor = vec4(vec3(color, 0., 0.), 1.);
}

效果

MIX

mix(colorA, colorB, weight); 两种颜色混合渲染，weight为colorB的渲染权重，1-weight为colorA的渲染权重，应用于颜色混合叠加效果。

函数原型

vec4 mix(vec4 colorA, vec4 colorB, float a)
{return x * (1 - a) + y * a;
}

应用

将黑色和红色进行混合，黑色权重按x坐标增加

代码段

varying mediump vec2 texCoord0;void main()
{precision mediump float;vec4 colorRed = vec4(1.0, 0., 0., 1.);vec4 colorBlack = vec4(0., 0., 0., 1.);//使用mix原型实现//gl_FragColor = colorRed * (1 - texCoord0.x) + colorBlack * texCoord0.x;//使用mix函数实现       gl_FragColor = mix(colorRed, colorBlack, texCoord0.x);
}

效果

CLAMP

clamp(x, min, max);当x大于max时，返回max，当x小于min时，返回min，当x介于min和max之间时，返回x本身

函数原型

float clamp(float x, float min, float max)
{if (min > x){return min;}else if (min < x && max > x){return x;}else{return max;}
}

应用

当x小于0.4时，使用红色通道值为0.4渲染，当x大于0.8时，使用红色通道值为0.8进行渲染，在0.4和 0.8之间进行红色通道由0.4到0.8渐变

代码段

varying mediump vec2 texCoord0;void main()
{precision mediump float;float color = 0.;//使用if条件判断实现
//    if (texCoord0.x < 0.4)
//    {
//        color = 0.4;
//    }
//    else if (0.4 < texCoord0.x && texCoord0.x < 0.8)
//    {
//        color = texCoord0.x;
//    }
//    else
//    {
//        color = 0.8;
//    }//使用clamp实现color = clamp(texCoord0.x, 0.4, 0.8);gl_FragColor = vec4(vec3(color, 0., 0.), 1.);
}

效果

LENGTH

length(a); 返回向量a的长度

length(float a);
length(vec2 vec);
length(vec3 vec);
length(vec4 vec);

应用

画一个圆，圆心坐标center（0.5， 0.5），半径radio为0.5，背景为黑色，圆红色。当任意一点到圆心的距离小于半径时，画圆，使用length计算点到圆心的距离

代码段

varying mediump vec2 texCoord0;void main()
{precision mediump float;//圆的颜色vec4 colorCircle = vec4(1.0, 0., 0., 1.);//背景色vec4 colorBg = vec4(0., 0., 0., 1.);//圆心vec2 center = vec2(0.5, 0.5);//半径float radio = 0.5;//使用length计算任意点到圆心的距离float d = length(texCoord0 - center);if (d < radio){gl_FragColor = colorCircle;}else{gl_FragColor = colorBg;}
}

效果

DISTANCE

distance(a, b);返回a和b之间的距离，即 d = sqrt(a * a + b * b) ;

应用

在上图使用了length函数计算任意点到圆心的距离，也可以使用distance函数来计算任意点到圆心的距离

代码段

varying mediump vec2 texCoord0;void main()
{precision mediump float;//圆的颜色vec4 colorCircle = vec4(1.0, 0., 0., 1.);//背景色vec4 colorBg = vec4(0., 0., 0., 1.);//圆心vec2 center = vec2(0.5, 0.5);//半径float radio = 0.5;//任意点掉圆心的距离float d = distance(texCoord0, center);if (d < radio){gl_FragColor = colorCircle;}else{gl_FragColor = colorBg;}
}

效果和length一样

SMOOTHSTEP

smoothstep(edg0, edg1, x); edg0左边缘，edg1右边缘，使x在edg0和edg1区间内进行平滑处理。返回值在[0， 1]区间内，当x > edg1时，返回1，当x < edg0时，返回0，当x在edg0和edg1之间时，返回x

函数原型

float smoothstep(float edg0, float edg1, float x)
{//对x进行归一化处理float t = clamp((x - edg0) / (edg1 - edg0), 0., 1.);//对归一化处理后的结果进行平滑处理return (3 - 2 * x) * x * x;
}

应用

在上面用length函数和distance画了个圆，但是画的圆边缘有锯齿，是圆看起来比较生硬，那么如何让圆的边缘更圆滑呢？使用smoothstep函数就是个很好的处理方法，核心是给圆的边缘预留一定的区间，在此区间内进行边缘和边缘的外界颜色、透明度的渐变。在上面画的圆中，圆的半径是radio，那么可以给定一个区间radio - blur或radio + blur，在此区间内进行颜色、透明度的渐变处理

代码段

varying mediump vec2 texCoord0;void main()
{precision mediump float;//圆心vec2 center = vec2(0.5, 0.5);//半径float radio = 0.5;//定义边缘区间float blur = 0.025;//计算任意点到圆心的距离float d = distance(texCoord0, center);//对d进行平滑处理，当d大于radio时，返回1，当d小于radio-blur时，返回0，//当d在radio-blur和radio之间时，进行模糊化平滑处理//因为我们要画的圆石红色，背景是黑色，所以要加上1.-float d1 = 1.-smoothstep(radio - blur, radio, d);//gl_FragColor = mix(colorBg, colorCircle, d1);  gl_FragColor = vec4(vec3(d1, 0., 0.), 1.);
}

效果

可以看到，圆的边缘已经没有锯齿效果了，可以通过blur值来调整平滑程度

如果用两个smoothstep函数相减会得到什么效果呢？

代码段

varying mediump vec2 texCoord0;void main()
{precision mediump float;//横坐标乘以纵横比写在vertexshader中
//    texCoord0.x *= (200.0/100.0);//圆心vec2 center = vec2(0.5, 0.5);//半径float radio = 0.5;float radio1 = 0.4;//定义边缘区间float blur = 0.025;//计算任意点到圆心的距离float d = distance(texCoord0, center);//对d进行平滑处理，当d大于radio时，返回1，当d小于radio-blur时，返回0，//当d在radio-blur和radio之间时，进行模糊化平滑处理//因为我们要画的圆石红色，背景是黑色，所以要加上1.-float d1 = (1.-smoothstep(radio - blur, radio, d)) - (1. - smoothstep(radio1 - blur, radio1, d));//gl_FragColor = mix(colorBg, colorCircle, d1);  gl_FragColor = vec4(vec3(d1, 0., 0.), 1.);
}

效果图

那么，想乘呢？

代码段

varying mediump vec2 texCoord0;void main()
{precision mediump float;//横坐标乘以纵横比写在vertexshader中
//    texCoord0.x *= (200.0/100.0);//圆心vec2 center = vec2(0.5, 0.5);//半径float radio = 0.5;float radio1 = 0.4;//定义边缘区间float blur = 0.025;//计算任意点到圆心的距离float d = distance(texCoord0, center);//对d进行平滑处理，当d大于radio时，返回1，当d小于radio-blur时，返回0，//当d在radio-blur和radio之间时，进行模糊化平滑处理//因为我们要画的圆石红色，背景是黑色，所以要加上1.-float d1 = (1.-smoothstep(radio - blur, radio, d)) * (1. - smoothstep(radio1 - blur, radio1, d));//gl_FragColor = mix(colorBg, colorCircle, d1);  gl_FragColor = vec4(vec3(d1, 0., 0.), 1.);
}

效果图

通过上述效果可以看到，两个smoothstep相减，可以获得除去作为减数smoothstep以外图案，相乘可以得到除去被减数smoothstep以外的部分

LERP

lerp(a, b, x);当x=0时，返回a，当x=1时，返回b，否则返回a和b的差值

函数原型

float lerp (float a, floatb, float x)
{a + x * (b - a);
}

应用

当x越接近0时，返回值月接近a，当x越接近1时，返回值越接近b，通过这一特性，可用来做一些渐变的效果，比如，从坐标中心向四周渐变的效果

代码段

varying mediump vec2 texCoord0;void main()
{precision mediump float;vec4 colorBlack = vec4(0., 0., 0., 1.);//有中间向两边渐变成黑色gl_FragColor = lerp(0., 1., length(texCoord0 - 0.5)) * colorBlack;
}

效果图

先更新这么多，有时间继续更行其他内建函数。

GLSL——常用内建函数与应用相关推荐

OpenGL ES之GLSL常用内建函数
dot 点乘返回两个单位向量之间夹角的cos值 cross 叉乘 texture2D 用于纹理采样 normalize :对⼀个向量量规格化 clamp 将⼀个向量固定在一个最小值和最大值之间 po ...
freemarker的常用内建函数
转载:https://blog.csdn.net/qq779890006/article/details/78490368 为什么要使用网页静态化技术网页静态化解决方案在实际开发中运用比较多,例如新 ...
python常用内建函数
内建函数是python解释器内置的函数,由cpython执行的c语言编写的函数,在加载速度上优于开发者自定义的函数,上一篇将python常用内建属性说了<python常用内建属性大全>,本 ...
[python] 之常用内建函数
本博客仅列举了一些常用的内建函数,欢迎大家补充! 1. dir([obj]) 显示对象的属性,若果没有提供参数,则显示全局变量的名字 2. help([obj]) 以一种整齐美观的方式,显示对象的文档 ...
图片处理之着色器语言 GLSL (opengl-shader-language) 内建函数
内建函数基本上可以分为一下三类: (1)它们使用一些简便的方式提供必要的硬件功能,如材质贴图.这些函数单独通过着色器是无法模拟出来的. (2)它们展示了一些可以常简单的写入的繁琐操作(clamp, m ...
python中内建函数_python常用内建函数
1.map函数(对指定序列映射到指定函数,返回结果集) >>> a=[1,3,5] >>> b=[2,4,6] >>> def mf(x,y): ...
【GLSL】glsl常用函数
1.smoothstep(float edgo0,float edge1, float x); 其中的 edge0 是样条线插值的下界,edge1 是样条线插值的下界,当 x 小于下界返回 0,当 x ...
几个常用的文本处理shell 命令：find、grep、xargs、sort、uniq、tr、cut、paste、wc、sed、awk
内容目录: find 文件查找 grep 文本搜索 xargs 命令行参数转换 sort 排序 uniq 消除重复行用tr进行转换 cut 按列切分文本 paste 按列拼接文本 wc 统计行和字符 ...
【嵌入式】C语言高级编程-内建函数(11)
00. 目录文章目录 00. 目录 01. 内建函数概述 02. 常用内建函数 03. C 标准库的内建函数 04. 内核中的 likely 和 unlikely 05. 附录 01. 内建函数概述 ...

GLSL——常用内建函数与应用

GLSL——常用内建函数与应用相关推荐

最新文章

热门文章