在上一章中主要说明了通过矩阵来实现平面图形的平移、旋转、缩放，到最后完全可以用4*4矩阵实现所有的动作，在本章就是第四章主要是对矩阵进行了封装，其WebGL的流程和上一章大部分大部分相同，定义可以在webGL和javascript间传值的变量获取canvas 获取上下文 初始化webGL并传入参数接下来是获取定义的变量的存储位置 定义4*3矩阵 并且完成数据交换  这里的4*4矩阵不再是矩阵了而是由js文件做了进一步的封装通过setRotate();和rotate（）这类函数完成矩阵初始化rotate这类的是用作需要复杂动作时矩阵间相乘使用的。重点是每次setRotate()这类函数被调用都是在调用初始点的坐标下面的例子可以很好的体现该特性。浏览网址 http://123.206.70.64:8080/WebGL4/RotatingTriangle.html

上代码

<!DOCTYPE html>
<html>
  <head>
    <title>RotatingTriangle.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_ModelMatrix;\n'+//存储限定符 定义位移量
        'void main(){\n'+
        'gl_Position=u_ModelMatrix*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=90.0;
        var ANGLE_STEP=45.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 currentAngle=0.0;
            //通过该矩阵可以进行平移和旋转
            var modelMatrix=new Matrix4();//创建Matrix对象
            
            var u_ModelMatrix=gl.getUniformLocation(gl.program,'u_ModelMatrix');
    
            var n=initVertexBuffers(gl);//获得是图形中需要点的个数
            if(n<0){
                console.log("failed to set the number of vertex");
                return;
            }
            
            gl.clearColor(0.0,0.0,0.0,1.0);//设置清除缓冲区颜色
            
            
            //开始反复按均衡的转速 绘制三角形
            var tick=function(){
                
                currentAngle=animate(currentAngle);//获取新的角度就是旧的角度加上了新的增加的角度
                draw(gl,n,currentAngle,u_ModelMatrix,modelMatrix);//绘制出三角形
                requestAnimationFrame(tick);//只有当前的浏览器标签页处于激活状态时才去调用tick函数 该函数同时也隐藏浏览器间的差异性 这是浏览器再未来不确定的时间内会调用函数
            };
            tick();//让函数开始执行
            
        }
        
            //该函数负责将大量点的坐标传入webGL
            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;
            }
            
                //绘制三角形
            function draw(gl,n,currentAngle,u_ModelMatrix,modelMatrix){
            
                modelMatrix.setRotate(currentAngle,0,0,1);//设置旋转的矩阵   注意：每次调用setRotate后会重新设置matrix4矩阵
                
                modelMatrix.translate(0.35,0,0);//由于每次setRotate的图形会有不同的旋转角所以向x轴移动相同的距离会产生不同的效果
                
                gl.uniformMatrix4fv(u_ModelMatrix,false,modelMatrix.elements);//将新的点的坐标的类型化数组传入webGL
            
                gl.clear(gl.COLOR_BUFFER_BIT);
                
                gl.drawArrays(gl.TRIANGLES,0,n);
                
            }
            
            //该函数负责设置时间
            var last=Date.now();//保存上一次的时间
            function animate(angle){
                var now=Date.now();//获取调用时的时间
                
                var mistiming=now-last;//两次之间的时间差单位是毫秒

var newAngle=angle+(ANGLE_STEP*mistiming)/1000.0;//将每秒转动角度转为每毫秒转动角度乘以时间就是应该转动的距离
                
                return newAngle%=360;//不大于360度
            }
    </script>
  </head>
 
  <body onload="main()">
       <canvas id="webgl" width="600" height="400"></canvas>
       
  </body>
</html>

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

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

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

  2. webgl学习笔记五-纹理

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

  3. webgl学习笔记四-动画

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

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

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

  5. Oracle学习笔记三 SQL命令

    SQL简介 SQL 支持下列类别的命令: 1.数据定义语言(DDL) 2.数据操纵语言(DML) 3.事务控制语言(TCL) 4.数据控制语言(DCL)  

  6. [Firefly引擎][学习笔记三][已完结]所需模块封装

    原地址:http://www.9miao.com/question-15-54671.html 学习笔记一传送门学习笔记二传送门 学习笔记三导读:        笔记三主要就是各个模块的封装了,这里贴 ...

  7. JSP学习笔记(三):简单的Tomcat Web服务器

    注意:每次对Tomcat配置文件进行修改后,必须重启Tomcat 在E盘的DATA文件夹中创建TomcatDemo文件夹,并将Tomcat安装路径下的webapps/ROOT中的WEB-INF文件夹复 ...

  8. java之jvm学习笔记三(Class文件检验器)

    java之jvm学习笔记三(Class文件检验器) 前面的学习我们知道了class文件被类装载器所装载,但是在装载class文件之前或之后,class文件实际上还需要被校验,这就是今天的学习主题,cl ...

  9. VSTO学习笔记(三) 开发Office 2010 64位COM加载项

    原文:VSTO学习笔记(三) 开发Office 2010 64位COM加载项 一.加载项简介 Office提供了多种用于扩展Office应用程序功能的模式,常见的有: 1.Office 自动化程序(A ...

随机推荐

  1. 《Effective C++》item25：考虑写出一个不抛异常的swap函数

    std::swap()是个很有用的函数,它可以用来交换两个变量的值,包括用户自定义的类型,只要类型支持copying操作,尤其是在STL中使用的很多,例如: int main(int argc, _T ...

  2. ruby的循环使用及区别（for、each等）

    ruby的循环有以下几种: times方法 for语句 while语句 until语句(与while相反) each方法(与for极度相似,在ruby内部,for语句是用each实现的) loop方法 ...

  3. Verilog_Day2

    Verilog_Day1 在CSDN博客上.http://blog.csdn.net/m0_38073085 第三章: 书上基本知识 每个Verilog程序包括4个主要部分:端口定义,I/O说明,内部 ...

  4. vba 语法

    VBA语言基础 第一节 标识符 一．定义 标识符是一种标识变量.常量.过程.函数.类等语言构成单位的符号,利用它可以完成对变量.常量.过程.函数.类等的引用. 二．命名规则 1) 字母打头,由字母.数 ...

  5. day1 UnicodeEncodeError: 'gbk' codec can't encode character '\xa0' in position 2490: illegal multibyte sequence 错误提示

    get方式得到网页的信息 #coding=utf-8 #pip install requests #直接get到网页的信息 import requests from bs4 import Beauti ...

  6. linux编译安装aria2

    一.安装aria2  [root@192-168-7-77 ~]# wget https://github.com/aria2/aria2/releases/download/release-1.33 ...

  7. Gitlab+Jenkins学习之路（十）之Jenkins按角色授权和Pipeline

    一.Jenkins按角色授权 当一个公司的开发分为多个组别,或者是多个项目等等.用于公司内部测试,让开发人员自行构建测试,此时不可能让所有的开发都在公用一个构建,这样变得很混乱,为了解决这一问题,je ...

  8. Windows：使用Dos命令管理服务（Services）

    Windows 服务器系列: Windows:查看IP地址,IP地址对应的机器名,占用的端口,以及占用该端口的应用程 Windows:使用Dos命令管理服务(Services) Windows:任务调 ...

  9. asp.net core结合NLog搭建ELK实时日志分析平台

    0.整体架构 整体架构目录:ASP.NET Core分布式项目实战-目录 一.介绍ELK 1.说明(此篇ELK采用rpm的方式安装在服务器上)-牛刀小试 承接上一篇文章的内容准备部署ELK来展示asp ...

  10. VBA_话费明细单_格式调整

    VBA-联通话费明细单-格式调整 Sub ChangeColumn() Rows(1).RowHeight = 24 '设置第1行的行高 Rows(1).WrapText = True '设置第1行的 ...