WebGL 1.0 内置函数

前言

本篇文章介绍WebGL 1.0 shader中支持的内置函数

角度弧度转化

角度转弧度radians

计算公式:
R = π × d e g r e e ÷ 180 R = \pi \times degree \div 180 R=π×degree÷180

float radians(float degree) 
vec2 radians(vec2 degree) 
vec3 radians(vec3 degree) 
vec4 radians(vec4 degree)

弧度转角度degrees

计算公式:
R = 180 × r a d i a n ÷ π R = 180\times radian \div \pi R=180×radian÷π

float degrees(float radian) 
vec2 degrees(vec2 radian) 
vec3 degrees(vec3 radian) 
vec4 degrees(vec4 radian)

三角函数

正弦函数sin

angle是弧度值

结果范围 [ − 1 , 1 ] [-1,1] [−1,1]

float sin(float angle)
vec2 sin(vec2 angle)
vec3 sin(vec3 angle)
vec4 sin(vec4 angle)

余弦函数cos

angle是弧度值

结果范围 [ − 1 , 1 ] [-1,1] [−1,1]

float cos(float angle)
vec2 cos(vec2 angle)
vec3 cos(vec3 angle)
vec4 cos(vec4 angle)

正切函数tan

angle是弧度值

float tan(float angle)
vec2 tan(vec2 angle)
vec3 tan(vec3 angle)
vec4 tan(vec4 angle)

反正弦函数asin

x的范围必须是 [ − 1 , 1 ] [-1,1] [−1,1],否则返回结果未定义

返回结果为弧度值,结果范围 [ − π / 2 , π / 2 ] [-\pi/2,\pi/2] [−π/2,π/2]

float asin(float x)
vec2 asin(vec2 x)
vec3 asin(vec3 x)
vec4 asin(vec4 x)

反余弦函数acos

x的范围必须是 [ − 1 , 1 ] [-1,1] [−1,1],否则返回结果未定义

返回结果为弧度值,结果范围 [ − π / 2 , π / 2 ] [-\pi/2,\pi/2] [−π/2,π/2]

float acos(float x)
vec2 acos(vec2 x)
vec3 acos(vec3 x)
vec4 acos(vec4 x)

反正切函数atan

之所以有两个参数是因为返回值的范围为 [ − π , π ] [-\pi,\pi] [−π,π],也就说返回值范围横跨四个象限,所以x和y的符号能够确定位于哪个象限,atan实际上是对 y / x y/x y/x的值进行计算:

  • y>0,x>0:第一象限

  • y>0,x<0:第二象限

  • y<0,x<0:第三象限

  • y<0,x>0:第四象限

    float atan(float y, float x)
    vec2 atan(float y, vec2 x)
    vec3 atan(float y, vec3 x)
    vec4 atan(float y, vec4 x)

指数函数

普通指数pow

返回结果 x y x^y xy

如果x<0,返回结果未定义

如果x=0并且y<0,返回结果未定义

float pow(float x, float y) 
vec2 pow(vec2 x, vec2 y)
vec3 pow(vec3 x, vec3 y) 
vec4 pow(vec4 x, vec4 y)

自然指数exp

返回x的自然指数幂

返回结果 e x e^x ex

float exp(float x) 
vec2 exp(vec2 x) 
vec3 exp(vec3 x) 
vec4 exp(vec4 x)

自然对数log

返回x的自然对数,即返回结果y使得为
e y = x e^y = x ey=x

如果x<0,则值未定义

float log(float x) 
vec2 log(vec2 x) 
vec3 log(vec3 x) 
vec4 log(vec4 x)

2的指数exp2

返回2的指数幂

返回结果 2 x 2^x 2x

float exp2(float x) 
vec2 exp2(vec2 x) 
vec3 exp2(vec3 x) 
vec4 exp2(vec4 x)

以2为底的对数log2

返回x的2为底的对数,即返回结果y使得为
2 y = x 2^y = x 2y=x

如果x<=0,则值未定义

float log2(float x) 
vec2 log2(vec2 x) 
vec3 log2(vec3 x) 
vec4 log2(vec4 x)

开根号sqrt

返回 x \sqrt x x

如果x<0,返回值未定义

float sqrt(float x) 
vec2 sqrt(vec2 x) 
vec3 sqrt(vec3 x) 
vec4 sqrt(vec4 x)

开根号倒数inversesqrt

返回 1 / x 1/\sqrt x 1/x

如果x<0,返回值未定义

float inversesqrt(float x) 
vec2 inversesqrt(vec2 x) 
vec3 inversesqrt(vec3 x) 
vec4 inversesqrt(vec4 x)

通用函数

绝对值abs

返回 x < 0 ? − x : x x<0?-x:x x<0?−x:x

float abs(float x) 
vec2 abs(vec2 x) 
vec3 abs(vec3 x) 
vec4 abs(vec4 x)

符号值sign

  • x>0,返回1.0

  • x=0,返回0.0

  • x<0,返回-1.0

    float sign(float x)
    vec2 sign(vec2 x)
    vec3 sign(vec3 x)
    vec4 sign(vec4 x)

向下取整floor

返回小于等于x且最接近×的整数

float floor(float x) 
vec2 floor(vec2 x) 
vec3 floor(vec3 x) 
vec4 floor(vec4 x)

向上取整ceil

返回大于等于x且最接近x的整數

float ceil(float x) 
vec2 ceil(vec2 x) 
vec3 ceil(vec3 x) 
vec4 ceil(vec4 x)

获取小数fract

返回x的小数部分,即返回 x − f l o o r ( x ) x - floor(x) x−floor(x)

float fract(float x) 
vec2 fract(vec2 x) 
vec3 fract(vec3 x) 
vec4 fract(vec4 x)

取模mod

返回x除以y的余数,即
x − y ∗ f l o o r ( x / y ) x - y*floor(x/y) x−y∗floor(x/y)

float mod(float x, float y)
vec2 mod(vec2 x, vec2 y) 
vec3 mod(vec3 x, vec3 y) 
vec4 mod(vec4 x, vec4 y) 
vec2 mod(vec2 x, float y) 
vec3 mod(vec3 x, float y) 
vec4 mod(vec4 x, float y) 

返回最小值min

对于两个矢量,逐分量进行比较

对于一个矢量和一个float,用float和每个分量比较

float min(float x, float y)
vec2 min(vec2 x, vec2 y) 
vec3 min(vec3 x, vec3 y) 
vec4 min(vec4 x, vec4 y) 
vec2 min(vec2 x, float y) 
vec3 min(vec3 x, float y) 
vec4 min(vec4 x, float y) 

返回最大值max

对于两个矢量,逐分量进行比较

对于一个矢量和一个float,用float和每个分量比较

float max(float x, float y)
vec2 max(vec2 x, vec2 y) 
vec3 max(vec3 x, vec3 y) 
vec4 max(vec4 x, vec4 y) 
vec2 max(vec2 x, float y) 
vec3 max(vec3 x, float y) 
vec4 max(vec4 x, float y) 

范围限制clamp

  • 如果minVal < maxVal,返回结果未定义

  • 返回x、minVal、maxVal的中间值

    float clamp(float x, float minVal, float maxVal)
    vec2 clamp(vec2 x, vec2 minVal, vec2 maxVal)
    vec3 clamp(vec3 x, vec3 minVal, vec3 maxVal)
    vec4 clamp(vec4 x, vec4 minVal, vec4 maxVal)
    vec2 clamp(vec2 x, float minVal, float maxVal)
    vec3 clamp(vec3 x, float minVal, float maxVal)
    vec4 clamp(vec4 x, float minVal, float maxVal)

线性混合mix

返回 ( 1 − a ) × x + a × y (1-a)\times x + a\times y (1−a)×x+a×y

float mix(float x, float y, float a)
vec2 mix(vec2 x, vec2 y, vec2 a)
vec3 mix(vec3 x, vec3 y, vec3 a)
vec4 mix(vec4 x, vec4 y, vec4 a)
vec2 mix(vec2 x, float y, vec2 a)
vec3 mix(vec3 x, float y, vec3 a)
vec4 mix(vec4 x, float y, vec4 a)
vec2 mix(vec2 x, vec2 y, float a)
vec3 mix(vec3 x, vec3 y, float a)
vec4 mix(vec4 x, vec4 y, float a)

阶梯函数

生成阶梯函数

  • 如果x < edge,返回0.0

  • 否则返回1.0

    float step(float edge, float x)
    float step(vec2 edge, vec2 x)
    float step(vec3 edge, vec3 x)
    float step(vec4 edge, vec4 x)
    float step(float edge, vec2 x)
    float step(float edge, vec3 x)
    float step(float edge, vec4 x)

埃尔米特插值阶梯函数

  • 如果x<=edge0,返回edge0

  • 如果x>=edge1,返回edge1

  • 否则,根据公式
    t y p e t = c l a m p ( ( x − e d g e 0 ) / ( e d g e 1 − e d g e 0 ) , 0 , 1 ) ; type t = clamp((x - edge0)/(edge1 - edge0), 0, 1); typet=clamp((x−edge0)/(edge1−edge0),0,1);
    返回 t × t × ( 3 − 2 × t ) t\times t\times (3-2\times t) t×t×(3−2×t)

    float smoothstep(float edge0,float edge1, float x)
    float smoothstep(vec2 edge0,vec2 edge1, float x)
    float smoothstep(vec3 edge0,vec3 edge1, float x)
    float smoothstep(vec4 edge0,vec4 edge1, float x)

几何函数

获取矢量的长度

float length(float x)
float length(vec2 x)
float length(vec3 x)
float length(vec4 x)

获取点的距离

返回结果为 l e n g t h ( p 0 − p 1 ) length(p0-p1) length(p0−p1)

float distance(float p0, float p1)
float distance(vec2 p0, vec2 p1)
float distance(vec3 p0, vec3 p1)
float distance(vec4 p0, vec4 p1)

点乘

返回x和y的点乘

对于vec3而言就是
x [ 0 ] × y [ 0 ] + x [ 1 ] × y [ 1 ] + x [ 2 ] × y [ 2 ] x[0]\times y[0] + x[1]\times y[1] +x[2]\times y[2] x[0]×y[0]+x[1]×y[1]+x[2]×y[2]

float dot(float x, float y)
float dot(vec2 x, vec2 y)
float dot(vec3 x, vec3 y)
float dot(vec4 x, vec4 y)

叉乘

返回x和y的叉乘

对于vec3而言就是
r e s u l t [ 0 ] = x [ 1 ] × y [ 2 ] − x [ 2 ] × y [ 1 ] r e s u l t [ 1 ] = x [ 2 ] × y [ 0 ] − x [ 0 ] × y [ 2 ] r e s u l t [ 2 ] = x [ 0 ] × y [ 1 ] − x [ 1 ] × y [ 0 ] result[0] = x[1]\times y[2] - x[2]\times y[1]\\ result[1] = x[2]\times y[0] - x[0]\times y[2]\\ result[2] = x[0]\times y[1] - x[1]\times y[0] result[0]=x[1]×y[2]−x[2]×y[1]result[1]=x[2]×y[0]−x[0]×y[2]result[2]=x[0]×y[1]−x[1]×y[0]

vec3 cross(vec3 x, vec3 y)

归一化

对x进行归一化

返回结果: x / l e n g t h ( x ) x/length(x) x/length(x)

float normalize(float x)
vec2 normalize(vec2 x)
vec3 normalize(vec3 x)
vec4 normalize(vec4 x)

法向量反向

法向量反向 (如果需要)操作,根据入射向量N和参考向量Nref来调整法向量。

  • 如果dot(Nref, I)<0则返回N

  • 否则返回-N

    float faceforward(float N, float I, float Nref)
    vec2 faceforward(vec2 N, vec2 I, vec2 Nref)
    vec3 faceforward(vec3 N, vec3 I, vec3 Nref)
    vec4 faceforward(vec4 N, vec4 I, vec4 Nref)

反射矢量

计算反射矢量。入射矢量为I,表面法向量为N, 返回 I − 2 ∗ d o t ( N , I ) ∗ N I-2*dot(N, I)*N I−2∗dot(N,I)∗N.

注意:N必须已经归一化

float reflect(float I, float N)
vec2 reflect(vec2 I, vec2 N)
vec3 reflect(vec3 I, vec3 N)
vec4 reflect(vec4 I, vec4 N)

折射矢量

根据入射光和折射特性计算折射现象。

入射光方向为I,法向量为N,材质折射率为eta

返回被折射后的光线方向为

k = 1.0 - eta*eta*(1.0 - dot(N, I)*dot(N, I));
if(k<0.0)
{
	return 0.0;
}
return eta * I - (eta * dot(N,I) + sqrt(k)) * N;

注意:I和N必须已经归一化

float refract(float I, float N, float eta)
vec2 refract(vec2 I, vec2 N, float eta)
vec3 refract(vec3 I, vec3 N, float eta)
vec4 refract(vec4 I, vec4 N, float eta)

矩阵函数

矩阵逐元素相乘

注意:该函数不是矩阵相乘,是矩阵逐元素相乘

mat2 matrixCompMult(mat2 x, mat2 y)
mat3 matrixCompMult(mat3 x, mat3 y)
mat4 matrixCompMult(mat4 x, mat4 y)

矢量函数

逐分量比较x<y是否成立

bvec2 lessThan(vec2 x, vec2 y)
bvec3 lessThan(vec3 x, vec3 y)
bvec4 lessThan(vec4 x, vec4 y)
bvec2 lessThan(ivec2 x, ivec2 y)
bvec3 lessThan(ivec3 x, ivec3 y)
bvec4 lessThan(ivec4 x, ivec4 y)

逐分量比较x<=y是否成立

bvec2 lessThanEqual(vec2 x, vec2 y)
bvec3 lessThanEqual(vec3 x, vec3 y)
bvec4 lessThanEqual(vec4 x, vec4 y)
bvec2 lessThanEqual(ivec2 x, ivec2 y)
bvec3 lessThanEqual(ivec3 x, ivec3 y)
bvec4 lessThanEqual(ivec4 x, ivec4 y)

逐分量比较x>y是否成立

bvec2 greaterThan(vec2 x, vec2 y)
bvec3 greaterThan(vec3 x, vec3 y)
bvec4 greaterThan(vec4 x, vec4 y)
bvec2 greaterThan(ivec2 x, ivec2 y)
bvec3 greaterThan(ivec3 x, ivec3 y)
bvec4 greaterThan(ivec4 x, ivec4 y)

逐分量比较x>=y是否成立

bvec2 greaterThanEqual(vec2 x, vec2 y)
bvec3 greaterThanEqual(vec3 x, vec3 y)
bvec4 greaterThanEqual(vec4 x, vec4 y)
bvec2 greaterThanEqual(ivec2 x, ivec2 y)
bvec3 greaterThanEqual(ivec3 x, ivec3 y)
bvec4 greaterThanEqual(ivec4 x, ivec4 y)

逐分量比较x==y是否成立

bvec2 equal(vec2 x, vec2 y)
bvec3 equal(vec3 x, vec3 y)
bvec4 equal(vec4 x, vec4 y)
bvec2 equal(ivec2 x, ivec2 y)
bvec3 equal(ivec3 x, ivec3 y)
bvec4 equal(ivec4 x, ivec4 y)

逐分量比较x!=y是否成立

bvec2 notEqual(vec2 x, vec2 y)
bvec3 notEqual(vec3 x, vec3 y)
bvec4 notEqual(vec4 x, vec4 y)
bvec2 notEqual(ivec2 x, ivec2 y)
bvec3 notEqual(ivec3 x, ivec3 y)
bvec4 notEqual(ivec4 x, ivec4 y)

矢量的任意分量为true,则返回true

bool any(bvec2 x)
bool any(bvec3 x)
bool any(bvec4 x)

矢量的所有分量为true,则返回true

bool all(bvec2 x)
bool all(bvec3 x)
bool all(bvec4 x)

矢量的所有分量求反

bvec2 not(bvec2 x)
bvec3 not(bvec3 x)
bvec4 not(bvec4 x)

纹理查询函数

2D纹理查询

  • sampler: 2D纹理采样器
  • coord:纹理坐标
  • bias:只可以在片元着色器使用,表示mipmap纹理时加在当前lod上的值

对于带有Proj版本的纹理查询函数,纹理坐标从coord最后一个分量解析
对于vec4类型的coord,第三个分量将被忽略

vec4 texture2D(sampler2D sampler, vec2 coord);
vec4 texture2D(sampler2D sampler, vec2 coord, float bias);
vec4 texture2DProj(sampler2D sampler, vec3 coord);
vec4 texture2DProj(sampler2D sampler, vec3 coord, float bias);
vec4 texture2DProj(sampler2D sampler, vec4 coord);
vec4 texture2DProj(sampler2D sampler, vec4 coord, float bias);
vec4 texture2DLod(sampler2D sampler, vec2 coord, float lod);
vec4 texture2DProjLod(sampler2D sampler, vec3 coord, float lod);
vec4 texture2DProjLod(sampler2D sampler, vec4 coord, float lod);

立方体纹理查询

使用纹理坐标coord,从绑定到sampler的立方体纹理中读取纹素,coord的方向表示立方体的表面

vec4 textureCube(samplerCube sampler, vec3 coord);
vec4 textureCube(samplerCube sampler, vec3 coord, float bias);
vec4 textureCubeLod(samplerCube sampler, vec3 coord, float lod);
相关推荐
不惑_3 天前
最佳ThreeJS实践 · 实现赛博朋克风格的三维图像气泡效果
javascript·node.js·webgl
小彭努力中4 天前
50. GLTF格式简介 (Web3D领域JPG)
前端·3d·webgl
小彭努力中5 天前
52. OrbitControls辅助设置相机参数
前端·3d·webgl
幻梦丶海炎5 天前
【Threejs进阶教程-着色器篇】8. Shadertoy如何使用到Threejs-基础版
webgl·threejs·着色器·glsl
小彭努力中6 天前
43. 创建纹理贴图
前端·3d·webgl·贴图
小彭努力中6 天前
45. 圆形平面设置纹理贴图
前端·3d·webgl·贴图
Ian10257 天前
webGL入门(五)绘制多边形
开发语言·前端·javascript·webgl
小彭努力中8 天前
49. 建模软件绘制3D场景(Blender)
前端·3d·blender·webgl
优雅永不过时·11 天前
使用three.js 实现着色器草地的效果
前端·javascript·智慧城市·webgl·three·着色器
baker_zhuang12 天前
Threejs创建胶囊体
webgl·threejs·web3d