RotatingTriangle---动画旋转三角形---扩展旋转+平移

最新推荐文章于 2022-04-08 16:16:48 发布

dg_2018

最新推荐文章于 2022-04-08 16:16:48 发布

阅读量238

点赞数

分类专栏： 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>RotatingTriangle---动画旋转三角形---扩展旋转+平移</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/lib/cuon-matrix.js"></script>
<script type="text/javascript" src="/WebGL/js/RotatingTriangle.js"></script>
<script>
</script>
</body>
</html>

//顶点着色器程序
var VSHADER_SOURCE =
   'attribute vec4 a_Position;\n' + //attribute被称为存储限定符，表示接下来的变量（a_Position）
   'uniform mat4 u_ModelMatrix;\n' + //
   'void main() {\n' +
   'gl_Position = u_ModelMatrix * 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_STEP = 45.0;

   //设置<canvas>的背景颜色------黑色
   gl.clearColor(0.0,0.0,0.0,1.0);

   //获取u_ModelMatrix变量的存储位置将模型矩阵传输给顶点着色器
   var u_ModelMatrix = gl.getUniformLocation(gl.program, 'u_ModelMatrix');


   //三角形的当前旋转角度
   var currentAngle = 0.0;
   //模型矩阵，Matrix4对象
   var modelMatrix = new Matrix4();


   //开始绘制三角形
   var tick = function() {
       currentAngle = animate(currentAngle); //更新旋转角
       draw(gl, n, currentAngle, modelMatrix, u_ModelMatrix);
       requestAnimationFrame(tick); //请求浏览器在未来适当的时机调用tick()函数方法、
   };

   tick();
}

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;
}

function draw(gl, n, currentAngle, modelMatrix, u_ModelMatrix) {
   //设置旋转矩阵
   modelMatrix.setRotate(currentAngle, 0, 0, 1);

   //设置平移矩阵
   //modelMatrix.translate(0.75, 0, 0);

   //将旋转矩阵传输给顶点着色器
   gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix.elements);

   //清空<canvas>
   gl.clear(gl.COLOR_BUFFER_BIT);

   //绘制三角形
   gl.drawArrays(gl.TRIANGLES, 0, n);
};

//记录上次调用函数的时刻
var g_last = Date.now();
function animate(angle) {
   //计算距离上次调用经过多长的时间
   var now = Date.now();
   var elapsed = now - g_last; //毫秒
   g_last = now;
   //根据距离上次调用的时间，更新当前旋转角度
   var newAngle = angle + (ANGLE_STEP * elapsed) / 1000.0;
   return newAngle %=360;
}

//requestAnimationFrame()开启请求方法，该方法只有当标签页处于激活状态时才会生效。
//该方法是新引入的方法，还没有实现标准化，好在Google提供的webgl-utils.js库
//提供了该函数的定义并隐藏了浏览器间的差异。
//使用这个函数的好处是可以避免在未激活的标签上运行动画。
//cancelAnimationFrame()取消请求方法。

//Matrix4对象所支持的方法和属性：
//Matrix4对象有两种方法：一种方法的名称中含有前缀set，另一种不含。
//包含set前缀的方法，会根据参数计算出变换矩阵，然后将变换矩阵写入到自身中；
//不包含set前缀的方法，会现根据参数计算出变换矩阵，然后将自身与刚刚计算得到的变换矩阵相乘，然后把最终得到的结果再写入到Matrix4对象中。
//1.Matrix4.setIdentity();       将Matrix4实例初始化为单位矩阵。
//2.Matrix4.setTranslate(x,y,z);       将Matrix4实例设置为平移变换矩阵。
//3.Matrix4.setRotate(angle,x,y,z);       将Matrix4实例设置为旋转变换矩阵。
//4.Matrix4.setScale(x,y,z);       将Matrix4实例设置为缩放变换矩阵。
//5.Matrix4.translate(x,y,z);       将Matrix4实例乘以一个平移变换矩阵。
//6.Matrix4.rotate(angle,x,y,z);       将Matrix4实例乘以一个旋转变换矩阵。
//7.Matrix4.scale(x,y,z);       将Matrix4实例乘以一个缩放变换矩阵。
//8.Matrix4.set(m);       将Matrix4实例设置为m，m必须也是一个Matrix4实例。
//9.Matrix4.elements       类型化数组(Float32Array)包含了Matrix4实例的矩阵元素

//先平移后旋转和先旋转后平移的次序会导致不同的效果。

dg_2018

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
RotatingTriangle---动画旋转三角形---扩展旋转+平移

<!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-...
复制链接

扫一扫