15 使用矩阵变换库进行图形变换
来源:互联网 发布:流畅的python 英文版 编辑:程序博客网 时间:2024/05/29 16:53
今天我更新一个一个比较简单的方法设置矩阵,就是使用教程里面封装好的矩阵库,就可以很简单的实现矩阵转换了。
<!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 src="lib/cuon-matrix.js"></script><!--新引入了矩阵的库文件,如果没有去看我更新的第三节--><script> //顶点着色器 var VSHADER_SOURCE = "" + "attribute vec4 a_Position;\n" + "uniform mat4 u_ModelMatrix;\n" + "void main(){" + " gl_Position = u_ModelMatrix * a_Position;\n" + "}\n"; //片元着色器 var FSHADER_SOURCE = "" + "void main(){" + " gl_FragColor = vec4(0.0,1.0,.0,1.0);\n" + "}\n"; //加载完成调用的方法 function main() { var canvas = document.getElementById("canvas"); var gl = getWebGLContext(canvas); if(!gl){ console.log("电脑不支持WebGL"); return; } if(!initShaders(gl,VSHADER_SOURCE,FSHADER_SOURCE)){ console.log("初始化着色器失败"); return; } var n = initVertexBuffers(gl); //新增,创建Matriix对象进行模型变换 var modelMatrix = new Matrix4(); //计算模型矩阵 var angle = 30.0;//声明旋转的角度 var Tx = 0.5,Ty = 0.5,Tz=0.0;//声明平移的距离 modelMatrix.setRotate(angle,0,0,1);//设置模型矩阵为旋转矩阵 modelMatrix.translate(Tx,Ty,Tz);//将模型矩阵乘以平移矩阵 //获取矩阵的存储位置 var u_ModelMatrix = gl.getUniformLocation(gl.program,"u_ModelMatrix"); if(u_ModelMatrix < 0){ console.log("无法获取到矩阵的存储位置"); return; } //将矩阵模型数据传递给存储位置 gl.uniformMatrix4fv(u_ModelMatrix,false,modelMatrix.elements); gl.clearColor(0.0,0.0,1.0,1.0); gl.clear(gl.COLOR_BUFFER_BIT); gl.drawArrays(gl.TRIANGLES,0,n); } //使用缓冲区 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("无法创建缓冲区"); 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"); 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>这一节的内容与上一节不同之处就是,我们自己不用Float32Array方法去创建数据,自己设置了,而是直接使用
new Matrix4()方法直接实例化了一个矩阵数据,这样比较简单快捷的,而且里面封装了很多的方法用于设置矩阵的相关信息。
下面列出来了所有相关的方法:
通过这些方法,我们可以很简单的写出矩阵数据,记性对每一个点进行转换。
重点:矩阵转换,先后,得到的结果不一样的,上面的代码就是平移后旋转的,还有一种就先旋转后,再平移的
上面的代码是第二种情况,如果需要第一种转换,就需要将65 66行的代码修改为
modelMatrix.setTranslate(Tx,Ty,Tz);//设置模型矩阵为平移矩阵 modelMatrix.rotate(angle,0,0,1);//将模型矩阵进行旋转如果你仔细的话,会发现先平移后旋转的顺序和代码刚好相反,我还没搞明白,稍后更新吧
阅读全文
0 0
- 15 使用矩阵变换库进行图形变换
- 图形变换之使用矩阵变换
- 图形变换矩阵小结
- 图形变换矩阵
- 三维图形矩阵变换
- 图形变换之基本矩阵变换
- 图形变换的矩阵方法
- android 图形变换矩阵讲解
- 图形变换之使用坐标变换
- OpenGL 矩阵变换GLM库的使用
- OpenGL 矩阵变换GLM库的使用
- OpenGL 矩阵变换GLM库的使用
- 基本的2D图形变换&变换矩阵推导(转)
- 基本的2D图形变换&变换矩阵推导
- 2D图形的变换和变换矩阵
- 如何:使用颜色矩阵对单色进行变换
- Android 使用Matrix进行图像变换,和矩阵分析!
- android 对图像进行矩阵变换(Martix)的使用笔记
- JavaScript中typeof的用法汇总(返回的是变量类型)
- 我的大一
- Recyclable Counter With Confinement (RCC)浅析
- Set up a flag
- 菜鸟学php扩展 之 hello world(一)
- 15 使用矩阵变换库进行图形变换
- 设计模式-装饰者模式学习笔记
- Jetson TX1 开发教程(4)--TensorRT加速Caffe初探
- Struts2_解决struts2配置文件无提示问题
- php基础--变量及作用域
- jquery 如何动态添加、删除class样式方法介绍
- 通过jquery获取input的value问题--理解JQuery对象和JS:DOM对象区别与联系
- servlet中读取web的配置文件
- 瀑布流布局与自定义瀑布流布局插件