丨如何模擬光照讓3d場(chǎng)景更逼真上

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

?Lr×Rr × ×?Lb×Rb代代123456789precisionhighpuniformvec3ambientLight;uniformvec3materialReflection;voidmain()gl_FragColor.rgb=ambientLight*materialReflection;gl_FragColor.a=1.0;}我們用這個(gè)器創(chuàng)建WebGL器程序，傳入環(huán)境光ambientLight和材質(zhì)反射率materialReflection，就可以渲染出各種顏色的幾何體了。面的課程里，我們繪制的幾何體只有顏色屬性，但是在光照模型里，我們把顏色變?yōu)榱谁h(huán)境光和反射率兩個(gè)屬性。這樣的模型更加接近于真實(shí)世界，也讓物體的顏色有了更靈活的控制。比如，我們修改環(huán)境光，就可以改變整個(gè)畫布上所有受光照模型影響的幾何體的顏色，而如果只是像之前那樣給物體分別設(shè)置顏色，我們就只能一一修改這些物體各自的顏色了。首先，因?yàn)樗诳臻g中均勻分布，所以在任何位置上環(huán)境光的顏色都相同。其次，它與物體的材質(zhì)有關(guān)。如果物體的RGB通道反射率不同的話，那么它在相同的環(huán)境光下就會(huì)呈現(xiàn)出不同的顏色。因此，如果環(huán)境光是白光（FFF），那么物體呈現(xiàn)的顏色就是材質(zhì)反射率表現(xiàn)出的顏色，也就是物體的固有顏色。而且，平行光除了顏色這個(gè)屬性之外，還有方向，它屬于有向光。有向光在與物體發(fā)生作用的時(shí)候，根據(jù)物體的材質(zhì)特性，會(huì)產(chǎn)生兩種反射，一種叫做漫反射（Diffserefletion），另一種叫做鏡面反射（Secarrefletion），而一個(gè)物體最終的光照效果，是漫反射、鏡面反射以及我們前面說的環(huán)境光疊加在一起的效果。因?yàn)閮?nèi)容比較多，所以這節(jié)課，我們先來討論光源的漫反射效果。下節(jié)課，我們?cè)倮^續(xù)討論光源的鏡面反射，以及多個(gè)光源混合的反射效果。如下圖所示：那我們?cè)撊绾巫?D物體呈現(xiàn)出，平行光照射下的顏色效果呢？下面，我就以添加一道白代首先，我們?cè)陧旤c(diǎn)器中添加一道平行光。具體來說就是傳入一個(gè)irecionalLight向量。為什么是頂點(diǎn)器呢？因?yàn)?，我們?cè)陧旤c(diǎn)器中計(jì)算光線的方向，需要運(yùn)算的次數(shù)少，會(huì)比在片元器中計(jì)算的性能要好很多。代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,點(diǎn)光源顧名思義，就是指空間中某一點(diǎn)發(fā)出的光，與方向光不同的是，點(diǎn)光源不僅有方向?qū)傩裕€有位置屬性。因此計(jì)算點(diǎn)光源的光照，我們要先根據(jù)光源位置和物體表面相對(duì)位置來確定方向，然后再和平行光一樣，計(jì)算光的方向和物體表面法向的夾角。計(jì)算過程要比平行光稍微復(fù)雜一些。對(duì)于平行光來說，只要法向量相同，方向就相同，所以我們可以直接在頂點(diǎn)器中計(jì)算方向。但點(diǎn)光源因?yàn)槠浞较蚺c物體表面的相對(duì)位置有關(guān)，所以我們不能在頂點(diǎn)器中計(jì)算，需要在片元器中計(jì)算。代代123456789precisionhighpattributevec3position;attributevec3normal;uniformmat4modelViewMatrix;uniformmat4projectionMatrix;uniformmat3normalMatrix;varyingvec3vNormal;varyingvec3vPos;voidmain()vPos=modelViewMatrix*vec4(position,1.0);;vNormal=normalize(normalMatrix*normal);gl_Position=projectionMatrix*vPos;}那接下來，片元器中的計(jì)算過程就和平行光類似了。我們要計(jì)算光線方向與法向量夾角的余弦，我們用viewMarix*e4(poitLihtPosiion,1.0)).yz-vPos得出點(diǎn)光源與當(dāng)前位置的向量，然后用這個(gè)向量和法向量計(jì)算余弦值，這樣就得到了我們需要的漫反射余弦值。對(duì)應(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è)點(diǎn)光源設(shè)置在(3,3,0)位置，顏色為白光，得到的效果如下圖所示去。光線的衰減程度，我們一般用衰減系數(shù)表示。衰減系數(shù)等于一個(gè)常量d0（通常為1），除以衰減函數(shù)p。一般來說，衰減函數(shù)可以用一個(gè)二次多項(xiàng)式 {P=Az2+Bz+Pd=P其中A、B、C為常量，它們的取值會(huì)根據(jù)實(shí)際的需要隨時(shí)變化，z是當(dāng)前位置到點(diǎn)光源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)，就能得到如下效果。把它和前一張圖對(duì)比，你會(huì)發(fā)現(xiàn)，我們看到較遠(yuǎn)的幾何體幾乎沒有光照了。這就是因?yàn)楣饩€強(qiáng)度隨著距離衰減了，也就更接近真實(shí)世界的效果。與點(diǎn)光源相比，聚光燈增加了方向以及角度范圍，只有在這個(gè)范圍內(nèi)，光線才能照到。那該如何判斷坐標(biāo)是否在角度范圍內(nèi)呢？我們可以根據(jù)法向量與光線方向夾角的余弦值來判斷坐標(biāo)是否在夾角內(nèi)，還記得我們?cè)诘?節(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在計(jì)算光線和法線夾角的余弦值時(shí)，我們是用與點(diǎn)光源一樣的方式。此外，我們還增加了一個(gè)步驟，就是以聚光燈方向和角度，計(jì)算點(diǎn)坐標(biāo)是否在光照角度內(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é)課，我們主要講了模擬真實(shí)世界中4另外三種光是有向光，它們作用于物體表面的效果，除了與物體材質(zhì)的反射率有關(guān)，還和表面的朝向有關(guān)，所以我們需要計(jì)算光線方向和表面法向量的余弦值，用它來計(jì)算反射強(qiáng)度。這三種光當(dāng)中，平行光只有方向和顏色兩個(gè)參數(shù)，點(diǎn)光源有位置、顏色和衰減系數(shù)三個(gè)參數(shù)，而聚