前一章就是第二章主要学的是通过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 Class结构分析

    objc_class结构体 类在OC中是objc_class的结构体指针 typedef struct objc_class *Class; 在objc/runtime.h中objc_class结构体 ...

  2. MariaDB中文乱码之解决思路

    首先出现乱码的原因就是编码不一致问题引起的,那么就从以下2个方面入手: 1.应用层:前提条件数据库服务端存储的中文数据是对的,但是页面上显示乱码,这里只需要检查你的项目的编码格式,设置成一致就行. 2 ...

  3. 文本处理三剑客之 awk

    GAWK:报告生成器,格式化文本输出 awk [options] ‘program’ var=value file… awk [options] -f programfile var=value fi ...

  4. Deepin15.8系统下安装QorIQ Linux SDK v2.0 yocto成功完美运行的随笔

    2019.2.17日:最终安装成功,完美解决! 2019.2.16日:最终安装未成功,但是过程中排除 了几个bug,前进了几步,仅供参考. 写在最前面,yocto安装是有系统要求的,Deepin 15 ...

  5. Scala-构造函数

    /*scala的构造函数分为主构造函数和辅助构造函数. 一.主构造函数在Scala中,每个类都有主构造函数,和类的定义交织在一起.一个Scala类的主构造函数包括:1.构造函数的参数:2.类体中调用的 ...

  6. 补交20145226蓝墨云班课 -- MyCP

    蓝墨云班课 -- MyCP.java 具体描述: 编写MyCP.java 实现类似Linux下cp XXX1 XXX2的功能,要求MyCP支持两个参数: java MyCP -tx XXX1.txt ...

  7. VBA中字符串连接/字符串拼接中“&”和“+”的区别

    VBA中字符串连接/字符串拼接中“&”和“+”的区别   在VBA中用于字符串连接的只有“&”和“+”两种运算符. 1.“&”是强制性连接,就是不管什么都连接. 2.“+”是对 ...

  8. WPF 扩大，回弹效果

    原文:WPF 扩大,回弹效果 <Window x:Class="Fish.AccountBook.View.Test.PanelWindow" xmlns="htt ...

  9. 成都Uber优步司机奖励政策（4月23日）

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  10. Sklearn环境搭建与常用包

    开发环境搭建 直接安装Anaconda IPython IPython是公认的现代科学计算中最重要的Python工具之一.它是一个加强版的Python交互命令行工具,有以下几个明显的特点: 1. 可以 ...

热门专题

apkkiller smali文件丢失
request.getrequestdispatcher乱码
spring mongo 查询时间时区不正确
ubuntu nethog监控
去除低质量的reads
idea社区Java enterprise
bootstrap select宽度和input不通
帝国栏目调用内容简介
encodeURI 汉字乱码
xml-apis.jar的问题
mavoneditor解析md
win10 active directory补丁下载
wpf button 三态
jQuery.ajax 成功回调函数未执行
阿里 druid解析sql
java判断字符是否为数字字母
centos8开机启动网卡
ios和安卓的跨平台差异
android中设置按钮宽度为屏宽的一半
Android tv监听遥控器返回键