歡迎來到【暢哥聊技術】前端圖形學相關技術文章，更多精彩內容持續更新中,敬請關注。

上章節回顧

熟悉了threejs中內置的幾何圖形的渲染原理就是通過頂點渲染

傳入自定義頂點渲染自定義的幾何圖形

---

本章目標

光照的基本原理

頂點法向量的概念和應用

上一小節我們實現了一個自定義的兩個三角面，如下圖。

但是，大家很容易看出來，兩個三角面之間相鄰的地方沒有棱角的感覺，所有的都是一個顏色。如果沒有輔助線，仿佛看不出來是一個3d圖形。

這是什么原因呢？可能有人會說，因為我沒有添加點光源，額，說對了一半。如果我們單純的在場景中添加一個點光源，也是沒有效果的。因為還缺少一個 ... 平面法向量

什么鬼....

法向量

什么是法向量？拿立方體來舉例。我們知道，它有六個平面。繪制需要12個三角形，36個頂點(這時不談頂點的復用)。

這里插一句，webgl中繪制平面的最小單位是三角形(三角面)，那為什么不是矩形面呢？原因是在三維空間中，只有三個不同位置的點，才能確定一個唯一的平面。所以在原生的webgl中，gl.drawArrays(gl.Lines)來是線條繪制，gl.TRIANGLE_FAN模式來繪制填充的平面。

回到正題，立方體6個面，那么每一個面的法向量就是垂直每個平面的向量。

比如上圖中的立方體的右面的法向量就是(1，0，0)

那么向量有什么用呢？？那么就不得不得到光照了。

光照模型

光照照在物體上，正常來說是有漫反射的。具體的可參考我之前寫的文章原生webgl中的光照 那么光照會和物體之間有一個入射角，這個入射角就是光照和平面的法向量的夾角。

搞清楚了法向量的概念，我們再來聊聊光照原理，前面的原生webgl光照原理中我有說到，光打到物體表面后，我們看到的顏色并不是都是相同的，這時候我們就需要根據入射角度來計算反射后的顏色。

前面我們單純一個計算方式是將光的顏色*物體的顏色*入射角的余弦值，得到一個簡單的光照模型。

那問題又來了，那為什么我們在創建內置的幾何圖形的時候沒有讓我們創建法向量呢，甚至都沒說~

帶著這個問題，我們再去探一下立方體的創建過程，看它內部到底幫我們做了什么。

找到BoxBufferGeometry類的定義，截圖。

這兩個截圖足以說明，和頂點數據一樣，threejs在創建內置幾何體的時候，已經根據我們傳遞進去的參數生成了對應的法向量~

多么痛的領悟，如果不看源碼，咋能知道這些??

接下來我們來加入法向量改造一下上面的示例：

創建法向量

將法向量數據傳遞給空的幾何圖形的法向量屬性

這樣幾何圖形的表面的顏色就不再是單一的了，我們可以很清楚的看到兩個三角面相鄰位置的棱角,背面沒有光的反射。

---

舉一反三

我們在threejs中，幾乎很少看到有需要我們去寫著色器的地方，而我們好像也沒有看到過有著色器語言的地方。那么接下來我借著光照模型去找在threejs中光照模型的算法公式吧~

了解過原生的webgl的都知道，著色器語言需要webgl Api 去編譯然后到GPU中執行，那我們就從渲染器的源碼中開始下手。

找了半天，我終于找到了一個方法initMaterial() //初始化材質，繼續往下走、

一眼就看到了ShaderLib這個對象，從字面上理解，它是一個著色器的類庫，好，我們進去看下。

好高興，看我發現了什么？

我們的示例中用到的材質，下面的是材質對應的頂點著色器和片元著色器，繼續深入ShaderChunk對象去找 ，這里我們要看材質和光照的反應，所以我們找對應的片元著色器

fragmentShader: ShaderChunk.meshlambert_frag

終于找到他了 ./ShaderLib/meshlambert_frag.glsl.js，我們去打開這個文件。

這個js文件的源碼全是著色器語言，有相關基礎的應該可以看個大概，來看我圈出來的部分，就是用來計算光照和材質的反射后的光照，很明顯，這和我之前提供的光照算法差別很大了。

這些我也是完全看不懂，我們只需要知道，webgl中的光照原理其實就是物體和光源顏色經過一定的算法得到就行了~

總結：

1、通過webgl中光照引出了法向量的概念， 法向量垂直于平面

2、接入法向量改造我們的示例、產生真實的光照反應

3、通過分析源碼知道，內置的幾何圖形已經幫我們設置好了法向量，自定義的圖形需要我們手動添加

4、通過歸類，我們知道，頂點具有頂點的位置position,頂點的顏色color和頂點的法向量nomarl

5、webgl Api編譯著色器然后在GPU中執行(原生webgl的知識點)

6、一步步深入threejs中的光照和材質的相互反應在片元著色器中的基本算法

---

以上是今天所有的分享內容。喜歡的請點贊關注，不喜歡的解散。。。

這里是【暢哥聊技術】前端圖形學相關技術文章，更多精彩內容持續更新中。。。

未完待續。。。

總結

以上是生活随笔為你收集整理的threejs添加立方体_前端图形学(三十)——从源码去看threejs中的光照模型的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。