内置函数
优质
小牛编辑
130浏览
2023-12-01
WebGL着色器提供了一系列内置函数,所谓内置函数和内置变量一样,也就是说不用声明,就可以直接调用。比如向量点乘dot()
、向量叉乘cross()
、两点之间距离distance()
等用于数学计算的函数。
角度函数和三角函数
WebGL着色器内置函数三角函数,名称和初高中数学写法基本一致,函数参数是角度的弧度值,函数参数数据类型是浮点数float
。
内置函数 | 功能 |
---|---|
radians() | 角度值转弧度值 |
degrees() | 弧度值转角度值 |
sin(弧度) | 正弦值 |
cos(弧度) | 余弦值 |
tan(弧度) | 正切值 |
asin() | 反正弦值(弧度) |
acos() | 反余弦值(弧度) |
atan() | 反正切值(弧度) |
//角度为30度,并把角度值转化为弧度值
float radian = radians(30.0);
//求解角度余弦值
float cos = cos(radian);
//求解角度正弦值
float sin = sin(radian);
几何函数
内置函数几何函数主要是与几何相关计算的函数,比如计算两点之间的距离,计算两个向量的叉乘、点乘...
内置函数 | 功能 |
---|---|
length(a) | 向量a长度 |
distance(a,b) | a、b两点之间距离 |
dot(a,b) | 两向量点积 |
cross(a,b) | 两向量叉乘 |
normalize(a) | 向量a归一化,长度变为1,方向不变,即返回值单位向量 |
faceforward(a,b,c) | 向量朝前:如果c、b两向量点乘小于0(dot(c,b) < 0),则返回a,否则返回-a |
reflect(Ru,Fa) 或 reflect(Ru,Fa,Zh) | 向量反射:比如通过入射光计算反射光方向向量,Fa表示反射平面的法线方向(单位向量),Ru表示入射光线的方向(单位向量),Zh表示折射率 |
// 二维平面:计算(0.5, 0.0)和(0.5, 0.5)两点之间距离
float dis2 = distance(vec2(0.5, 0.0), vec2(0.5, 0.5));
// 3D空间
float dis3 = distance(vec3(0.5, 0.0, 0.0), vec3(0.5, 0.5, 0.5));
// 向量归一化,方向不变,长度为1
// 返回值vec3(1.0,0.0,0.0)
vec3 normal = normalize(vec3(3.0,0.0,0.0));
// 光线方向:u_lightDirection,顶点法向量:normal
// 计算平行光方向向量和顶点法向量的点积
float dot = max(dot(u_lightDirection, normal), 0.0);
// 计算反射后的颜色
// 光线颜色:u_lightColor,顶点颜色:a_color
vec3 reflectedLight = u_lightColor * a_color.rgb * dot;
指数函数
着色器常见内置函数可以参考数学或javascript语言。
内置函数 | 功能 |
---|---|
pow(x,n) | x的n次幂函数 |
exp(x) | x的自然指数e |
log(x) | x自然对数 |
exp2(x) | 2的指数x |
log2() | 对数函数,底数为2 |
sqrt() | 平方根 |
inversesqrt() | 平方根倒数 |
通用函数
内置函数 | 功能 |
---|---|
abs(x) | 绝对值 |
sign(x) | 判断参数符号,x是正数返回1.0;x是0.0返回0.0,x是负数返回-1.0 |
floor(x) | 取整,向下取整 |
ceil(x) | 取整,向上取整 |
fract(x) | 返回x小数部分 |
min(a,b) | 比较大小,返回较小的值 |
max(a,b) | 比较大小,返回较大的值 |
mod(x,y) | 表示x–y*floor(x/y) |
clamp(x,min,max) | 规整输入值,x与min和max比较大小返回中间大小的值,运算规则:min (max (x, min), max) |
mix(m,n,k) | 线性插值计算,插值区间[m,n],插值系数k,插值计算公式:m(1-k)+nk |
// 如果两向量v1, v2点积是正数就保留,如果是负数就返回0.0
// 常用于光照计算中,v1表示光线方向,v2表示顶点法线法线,光线背面照射,点积设置为0.0
float dot = max(dot(v1, v2), 0.0);
矩阵函数
mat matrixCompMult (mat x, mat y)
注意内置矩阵函数matrixCompMult()
不是按照线性代数中的矩阵乘法规则执行的,如果是线性代数中矩阵乘法规则,直接使用乘法符号*
就可以,即x*y
。
内置矩阵函数matrixCompMult()
的运算规则是同行同列的元素相乘,也就是 x[i][j]
和y[i][j]
相乘
向量关系函数
着色器向量关系函数和javascript关系函数类似,区别在于着色器向量关系函数不是直接比较两个数的大小,而是对两个向量的每个元素都进行比较。
比较函数返回值是true或flase。
内置函数 | 判断 |
---|---|
lessThan(x,y) | x是否小于y ,参数是vec或ivec |
lessThanEqual(x,y) | x是否小于或等于y,参数是vec或ivec |
greaterThan(x,y) | x是否大于y ,参数是vec或ivec |
greaterThanEqual(x,y) | x是否大于或等于y,参数是vec或ivec |
equal(x,y) | x是否等于y,向量每个分量是否都相等,参数是vec或ivec |
any(x) | x向量是否存在一个分量是true,参数是bvec |
all(x) | x向量所有分量是否全部为true ,参数是bvec |
not(x) | x所有分量执行逻辑非运算 ,参数是bvec |
纹理采样函数
纹理采用函数主要用于处理WebGL的纹理贴图,根据uv坐标从图像上获取像素值。
内置函数 | 判断 |
---|---|
texture2D() | 2D纹理 |
textureCube() | 立方体纹理 |
- 参数1-sampler:第一个参数是sampler2D数据类型
- 参数2-uv:第二个参数是vec2类型,表示纹理贴图的UV坐标
- 参数3-k:第三个参数是可选参数,类型是浮点数float,在为具有mipmap的纹理计算适当的细节级别之后,在执行实际纹理查找操作之前添加偏差。
vec4 texture2D(sampler,uv)
vec4 texture2D(sampler,uv,k)
vec4 textureCube(sampler,uv)
vec4 textureCube(sampler,uv,k)
WebGL实现图片作为纹理贴图的片元着色器部分代码
// 接收插值后的纹理坐标
varying vec2 v_TexCoord;
// 纹理图片像素数据
uniform sampler2D u_Sampler;
void main() {
// 采集纹素,逐片元赋值像素值
gl_FragColor = texture2D(u_Sampler,v_TexCoord);
}
内置函数参数常见形式
内置函数参数数据类型常见形式:float
、vec2
、vec3
、vec4
// 角度转弧度
float radians(float degrees)
vec2 radians(vec2 degrees)
vec3 radians(vec3 degrees)
// 正弦函数
float sin(float angle)
vec4 sin(vec4 angle)
// 点乘
float dot(float x, float y)
float dot(vec3 x, vec3 y)
// 长度
float length(float x)
float length(vec2 x)