11. 内置函数
# 内置函数
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)+n*k |
// 如果两向量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);
}
着色器内置函数——英文文档 (opens new window)
# 内置函数参数常见形式
内置函数参数数据类型常见形式：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)