您的位置：首页 > 其它

14 WebGL 使用矩阵实现图形旋转+平移并解释一下缩放

2017-05-11 00:04 666 查看

具体操作，wasd键控制缩放，上下左右键控制图形的位置，图形自动旋转。
案例查看地址：点击这里<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
margin: 0;
text-align: center;
}

#canvas {
margin: 0;
}
</style>
</head>
<body onload="main()">
<canvas id="canvas" height="800" width="800">
你的浏览器不支持WebGL，请更换新的浏览器
</canvas>
</body>
<script src="lib/webgl-utils.js"></script>
<script src="lib/webgl-debug.js"></script>
<script src="lib/cuon-utils.js"></script>
<script>
//顶点着色器
var VSHADER_SOURCE = "" +
"attribute vec4 a_Position;\n" +
"uniform mat4 u_xformMatrix;\n" +//此处声明了一个矩阵的uniform变量
"void main(){" +
" gl_Position = u_xformMatrix * a_Position;\n" +//顶点乘以矩阵
"}";

//片元着色器
var FSHADER_SOURCE = "" +
"void main(){" +
" gl_FragColor = vec4(0.0,1.0,0.0,1.0);" +
"}";

//声明初始旋转角度
var angle = 0.0;

//声明平移的x，y变量
var Tx = 0.0, Ty = 0.0, Tz = 0.0;

//声明缩放的x，y变量
var Sx = 1.0,Sy = 1.0, Sz = 1.0;

function main() {
//获取canvas对象
var canvas = document.getElementById("canvas");

//获取WebGL上下文
var gl = getWebGLContext(canvas);

if (!gl) {
console.log("无法获取到WebGL上下文");
return;
}

if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
console.log("无法初始化着色器");
return;
}

var n = initVertexBuffers(gl);

//获取uniform的存储位置
var u_xformMatrix = gl.getUniformLocation(gl.program, "u_xformMatrix");

//书写一个可以重新绘制页面的方法
function run() {
//计算出sin b 和cos b的值
var radian = Math.PI * angle / 180;
var cosB = Math.cos(radian);
var sinB = Math.sin(radian);

//声明矩阵按列主序排列
var xformMatrix = new Float32Array([
cosB*Sx, sinB*Sx, 0.0, 0.0,
-sinB*Sy, cosB*Sy, 0.0, 0.0,
0.0, 0.0, 1.0*Sz, 0.0,
Tx, Ty, Tz, 1.0
]);

//将生产的矩阵的值传递给u_xformMatrix变量
gl.uniformMatrix4fv(u_xformMatrix,false,xformMatrix);

//绘制底色
gl.clearColor(0.0,0.0,.0,1.0);

gl.clear(gl.COLOR_BUFFER_BIT);

gl.drawArrays(gl.TRIANGLES,0,n);
}

//初始化第一次绘制
run();

//设置定时器，进行定时更新
setInterval(function () {
angle ++;
run();
},100);

//设置键盘上下左右按钮移动图形
document.addEventListener("keyup",function (event) {
console.log(event.keyCode);
switch (event.keyCode){
case 37:
Tx -= 0.05;
break;
case 38:
Ty += 0.05;
break;
case 39:
Tx += 0.05;
break;
case 40:
Ty -= 0.05;
break;
case 87:
Sy += 0.05;
break;
case 83:
Sy -= 0.05;
break;
case 65:
Sx -= 0.05;
break;
case 68:
Sx += 0.05;
break;
}

run();
});

}

function initVertexBuffers(gl) {
var vertices = new Float32Array([0.0, 0.5, -0.5, -0.5, 0.5, -0.5]);
var n = 3;

var vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
var a_Position = gl.getAttribLocation(gl.program, "a_Position");

if (a_Position < 0) {
console.log("无法获取变量存储位置");
return;
}

gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);

gl.enableVertexAttribArray(a_Position);

return n;
}

</script>
</html>

简单的变换，我们可以用数学表达式实现。但是，情形复杂的情况下，数学表达式就不是一种很好的选择了，好在我们可以使用另一个数学工具——变换矩阵（Transformation matrix）来完成工作。
在上面的代码中，32行，我们先uniform声明了一个mat4矩阵类型的变量u_xformMatrix，
在34行，将代码修改成了<新坐标>=<变换矩阵>x<旧坐标>，并且矩阵变量一定要写在前面。