在特定的3d場景中，陰影效果有時還是顯得十分重要的，在一般的3d引擎當中設定陰影可以直接通過對物體設定屬性來實現，十分的方便，這裡我們就用webgl來實現一下平面效果。
平面陰影是通過燈光將物體的陰影投射在乙個平面內，但是物體之間沒有陰影的疊加，也就是說a物體的陰影不會投射到b物體上，在本案例中我們主要是通過著色器來實現平面陰影的效果的，這裡首先介紹一下平面陰影的計算公式：
v'=s+(v-s)(n·(a-s))/(n·(v-s))
上述公式中每一部分的含義如下。
v'代表沿光線投影到繪製陰影的平面上頂點的座標。
s為光源的位置。
v為投影前頂點的實際位置。
n為法向量，其屬於繪製陰影的平面。
a為任意乙個點的座標，其位於繪製陰影的平面上。
•代表向量的點積計算。
下面介紹陰影的頂點著色器，其主要功能是根據有陰影的物體的位置和投影攝像機矩陣，通過平面陰影計算公式來計算陰影的位置和所在的平面。下面是頂點著色器的**：
uniform mat4 umvpmatrix; //總變換矩陣片元著色器主要是對陰影的顏色進行賦值，所以頂點著色器不用給片元著色器傳遞任何引數，只需要一行**即可。uniform mat4 ummatrix; //變換矩陣
uniform mat4 umprojcameramatrix; //投影、攝像機組合矩陣
uniform vec3 ulightlocation; //光源位置
uniform vec3 ucamera; //攝像機位置
attribute vec3 aposition; //頂點位置
void main()
precision mediump float; //給出缺省的浮點精度最後放我自己踩的乙個坑：當遇到如下圖所示報錯時一般是沒有指定當前繪製使用的著色器，從而導致送入緩衝的資料不一致，最終導致錯誤。void main()
最後是演示與github:
WebGL 陰影的實現
原理 根據光源與物體之間的距離 也就是物體在光源座標系下的深度z值 來決定物體是否可見。如下圖，同一條光線上有兩個點p1 p2，由於p2的z值大於p1，所以p2在陰影中。需要使用兩對著色器 1 一對著色器用來計算光源到物體的距離 2 另一對根據 1 中計算出的距離繪製場景。2 如何使用 1 中的距離...
WebGL光照陰影對映
經過前面的學習,webgl的基本功能都已經掌握了,我們不僅掌握了著色器的編寫,圖形的繪製,矩陣的變換,新增光照,還通過對webgl的基礎api封裝,編寫出了便利的工具庫.是時候進一步深入學習webgl的高階功能了,我認為要做逼真的3d特效,陰影絕對是乙個必不可少的環節.現在我們就在之前光照的基礎上新...
WebGL光照陰影對映
經過前面的學習,webgl的基本功能都已經掌握了,我們不僅掌握了著色器的編寫,圖形的繪製,矩陣的變換,新增光照,還通過對webgl的基礎api封裝,編寫出了便利的工具庫.是時候進一步深入學習webgl的高階功能了,我認為要做逼真的3d特效,陰影絕對是乙個必不可少的環節.現在我們就在之前光照的基礎上新...