WebGL自学笔记第四天

变换/仿射变换

• 主要是一些数学知识

平移

• 对顶点的分量上加上平移的距离
• 逐顶点操作，所以需要操作顶点着色器

旋转

• 旋转轴
• 旋转方向
• 旋转角度
  一般旋转角度与旋转方向会合并成一个参数，旋转角度为正代表逆时针，为负代表正时针。
  假设旋转角度为$\beta$,则坐标点表达式为
  rX = xcos$\beta$ - ysin$\beta$;
  ry = xsin$\beta$ + ycos$\beta$;

变换矩阵

• 三维图形学非常重要
• 常用的矩阵

1. 旋转矩阵
   $$\left[\begin{array}{cccc}cos\beta & -sin\beta & 0& 0\\ sin\beta & cos\beta & 0& 0\\ 0& 0& 1& 0\\ 0& 0& 0& 1\end{array}\right]\times \left[\begin{array}{c}x\\ y\\ z\\ 1\end{array}\right]$$
2. 平移矩阵
   $$\left[\begin{array}{cccc}1& 0& 0& 0\\ 0& 1& 0& 0\\ 0& 0& 1& 0\\ Tx& Ty& Tz& 1\end{array}\right]\times \left[\begin{array}{c}x\\ y\\ z\\ 1\end{array}\right]$$
3. 缩放矩阵
   $$\left[\begin{array}{cccc}Sx& 0& 0& 0\\ 0& Sy& 0& 0\\ 0& 0& Sz& 0\\ 0& 0& 0& 1\end{array}\right]\times \left[\begin{array}{c}x\\ y\\ z\\ 1\end{array}\right]$$

• WebGL的矩阵和OpenGL一致，是列主序的

因为js的数组是一维的，所以需要表达矩阵有两种方式，即每行读取和每列读取，WebGL是每列读取，比如旋转矩阵，在js种的表达为

var xormMatrix = new Float32Array([
    cosB, sinB, 0.0, 0.0,
    -sinB, cosB, 0.0, 0.0,
    0.0, 0.0, 1.0, 0,0,
    0.0, 0.0, 0.0, 1.0

]);

核心代码

	// 转为弧度制
	var radian = Math.PI * ANGLE / 180.0;
	var cosB = Math.cos(radian);
	var sinB = Math.sin(radian);
	// WebGL矩阵是列主序的
	var xformMatrix = new Float32Array([
		cosB, sinB, 0.0, 0.0,
		-sinB, cosB, 0.0, 0.0,
		0.0, 0.0, 1.0, 0.0,
		0.0, 0.0, 0.0, 1.0
	]);
	var u_xformMatrix = gl.getUniformLocation(gl.program, 'u_xformMatrix');
	// 参数
	// locaion uniform变量的存储位置
	// Transpose 是否转置矩阵 WebGL没有提供该功能，所以必须为false
	// 待传输的类型化数组
	gl.uniformMatrix4fv(u_xformMatrix, false, xformMatrix);
	
	// 设置canvas背景色
	gl.clearColor(0.0, 0.0, 0.0, 1.0);
	gl.clear(gl.COLOR_BUFFER_BIT);
	// 传入的绘制个数是n，所以一次性可以绘制完成
	gl.drawArrays(gl.TRIANGLES, 0, n);

• 相关矩阵都有对应的数学库，但是知道其原理总是好的。

相关demo可以在我的公众号【xyzzlky】中回复【WebGL】获取，今日内容在TransTriangle文件夹中。