与上一节相比这一节相当做了些整合和整理，目的是提高了读写效率和减少代码量，就是做了优化。这里我们只需要在顶点着色器中定义一个用于从js传递参数的变量u_MvcMatrix一看就知道是uniform变量而且是可4*4矩阵，然后再js中 new四个矩阵变量分别是mvcMatrix是几个矩阵 变量相乘后的矩阵，modelMatrix是用于平移旋转变换的矩阵变量，viewMatrix是用于设置前后截面的矩阵变量，projMatrix是用于设置视点，目标点，和方向的矩阵变量。先为变量赋值，然后通过内置函数mvcMatrix.set(projMatrix).multiply(viewMatrix).multiply(modelMatrix)求出最终变换的矩阵变量。然后与点的坐标相乘。

效果图：

代码如下：

<!DOCTYPE html>
<html>
  <head>
    <title>PerspectiveView_mvp.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_SOURCR=
            'attribute vec4 a_Position;\n'+
            //'uniform mat4 u_ModelViewMatrix;\n'+
            'uniform mat4 u_MvpMatrix;\n'+
            'attribute vec4 a_Color;\n'+
            'varying vec4 v_Color;\n'+
            'void main(){\n'+
                'gl_Position=u_MvpMatrix*a_Position;\n'+
                'v_Color=a_Color;\n'+
            '}\n';
            
        var FSHADER_SOURCE=
        'precision mediump float;\n'+
            'varying vec4 v_Color;\n'+
            'void main(){\n'+
                'gl_FragColor=v_Color;\n'+
            '}';
            
        function main(){
            var canvas=document.getElementById("webgl");
            
            var nearFar=document.getElementById("nearFar");
            
            var gl=getWebGLContext(canvas);
            if(!gl){
                console.log("上下文获取失败！！");
            }
            
            if(!initShaders(gl,VSHADER_SOURCR,FSHADER_SOURCE)){
                console.log("着色器初始化失败！！");
            }
            gl.clearColor(0,0,0,1);
            var n=initVertexBuffer(gl);
            
            var u_MvpMatrix=gl.getUniformLocation(gl.program,'u_MvpMatrix');
            var mvpMatrix=new Matrix4();//模型视图投影矩阵
            
            var modelMatrix=new Matrix4();
            modelMatrix.setTranslate(0.75, 0, 0);
            
            var viewMatrix=new Matrix4();
            viewMatrix.setLookAt(0,0,5,0,0,-100,0,1,0);
            
            var projMatrix=new Matrix4();
            projMatrix.setPerspective(30, canvas.width/canvas.height, 1, 100);
            
            mvpMatrix.set(projMatrix).multiply(viewMatrix).multiply(modelMatrix);
            
            gl.uniformMatrix4fv(u_MvpMatrix,false,mvpMatrix.elements);
            
            gl.clearColor(0,0,0,1);
            gl.clear(gl.COLOR_BUFFER_BIT);
            gl.drawArrays(gl.TRIANGLES,0,n);
            
            
            modelMatrix.setTranslate(-0.75, 0, 0);
            mvpMatrix.set(projMatrix).multiply(viewMatrix).multiply(modelMatrix);
            gl.uniformMatrix4fv(u_MvpMatrix,false,mvpMatrix.elements);
            gl.drawArrays(gl.TRIANGLES,0,n);
            
        }
        function initVertexBuffer(gl){
            var verticesTexcoords=new Float32Array([//数组中包含顶点坐标以及颜色数值
                 // Three triangles on the right side
     0.0,  1.0,  -4.0,  0.4,  1.0,  0.4, // The back green one
    -0.5, -1.0,  -4.0,  0.4,  1.0,  0.4,
     0.5, -1.0,  -4.0,  1.0,  0.4,  0.4,

0.0,  1.0,  -2.0,  1.0,  1.0,  0.4, // The middle yellow one
    -0.5, -1.0,  -2.0,  1.0,  1.0,  0.4,
     0.5, -1.0,  -2.0,  1.0,  0.4,  0.4,

0.0,  1.0,   0.0,  0.4,  0.4,  1.0,  // The front blue one
    -0.5, -1.0,   0.0,  0.4,  0.4,  1.0,
     0.5, -1.0,   0.0,  1.0,  0.4,  0.4,

/*  // Three triangles on the left side
   -0.75,  1.0,  -4.0,  0.4,  1.0,  0.4, // The back green one
   -1.25, -1.0,  -4.0,  0.4,  1.0,  0.4,
   -0.25, -1.0,  -4.0,  1.0,  0.4,  0.4,

-0.75,  1.0,  -2.0,  1.0,  1.0,  0.4, // The middle yellow one
   -1.25, -1.0,  -2.0,  1.0,  1.0,  0.4,
   -0.25, -1.0,  -2.0,  1.0,  0.4,  0.4,

-0.75,  1.0,   0.0,  0.4,  0.4,  1.0,  // The front blue one
   -1.25, -1.0,   0.0,  0.4,  0.4,  1.0,
   -0.25, -1.0,   0.0,  1.0,  0.4,  0.4,  */
  ]);
            var n=9;
            
            var vertexColorBuffer=gl.createBuffer();
            if(!vertexColorBuffer){
                console.log("缓冲区创建失败！！");
                return -1;
            }
            
            gl.bindBuffer(gl.ARRAY_BUFFER,vertexColorBuffer);
            gl.bufferData(gl.ARRAY_BUFFER,verticesTexcoords,gl.STATIC_DRAW);
            
            var SIZE=verticesTexcoords.BYTES_PER_ELEMENT;
            //alert(SIZE);
            var a_Position=gl.getAttribLocation(gl.program,'a_Position');
            gl.vertexAttribPointer(a_Position,3,gl.FLOAT,false,SIZE*6,0);
            gl.enableVertexAttribArray(a_Position);
            
            var a_Color=gl.getAttribLocation(gl.program,'a_Color');
            gl.vertexAttribPointer(a_Color,3,gl.FLOAT,false,6*SIZE,3*SIZE);
            gl.enableVertexAttribArray(a_Color);

return n;
        }
    </script>
  </head>
 
  <body onload="main()">
    <canvas width="400" height="400" id="webgl"></canvas>
    <p id="nearFar">显示近裁截面和远裁截面</p>
  </body>
</html>

WebGL七点二的更多相关文章

  1. [WebGL入门]二，開始WebGL之前，先了解一下canvas

    年2月)HTML5依旧处于草案阶段. HTML5支持网页端的多媒体功能和画布功能,追加了非常多全新的更合理的Tag标签.各个浏览器也都在逐渐的完好这些新的特性. Canvas对象表示一个 HTML画布 ...

  2. [WebGL入门]二十四，补色着色

    注:文章译自http://wgld.org/,原作者杉本雅広(doxas),文章中假设有我的额外说明,我会加上［lufy:］,另外,鄙人webgl研究还不够深入,一些专业词语,假设翻译有误,欢迎大家指 ...

  3. [WebGL入门]二十五，点光源的光照

    注:文章译自http://wgld.org/,原作者杉本雅広(doxas),文章中假设有我的额外说明.我会加上［lufy:］.另外,鄙人webgl研究还不够深入,一些专业词语.假设翻译有误,欢迎大家指 ...

  4. [WebGL入门]二十一，从平行光源发出的光

    注:文章译自http://wgld.org/,原作者杉本雅広(doxas),文章中假设有我的额外说明.我会加上［lufy:］,另外,鄙人webgl研究还不够深入,一些专业词语.假设翻译有误,欢迎大家指 ...

  5. [WebGL入门]二十三，反射光的光照效果

    注:文章译自http://wgld.org/,原作者杉本雅広(doxas).文章中假设有我的额外说明.我会加上［lufy:］,另外,鄙人webgl研究还不够深入.一些专业词语.假设翻译有误.欢迎大家指 ...

  6. WebGl 利用缓冲区对象画多个点

    效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  7. 让人非常easy误解的TCP拥塞控制算法

    正文 非常多人会觉得一个好的TCP拥塞控制算法会让连接加速,这样的观点是错误的.恰恰相反,全部的拥塞控制算法都是为了TCP能够在贪婪的时候悬崖勒马,大多数时候.拥塞控制是减少了数据发送的速度. 我在本 ...

  8. Canvas开发库封装

    一.Canvas第三方类库 1.常见的第三方类库 konva.js <style> body{ margin:0; } </style> </head> <b ...

  9. Three.js - 走进3D的奇妙世界

    本文将通过Three.js的介绍及示例带我们走进3D的奇妙世界. 文章来源:宜信技术学院 & 宜信支付结算团队技术分享第6期-支付结算部支付研发团队前端研发高级工程师-刘琳<three. ...

随机推荐

  1. transform CSS3 2D知识点汇总

    transform转换属性的5个值: 1. translate(x值,y值)  移动效果. 2.rotate(45deg)  旋转效果. 3.scale(x轴倍数,y轴倍数)  缩放效果. 4.ske ...

  2. 什么是websoket

    概念 HTML5作为下一代WEB标准,拥有许多引人注目的新特性,如Canvas.本地存储.多媒体编程接口.WebSocket 等等.今天我们就来看看具有“Web TCP”之称的WebSocket. W ...

  3. day 84 Vue学习四之过滤器、钩子函数、路由、全家桶等

      本节目录 一 vue过滤器 二 生命周期的钩子函数 三 vue的全家桶 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 Vue的过滤器 1 moment.js 在这里我们先介绍一个 ...

  4. HDFS上传数据的流程

    1.当客户端输入一条指令:hdfs dfs -put text.txt /text时,这条命令会给到DistributeFileSystem. 2.通过DistributeFileSystem简称DF ...

  5. Linux下安装Beego：go install: cannot install cross-compiled binaries when GOBIN is set

    Linux下安装Beego出错 问题:go install: cannot install cross-compiled binaries when GOBIN is set 遇到这个问题一般是在环境 ...

  6. Linux下开发python django程序(设置admin后台管理上传文件和前台上传文件保存数据库)

    1.项目创建相关工作参考前面 2.在models.py文件中定义数据库结构 import django.db import modelsclass RegisterUser(models.Model) ...

  7. Linux命令学习笔记2(mysql安装和mysql-python安装)

    linux下 强制安装 rpm安装包(切换到root用户):  rpm -ivh bluefish-shared-data-2.2.7-1.el6.noarch.rpm --nodeps --forc ...

  8. python基础开发环境Pycharm的详细使用方法

    PyCharm是由JetBrains打造的一款Python IDE(集成开发环境) 1. 创建Python文件 2. pycharm的操作界面 3. PyCharm修改字体大小的方式 4. pycha ...

  9. IVF link error错误不显示的问题

      遇到一个奇怪的问题,IVF编译链接时显示error LINK: 后面没有具体的错误信息(见后图,我的窗口后面是空的)环境:windows 10 64位系统,VS2017 commutity 版本, ...

  10. NO--14 微信小程序，左右联动二

    上一篇讲解了左=>右联动,那个还比较简单,本篇写剩下比较核心的部分,也是本次开发过程中遇到最难的部分,右=>左联动,先简单看一下演示   右左联动.gif 一.关键技术: (1) 小程序 ...