前一章就是第二章主要学的是通过WebGL实现先是在webGL内赋值，但是不实用后来通过定义attribute和uniform存储限定符来将javascript中的数据传到webGL中，大致的流程是1、在js中定义存储限定符2，在js中获取canvas 在js中获取隐藏浏览器兼容性的上下文环境3、将定义的带有存储限定符的参数和上下文环境通过初始化函数进行参数初始化4、在js中获取相应的定以了存储限定符的变量的存储位置并赋值给js变量5、通过webGL函数将webGL位置和数据作为参数然后完成赋值6、设置背景颜色7、清除颜色8、绘制图形（点，线，三角形、矩形）

第三章的内容包括绘制多个点，将大量数据放入缓冲区（创建、写数据、赋值、激活），然后将大量的点显示在canvas上完成点三角形和矩形的绘制。再就是介绍了矩阵重点是4*4矩阵来实现图形的旋转，平移缩放。关于矩阵式如何控制图形变换的且看如下数学公式

1、

(x,y)是原来的坐标点二(x',y')是经过旋转B度以后的坐标点r是斜边，A是原来与x轴的夹角有如下等式 ：1、x=r*cosA,y=r*sinA,而2、x'=r*cos(A+B) y'=r*sin(A+B)

展开2 得3、x'=r*cosAcosB-r*sinA*sinB，y'=r*sinAcosB+r*cosAsinB 1、3削去r A得 x'=xcosB-y*sinB,y'=x*sinB+y*cosB 从而只要输入了角度B就能得到移动后的新坐标实现了旋转，但还不是矩阵变换矩阵书写不方便直接上结果 var a=new Float32Array([cosB,-sinB,0.0, sinB,cosB,0.0 ,0.0,0.0,1.0]);这就是3*3的旋转矩阵，同理加上平移后的矩阵为var a=new Float32Array([cosB,-sinB,0.0,tx, sinB,cosB,0.0,ty ,0,0.0,1.0,tz,0.0,0.0,0.0,1.0]);4*4矩阵那么放缩矩阵亦是同理。

先看效果图。前后对比

原图，基准

缩放

平移

旋转

上代码，用到的js文件在上一篇中已经写了直接复制就能用。

<!DOCTYPE html>
<html>
  <head>
    <title>RotatedTriangle_Matrix.html</title>
    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

<script src="js/cuon-matrix.js"></script>
    <script src="js/cuon-utils.js"></script>
    <script src="js/webgl-debug.js"></script>
    <script src="js/webgl-utils.js"></script>
    <script type="text/javascript">
        var VSHADER_SOURCE=//定点着色器
        'attribute vec4 a_Position;\n'+//定义vec4的变量 并且声明该存储限定符是attribute型的
        '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(0.0,1.0,0.0,1.0);\n'+
        '}\n';
        
        var tx=0.0,ty=0.0,tz=0.0;
        var ANGLE=4.0;
        function main(){
            var canvas=document.getElementById("webgl");
            
            var gl=getWebGLContext(canvas);
            if(!gl){
                console.log("gl load fail!");
                return;
            }
                
            if(!initShaders(gl,VSHADER_SOURCE,FSHADER_SOURCE)){//初始化着色器
                console.log("fail init shader()!");
                return ;
            }
            //将角度转化为弧度
            var radian=Math.PI*ANGLE/180.0;
            //将弧度转化为响应的正玄和余玄值
            var cosB=Math.cos(radian);
            var sinB=Math.sin(radian);
            //alert(cosB+","+sinB);
            //获取位置
            //通过该矩阵可以进行平移和旋转
            var xformMatrix=new Float32Array([
                cosB,-sinB,0.0,tx,
                sinB,cosB,0.0,ty,
                0.0,0.0,1.0,tz,
                tx,ty,tz,1.0
            ]);
            
            var u_xformMatrix=gl.getUniformLocation(gl.program,'u_xformMatrix');
            
            gl.uniformMatrix4fv(u_xformMatrix,false,xformMatrix);
            var n=initVertexBuffers(gl);
            if(n<0){
                console.log("failed to set the positions of the vertices");
                return;
            }
            
            var a_Position=gl.getAttribLocation(gl.program,'a_Position');//获得attribute的变量
            if(a_Position<0){
                console.log("fail get the PointPosition location!");
                return ;
            }
            
            
            
             gl.clearColor(0.0,0.0,0.0,1.0);
             
            gl.clear(gl.COLOR_BUFFER_BIT);
            
            //gl.drawArrays(gl.LINE_LOOP,0,n);//mode 参数POINTERS可以绘制多个点 LINES 绘制多条直线 LINE_STRIP绘制一系列连接起来的线段不包括首尾LINE_LOOP绘制一系列连接起来的线段包括首尾
            //gl.drawArrays(gl.TRIANGLE_FAN,0,n);//mode 参数TRIANGLES表示绘制三角形 三个点是一组多余的忽略TRIANGLE_STRIP绘制的三角形三个定点一组第一个三角形取前三个第二个取2，3，4  以此类推TRIANGLE_FAN 最后被绘制的一条边与下一个点构成新三角形
            gl.drawArrays(gl.TRIANGLES,0,n);//mode可以绘制出矩形
        
            function initVertexBuffers(gl){
                var vertices=new Float32Array([-0.5,0.5,-0.5,-0.5,0.5,-0.5,-1.0,1.0,-1.0,-1.0,0.0,0.0]);//类型化数组
                
                var n=3;//点的个数
                
                var vertexBuffer=gl.createBuffer();//在webGL中创建缓冲区
                if(!vertexBuffer){
                    console.log("failed to create the buffer object!");
                    return -1;
                }
                
                gl.bindBuffer(gl.ARRAY_BUFFER,vertexBuffer);//将缓冲区与ARRAY_BUFFER绑定就是指定了缓冲区的用途
                gl.bufferData(gl.ARRAY_BUFFER,vertices,gl.STATIC_DRAW);//往缓冲区写数据 STATIC_DRAW对缓冲区优化
                
                var a_Position=gl.getAttribLocation(gl.program,'a_Position');
                
                gl.vertexAttribPointer(a_Position,2,gl.FLOAT,false,0,0);//将缓冲区的数据传入分配给attribute对象 2是定点的分量个数
                gl.enableVertexAttribArray(a_Position);//开启attribute变量
                
                return n;
            }
        }
    </script>
  </head>
 
  <body onload="main()">
       <canvas id="webgl" width="600" height="400"></canvas>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <title>ScaledTriangle.html</title>
    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

<script src="js/cuon-matrix.js"></script>
    <script src="js/cuon-utils.js"></script>
    <script src="js/webgl-debug.js"></script>
    <script src="js/webgl-utils.js"></script>
    <script type="text/javascript">
        var VSHADER_SOURCE=//定点着色器
        'attribute vec4 a_Position;\n'+//定义vec4的变量 并且声明该存储限定符是attribute型的
        '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(0.0,1.0,0.0,1.0);\n'+
        '}\n';
        
        var tx=0.0,ty=0.0,tz=0.0;
        var ANGLE=40.0;
        var Sx=1.0,Sy=0.5,Sz=1.0;
        function main(){
            var canvas=document.getElementById("webgl");
            
            var gl=getWebGLContext(canvas);
            if(!gl){
                console.log("gl load fail!");
                return;
            }
                
            if(!initShaders(gl,VSHADER_SOURCE,FSHADER_SOURCE)){//初始化着色器
                console.log("fail init shader()!");
                return ;
            }
            //将角度转化为弧度
            var radian=Math.PI*ANGLE/180.0;
            //将弧度转化为响应的正玄和余玄值
            var cosB=Math.cos(radian);
            var sinB=Math.sin(radian);
            //alert(cosB+","+sinB);
            //获取位置
            
            //通过该矩阵可以进行平移和旋转
            var xformMatrix=new Float32Array([
                Sx,0.0,0.0,0.0,
                0.0,Sy,0.0,0.0,
                0.0,0.0,Sz,0.0,
                0.0,0.0,0.0,1.0,
            ]);
            
            var u_xformMatrix=gl.getUniformLocation(gl.program,'u_xformMatrix');
            
            gl.uniformMatrix4fv(u_xformMatrix,false,xformMatrix);
            var n=initVertexBuffers(gl);
            if(n<0){
                console.log("failed to set the positions of the vertices");
                return;
            }
            
            var a_Position=gl.getAttribLocation(gl.program,'a_Position');//获得attribute的变量
            if(a_Position<0){
                console.log("fail get the PointPosition location!");
                return ;
            }
            
            
            
             gl.clearColor(0.0,0.0,0.0,1.0);
             
            gl.clear(gl.COLOR_BUFFER_BIT);
            
            //gl.drawArrays(gl.LINE_LOOP,0,n);//mode 参数POINTERS可以绘制多个点 LINES 绘制多条直线 LINE_STRIP绘制一系列连接起来的线段不包括首尾LINE_LOOP绘制一系列连接起来的线段包括首尾
            //gl.drawArrays(gl.TRIANGLE_FAN,0,n);//mode 参数TRIANGLES表示绘制三角形 三个点是一组多余的忽略TRIANGLE_STRIP绘制的三角形三个定点一组第一个三角形取前三个第二个取2，3，4  以此类推TRIANGLE_FAN 最后被绘制的一条边与下一个点构成新三角形
            gl.drawArrays(gl.TRIANGLES,0,n);//mode可以绘制出矩形
        
            function initVertexBuffers(gl){
                var vertices=new Float32Array([-0.5,0.5,-0.5,-0.5,0.5,-0.5,-1.0,1.0,-1.0,-1.0,0.0,0.0]);//类型化数组
                
                var n=3;//点的个数
                
                var vertexBuffer=gl.createBuffer();//在webGL中创建缓冲区
                if(!vertexBuffer){
                    console.log("failed to create the buffer object!");
                    return -1;
                }
                
                gl.bindBuffer(gl.ARRAY_BUFFER,vertexBuffer);//将缓冲区与ARRAY_BUFFER绑定就是指定了缓冲区的用途
                gl.bufferData(gl.ARRAY_BUFFER,vertices,gl.STATIC_DRAW);//往缓冲区写数据 STATIC_DRAW对缓冲区优化
                
                var a_Position=gl.getAttribLocation(gl.program,'a_Position');
                
                gl.vertexAttribPointer(a_Position,2,gl.FLOAT,false,0,0);//将缓冲区的数据传入分配给attribute对象 2是定点的分量个数
                gl.enableVertexAttribArray(a_Position);//开启attribute变量
                
                return n;
            }
        }
    </script>
  </head>
 
  <body onload="main()">
       <canvas id="webgl" width="600" height="400"></canvas>
  </body>
</html>

WebGL学习笔记二的更多相关文章

  1. webgl学习笔记二-绘图多点

    写在前面 建议先看下第一篇webgl学习笔记一-绘图单点 第一篇文章,介绍了如何用webgl绘图一个点.接下来本文介绍的是如何绘制多个点.形成一个面. webgl提供了一种很方便的机制,即缓冲区对象, ...

  2. WebGL学习笔记二——绘制基本图元

    webGL的基本图元点.线.三角形 gl.drawArrays(mode, first,count) first,代表从第几个点开始绘制即顶点的起始位置 count,代表绘制的点的数量. mode,代 ...

  3. webgl学习笔记五-纹理

    写在前面 建议先阅读下前面我的三篇文章. webgl学习笔记一-绘图单点 webgl学习笔记二-绘图多点 webgl学习笔记三-平移旋转缩放 术语 : 纹理 :图像 图形装配区域 :顶点着色器顶点坐标 ...

  4. webgl学习笔记四-动画

    写在前面 建议先阅读下前面我的三篇文章. webgl学习笔记一-绘图单点 webgl学习笔记二-绘图多点 webgl学习笔记三-平移旋转缩放   下面我们将讲解下如何让一个正方形动起来~不断擦除和重绘 ...

  5. webgl学习笔记三-平移旋转缩放

    写在前面 建议先阅读下前面我的两篇文章. webgl学习笔记一-绘图单点 webgl学习笔记二-绘图多点 平移 1.关键点说明 顶点着色器需要加上 uniform vec4 u_Translation ...

  6. WPF的Binding学习笔记(二)

    原文: http://www.cnblogs.com/pasoraku/archive/2012/10/25/2738428.htmlWPF的Binding学习笔记(二) 上次学了点点Binding的 ...

  7. AJax 学习笔记二(onreadystatechange的作用)

    AJax 学习笔记二(onreadystatechange的作用) 当发送一个请求后,客户端无法确定什么时候会完成这个请求,所以需要用事件机制来捕获请求的状态XMLHttpRequest对象提供了on ...

  8. [Firefly引擎][学习笔记二][已完结]卡牌游戏开发模型的设计

    源地址:http://bbs.9miao.com/thread-44603-1-1.html 在此补充一下Socket的验证机制:socket登陆验证.会采用session会话超时的机制做心跳接口验证 ...

  9. JMX学习笔记(二)-Notification

    Notification通知,也可理解为消息,有通知,必然有发送通知的广播,JMX这里采用了一种订阅的方式,类似于观察者模式,注册一个观察者到广播里,当有通知时,广播通过调用观察者,逐一通知. 这里写 ...

随机推荐

  1. Oracle 下马观花看redo

    ----------------------------------------- --Lerning Content :Oracle 下马观花看redo --Author :如人饮水冷暖自知 --版 ...

  2. day 87 Vue学习六之axios、vuex、脚手架中组件传值

      本节目录 一 axios的使用 二 vuex的使用 三 组件传值 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 axios的使用 Axios 是一个基于 promise 的 HT ...

  3. 理解IaaS、PaaS、SaaS 的区别

    作者:何足道链接:https://www.zhihu.com/question/21641778/answer/62523535来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

  4. 英语linux+英语firefox+英语Oracle OEM如何设置成显示日语

    1 linux安装盘挂载,安装日语语言包 2 linux的系统语言设置为日语 3 firefox的 edit-> setting -> contents -> language se ...

  5. MySQL下建立表

    磨砺技术珠矶,践行数据之道,追求卓越价值 回到上一级页面: PostgreSQL杂记页     回到顶级页面:PostgreSQL索引页 [作者 高健@博客园  luckyjackgao@gmail. ...

  6. 2-4 list练习题

    参考答案 >>> names = [] >>> names.append('old_driver') >>> names.append('rain ...

  7. 前端- css - 总结

    1.css层叠样式表 1.什么是CSS? CSS是指层叠样式表(Cascading Style Sheets),样式定义如何显示HTML元素,样式通常又会存在于样式表中. 也就是说把HTML元素的样式 ...

  8. dpkg使用记录

    dpkg -l 查看所有已安装的包 grep即可过滤想要的内容 dpkg -r 包名   // 卸载包    -P  完全卸载 可能会有配置文件不能删除  不能删除的重启再卸载即可 dpkg -i 包 ...

  9. 聊聊Http协议

    http协议是大家在互联网中最为熟悉的协议,只要上网大家都会遇到,但是,很多人被问道什么是http协议,http协议的内容是什么就懵了.这里,我们随便聊聊http协议. 首先,我们说说协议.我一直觉得 ...

  10. 用vs2012编译cocos2dx-3.9

    这几天想玩一下cocos2dx3.9新版本的东西,但是公司电脑配置不够,开个vs2012都卡的不行,更别提高版本的了.因为cocos2dx-3.9中使用了好多c++11的规范,而vs2012有好多C+ ...

热门专题

ContextConfiguration 注解 原理
JMeter测试HBase
.mat文件是struct形式
as 引用 lib下的jar
linux目录挂载到其它目录
wikipedia英文官网搜索引擎
发现不了 2008 r2 共享
函数式keras添加注意力层
a-input点击边框不变色
iwlwifi error -2 debian 小米笔记本
怎么看frida对应的frida-tools
customScrollbarchrome下有时不能滚动
const数据成员必须初始化
mybatis insert方法
批处理 查找字符串保留换行
DiskFileItemFactory 删除默认sheet
python 提高矩阵维度
treeview 插件
ionic与Cordova
-L rpath一起使用