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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。