第六章讲的是一些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. MapReduce操作Hbase --table2file

    官方手册:http://hbase.apache.org/book.html#mapreduce.example 简单的操作,将hbase表中的数据写入到文件中. RunJob 源码: import ...

  2. iOS 折线图、柱状图的简单实现

    首先我得感谢某位博主,非常抱歉,因为之前直接下载博主提供这篇文章的demo,然后去研究了,没记住博主的名字.再次非常感谢. 而这个dome我又修改了一些,完善了一些不美观的bug,当然还有,后面会陆续 ...

  3. Centos 模拟生成文件的脚本

    #!/bin/sh count= #控制每秒写入不同大小的文件 while true do ;i<=$count;i++)) do /bin/-`.jpg done ;i<=$count; ...

  4. Hadoop源码学习笔记之NameNode启动场景流程一：源码环境搭建和项目模块及NameNode结构简单介绍

    最近在跟着一个大佬学习Hadoop底层源码及架构等知识点,觉得有必要记录下来这个学习过程.想到了这个废弃已久的blog账号,决定重新开始更新. 主要分以下几步来进行源码学习: 一.搭建源码阅读环境二. ...

  5. 新版u-boot移植到s3c2440开发板（一）--建立单板

    由于没有系统的学习shell,所以Makefile大多数看不懂,一个小小的细节,把我难住了几天.现在开始分享我的操作过程 本文所有linux下的操作是root用户,如果你使用普通用户,请在命令前加上 ...

  6. 仙人掌&圆方树

    仙人掌&圆方树 Tags:图论 [x] [luogu4320]道路相遇 https://www.luogu.org/problemnew/show/P4320 [ ] [SDOI2018]战略 ...

  7. 23-[模块]-subprocess模块

    1.调用系统命令 我们经常需要通过Python去执行一条系统命令或脚本,系统的shell命令是独立于你的python进程之外的,每执行一条命令,就是发起一个新进程,通过python调用系统命令或脚本的 ...

  8. 24-[jQuery]-案例

    1.仿淘宝导航栏案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  9. 实现对象属性的lazy-loading（延迟加载）

    一.延迟加载器LazyLoader作用:       说到延迟加载,应该经常接触到,尤其是使用Hibernate的时候,本篇将通过一个实例分析延迟加载的实现方式.LazyLoader接口继承了Call ...

  10. check the manual that corresponds to your MySQL server version for the right syntax to use near

    一.问题 mysql插入数据时报错 sql如下 insert into t_sysconfig (servercode,key,value,remark,updatetime) values (&qu ...