丨如何模擬光照讓3d場景更逼真上

那什么是環(huán)境光呢？環(huán)境光就是指物體所在的三中天然的光，它充滿整個空間，在每一處的光照強度都一樣。環(huán)境光沒有方向，所以，物體表面反射環(huán)境光的效果，只和環(huán)境光本身以及材質(zhì)的反射率有關(guān)。物體在環(huán)境光中呈現(xiàn)的顏色，我們可以利用下面的來求。其中，環(huán)境光的顏色為L，材質(zhì)對光的反射率為R。C=LR

?Lr×Rr × ×?Lb×Rb代代123456789precisionhighpuniformvec3ambientLight;uniformvec3materialReflection;voidmain()gl_FragColor.rgb=ambientLight*materialReflection;gl_FragColor.a=1.0;}我們用這個器創(chuàng)建WebGL器程序，傳入環(huán)境光ambientLight和材質(zhì)反射率materialReflection，就可以渲染出各種顏色的幾何體了。面的課程里，我們繪制的幾何體只有顏色屬性，但是在光照模型里，我們把顏色變?yōu)榱谁h(huán)境光和反射率兩個屬性。這樣的模型更加接近于真實世界，也讓物體的顏色有了更靈活的控制。比如，我們修改環(huán)境光，就可以改變整個畫布上所有受光照模型影響的幾何體的顏色，而如果只是像之前那樣給物體分別設(shè)置顏色，我們就只能一一修改這些物體各自的顏色了。首先，因為它在空間中均勻分布，所以在任何位置上環(huán)境光的顏色都相同。其次，它與物體的材質(zhì)有關(guān)。如果物體的RGB通道反射率不同的話，那么它在相同的環(huán)境光下就會呈現(xiàn)出不同的顏色。因此，如果環(huán)境光是白光（FFF），那么物體呈現(xiàn)的顏色就是材質(zhì)反射率表現(xiàn)出的顏色，也就是物體的固有顏色。而且，平行光除了顏色這個屬性之外，還有方向，它屬于有向光。有向光在與物體發(fā)生作用的時候，根據(jù)物體的材質(zhì)特性，會產(chǎn)生兩種反射，一種叫做漫反射（Diffserefletion），另一種叫做鏡面反射（Secarrefletion），而一個物體最終的光照效果，是漫反射、鏡面反射以及我們前面說的環(huán)境光疊加在一起的效果。因為內(nèi)容比較多，所以這節(jié)課，我們先來討論光源的漫反射效果。下節(jié)課，我們再繼續(xù)討論光源的鏡面反射，以及多個光源混合的反射效果。如下圖所示：那我們該如何讓3D物體呈現(xiàn)出，平行光照射下的顏色效果呢？下面，我就以添加一道白代首先，我們在頂點器中添加一道平行光。具體來說就是傳入一個irecionalLight向量。為什么是頂點器呢？因為，我們在頂點器中計算光線的方向，需要運算的次數(shù)少，會比在片元器中計算的性能要好很多。代1precisionhighp23attributevec34attributevec35uniformmat46uniformmat47uniformmat48uniformmat39uniformvec3varyingvec3varyingvec3voidmain()//vec4invDirectional=viewMatrix*vDir=-//vNormal=normalize(normalMatrix*gl_Position=projectionMatrix*modelViewMatrix*vec4(position,代代123456789precisionhighpuniformvec3ambientLight;uniformvec3materialReflection;uniformvec3varyingvec3vNormal;varyingvec3vDir;voidmain()//floatcos=max(dot(normalize(vDir),vNormal),//vec3diffuse=cos*//gl_FragColor.rgb=(ambientLight+diffuse)*gl_FragColor.a=}JavaScriptWebGL代代123456789constambientLight={value:[0.5,0.5,constdirectional{directionalLight:{value:[1,directionalLightColor:{value:[1,1,constprogram1=new{uniforms:{materialReflection:{value:[0,0,點光源顧名思義，就是指空間中某一點發(fā)出的光，與方向光不同的是，點光源不僅有方向?qū)傩裕€有位置屬性。因此計算點光源的光照，我們要先根據(jù)光源位置和物體表面相對位置來確定方向，然后再和平行光一樣，計算光的方向和物體表面法向的夾角。計算過程要比平行光稍微復(fù)雜一些。對于平行光來說，只要法向量相同，方向就相同，所以我們可以直接在頂點器中計算方向。但點光源因為其方向與物體表面的相對位置有關(guān)，所以我們不能在頂點器中計算，需要在片元器中計算。代代123456789precisionhighpattributevec3position;attributevec3normal;uniformmat4modelViewMatrix;uniformmat4projectionMatrix;uniformmat3normalMatrix;varyingvec3vNormal;varyingvec3vPos;voidmain()vPos=modelViewMatrix*vec4(position,1.0);;vNormal=normalize(normalMatrix*normal);gl_Position=projectionMatrix*vPos;}那接下來，片元器中的計算過程就和平行光類似了。我們要計算光線方向與法向量夾角的余弦，我們用viewMarix*e4(poitLihtPosiion,1.0)).yz-vPos得出點光源與當前位置的向量，然后用這個向量和法向量計算余弦值，這樣就得到了我們需要的漫反射余弦值。對應(yīng)的片元器如下：代代123456789precisionhighpuniformvec3ambientLight;uniformvec3materialReflection;uniformvec3pointLightColor;uniformvec3pointLightPosition;uniformmat4viewMatrix;varyingvec3vNormal;varyingvec3vPos;voidmain()//vec3dir=(viewMatrix*vec4(pointLightPosition,1.0)).xyz-//floatcos=max(dot(normalize(dir),vNormal),//vec3diffuse=cos*//gl_FragColor.rgb=(ambientLight+diffuse)*gl_FragColor.a=}假設(shè)點光源設(shè)置在(3,3,0)位置，顏色為白光，得到的效果如下圖所示去。光線的衰減程度，我們一般用衰減系數(shù)表示。衰減系數(shù)等于一個常量d0（通常為1），除以衰減函數(shù)p。一般來說，衰減函數(shù)可以用一個二次多項式 {P=Az2+Bz+Pd=P其中A、B、C為常量，它們的取值會根據(jù)實際的需要隨時變化，z是當前位置到點光源1precisionhighp2uniformvec3uniformvec3uniformvec3uniformvec3uniformmat4uniformvec39varyingvec3varyingvec313voidmain()////vec3dir=(viewMatrix*vec4(pointLightPosition,1.0)).xyz-//floatdis=//floatcos=max(dot(normalize(dir),vNormal),//floatdecay=min(1.0,1.0(pointLightDecayFactor.x*pow(dis,2.0)+*dis//vec3diffuse=decay*cos*//gl_FragColor.rgb=(ambientLight+diffuse)*33gl_FragColor.a=假設(shè)，衰減系數(shù)設(shè)置為0.05,0,1)，就能得到如下效果。把它和前一張圖對比，你會發(fā)現(xiàn)，我們看到較遠的幾何體幾乎沒有光照了。這就是因為光線強度隨著距離衰減了，也就更接近真實世界的效果。與點光源相比，聚光燈增加了方向以及角度范圍，只有在這個范圍內(nèi)，光線才能照到。那該如何判斷坐標是否在角度范圍內(nèi)呢？我們可以根據(jù)法向量與光線方向夾角的余弦值來判斷坐標是否在夾角內(nèi)，還記得我們在第6節(jié)課一開始就討論的那道題目嗎，這里就是具體應(yīng)用。1precisionhighp2uniformmat4uniformvec3uniformvec3uniformvec3uniformvec3uniformvec3uniformvec3uniformfloatvaryingvec3varyingvec3voidmain()//vec3invLight=(viewMatrix*vec4(spotLightPosition,1.0)).xyz-vec3invNormal=//floatdis=//vec3dir=(viewMatrix*vec4(spotLightDirection,//floatang=floatr=step(ang,dot(invNormal,normalize(-//floatcos=max(dot(invNormal,vNormal),//floatdecay=min(1.0,1.0(spotLightDecayFactor.x*pow(dis,2.0)+spotLightDecayFactor.y*+//vec3diffuse=r*decay*cos*//gl_FragColor.rgb=(ambientLight+diffuse)*gl_FragColor.a=41415spotLightColorspotLightPositionspotLightDecayFactor聚光燈衰減系數(shù)spotLightDirectionspotLightAngle在計算光線和法線夾角的余弦值時，我們是用與點光源一樣的方式。此外，我們還增加了一個步驟，就是以聚光燈方向和角度，計算點坐標是否在光照角度內(nèi)。如果在，那么r的值是1，否則r的值是0。constdirectional=spotLightPosition:{value:[3,3,spotLightColor:{value:[1,1,spotLightDecayFactor:{value:[0.05,0,spotLightDirection:{value:[-1,-1,spotLightAngle:{value:Math.PI/7在這一節(jié)課，我們主要講了模擬真實世界中4另外三種光是有向光，它們作用于物體表面的效果，除了與物體材質(zhì)的反射率有關(guān)，還和表面的朝向有關(guān)，所以我們需要計算光線方向和表面法向量的余弦值，用它來計算反射強度。這三種光當中，平行光只有方向和顏色兩個參數(shù)，點光源有位置、顏色和衰減系數(shù)三個參數(shù)，而聚