前一章就是第二章主要学的是通过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. iOS 计算源码行数

    如果要统计ios开发代码,包括头文件的,终端命令进入项目目录下,命令如下 1.列出每个文件的行数 find . -name "*.m" -or -name "*.h&qu ...

  2. VUE 生命周期 详解

    beforeCreate vue中的第一个生命周期,在vue实列被完全创建出来之前会执行.注意:在beforeCreate生命周期函数执行时,data.methods.中的数据都还没有初始化. cra ...

  3. Kafka系列文章

    Kafka系列文章 Kafka设计解析(一)- Kafka背景及架构介绍 Kafka设计解析(二)- Kafka High Availability (上) Kafka设计解析(三)- Kafka H ...

  4. 2017-2018-2 20155315《网络对抗技术》Exp4：恶意代码分析

    实验目的 是监控你自己系统的运行状态,看有没有可疑的程序在运行. 是分析一个恶意软件,就分析Exp2或Exp3中生成后门软件:分析工具尽量使用原生指令或sysinternals,systracer套件 ...

  5. python基础学习1-生成器，递归函数

    #!/usr/bin/env python # -*- coding:utf-8 -*- li=[11,22,33,44,55] r= filter(lambda x:x>22,li) prin ...

  6. 4 django篇

    1.django请求生命周期 wsgi, 他就是socket服务端,用于接收用户请求并将请求进行初次封装,然后将请求交给web框架 (Flask.Django) 中间件,帮助我们对请求进行校验或在请求 ...

  7. 牛客国庆集训派对Day1 B. Attack on Titan

    B. Attack on Titan 链接 #include<cstdio> #include<algorithm> #include<cstring> #incl ...

  8. imu标定 imu_tk

    1. 首先标定加速度计,这是imu加速度计xyz三个轴在标定过程中的读数: 标定结果: 2. 利用加速度计的标定结果,标定陀螺仪,结果: 也可以使用港科大开源的一个工具: https://github ...

  9. tornado-About Web

    1.轻量级的web开发框架,没有像django那样的命令行工具,只用于写一些小的脚本 (1)安装tornado包 pip intall tornado # conda install tornado( ...

  10. java实现哈弗曼树

    O(∩_∩)O~~ 概述 我想学过数据结构的小伙伴一定都认识哈弗曼,这位大神发明了大名鼎鼎的“最优二叉树”,为了纪念他呢,我们称之为“哈弗曼树”.哈弗曼树可以用于哈弗曼编码,编码的话学问可就大了,比如 ...

热门专题

git deamon使用
linux端口扫描脚本
HTML 输入框 美化
ubuntu显卡驱动(nvidia)集成显卡
win10最常访问怎么删除
elem的树形表格怎么更新
django 实现注册码功能
无服务器解决方案原理
prometheus 环境准备
python while if练习题
c# thread 等待所有线程完毕
jeecgboot3 弹窗
DOMDocument60 换行
sql developer连接成功但是cmd报无监听程序
lz78算法 python代码
jrebel默认刷新快捷键
charles抓包小程序没有数据
cocos2dx tieldmap地图制作
gTest测试已经写好的代码片段
poi 图表数据替换 刷新