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>



查看全文

相关阅读:
C#最小化到托盘+双击托盘恢复
 WinForm最小化到托盘以及托盘右键菜单
 WinForm最小化到托盘以及托盘右键菜单
 System.Dynamic.ExpandoObject 类型的简单使用
 System.Dynamic.ExpandoObject 类型的简单使用
 C# 操作MongoDB时间时差问题
 C# 操作MongoDB时间时差问题
 C# typeof() 和 GetType()区别是什么？
C++ 文件操作之修改文件某一行数据
 C# typeof() 和 GetType()区别是什么？

原文地址：https://www.cnblogs.com/yizhuceyonghuming/p/5870033.html