<kbd id="afajh"><form id="afajh"></form></kbd>
<strong id="afajh"><dl id="afajh"></dl></strong>
    <del id="afajh"><form id="afajh"></form></del>
        1. <th id="afajh"><progress id="afajh"></progress></th>
          <b id="afajh"><abbr id="afajh"></abbr></b>
          <th id="afajh"><progress id="afajh"></progress></th>

          ?基礎(chǔ)光照模型! Cocos Creator 2D 光照!

          共 2357字,需瀏覽 5分鐘

           ·

          2020-11-16 11:14

          在2d中實(shí)現(xiàn)基礎(chǔ)光照效果!文末查看完整項(xiàng)目

          前言

          本文主要講的是最基礎(chǔ)的光照模型(馮氏光照模型(Phong Lighting Model)),是一種光照的簡(jiǎn)化模型。請(qǐng)務(wù)必記住以下幾個(gè)英文單詞,對(duì)學(xué)習(xí)研究非常有幫助。

          • 環(huán)境(Ambient)
          • 漫反射(Diffuse)
          • 鏡面高光(Specular)

          希望我們能大概了解這些知識(shí)(但不限于這些)

          • 向量(加法/點(diǎn)乘/叉乘)
          • 著色器(頂點(diǎn)著色器/片元著色器)
          • ...

          計(jì)算機(jī)圖形學(xué)第一定律:如果它看起是對(duì)的,那么它就是對(duì)的

          影響一個(gè)物體的外觀顏色一般有以下幾個(gè)因素:

          • 物體表面的特質(zhì),即材質(zhì)屬性。(這次實(shí)現(xiàn)忽略材質(zhì),默認(rèn)統(tǒng)一材質(zhì))
          • 表面的方位與朝向,朝向常用單位法向量表示。(這次在2d中默認(rèn)使用朝向屏幕(0,0,1)作為所有法向量)
          • 照射光的各光源性質(zhì)。(這次簡(jiǎn)化為只有光源位置)
          • 觀察者位置。(這次使用相機(jī)的位置)
          96042689ce163b106f52b174e0fa8a7c.webp實(shí)現(xiàn)

          標(biāo)準(zhǔn)光照公式可以簡(jiǎn)寫(xiě)成

          光?=?環(huán)境光?+?漫反射?+?高光

          現(xiàn)在逐一去實(shí)現(xiàn)。

          環(huán)境光

          環(huán)境光(Ambient)是標(biāo)準(zhǔn)光照模型中最簡(jiǎn)單的一部分,可以理解為光照模型中的常數(shù)項(xiàng)。

          環(huán)境光的顏色并不會(huì)隨著物體的位置,光的位置,視角的位置而改變。

          <環(huán)境光>?=?<全局環(huán)境光顏色>x<材質(zhì)顏色>
          c4361c18d2f648c9be4206e0c4feaddf.webp

          材質(zhì)色這里采用圖片的紋理顏色,環(huán)境光的主要代碼如下:

          vec3 ambient = ambientLight.rgb * lightColor.rgb;
          o.rgb = amibent * o.rgb;

          在只有環(huán)境光的情況下,對(duì)于不同的全局光的系數(shù),物體的亮度也不一樣。

          586ae460c19716c18f0a021cc3ab4f79.webp

          漫反射

          漫反射(Diffuse)是基礎(chǔ)光照模型的第二劍客,它不再是個(gè)常量。

          漫反射的效果會(huì)隨著物體與光線的夾角變化而變化。

          <漫反射>?=?<入射光顏色>x<材質(zhì)顏色>x<光與物體法向量的夾角>
          9a3fd39d9a40f0eb80edb3e5aa4ab170.webp

          主要代碼如下:

          vec3 norm = normalize(v_normal); // 法向量
          vec3 lightDir = normalize(lightPos.xyz - v_pos); // 光的方向

          // diffuse
          float diff = max(dot(norm, lightDir), 0.0); // 夾角
          vec3 diffuse = diff * lightColor.rgb;

          o.rgb = (amibent + diffuse) * o.rgb; // 環(huán)境光+漫反射光

          可以看到光在不同的位置下,物體的亮度不同。

          7736b658c9b7d97fd41c9e07ec47ff6b.webp

          鏡面高光

          鏡面高光(Specular)是基礎(chǔ)光照模型的最后一道工序,不僅受物體夾角影響,還受觀察點(diǎn)的影響。

          <鏡面高光>?=?<入射光顏色>x<材質(zhì)顏色>x<觀察向量與入射向量和法向量的某種指數(shù)關(guān)系>

          這里有兩種模型去實(shí)現(xiàn)鏡面高光

          • phong 模型(用反射向量計(jì)算)
          • bliinn 模型(用半向量計(jì)算)
          fa73e4c82c22a60475fb31d26e1be6f3.webp

          主要核心代碼如下。

          // phong-specular
          // vec3 viewDir = normalize(viewPos - v_pos); // 視角向量
          // vec3 reflectDir = reflect(-lightDir, norm); // 反射向量
          // float spec = pow(max(dot(viewDir, reflectDir), 0.0), shininess); // 夾角的指數(shù)關(guān)系
          // vec3 specular = spec * lightColor.rgb; // 乘入射光顏色

          // blint-phong
          vec3 viewDir = normalize(viewPos - v_pos); // 視角向量
          vec3 halfwayDir = normalize(lightDir + viewDir); // 半向量
          float spec = pow(max(dot(norm, halfwayDir), 0.0), shininess); // 夾角的指數(shù)關(guān)系
          vec3 specular = lightColor.rgb * spec; // 乘入射光顏色

          o.rgb = (ambient + diffuse + specular) * o.rgb; // 混合環(huán)境光 漫反射 高光反射

          運(yùn)行后的結(jié)果如下,可以看到有一個(gè)小光點(diǎn),就是高光反射。

          2798754631a5bdc741c5c6955087c597.webp小結(jié)

          Cocos Creator 2d 光照!Blinn-Phong ! Ambient ! Diffuse ! Specular !

          基礎(chǔ)光照模型可分為三項(xiàng)去考慮

          • 環(huán)境(Ambient) [常數(shù),全局環(huán)境光]
          • 漫反射(Diffuse) [入射角與法向量]
          • 鏡面高光(Specular) [入射角,觀察點(diǎn),指數(shù)]

          以上為白玉無(wú)冰使用 Cocos Creator v2.4 實(shí)現(xiàn) "基礎(chǔ)光照 Blinn-Phong" 的技術(shù)分享。歡迎分享給身邊的朋友!

          當(dāng)然,這只是一種簡(jiǎn)單的光照模型,進(jìn)一步探討的話(huà)還有:

          • 法線矩陣
          • 平行光/點(diǎn)光/聚光
          • 基于物理的渲染(Physically Based Rendering)[PBR]
          • 雙向反射分布函數(shù)(Bidirectional Reflective Distribution Function)[BRDF]
          • 光線追蹤
          • ...

          更多的拓展見(jiàn)參考資料。

          參考
          • 《Fundamentals of Computer Graphics》
          • 《WebGL編程指南》
          • 《3D數(shù)學(xué)基礎(chǔ):圖形與游戲開(kāi)發(fā)》
          • 《光線跟蹤算法技術(shù)》
          • 《Unity Shader入門(mén)精要》
          • https://learnopengl.com/
          更多

          2020 原創(chuàng)精選! shader | 挖洞 | 流體 | 3D | 繩子紋理 | 四叉樹(shù) | 數(shù)學(xué) 樣樣都有!
          d5cfbd411b0fdf4e33edf32117f43bc9.webp
          1fadd9da2d88692486658fd493737cc6.webp
          f63fd133d945abb558f4ad7ac8510fa6.webp


          完整代碼(詳見(jiàn)readme):?

          https://github.com/baiyuwubing/cocos-creator-examples/tree/master/2.4.x

          點(diǎn)擊閱讀原文”查看精選導(dǎo)航

          點(diǎn)贊“ ”在看”?鼓勵(lì)一下f8cbeca075f365cd71b3effb9175a78c.webp



          瀏覽 93
          點(diǎn)贊
          評(píng)論
          收藏
          分享

          手機(jī)掃一掃分享

          分享
          舉報(bào)
          評(píng)論
          圖片
          表情
          推薦
          點(diǎn)贊
          評(píng)論
          收藏
          分享

          手機(jī)掃一掃分享

          分享
          舉報(bào)
          <kbd id="afajh"><form id="afajh"></form></kbd>
          <strong id="afajh"><dl id="afajh"></dl></strong>
            <del id="afajh"><form id="afajh"></form></del>
                1. <th id="afajh"><progress id="afajh"></progress></th>
                  <b id="afajh"><abbr id="afajh"></abbr></b>
                  <th id="afajh"><progress id="afajh"></progress></th>
                  录相一级毛片 | av手机天堂 | 日本操B 操B 操B | 日韩在线免费观看视频 | 一级日韩一级欧美 |