WebGL着色器向量/矢量

WebGL着色器向量/矢量

本文是WebGL教程(电子书)的2.4节内容

矢量或者说向量，可以通过2~4个分量表示一个向量，比如通过vec3(1,0,0)表示三维空间中一个沿着x轴正方向的三维方向向量，如果你有高中数学的基础，应该对向量有一定的了解，对于三维坐标的相关几何运算也有一定的概念。

关键字	数据类型
vec2	二维向量，具有xy两个分量，分量是浮点数
vec3	三维向量 ，具有xyz三个分量，分量是浮点数
vec4	四维向量 ，具有xyzw四个分量，分量是浮点数
ivec2	二维向量，分量是整型数
ivec3	三维向量 ，分量是整型数
ivec4	四维向量 ，分量是整型数
bvec2	二维向量，分量是布尔值bool
bvec3	三维向量 ，分量是布尔值bool
bvec4	四维向量 ，分量是布尔值bool

声明变量

关键子vec3声明一个三维向量变量

vec3 direction;

构造函数赋值

向量类型数据需要通过相应的构造函数创建，vec3()构造函数创建一个三维向量赋值给direction变量。

vec3 direction;
// 赋值
direction = vec3(1.0,0.0,0.0);

// 声明一个整型二维向量，ivec2所有参数都是整型数
ivec2 iv2 = ivec2(5,3);

常见声明代码案例

通过vec3等向量关键子声明一个变量，可以在着色器表示多种含义的向量，比如表示一个光源、相机等对象的位置坐标，比如光源的方向，比如光源或物体颜色值…

// 声明一个三维向量，方向是x轴方向，注意vec3构造函数的参数是浮点数
vec3 direction = vec3(1.0,0.0,0.0);
// 声明一个位置变量pos，10.2,9.6,3.9分别表示三维坐标中xyz坐标
vec3 pos = vec3(10.2,9.6,3.9)

访问获取向量分量

一个向量由多个不同分量构成，可以通过点符号.访问。

你也可以把vec3、vec4等函数创建的向量类比为javascript语言的对象，.x、.y、.z、.w是向量对象的属性，可以获取属性值，也可以访问改变向量对象的属性值。

向量vector	访问
第1个分量	vector.x
第2个分量	vector.y
第3个分量	vector.z
第4个分量	vector.w

// 声明一个三维向量，假设向量表示三维坐标中一个位置坐标
vec3 pos = vec3(10.2,9.6,3.9);
// 访问x坐标
float x = pos.x;//访问获取向量的x分量
// 访问z坐标
float z = pos.z;//访问获取向量的z分量

// 声明一个三维向量，假设表示RGB颜色值，三个参数分别表示红色R、绿色G、蓝色B
vec3 rgb = vec3(0.5,0.3,0.2);
// 访问颜色值R分量
float R = rgb.x;//访问获取向量的x分量
// 访问颜色值G分量
float G = rgb.z;//访问获取向量的z分量

向量的分量可以获取赋值给其它的变量，也可以通过访问分量改变向量的值。

// 声明一个三维向量，假设向量表示三维坐标中一个位置坐标
vec3 pos = vec3(10.2,9.6,3.9);
// 三维向量pos的x分量被改变，相当于在原来的基础上沿着x轴平移2.0
pos.x = pos.x+2.0;
// 直接改变三维向量的x分量，相当于把顶点的x坐标值直接设置为20.0
pos.x = 20.0;

向量分量更多灵活写法

着色器编程的时候，为了更方面编写程序，着色器语法规定了更多向量灵活的写法。

// 声明一个三维向量变量，并赋值
vec3 v3 = vec3(10.0,9.0,3.0);
// 声明一个二维向量
vec2 v2;
// 提取向量v3的xy两个分量赋值给二维向量v2
v2 = v3.xy;//v3.xy相等于vec2(10.0,9.0);
// v3的x分量赋值给v2的x分量，v3的z分量赋值给v2的y分量
v2 = v3.xz;//获得zx分量  v3.xz等价于vec2(10.0,3.0)
v2 = v3.yz;//获得yz分量
//获得zx分量 v3的z分量赋值给v2的x分量，v3的x分量赋值给v2的y分量
v2 = v3.zx;

// 声明一个四维向量变量，并赋值
vec4 v4 = vec4(10.0,9.0,3.0,1.0);
// 提取v4前三个分量，并赋值给一个三维向量变量
vec3 v3 = v4.xyz;

// 声明一个四维向量变量，并赋值
vec4 v4 = vec4(10.0,9.0,3.0,1.0);
// 访问特定分量，使用构造函数重新构造一个向量
vec3 v3 = vec3(v4.x,2.9,v4.y);
vec2 v2 = vec2(v4.x,v4.z);

数学运算(向量和数字)

一个向量加一个数字，相当于每个分量加上该数字，注意向量分量是整型数还是浮点数，加上的数字保持数据类型一致。.

vec3 pos = vec3(1.0,2.0,3.0);
pos = pos+1.0;//pos新的值为vec3(2.0,3.0,4.0)
vec3 pos2 = pos+1.0;//pos不改变，赋值给新的变量

减法、乘法、除法运算规则和加法相似

减法

vec3 pos = vec3(1.0,2.0,3.0);
pos = pos-1.0;//pos新的值为vec3(0.0,1.0,2.0)

乘法

vec3 pos = vec3(1.0,2.0,3.0);
pos = pos*2.0;//pos新的值为vec3(2.0,4.0,6.0)

除法

vec3 pos = vec3(1.0,2.0,3.0);
pos = pos/2.0;//pos新的值为vec3(0.5,1.0,1.5)

数学运算(向量和向量)

两个向量相加，就是两个向量的三个分量分别相加。

vec3 v1 = vec3(1.0,2.0,3.0);
vec3 v2 = vec3(-1.0,-2.0,-3.0);
vec3 v3 = v1+v2;//结果为vec3(0.0,0.0,0.0)

减法、乘法、除法运算规则和加法相似

减法

vec3 v1 = vec3(1.0,2.0,3.0);
vec3 v2 = vec3(-1.0,-2.0,-3.0);
vec3 v3 = v1-v2;//结果为vec3(2.0,4.0,6.0)

乘法

vec3 v1 = vec3(1.0,2.0,3.0);
vec3 v2 = vec3(-1.0,-2.0,-3.0);
vec3 v3 = v1*v2;//结果为vec3(-1.0,-4.0,-9.0)

除法

vec3 v1 = vec3(1.0,2.0,3.0);
vec3 v2 = vec3(-1.0,-2.0,-3.0);
vec3 v3 = v1/v2;//结果为vec3(-1.0,-1.0,-1.0)