与上一节相比这一节相当做了些整合和整理，目的是提高了读写效率和减少代码量，就是做了优化。这里我们只需要在顶点着色器中定义一个用于从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. 【ui】amazeui前端框架

    amazeui Amaze UI是一款较全面的轻量级 (更适于mobile,但也可以用于web)的前端框架. 她综合了业界一些优良插件,直接拿来用而不用一个个去搜索

  2. redis持久化机制之AOF与RDB

    什么是redis Redis是一种面向“key-value”类型数据的分布式NoSQL数据库系统,具有高性能.持久存储.适应高并发应用场景等优势.它虽然起步较晚,但发展却十分迅速. redis为何需要 ...

  3. NRF52832初步使用

    开发环境搭建 开发环境涉及到协议栈SDK版本.keil PACK版本的匹配问题,目前测试通过的环境如下: windows系统:win10 硬件:NRF52832测试板.JLINK-V8仿真器 Keil ...

  4. iOS Swift WisdomHUD 提示界面框架

    iOS Swift WisdomHUD 提示界面框架  Framework Use profile(应用简介) 一:WisdomHUD简介 今天给大家介绍一款iOS的界面显示器:WisdomHUD,W ...

  5. re 模块错误 error: bad character range

    下午,看到堆栈的内容.于是上机实验了一番 >>> bds = '10+6/5-4*2' # 数学运算表达式 想用 findall 把运算符号提取出来 >>> imp ...

  6. Bash shell 常用快捷键

    1,ctrl+c  :强制终止当前命令 2,ctrl+l   :清屏 3,ctrl+a  :光标移动到行首 4,ctrl+e   :光标移动到行尾 5,ctrl+u   :从光标所在位置删除到行首 6 ...

  7. 【JUC源码解析】DelayQueue

    简介 基于优先级队列,以过期时间作为排序的基准,剩余时间最少的元素排在队首.只有过期的元素才能出队,在此之前,线程等待. 源码解析 属性 private final transient Reentra ...

  8. 中间介（MiddleWare）

    引子-Django的生命周期 在学习中间介之前,我们先来回顾一下Django的生命周期:用户发起请求,请求会被发送到urlconf中的url,然后会指向对应的views函数进行处理,views函数处理 ...

  9. [Selenium]如何通过Selenium实现Ctrl+click，即按住Ctrl的同时进行单击操作

    [以下是不负责任的转载……] 在自动化测试的过程中,经常会出现这样的场景: 按住Ctrl的同时,进行单击操作,已达到多选的目的 Actions a = new Actions(driver); a.k ...

  10. python中函数的定义和详细的使用方法

    1. 函数的概念,函数是将具有独立功能的代码块组织成为一个整体,使其具有特殊功能的代码集   2. 函数的作用,使用函数可以加强代码的复用性,提高程序编写的效率   3. 函数的使用,函数必须先创建才 ...