WebGL七点二 - 走看看

zoukankan html css js c++ java

WebGL七点二

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

    
<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; '+
           //'uniform mat4 u_ModelViewMatrix; '+
           'uniform mat4 u_MvpMatrix; '+
           'attribute vec4 a_Color; '+
           'varying vec4 v_Color; '+
           'void main(){ '+
               'gl_Position=u_MvpMatrix*a_Position; '+
               'v_Color=a_Color; '+
           '} ';

       var FSHADER_SOURCE=
       'precision mediump float; '+
           'varying vec4 v_Color; '+
           'void main(){ '+
               'gl_FragColor=v_Color; '+
           '}';

       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>

查看全文

相关阅读:
【独立开发人员er Cocos2d-x实战 001】csb文件导出和载入
 Best Time to Buy and Sell Stock I && II && III
cocos2d-x项目101次相遇-安装和环境搭建－xcode
使用 C＃开发智能手机软件：推箱子(十二)
javascript实现掉落弹出层------Day29
Android中onTouch与onClick事件的关系
 CSDN编程挑战——《交替字符串》
【NPR】非真实感渲染实验室
 CSS自己主动换行、强制不换行、强制断行、超出显示省略号
 在Ubuntu 14.04安装和使用Docker

原文地址：https://www.cnblogs.com/xizhenghe/p/5863507.html