Question

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)