RotatedTriangle_Matrix---三角形使用矩阵旋转/平移

最新推荐文章于 2021-03-20 00:33:52 发布

dg_2018

最新推荐文章于 2021-03-20 00:33:52 发布

阅读量295

点赞数

分类专栏： WebGL

WebGL 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>RotatedTriangle_Matrix---三角形使用矩阵旋转/平移</title>
</head>
<body οnlοad="main();">
<canvas id="webgl" width="400" height="400">
Please use a browser that supports "canvas"
</canvas>
<script type="text/javascript" src="/WebGL/js/lib/webgl-utils.js"></script>
<script type="text/javascript" src="/WebGL/js/lib/webgl-debug.js"></script>
<script type="text/javascript" src="/WebGL/js/lib/cuon-utils.js"></script>
<script type="text/javascript" src="/WebGL/js/RotatedTriangle_Matrix.js"></script>
<script>
</script>
</body>
</html>

//顶点着色器程序
var VSHADER_SOURCE =
   'attribute vec4 a_Position;\n' + //attribute被称为存储限定符，表示接下来的变量（a_Position）
   'uniform mat4 u_xformMatrix;\n' + //
   'void main() {\n' +
   'gl_Position = u_xformMatrix * a_Position;\n' + //<新坐标> = <变换矩阵> * <旧坐标>
   '}\n';

//片元着色器程序
var FSHADER_SOURCE =
   'void main() {\n' +
   'gl_FragColor = vec4(1.0,0.0,0.0,1.0);\n' + //设置颜色
   '}\n';

//定义旋转角度（正值为逆时针旋转、负值为顺时针旋转）
//var ANGLE = 90.0;
//定义平移距离变量赋值
//var Tx = 0.5, Ty = 0.5, Tz = 0.0;
//定义将三角形在垂直方向上拉到1.5倍
var Sx = 1.0, Sy = 1.5, Sz = 1.0;

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();
   if(!vertexBuffer){
       console.log('Failed to create the buffer object');
       return -1;
   }
   //将缓冲区对象绑定到目标
   gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
   //向缓冲区对象中写入数据
   gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

   var a_Position = gl.getAttribLocation(gl.program, 'a_Position');

   //将缓冲区对象分配给a_Position变量
   gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
   //连接a_Position变量与分配给它的缓冲区对象
   gl.enableVertexAttribArray(a_Position);

   return n;
}

//为了描述一个旋转，必须指明：图形绕z轴，逆时针旋转了角度。
//1.旋转轴（图形将围绕旋转轴旋转）。
//2.旋转方向（方向：顺时针或逆时针）。
//3.旋转角度（图形旋转经过的角度）。

//1.将顶点坐标转给a_Position;
//2.向a_Position加上u_Translation;
//3.结果赋值给gl_Position;
//因为a_Position和u_Translation变量都是vec4类型的，所以可以直接使用+号，两个的矢量的对应分量会被同时相加。

dg_2018

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
RotatedTriangle_Matrix---三角形使用矩阵旋转/平移

<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-...
复制链接

扫一扫