在上一章中主要说明了通过矩阵来实现平面图形的平移、旋转、缩放，到最后完全可以用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. Html+Css实现梯形选项卡

    1,先看一下效果图 2,梯形通过定位和设置Border来实现的,平行四边形通过旋转来实现的. 3,代码如下 (1)HTML代码 <html lang="en" xmlns=& ...

  2. oracle常用视图v$mystat v$sesstat v$sysstat v$statname v$thread v$ parameter v$session v$process

    这两天看了盖国强老师的<<深入浅出>>,很佩服盖老师钻研的精神.书中常用到一个查询语句,为了获取当前会话的跟踪文件路径,sql如下: SELECT d.VALUE || '/' ...

  3. C语言 基础练习40

    一.题目 1.输入2个整数,求两数的平方和并输出. 2. 输入一个圆半径(r)当r>＝0时,计算并输出圆的面积和周长,否则,输出提示信息. 3.函数y=f(x)可表示为: 4.编写一个程序,从4 ...

  4. 2017-2018-2 《网络对抗技术》 20155322 Exp3 免杀原理与实践

    #2017-2018-2 <网络对抗技术> 20155322 Exp3 免杀原理与实践 [-= 博客目录 =-] 1-实践目标 1.1-实践介绍 1.2-实践内容 1.3-实践要求 2-实 ...

  5. redis集群搭建+lua脚本的使用

    详细参考这篇文章(windows) https://blog.csdn.net/qiuyufeng/article/details/70474001 一.使用JAVA代码操作redis集群 publi ...

  6. PostreSQL崩溃试验全记录

    磨砺技术珠矶,践行数据之道,追求卓越价值 回到上一级页面: PostgreSQL基础知识与基本操作索引页     回到顶级页面:PostgreSQL索引页 [作者 高健@博客园  luckyjackg ...

  7. jQuery学习-显示与隐藏

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. 洛谷 P1142 轰炸

    洛谷 P1142 轰炸 题目描述 “我该怎么办?”飞行员klux向你求助. 事实上,klux面对的是一个很简单的问题,但是他实在太菜了. klux要想轰炸某个区域内的一些地方,它们是位于平面上的一些点 ...

  9. 9.26 开课第二十三天 （JS表单验证）

    <form action="lizi1.html" method="post"> 非空验证 <input type="text&qu ...

  10. 04 - django的路由层 1

    1.路由控制简单配置 from django.conf.urls import url from . import views urlpatterns = [ url(r'^articles/2003 ...