webgl着色器语言学习

14 阅读2分钟

矢量和矩阵

矢量

vec2,3,4 具有234个浮点元素的矢量

ivec2,ivec3,ivec4 具有234个整型元素的矢量

bvec2,bvec3,bvec4 具有234个bool型元素的矢量

创建矢量通过构造函数赋值 vec4 position = vec4(0.0,0.0,0.0,1.0)

矢量可以通过xyzw访问顶点坐标分量,stpq访问纹理坐标分量 position.x,position.y,position.z 也可以通过混合的方式获取多个值,获取到的是新的矢量

position.xy//vec2,
position.yx//vec2,
position.zyx//vec3

矩阵

mat2、mat3、mat4 获取2*2,3*3,4*4的浮点数元素矩阵 矩阵也可以通过构造函数赋值。 矩阵是列主序的

mat4 m = mat4(
1.0,5.0,9.0,13.0,
2.0,6.0,10.0,14.0,
3.0,7.0,11.0,15.0,
4.0,8.0,12.0,16.0,
)

纹理取样器

取样器有sampler2D和samplerCube,只能声明为uniform变量 使用流程 创建纹理对象- 反转图片y轴- 开启纹理单元- 绑定纹理对象- 处理放大缩小水平垂直缩放逻辑- 将纹理数据写入纹理对象- 给纹理对象赋值

最大不同在于写入纹理对象时,需要传入六个面数据,处理六个面 image.png

分支和循环

if(){}
if(){}else{}
if(){}else if{} else(){}

for(){}
while(){}
do{}while()

continue
break
discard //只能在片元着色器中使用,表示放弃当前片元,直接处理下一片元

函数

函数返回值 函数名 参数{ 函数体 返回值 }

内置函数

角度函数: radians 角度转弧度 degress 弧度转角度

三角函数: sin cos tan asin acos atan

指数函数: pow 次方 exp 自然质数 log 对数 sqrt 开平方 inversesqrt 开平方的倒数

通用函数: abs 绝对值 min 最小值 max 最大值 mod 取余数 sign取符号 floor向下取整 ceil向上取整 clamp 限定范围 fract 获取小数部分

几何函数: length(x) 计算x向量的长度 distance(x,y) 计算xy之间的距离 dot(x,y) 计算向量xy的点积 cross(x,y) 计算xy的差积 normalize(x) 返回方向同x,长度为1的向量

存储限定词

const 声明一个常量,定义之后不能被改变 attribute 只能出现在顶点着色器,只能声明为全局变量 表示逐顶点信息 uniform 可以同时出现在顶点和片元着色器,只读类型,影响所有顶点的数据 varying 从顶点着色器向片元着色器传递数据

精度限定

作用:提升运行效率,削减内存开支 可以针对某个变量声明精度 mediump float f; 通过precision修改着色器默认精度