丨如何添加相機用透視原理對物體進行投影

我們現(xiàn)在假設(shè)，在 而我們最終要在CanvaslookAt 1,0,0, 0,1,0, 0,0,1, x,y,z, constup=[0,1,m.lookAt(eye,target,renderer.uniforms.viewMatrix=12m，m.lookAt(eyetarget,up)，這里的up是一個向量，表示朝上的方向，我們把它定義為y軸正向。然后我們調(diào)用代代223456789attributevec3a_vertexPosition;attributevec4color;attributevec3varyingvec4vColor;varyingfloatvCos;uniformmat4projectionMatrix;uniformmat4modelMatrix;uniformmat4viewMatrix;uniformmat3normalMatrix;constvec3lightPosition=vec3(1,0,void{gl_PointSize=1.0;vColor=color;vec4pos=viewMatrix*modelMatrix*vec4(a_vertexPosition,1.0);vec4lp=viewMatrix*vec4(lightPosition,1.0);vec3invLight=lp.xyz-vec3norm=normalize(normalMatrix*normal);vCos=max(dot(normalize(invLight),norm),0.0);gl_Position=projectionMatrix*updateCamera([0.5,0,0.5向(0,0,0)3D面的課程中我們，WebGL的默認坐標范圍是從-1到1的。也就是說，只有當圖像的x、y、z的值在-1到1舉個例子，如果我們修改模型矩陣，讓圓柱體沿x、y軸平移，向右上方各平移0.5，那么圓柱中x、y值大于1的部分都會被剪裁掉，因為這些部分已經(jīng)超過了Canvas邊緣。操作代代代functionupdate()constmodelMatrix=fromRotation(rotationX,rotationY,modelMatrix[12]=0.5;//給x軸增加0.5modelMatrix[13]=0.5;//給y軸也增加0.5renderer.uniforms.modelMatrix=renderer.uniforms.normalMatrix=normalFromMat4([],8對于只有x、y的二維坐標系來說，這一點很好理解。但是，對于三維坐標系來說，不僅x、y軸會被剪裁，z軸同樣也會被剪裁。我們還是直接修改代碼，給z軸增加0.5的平會顯示這么奇怪的結(jié)果，就是因為z軸超過范圍的部分也被剪裁掉了，導致投影出現(xiàn)了問既然是投影出現(xiàn)了問題，我們先回想一下，我們都對z軸做過哪些投影操作。在繪制圓柱體的時候，我們只是用投影矩陣非常簡單地反轉(zhuǎn)了一下z軸，除此之外，沒做過其他任何操作了。所以，為了讓圖形在剪裁空間中正確顯示，我們不能只反轉(zhuǎn)z軸，還需要將圖像首先是正投影，它又叫做平行投影。正投影是將物體投影到一個長方體的空間（景體），并且無論相機與物體距離多遠，投影的大小都不變。而投影更接們的感知投影律是相機物體離相的物體小。與正投影不同，正投影的視景體是一個長方體，而投影的視景體是一個棱因為數(shù)學推導過程比較復(fù)雜，我在這里就不詳細推導了，直接給出對應(yīng)的JavaScript函數(shù)，你只要記住ortho和這兩個投影函數(shù)就可以了，函數(shù)如下所示其中，orthox、y、z的返回值就是投影矩陣。而是計算投影的函數(shù)，它的參數(shù)是近景平面near、遠景平面far、視角fov和寬高比率aspect，返回值也是投影矩陣。

代functionortho(out,left,right,bottom,top,near,far)letlr=1/(left-letbt=1/(bottom-letnf=1/(near-6=*6=*7=8=9===*=====2*=out[12]=(left+out[13]=(top+out[14]=(far+out[15]=23

return (out,fovy,aspect,near,far)letf=1.0/Math.tan(fovy/letnf=1/(near-out[0]=f/out[1]=out[2]=out[3]=out[4]=out[5]=out[6]=out[7]=out[8]=out[9]=out[10]=(far+near)*out[11]=-out[12]=out[13]=out[14]=2*far*near*nf;out[15]=0;return接下來，我們先試試對圓柱體進行正投影。假設(shè)，在正投影的時候，我們讓視景體三個方向的范圍都是(-)。以剛才的相機位置為參照（代1代123456789import{ortho}fromfunctionprojection(left,right,bottom,top,near,far){returnortho([],left,right,bottom,top,near,far);}constprojectionMatrix=projection(-2,2,-2,2,-2,2);jectionMatrixprojectionMatrix;投影矩陣updateCamera([0.5,0,0.5]);//置放在(2,2,3)的地方。代代1234567import}fromfunctionprojection(near=0.1,far=100,fov=45,aspect={([],fov*Math.PI/180,aspect,near,}constprojectionMatrix=88jectionMatrix=9我們發(fā)現(xiàn)，在投影下，距離觀察者（相機）近的部分大，距離它遠的部分小。這更合真實世界中我們看到的效果，所以一般來說，在繪制D圖形時，我們更偏向使用3D實際上，通過上節(jié)課和剛才的內(nèi)容，我們已經(jīng)能總結(jié)出3D繪制幾何體的基本數(shù)學模型，也就是3D繪圖的標準模型。這個標準模型一共有四個矩陣，它們分別是：投影矩陣、視果。比較成圖形庫，如rS、BabylonJ，基本上都是采用這個標準模型來進行3D繪圖的。所以理解這個模型，也有助于增強我們對圖形庫的認識，幫助我們WebGL原生的APIgl-renderer庫來簡化2D繪圖過程。而3D繪圖是一個比2D繪圖更加復(fù)雜的過程，即使是gl-renderer當然，使用ThreeJS或BabeylonJS都是不錯的選擇。但是在這節(jié)課中，我會使用一個更加輕量級的圖形庫，叫做OGL。它擁有我們可視化繪圖需要的所有基本功能，而且ThreeJSAPOGLOGL以下7個步驟，如下圖所示。Renderer512Renderer代代1234567constcanvasconstrenderer=newRenderer({width:height:然后，我們在OGL中，通過newCamera來創(chuàng)建相機，默認創(chuàng)建出的是投影相機。這里我們把視角設(shè)置為35度，位置設(shè)置為(0,1,7)，朝向為(0,0,0)。代碼如下：112345constgl=renderer.gl;gl.clearColor(1,1,1,1);constcamera=newCamera(gl,{fov:35});camera.position.set(0,1,7);camera.lookAt([0,0,代接著，我們創(chuàng)建場景。OGL使用樹形渲染的方式，所以在用OGL創(chuàng)建場景時，我們要使用TransformTransform代代1constscene=new然后，我們創(chuàng)建幾何體對象。OGL內(nèi)置了許多常用的幾何體對象，包括球體Sphere、立方體Box、柱/錐體Cylinder以及環(huán)面Torus等等。使用這些對象，我們可以快速創(chuàng)建這些幾何體的頂點信息。那在這里，我創(chuàng)建了4個幾何體對象，分別是球體、立方體、椎代代constsphereGeometry=newconstcubeGeometry=newconstcylinderGeometry=newconsttorusGeometry=new再然后，我們創(chuàng)建WebGL程序。并且，我們在器中給這些幾何體設(shè)置了淺藍色和簡代代123456789constvertex=/*glsl*/precisionhighpattributevec3position;attributevec3normal;uniformmat4modelViewMatrix;uniformmat4projectionMatrix;uniformmat3normalMatrix;varyingvec3vNormal;voidmain()vNormal=normalize(normalMatrix*gl_Position=projectionMatrix*modelViewMatrix*vec4(position,}constfragment=/*glsl*/precisionhighpvaryingvec3vNormal;voidmain(){vec3normal=floatlighting=dot(normal,normalize(vec3(-0.3,0.8,0.6)));gl_FragColor.rgb=vec3(0.2,0.8,1.0)+lighting*0.1;gl_FragColor.a=}constprogram=new{有了WebGL程序之后，我們使用它和幾何體對象來構(gòu)建真正的網(wǎng)格（Mesh）元素，最終再把這些元素渲染到畫布上。我們創(chuàng)建了4個網(wǎng)格對象，它們的形狀分別是環(huán)面、球體、立方體和圓柱，我們給它們設(shè)置了不同的位置，然后將它們添加到場景scene中去。代代123456789consttorus=newMesh(gl,{geometry:torusGeometry,program});torus.position.set(0,1.3,0);constsphere=newMesh(gl,{geometry:sphereGeometry,program});sphere.position.set(1.3,0,0);constcube=newMesh(gl,{geometry:cubeGeometry,program});cube.position.set(0,-1.3,0);constcylinder=newMesh(gl,{geometry:cylinderGeometry,program});cylinder.position.set(-1.3,0,0);最后，它們用相機camera對象的設(shè)定渲染出來，并分別設(shè)置繞y軸旋轉(zhuǎn)的動畫，你就能看到這4個圖像旋轉(zhuǎn)的畫面了。代碼如下：代代123456789functionupdate(){torus.rotation.y-=sphere.rotation.y-=cube.rotation.y-=cylinder.rotation.y-=renderer.render({scene,}在這一節(jié)課，我們在三里，引入了相機和視圖矩陣的概念，相機