与上一节相比这一节相当做了些整合和整理，目的是提高了读写效率和减少代码量，就是做了优化。这里我们只需要在顶点着色器中定义一个用于从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. L2-022 重排链表（链表）

    题目: 给定一个单链表 L​1​​→L​2​​→⋯→L​n−1​​→L​n​​,请编写程序将链表重新排列为 L​n​​→L​1​​→L​n−1​​→L​2​​→⋯.例如:给定L为1→2→3→4→5→6 ...

  2. 使用zabbix发送邮件的简易设置流程(存档用）

    1.安装邮件软件 (一般默认安装sendmail,这样apache也不用重新设置.) $sudo yum install sendmail 2.在zabbix上设置发送邮件用的本地邮箱 选择管理-&g ...

  3. JavaWeb基础—JDBC入门

    一.什么是JDBC JDBC全称为:Java Data Base Connectivity(java数据库连接),它主要由接口组成 二.JDBC原理概述 JDBC原理:其实就是一组规范(就是对类的规范 ...

  4. 3、顺序表、内存、类型、python中的list

    1.内存.类型本质.连续存储 1.内存本质 2.C 语言实例-计算 int, float, double 和 char 字节大小 使用 sizeof 操作符计算int, float, double 和 ...

  5. centos中如何添加环境变量

    在Linux CentOS系统上安装完php和MySQL后,为了使用方便,需要将php和mysql命令加到系统命令中,如果在没有添加到环境变量之前,执行“php -v”命令查看当前php版本信息时时, ...

  6. UWP DEP0700: 应用程序注册失败。[0x80073CF9] Install failed. Please contact your software vendor. (Exception from HRESULT: 0x80073CF9)

    现在部署的app项目八成是从以前的一个项目复制过来,修改的.或者本地存在一个相同的app没有卸载. 解决方法: 1. 卸载之前相同的app 2.如果是复制的项目A,但是经过修改后变成了项目B,并且A和 ...

  7. bootstrap学习笔记(4)

    bootstrap辅助类 总结几个常用的辅助类 .text-hide将页面元素所包含的文本设置为透明并且字体设置为0所以文本就看不见了 .hidden将页面的元素visible属性设置为hidden; ...

  8. Security Permissions Caching

    Security Permissions Caching Security permission caching is implemented in Security Adapters - class ...

  9. Python中的注释

    1.1 注释的目的 通过用自己熟悉的语言,在程序中对某些代码进行标注说明,这就是注释的作用,能够大大增强程序的可读性. 1.2 注释的分类 1.2.1 单行注释 以#开头,#右边的所有东西当做说明,而 ...

  10. 如何用Fiddle工具实现手机抓包

    Fiddler官方下载地址:http://fiddler2.com/ 在做手机或移动端APP的接口测试时,我们可以使用fiddler对APP进行抓包确认,抓取对应的网络交互信息.在抓取的信息中可以看到 ...