前一章就是第二章主要学的是通过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. Linux基础-6.系统的启动过程

    Linux启动时我们会看到许多启动信息 Linux系统的启动过程并不是大家想象中的那么复杂,其过程可以分为5个阶段: 内核的引导 运行init 系统初始化 建立终端 用户登录系统 init程序的类型: ...

  2. LZO压缩算法64位崩溃问题

    *** vs2013 64位调用LZO算法失败,原因: vs2013 long 类型4位 指针为8位. 解决: 将static lzo_bool basic_ptr_check(void)函数中,指针 ...

  3. WPF中使用WindowChrome美化窗口过程中的一个小问题

    WPF中使用WindowChrome美化窗口,在园子里有几篇不错的文章,我也是参考练习过程中发现的问题,并记录下来. 在看过几篇教程后,给出的窗口很多出现这样一个问题,如果设置了窗口标题栏的高度大于默 ...

  4. springboot快速入门（一）——HelloWorld搭建

    一.起步 1.先导 凡技术必登其官网的原则,官网走一波:https://projects.spring.io/spring-boot/#quick-start 极力推荐一个springboot教程:h ...

  5. 20155202 2016-2017-2 《Java程序设计》第9周学习总结

    20155202 2016-2017-2 <Java程序设计>第9周学习总结 教材学习内容总结 整合数据库: JDBC驱动程序,按照方式分4种类型: Type1 : JDBC-ODBC B ...

  6. docker for windows 使用mssql2017

    原文:docker for windows 使用mssql2017 确实有些坑,本来之前坑都踩过了,但是时间一久就忘记了,这次换电脑又都踩了一遍. 几个要点(坑): 1.docker安装时默认就好.然 ...

  7. 3-[HTML]-head标签介绍

    1.head标签 我们首先来介绍一下head标签的主要内容和作用,文档的头部描述了文档的各种属性和信息,包括文档的标题.编码方式及URL等信息,这些信息大部分是用于提供索引,辩认或其他方面的应用(移动 ...

  8. SP1716 GSS3 - Can you answer these queries III

    题面 题解 相信大家写过的传统做法像这样:(这段代码蒯自Karry5307的题解) struct SegmentTree{ ll l,r,prefix,suffix,sum,maxn; }; //.. ...

  9. CF 1138 F. Cooperative Game

    F. Cooperative Game 链接 题意: 有10个玩家,开始所有玩家在home处,每次可以让一些玩家沿着边前进一步,要求在3(t+c)步以内,到达终点. 分析: 很有意思的一道题.我们构造 ...

  10. 4320: ShangHai2006 Homework

    4320: ShangHai2006 Homework 链接 分析: 分块.对权值模数进行分块,模数小于$\sqrt V$的($V$为权值上界),暴力处理. 模数大于$\sqrt V$的,设模数是k, ...

热门专题

C# 如何设置控件根据电脑显示屏改变大小
watch监听文本框 值变化太快
docker es启动几分钟后自动关闭
AP/Router WiFi模块
mysql int 插入空字符串
hangfire 分布式实现原理
centos7安装Laravel6.5
javascript中array的正确写法
js中关闭窗口的方法
decode编码解码工具
linux find 文件 并cat
安卓实现呼吸跳动动画效果
msvc 静态库 链接静态库
flowable form表单表格详解
js 防抖 lodsh
注意git的密码不是osc的密码
oracle一个表的字段等于另一个表的字段
惠普 1050 彩色代替黑色
mysql是怎样运行的 掘金小册
linux上使用其他用户对nginx的启停