第六章讲的是一些GL的一些语法，前面已经涉及，学习时直接跳过，来看第七章，第七章是真正意义的三维立体的出现，其实图形绘制方法是差不多的，就是Z坐标此时不再为0，所以很容易能构造出一些立体图形，但是立体图形涉及了一些其它概念。

正射投影：就是没有那种越远越小的效果，立体感没有那么强。

其中涉及的知识有：视点，就是相当于你的眼睛坐标位置，当然实际上你的眼睛看屏幕时时不经常动的，在这里说成眼睛原理上说的过去也容易理解所以不较真了。观察目标点：这个看书上概念没看懂，推断出是这个意思，就是将被观察物体看成一个点，通过视点和被观察点才能确定视线，因为通常我们都是改变视点，所以被观察点设为一个changzhi就行这样就可以确定看的角度了。再加上一个正向的参数，就是你的眼睛的上下左右怎么个姿势看的。这个容易理解通过这些就能可以从不同角度看物体了立体效果也出来了，通过封装好的函数setLookAt(eye_X,eye_Y,eye_Z,atX,at_Y,at_Z,up,up,up);可以实现但是美中不足的是我们经常换着换着角度就发现物体应该呈现的部分缺了，恭喜你要学新知识了，那就是截面的概念，说直白些就是将你看的物体放在一个矩形空间中通过，前后左右上下确定横截面的大小通过前后截的坐标可以实现你的视线无死角了，可以通过setOrtho(0,0,0,0,0,0);封装好的函数可以直接调用实现。有旋转效果的自己尝试尝试  地址：

看效果：

代码如下：

<!DOCTYPE html>
<html>
  <head>
    <title>LookAtTrianglesWithKeys_ViewVolume.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_ProjMatrix;\n'+//设置前后截面的参数
            'uniform mat4 u_ViewMatrix;\n'+
            'attribute vec4 a_Color;\n'+
            'varying vec4 v_Color;\n'+
            'void main(){\n'+
                'gl_Position=u_ProjMatrix*u_ViewMatrix*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_ViewMatrix=gl.getUniformLocation(gl.program,'u_ViewMatrix');//获取位置
            
            var viewMatrix=new Matrix4();
            //viewMatrix.setLookAt(0.20, 0.25, 0.25, 0, 0, 0, 0, 1, 0);//shi'dian
            document.onkeydown=function(event){
                keydwon(event,gl,n,u_ViewMatrix,viewMatrix);
            };
            
            var u_ProjMatrix=gl.getUniformLocation(gl.program,'u_ProjMatrix');//获取位置
            var projMatrix=new Matrix4();
            projMatrix.setOrtho(-1, 1, -1, 1, 0, 4);
            gl.uniformMatrix4fv(u_ProjMatrix,false,projMatrix.elements);
            
            draw(gl,n,u_ViewMatrix,viewMatrix);
            
            
            /*var modelMatrix =new Matrix4();
            modelMatrix.setRotate(-10, 0, 0, 1);
            
            var modelViewMatrix=viewMatrix.multiply(modelMatrix);//让两个矩阵相乘
            
             var modelViewMatrix=new Matrix4();
            modelViewMatrix.setLookAt(0.20, 0.25, 0.25, 0, 0, 0, 0, 1, 0).rotate(10, 0, 0, 1);
            gl.uniformMatrix4fv(u_ModelViewMatrix,false,modelViewMatrix.elements); */
            
            gl.clear(gl.COLOR_BUFFER_BIT);
            gl.drawArrays(gl.TRIANGLES,0,n);
            
        }
        function initVertexBuffer(gl){
            var verticesTexcoords=new Float32Array([//数组中包含顶点坐标以及颜色数值
                    0.0,0.5,-0.4, 0.4,1.0,0.4,
                -0.5,-0.5,-0.4, 0.4,1.0,0.4,
                0.5,-0.5,-0.4, 1.0,0.4,0.4,
                
                0.5,0.4,-0.2, 1.0,1,0.4,
                -0.5,0.4,-0.2, 1.0,1.0,0.4,
                0.0,-0.6,-0.2, 1.0,1.0,0.4,
                
                0.0,0.5,0.0, 0.4,0.4,1.0,
                -0.5,-0.5,0.0, 0.4,0.4,1.0,
                0.5,-0.5,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;
        }
        var g_eyeX=0.2,g_eyeY=0.25,g_eyeZ=0.25;
        function keydwon(event,gl,n,u_ViewMatrix,viewMatrix){
            //alert(event.keyCode);
            switch(event.keyCode){
                case 39:g_eyeX+=0.01;
                    break;
                case 37:g_eyeX-=0.01;
                    break;
            }
            //else{return;}
            draw(gl,n,u_ViewMatrix,viewMatrix);
        }
        function draw(gl,n,u_ViewMatrix,viewMatrix){
        //alert();
            viewMatrix.setLookAt(g_eyeX,g_eyeY,g_eyeZ,0,0,0,0,1,0);
            gl.uniformMatrix4fv(u_ViewMatrix,false,viewMatrix.elements);
            gl.clear(gl.COLOR_BUFFER_BIT);
            gl.drawArrays(gl.TRIANGLES,0,n);
            //math.round()将数据转为整数
        }
    </script>
  </head>
 
  <body onload="main()">
    <canvas width="400" height="400" id="webgl"></canvas>
    <p id="nearFar">显示近裁截面和远裁截面</p>
  </body>
</html>

WebGL学习笔记七点一的更多相关文章

  1. webgl学习笔记五-纹理

    写在前面 建议先阅读下前面我的三篇文章. webgl学习笔记一-绘图单点 webgl学习笔记二-绘图多点 webgl学习笔记三-平移旋转缩放 术语 : 纹理 :图像 图形装配区域 :顶点着色器顶点坐标 ...

  2. webgl学习笔记四-动画

    写在前面 建议先阅读下前面我的三篇文章. webgl学习笔记一-绘图单点 webgl学习笔记二-绘图多点 webgl学习笔记三-平移旋转缩放   下面我们将讲解下如何让一个正方形动起来~不断擦除和重绘 ...

  3. webgl学习笔记三-平移旋转缩放

    写在前面 建议先阅读下前面我的两篇文章. webgl学习笔记一-绘图单点 webgl学习笔记二-绘图多点 平移 1.关键点说明 顶点着色器需要加上 uniform vec4 u_Translation ...

  4. webgl学习笔记二-绘图多点

    写在前面 建议先看下第一篇webgl学习笔记一-绘图单点 第一篇文章,介绍了如何用webgl绘图一个点.接下来本文介绍的是如何绘制多个点.形成一个面. webgl提供了一种很方便的机制,即缓冲区对象, ...

  5. WebGL学习笔记二——绘制基本图元

    webGL的基本图元点.线.三角形 gl.drawArrays(mode, first,count) first,代表从第几个点开始绘制即顶点的起始位置 count,代表绘制的点的数量. mode,代 ...

  6. WebGL学习笔记（2）

    根据上一篇学习笔记,理解WebGL的工作原理及基本调用代码后,可以开始研究3D顶点对象的缩放.旋转.以及对对象进行可交互(鼠标或键盘控制)的旋转或者缩放. 要理解对象的旋转/缩放需要首先学习矩阵的计算 ...

  7. WEBGL学习笔记（七）：实践练手1-飞行类小游戏之游戏控制

    接上一节,游戏控制首先要解决的就是碰撞检测了 这里用到了学习笔记(三)射线检测的内容了 以鸟为射线原点,向前.上.下分别发射3个射线,射线的长度较短大概为10~30. 根据上一节场景的建设,我把y轴设 ...

  8. WebGL学习笔记（3）

    根据上篇笔记,在对3D对象可进行普通的控制后,以及学习了http://hiwebgl.com的教程第10章内容:世界模型的载入以及控制镜头移动,经过多次调试矩阵代码,已经可以实现在世界中旋转镜头/控制 ...

  9. WebGL学习笔记一

    学习用来做web3D的,从第一页开始学起先做2D的,接下来的程序是一个入门级的程序,可以通过在画板上的不同位置点击而获取不同颜色的点,以画板中心为坐标原点四个象限有不同的颜色,访问地址  http:/ ...

随机推荐

  1. HBase的简单java操作

    官方文档:http://hbase.apache.org/book.html java简单操作hbase的表 import org.apache.hadoop.conf.Configuration; ...

  2. 【Dubbo源码阅读系列】之 Dubbo XML 配置加载

    今天我们来谈谈 Dubbo XML 配置相关内容.关于这部分内容我打算分为以下几个部分进行介绍: Dubbo XML Spring 自定义 XML 标签解析 Dubbo 自定义 XML 标签解析 Du ...

  3. 【 腾讯敏捷转型No.4 】为什么敏捷团队不要超过15人

    早期,腾讯公司的架构是比较简单的.从上至下分别是:公司——商业单元(BU)——部门——组——员工,每个部门基本上就是负责一个大的产品,每个组都是按照专业进行分工和管理,例如:产品组.终端组.后台组.设 ...

  4. Objective-C(生命周期)

    视图控制器生命周期 : 1)当一个视图控制器被创建,并在屏幕上显示的时候. 代码的执行顺序 1.alloc 创建对象,分配空间 2.init(initWithNibName) 初始化对象,初始化数据 ...

  5. react使用阿里字体图标

    1. 在react项目的public文件夹下面创建iconfont文件夹,将下载的文件放到iconfont文件夹下 2.在public文件夹下的index.html引入iconfont.css,如 & ...

  6. JS实现图片的淡入和淡出的两种方法，如有不足，还请前辈多多指导^-^~

    今天下午练习了下这个图片的淡入淡出小demo,如有不足,还请前辈多多指导^-^~ 总结如下: 第一种方法: 个人觉得第一种方法比较好,同时兼容IE8以下浏览器,但是如下代码中,不知可不可以将timer ...

  7. Python点滴记录-day-01

    python基础 - 基础 1.第一句python - 后缀名是可以可任意? - 导入模块时,如果不是.py文件 ==>以后文件后缀名是.py 2.两种执行方式 python解释器 py文件路径 ...

  8. ruby puts, print, p方法比较

    1.puts([obj[, obj2[, ....]]] ) 依次将obj和换行符输出到$>.若没有参数的话则只会输出换行符. 若参数是数组,则依次输出数组元素和换行符.若将既非数组又非字符串的 ...

  9. docker 下 mysql 集群的搭建

    下载程序&&创建docker容器 从mysql官网https://dev.mysql.com/downloads/cluster/上下载mysql集群库mysql-cluster-gp ...

  10. 洛谷 P1198 [JSOI2008]最大数

    洛谷 P1198 [JSOI2008]最大数 题目描述 现在请求你维护一个数列,要求提供以下两种操作: 1. 查询操作. 语法:Q L 功能:查询当前数列中末尾L个数中的最大的数,并输出这个数的值. ...