在上一章中主要说明了通过矩阵来实现平面图形的平移、旋转、缩放，到最后完全可以用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. Oracle 创建函数

    Oracle创建函数的方法如下: CREATE OR REPLACE FUNCTION FunctionName ( --传入参数 para NCHAR ) RETURN NUMBER IS --函数 ...

  2. BZOJ2194: 快速傅立叶之二(NTT,卷积)

    Time Limit: 10 Sec  Memory Limit: 259 MBSubmit: 1776  Solved: 1055[Submit][Status][Discuss] Descript ...

  3. uniapp开发踩坑记录

    数组绑定class的问题 版本:v1.5.4 自定义了一个icon的组件,部分代码如下 <template> <text :class="[name, icon]" ...

  4. php 查看使用多少内存

    方法memory_get_usage 是指当前脚本正在使用的内存 unset只是把内存标记为空闲但并没有释放,要GC程序结束后才会释放 $bytes = memory_get_peak_usage() ...

  5. Java List添加元素

    import java.util.ArrayList; public class Test {     public static void main(String[] args) {         ...

  6. 10.23 开课一个月零十九天 （PHP数组）

    <?php $s = "he8llo5wor6ld"; $s = preg_replace("/\d/","#",$s); //按照正 ...

  7. 函数内联inline

    C++语言支持函数内联,其目的是为了提高函数的执行效率(速度). 宏的优点 在C程序中,可以用宏代码提高执行效率. 编译预处理器用拷贝宏代码的方式取代函数调用,省去了参数压栈,生成汇编语言的CALL调 ...

  8. Kubernetes学习之路（六）之创建K8S应用

    一.Deployment的概念 K8S本身并不提供网络的功能,所以需要借助第三方网络插件进行部署K8S中的网络,以打通各个节点中容器的互通. POD,是K8S中的一个逻辑概念,K8S管理的是POD,一 ...

  9. 关于js中直接获取后台的值，直接弹窗获取到的值

    js里获取后台的值,以前我都是后台通过jsp中的<input>EL表达式: 后台代码把传向页面的值放入request:request.setAttribute("Success& ...

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

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