前一章就是第二章主要学的是通过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. CH1102 火车进出栈问题（高精/卡特兰数）

    描述 一列火车n节车厢,依次编号为1,2,3,-,n.每节车厢有两种运动方式,进栈与出栈,问n节车厢出栈的可能排列方式有多少种. 输入格式 一个数,n(n<=60000) 输出格式 一个数s表示 ...

  2. 阿里云服务器+宝塔环境+LNMP+tp5.1安装和调试

    1.首先肯定得有个阿里云服务器,楼主是用来自己测试用得,所以就买了个1年得突发性实例,虽然网上都说别买这种,不过个人测试还是没有多少要求得 2.买了服务器之前可以顺带买个域名,再顺带去备案一下,阿里云 ...

  3. 生死系列--fuding

    fuding是我们村上的人,比我大十几岁的样子,长的浓眉大眼,相貌很不错,说话声音深厚.当兵转业后留在武汉,取了老婆听说是本地大官的女儿,他们又生了一个女儿,一家经济实力不错. 我们互相见面一般是在春 ...

  4. Oracle单节点_Grid_Infrastructure_DB_安装过程图解(一/三)

    首先进行各种准备: ASMLIB的准备,用户和目录的创建. 安装好Linux之后(采用了OEL 5.7),查看是否光盘中包含ASMLIB:

  5. 13 - stark总结、github代码

    1.stark - 总结 (单例,继承,反射,面向对象,modelform 应用得很好!!) 1.注册表 单例模式 site = StarkSite() 2.生成url url(r'^stark/', ...

  6. c#总结:datatable的方法大全

    最近在做一个数据处理,保存到datatable中,在过程中了解了datatable一些用法,总结一下: //定义 DataTable dt = new DataTable(); //写入列名: htT ...

  7. jquery 直接访问图片路径

    jQuery("#img").attr("src",function(){return this.src+"?"});

  8. pycharm导入路径问题

    博主在导入自定义模块式出现模块下有红色波浪线,如下: 例如from conf import setting 导入时会从当前目录下找找到youkuClient就不会再往下找了,所以引入模块的路径不能夸路 ...

  9. 亿级PV请求的三种负载均衡技术

    在互联网+不断渗透到生活中的今天,各种各样的网络服务存在在我们身边,他们的访问流量也是大得惊人.一个大型网站(百万PV以上)想要正常访问,单单靠一台服务器是不可能提供稳定服务的.这时候就需要用负载均衡 ...

  10. 【RabbitMQ】三种Exchange模式——订阅、路由、通配符模式

    https://blog.csdn.net/ww130929/article/details/72842234

热门专题

javaweb地图开百度地图开js地地图开发开发
h330 阵列卡 删除 raid
c# ListViewEx 编辑框
xms和xmx怎么定大小
linux 中无法用php创建文件
win32 父窗口 重绘 子窗口区域
altium designer导入板框
round() c语言
mysql指定分区提升查询速度 range
oracle查询一天的数据,上一个月的数据放在一起、
求二维所有子数组的和的最大值
nlogn稀疏图怎么计算的
jmeter线程设置启动和结束时间
el-radio-group 值为中文字
myloader 导入主库
asp.net修改文件attributes属性
centos7 安装php7 源失效
有买入卖出怎么算加权均价
ie已限制此网页运行脚本
centos6更改时区