丨如何添加相機(jī)用透視原理對(duì)物體進(jìn)行投影

我們現(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是一個(gè)向量，表示朝上的方向，我們把它定義為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的默認(rèn)坐標(biāo)范圍是從-1到1的。也就是說(shuō)，只有當(dāng)圖像的x、y、z的值在-1到1舉個(gè)例子，如果我們修改模型矩陣，讓圓柱體沿x、y軸平移，向右上方各平移0.5，那么圓柱中x、y值大于1的部分都會(huì)被剪裁掉，因?yàn)檫@些部分已經(jīng)超過(guò)了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對(duì)于只有x、y的二維坐標(biāo)系來(lái)說(shuō)，這一點(diǎn)很好理解。但是，對(duì)于三維坐標(biāo)系來(lái)說(shuō)，不僅x、y軸會(huì)被剪裁，z軸同樣也會(huì)被剪裁。我們還是直接修改代碼，給z軸增加0.5的平會(huì)顯示這么奇怪的結(jié)果，就是因?yàn)閦軸超過(guò)范圍的部分也被剪裁掉了，導(dǎo)致投影出現(xiàn)了問(wèn)既然是投影出現(xiàn)了問(wèn)題，我們先回想一下，我們都對(duì)z軸做過(guò)哪些投影操作。在繪制圓柱體的時(shí)候，我們只是用投影矩陣非常簡(jiǎn)單地反轉(zhuǎn)了一下z軸，除此之外，沒(méi)做過(guò)其他任何操作了。所以，為了讓圖形在剪裁空間中正確顯示，我們不能只反轉(zhuǎn)z軸，還需要將圖像首先是正投影，它又叫做平行投影。正投影是將物體投影到一個(gè)長(zhǎng)方體的空間（景體），并且無(wú)論相機(jī)與物體距離多遠(yuǎn)，投影的大小都不變。而投影更接們的感知投影律是相機(jī)物體離相的物體小。與正投影不同，正投影的視景體是一個(gè)長(zhǎng)方體，而投影的視景體是一個(gè)棱因?yàn)閿?shù)學(xué)推導(dǎo)過(guò)程比較復(fù)雜，我在這里就不詳細(xì)推導(dǎo)了，直接給出對(duì)應(yīng)的JavaScript函數(shù)，你只要記住ortho和這兩個(gè)投影函數(shù)就可以了，函數(shù)如下所示其中，orthox、y、z的返回值就是投影矩陣。而是計(jì)算投影的函數(shù)，它的參數(shù)是近景平面near、遠(yuǎn)景平面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接下來(lái)，我們先試試對(duì)圓柱體進(jìn)行正投影。假設(shè)，在正投影的時(shí)候，我們讓視景體三個(gè)方向的范圍都是(-)。以剛才的相機(jī)位置為參照（代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)，在投影下，距離觀察者（相機(jī)）近的部分大，距離它遠(yuǎn)的部分小。這更合真實(shí)世界中我們看到的效果，所以一般來(lái)說(shuō)，在繪制D圖形時(shí)，我們更偏向使用3D實(shí)際上，通過(guò)上節(jié)課和剛才的內(nèi)容，我們已經(jīng)能總結(jié)出3D繪制幾何體的基本數(shù)學(xué)模型，也就是3D繪圖的標(biāo)準(zhǔn)模型。這個(gè)標(biāo)準(zhǔn)模型一共有四個(gè)矩陣，它們分別是：投影矩陣、視果。比較成圖形庫(kù)，如rS、BabylonJ，基本上都是采用這個(gè)標(biāo)準(zhǔn)模型來(lái)進(jìn)行3D繪圖的。所以理解這個(gè)模型，也有助于增強(qiáng)我們對(duì)圖形庫(kù)的認(rèn)識(shí)，幫助我們WebGL原生的APIgl-renderer庫(kù)來(lái)簡(jiǎn)化2D繪圖過(guò)程。而3D繪圖是一個(gè)比2D繪圖更加復(fù)雜的過(guò)程，即使是gl-renderer當(dāng)然，使用ThreeJS或BabeylonJS都是不錯(cuò)的選擇。但是在這節(jié)課中，我會(huì)使用一個(gè)更加輕量級(jí)的圖形庫(kù)，叫做OGL。它擁有我們可視化繪圖需要的所有基本功能，而且ThreeJSAPOGLOGL以下7個(gè)步驟，如下圖所示。Renderer512Renderer代代1234567constcanvasconstrenderer=newRenderer({width:height:然后，我們?cè)贠GL中，通過(guò)newCamera來(lái)創(chuàng)建相機(jī)，默認(rèn)創(chuàng)建出的是投影相機(jī)。這里我們把視角設(shè)置為35度，位置設(shè)置為(0,1,7)，朝向?yàn)?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)建場(chǎng)景。OGL使用樹(shù)形渲染的方式，所以在用OGL創(chuàng)建場(chǎng)景時(shí)，我們要使用TransformTransform代代1constscene=new然后，我們創(chuàng)建幾何體對(duì)象。OGL內(nèi)置了許多常用的幾何體對(duì)象，包括球體Sphere、立方體Box、柱/錐體Cylinder以及環(huán)面Torus等等。使用這些對(duì)象，我們可以快速創(chuàng)建這些幾何體的頂點(diǎn)信息。那在這里，我創(chuàng)建了4個(gè)幾何體對(duì)象，分別是球體、立方體、椎代代constsphereGeometry=newconstcubeGeometry=newconstcylinderGeometry=newconsttorusGeometry=new再然后，我們創(chuàng)建WebGL程序。并且，我們?cè)谄髦薪o這些幾何體設(shè)置了淺藍(lán)色和簡(jiǎn)代代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程序之后，我們使用它和幾何體對(duì)象來(lái)構(gòu)建真正的網(wǎng)格（Mesh）元素，最終再把這些元素渲染到畫(huà)布上。我們創(chuàng)建了4個(gè)網(wǎng)格對(duì)象，它們的形狀分別是環(huán)面、球體、立方體和圓柱，我們給它們?cè)O(shè)置了不同的位置，然后將它們添加到場(chǎng)景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);最后，它們用相機(jī)camera對(duì)象的設(shè)定渲染出來(lái)，并分別設(shè)置繞y軸旋轉(zhuǎn)的動(dòng)畫(huà)，你就能看到這4個(gè)圖像旋轉(zhuǎn)的畫(huà)面了。代碼如下：代代123456789functionupdate(){torus.rotation.y-=sphere.rotation.y-=cube.rotation.y-=cylinder.rotation.y-=renderer.render({scene,}在這一節(jié)課，我們?cè)谌?，引入了相機(jī)和視圖矩陣的概念，相機(jī)