webgl变换:深入图形缩放

我心飞翔 分类:javascript

前言

关于图形的动画内容,之前已经分享完成了两篇,分别是webgl变换:深入图形平移和webgl变换:深入图形旋转。

在以往的学习中,大家都会发现一个问题,没有基础的知识,即使能学会,也会忘的很快。所以在之前的文章中,不仅跟大家介绍了如何通过矩阵实现图形的平移和旋转,也详细的分析了如何通过数学知识推导得到想要的矩阵。

也希望通过推导和矩阵的关联记忆,大家都可以将图形变换记忆和理解的更加深刻。

今天我们来分享下最后一个变换内容:图形的缩放 🤔

闲言少叙,来看第一个内容。

1.缩放矩阵

1.1 得到各坐标表达式

这里我们需要通过一个小实例来说明如何得到缩放矩阵

缩放坐标系.png

描述:

上图中,通过缩放,将蓝色三角形伸展到橙色虚线位置。

通过点A和点A’来观察三角形的坐标变化,我们可以得到如下等式:

  • x’ = Tx * x
  • y’ = Ty * y
  • z’ = Tz * z

1.2 查看点A和点A’之间的映射公式

平移矩阵.png

通过上图,我们可以得到点A和点A’之间的关联计算关系

ax + by + cz + w = x'
ex + fy + gz + h = y'
ix + jy + kz + l = z'
mx + ny + oz + p = w'
 

ps: 这个公式我们已经写过很多次了 ,不明白的话可以看下之前的文章哟~~

1.3 得到缩放矩阵

将第一步和第二步得到的公式组合,可以得到如下等式:

  • ax + by + cz + w = Tx * x:只有当 a = Tx,b = c = w = 0 的时候,等式左右两边成立
  • ex + fy + gz + h = Ty * y:只有当 f = Ty, e = g = h = 0 的时候,等式左右两边成立
  • ix + jy + kz + l = Tx * z:只有当 k = Tz, i = j = l = 0 的时候,等式左右两边成立
  • mx + ny + oz + p = 1:只有当 m = n = o = 0, p = 1 的时候,等式左右两边成立

经过处理,可得旋转矩阵为:

| Tx 0 0 0 |

| 0 Ty 0 0 |

| 0 0 Tz 0 |

| 0 0 0 1 |

可以看到,这个矩阵不论是行主序还是列主序。都是相等的,这种沿主对角线对称的矩阵,称为对称矩阵

2. 实践

1. 绘制一个三角形 (已经写烂了的代码~~)
const vertexShaderSource = "" +
      "attribute vec4 apos;" +
      "void main(){" +
      " gl_Position = apos;" +
      "}";
const fragmentShaderSource = "" +
      "void main(){" +
      " gl_FragColor = vec4(0.0,0.0,1.0,1.0);" +
      "}";

const program = initShader(gl,vertexShaderSource,fragmentShaderSource);
const aposLocation = gl.getAttribLocation(program,'apos');

const data =  new Float32Array([
  0.0,0.3,
  -.3,-.3,
  .3,-.3
]);
const buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER,buffer);
gl.bufferData(gl.ARRAY_BUFFER,data,gl.STATIC_DRAW);

gl.vertexAttribPointer(aposLocation,2,gl.FLOAT,false,0,0);
gl.enableVertexAttribArray(aposLocation);

gl.drawArrays(gl.TRIANGLES,0,3); // 第二步需要将此方法注释
 
2. 添加矩阵变量和绘制方式

因为矩阵会影响到所有顶点,所以我们使用 uniform 类型的数据。

const vertexShaderSource = "" +
"attribute vec4 apos;" +
"uniform mat4 mat;" +  // 添加的矩阵变量
"void main(){" +
" gl_Position = mat * apos;" +
"}";
const matLocation = gl.getUniformLocation(program,'mat');
let Tx = 0;    // x轴初始缩放
let Ty = 0;    // y轴初始缩放
let Tz = 1;		 // z轴固定为1
let step = 0.06; // 每次的变化量
let status = true
function run () {
// 定义最大所放量为 2 倍
if (Tx >= 2) {
status = false
}
if (Tx <= 0) {
status = true
}
if (status) {
Tx += step;
Ty += step;
} else {
Tx -= step;
Ty -= step;
}
// 初始化一个旋转矩阵。
const mat = new Float32Array([
Tx,  0.0, 0.0, 0.0,
0.0,  Ty, 0.0, 0.0,
0.0, 0.0,  Tz, 0.0,
0.0, 0.0, 0.0, 1.0,
]);
// 将旋转矩阵赋值给着色器
gl.uniformMatrix4fv(matLocation,false,mat);
// 绘制新的三角形
gl.drawArrays(gl.TRIANGLES,0,3);
// 使用此方法实现一个动画
requestAnimationFrame(run)
}
run()
3. 效果演示

缩放效果.gif

3. 总结

经过三篇文章的分享,我们已经得到了三种图形变换的矩阵,这里我们来总结一下:

1. 平移矩阵

| 1 0 0 x |

| 0 1 0 y |

| 0 0 1 z |

| 0 0 0 1 |

2. 旋转矩阵

| cos(β) sin(β) 0 0 |

| -sin(β) cos(β) 0 0 |

| 0 0 1 0 |

| 0 0 0 1 |

3. 缩放矩阵

| Tx 0 0 0 |

| 0 Ty 0 0 |

| 0 0 Tz 0 |

| 0 0 0 1 |

ps:旋转矩阵我们只推导了绕z轴旋转的矩阵。绕x轴和绕y轴的矩阵也可以自己试着推导下。

4. 完整代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<canvas id="webgl" width="500" height="500"></canvas>
<script>
const gl = document.getElementById('webgl').getContext('webgl');
const vertexShaderSource = "" +
"attribute vec4 apos;" +
"uniform mat4 mat;" +
"void main(){" +
" gl_Position = mat * apos;" +
"}";
const fragmentShaderSource = "" +
"void main(){" +
" gl_FragColor = vec4(0.0,0.0,1.0,1.0);" +
"}";
const program = initShader(gl,vertexShaderSource,fragmentShaderSource);
const aposLocation = gl.getAttribLocation(program,'apos');
const matLocation = gl.getUniformLocation(program,'mat');
const data =  new Float32Array([
0.0,0.3,
-.3,-.3,
.3,-.3
]);
const buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER,buffer);
gl.bufferData(gl.ARRAY_BUFFER,data,gl.STATIC_DRAW);
gl.vertexAttribPointer(aposLocation,2,gl.FLOAT,false,0,0);
gl.enableVertexAttribArray(aposLocation);
let Tx = 0;    // x轴初始缩放
let Ty = 0;    // y轴初始缩放
let Tz = 1;		 // z轴固定为1
let step = 0.06; // 每次的变化量
let status = true
function run () {
// 定义最大所放量为 2 倍
if (Tx >= 2) {
status = false
}
if (Tx <= 0) {
status = true
}
if (status) {
Tx += step;
Ty += step;
} else {
Tx -= step;
Ty -= step;
}
// 初始化一个旋转矩阵。
const mat = new Float32Array([
Tx,  0.0, 0.0, 0.0,
0.0,  Ty, 0.0, 0.0,
0.0, 0.0,  Tz, 0.0,
0.0, 0.0, 0.0, 1.0,
]);
// 将旋转矩阵赋值给着色器
gl.uniformMatrix4fv(matLocation,false,mat);
// 绘制新的三角形
gl.drawArrays(gl.TRIANGLES,0,3);
// 使用此方法实现一个动画
requestAnimationFrame(run)
}
run()
function initShader(gl,vertexShaderSource,fragmentShaderSource){
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(vertexShader,vertexShaderSource);
gl.shaderSource(fragmentShader,fragmentShaderSource);
gl.compileShader(vertexShader);
gl.compileShader(fragmentShader);
const program = gl.createProgram();
gl.attachShader(program,vertexShader);
gl.attachShader(program,fragmentShader)
gl.linkProgram(program);
gl.useProgram(program);
return program;
}
</script>
</body>
</html>

回复

我来回复
  • 暂无回复内容