WebGL学习笔记七点一

时间 2019-11-12

标签 webgl 学习笔记七点 7点繁體版

原文原文链接

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

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

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

http://123.206.70.64:8080/WebGL7/LookAtTrianglesWithKeys_ViewVolume.html

看效果：java

代码以下：
web

<!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">  <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>