在上一章中主要说明了通过矩阵来实现平面图形的平移、旋转、缩放，到最后完全可以用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. 笔记2：MYSQL 表操作

    一.表约束 1.非空约束:not null 作用:定义表的某一列不能为空. >> alter table 表名 modify 列名 int not null; "添加非空约束&q ...

  2. zabbix服务快速搭建指南

    zabbix监控服务快速安装指南 1.更换centos7-base源为阿里源  wget -O /etc/yum.repos.d/CentOS-Base.repo http://mirrors.ali ...

  3. PHP代码优化—array_push

    PHP中数组插入数据通常有这么几种: 定义的时候直接赋值 $arr = array('apple', 'banana'); 使用数组变量操作 $arr = array(); $arr[] = 'app ...

  4. react中手动重置redux

    前段时间使用redux在react-native中,安卓后退两次关闭后redux未清空的问题,一直觉得处理的不够优雅,没有根本解决问题. 后来发现再退出登录后,也有部分数据因为redux的逻辑处理数据 ...

  5. JavaEE笔记（八）

    第一个Spring Student(学生) bean package com.my.bean; import java.io.Serializable; public class Student im ...

  6. Oracle数据库无法向listener注册的解决一例

    当机器的IP地址改变了,或者机器名改变后, 动态注册可能会失败. 运行 lsnrctl status时,无论等待多久,都会发生:no services 这样的信息. 此时,最好的解决方法,就是删除原有 ...

  7. sqlplus 格式化一例

    对字符型,用axx格式,对数字型,用9999 格式(999表示占用3列) SQL> col 'ts#' format 999SQL> col 'file#' format 999SQL&g ...

  8. LBP人脸识别的python实现

    这几天看了看LBP及其人脸识别的流程,并在网络上搜相应的python代码,有,但代码质量不好,于是自己就重新写了下,对于att_faces数据集的识别率能达到95.0%~99.0%(40种类型,每种随 ...

  9. 深度学习—caffe框架训练文档

    转存:LMDB E:\机器学习2\caffe资料\caffe_root\caffe-master\Build\x64\Release>convert_imageset.exe E:/机器学习2/ ...

  10. idea中xml打开方式变成file，改回来

    原文:https://blog.csdn.net/u012903926/article/details/80682885 创建了一个test文件,用的是普通text打开方式,然后你修改文件为test. ...