第六章讲的是一些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. Bugku Writeup —文件上传2(湖湘杯)

    我们先来看下题目,题目说明是文件上传 我们可以尝试通过构造payload来进行测试 php://filter/read=convert.base64-encode/resource=flag 获取到f ...

  2. SAP函数 CS_WHERE_USED_MAT 反查上层BOM

    遇到用户要根据下层物料反查最上层BOM物料是什么. 试了一下,通过函数 CS_WHERE_USED_MAT 来查询,但是只能往上查询一层,类似事务码CS15的效果.如果要找最上层物料,需要自己写迭代进 ...

  3. 【转】深入学习Redis（1）：Redis内存模型

    原文:https://www.cnblogs.com/kismetv/p/8654978.html 前言 Redis是目前最火爆的内存数据库之一,通过在内存中读写数据,大大提高了读写速度,可以说Red ...

  4. 从 OPC 到 OPC UA

    [前言]OPC是一个工业标准,所属国际组织是OPC基金会,现有会员已超过220家,包括世界上所有主要的自动化控制系统.仪器仪表及过程控制系统的公司. [经典 OPC]经典OPC规范基于微软Window ...

  5. flex作图

    <?xml version="1.0" encoding="utf-8"?><s:Application xmlns:fx="htt ...

  6. python基础学习1-反射

    #!/usr/bin/env python # -*- coding:utf-8 -*- getattr(),hasattr(),delattr(),setattr() #反射:基于字符串的形式去对象 ...

  7. C++STL学习笔记_(2)deque双端数组知识

    #include<iostream> using namespace std; #include "deque" #include "algorithm&qu ...

  8. SpringBoot日记——按钮的高亮和添加篇

    场景如下: 我们点击主页,主页那个按钮就高亮: 我们点击员工,员工那个按钮就高亮: 高亮的处理 直接来看代码如何编写: 1.先看一下官方文档如何编写关于参数配置的,等下我们来解释为何这么写: 所以,我 ...

  9. hdu1754 I Hate It(线段树单点更新，区间查询)

    传送门 有更新单个学生成绩和查询某个区间内学生成绩最大值两种操作 线段树代码 #include<bits/stdc++.h> using namespace std; +; using n ...

  10. Python对中文的支持

    在Python中,经常会出现中文,出现中文有时候会报错,这时候很多新手在处理中文编码的时候会有点不知所措. Python主要有2.x和3.x版本两个区别,在3.x版本中,已经支持中文直接开发,而不需要 ...