文章目錄
1. 概述
所謂陰影，就是物體在光照下向背光處投下影子的現象，使用陰影技術能提升圖形渲染的真實感。實現陰影的思路很簡單:
- 找出陰影的位置。
- 將陰影位置的圖元調暗。
很明顯，關鍵還是在於如何去判斷陰影的位置。陰影檢測的算法當然可以自己去實現，但其實OpenGL/WebGL已經隱含了這種算法：假設攝像機在光源點，視線方向與光線一致，那麼這個時候視圖中看不到的地方肯定就是存在陰影的地方。這實際上是由光源與物體之間的距離（也就是光源座標系下的深度Z值）決定的，深度較大的點爲陰影點。如下圖所示，同一條光線上的兩個點P1和P2，P2的深度較大，所以P2爲陰影點：
圖1-1：通過深度來判斷陰影
當然，在實際進行圖形渲染的時候，不會永遠在光源處進行觀察，這個時候可以把光源點觀察的結果保存下來——使用上一篇教程《WebGL簡易教程(十三)：幀緩存對象(離屏渲染)》中介紹的幀緩衝對象（FBO），將深度信息保存爲紋理圖像，提供給實際圖形渲染時判斷陰影位置。這張紋理圖像就被稱爲陰影貼圖（shadow map），也就是生成陰影比較常用的ShadowMap算法。
2. 示例
在上一篇教程《WebGL簡易教程(十三)：幀緩存對象(離屏渲染)》中已經實現了幀緩衝對象的基本的框架，這裏根據ShadowMap算法的原理稍微改進下即可，具體代碼可參見文末的地址。
2.1. 着色器部分
同樣的定義了兩組着色器，一組繪製在幀緩存，一組繪製在顏色緩存。在需要的時候對兩者進行切換。
2.1.1. 幀緩存着色器
繪製幀緩存的着色器如下：
// 頂點着色器程序-繪製到幀緩存
var FRAME_VSHADER_SOURCE =
'attribute vec4 a_Position;\n' + //位置
'attribute vec4 a_Color;\n' + //顏色
'uniform mat4 u_MvpMatrix;\n' +
'varying vec4 v_Color;\n' +
'void main() {\n' +
' gl_Position = u_MvpMatrix * a_Position;\n' + // 設置頂點座標
' v_Color = a_Color;\n' +
'}\n';
// 片元着色器程序-繪製到幀緩存
var FRAME_FSHADER_SOURCE =
'precision mediump float;\n' +
'varying vec4 v_Color;\n' +
'void main() {\n' +
' const vec4 bitShift = vec4(1.0, 256.0, 256.0 * 256.0, 256.0 * 256.0 * 256.0);\n' +
' const vec4 bitMask = vec4(1.0/256.0, 1.0/256.0, 1.0/256.0, 0.0);\n' +
' vec4 rgbaDepth = fract(gl_FragCoord.z * bitShift);\n' + // Calculate the value stored into each byte
' rgbaDepth -= rgbaDepth.gbaa * bitMask;\n' + // Cut off the value which do not fit in 8 bits
' gl_FragColor = rgbaDepth;\n' + //將深度保存在FBO中
'}\n';
其中，頂點着色器部分沒有變化，主要是根據MVP矩陣算出合適的頂點座標；在片元着色器中，將渲染的深度值保存爲片元顏色。這個渲染的結果將作爲紋理對象傳遞給顏色緩存的着色器。
這裏片元着色器中的深度rgbaDepth還經過一段複雜的計算。這其實是一個編碼操作，將16位的深度值gl_FragCoord.z編碼爲4個8位的gl_FragColor，從而進一步提升精度，避免有的地方因爲精度不夠而產生馬赫帶現象。
2.1.2. 顏色緩存着色器
在顏色緩存中繪製的着色器代碼如下：
// 頂點着色器程序
var VSHADER_SOURCE =
'attribute vec4 a_Position;\n' + //位置
'attribute vec4 a_Color;\n' + //顏色
'attribute vec4 a_Normal;\n' + //法向量
'uniform mat4 u_MvpMatrix;\n' + //界面繪製操作的MVP矩陣
'uniform mat4 u_MvpMatrixFromLight;\n' + //光線方向的MVP矩陣
'varying vec4 v_PositionFromLight;\n' +
'varying vec4 v_Color;\n' +
'varying vec4 v_Normal;\n' +
'void main() {\n' +
' gl_Position = u_MvpMatrix * a_Position;\n' +
' v_PositionFromLight = u_MvpMatrixFromLight * a_Position;\n' +
' v_Color = a_Color;\n' +
' v_Normal = a_Normal;\n' +
'}\n';
// 片元着色器程序
var FSHADER_SOURCE =
'#ifdef GL_ES\n' +
'precision mediump float;\n' +
'#endif\n' +
'uniform sampler2D u_Sampler;\n' + //陰影貼圖
'uniform vec3 u_DiffuseLight;\n' + // 漫反射光顏色
'uniform vec3 u_LightDirection;\n' + // 漫反射光的方向
'uniform vec3 u_AmbientLight;\n' + // 環境光顏色
'varying vec4 v_Color;\n' +
'varying vec4 v_Normal;\n' +
'varying vec4 v_PositionFromLight;\n' +
'float unpackDepth(const in vec4 rgbaDepth) {\n' +
' const vec4 bitShift = vec4(1.0, 1.0/256.0, 1.0/(256.0*256.0), 1.0/(256.0*256.0*256.0));\n' +
' float depth = dot(rgbaDepth, bitShift);\n' + // Use dot() since the calculations is same
' return depth;\n' +
'}\n' +
'void main() {\n' +
//通過深度判斷陰影
' vec3 shadowCoord = (v_PositionFromLight.xyz/v_PositionFromLight.w)/2.0 + 0.5;\n' +
' vec4 rgbaDepth = texture2D(u_Sampler, shadowCoord.xy);\n' +
' float depth = unpackDepth(rgbaDepth);\n' + // 將陰影貼圖的RGBA解碼成浮點型的深度值
' float visibility = (shadowCoord.z > depth + 0.0015) ? 0.7 : 1.0;\n' +
//獲得反射光
' vec3 normal = normalize(v_Normal.xyz);\n' +
' float nDotL = max(dot(u_LightDirection, normal), 0.0);\n' + //計算光線向量與法向量的點積
' vec3 diffuse = u_DiffuseLight * v_Color.rgb * nDotL;\n' + //計算漫發射光的顏色
' vec3 ambient = u_AmbientLight * v_Color.rgb;\n' + //計算環境光的顏色
//' gl_FragColor = vec4(v_Color.rgb * visibility, v_Color.a);\n' +
' gl_FragColor = vec4((diffuse+ambient) * visibility, v_Color.a);\n' +
'}\n';
這段着色器繪製代碼在教程《WebGL簡易教程(十)：光照》繪製顏色和光照的基礎之上加入可陰影的繪製。頂點着色器中新加入了一個uniform變量u_MvpMatrixFromLight，這是在幀緩存中繪製的從光源處觀察的MVP矩陣，傳入到頂點着色器中，計算頂點在光源處觀察的位置v_PositionFromLight。
v_PositionFromLight又傳入到片元着色器，變爲該片元在光源座標系下的座標。這個座標每個分量都是-1到1之間的值，將其歸一化到0到1之間，賦值給變量shadowCoord，其Z分量shadowCoord.z就是從光源處觀察時的深度了。與此同時，片元着色器接受了從幀緩衝對象傳入的渲染結果u_Sampler，裏面保存着幀緩衝對象的深度紋理。從深度紋理從取出深度值爲rgbaDepth，這是之前介紹過的編碼值，通過相應的解碼函數unpackDepth()，解碼成真正的深度depth，也就是在光源處觀察的片元的深度。比較該片元從光源處觀察的深度shadowCoord.z與從光源處觀察得到的同一片元位置的渲染深度depth，如果shadowCoord.z較大，就說明爲陰影位置。
注意這裏比較時有個0.0015的容差，因爲編碼解碼的操作仍然有精度的限制。
2.2. 繪製部分
2.2.1. 整體結構
主要的繪製代碼如下：
//繪製
function DrawDEM(gl, canvas, fbo, frameProgram, drawProgram, terrain) {
// 設置頂點位置
var demBufferObject = initVertexBuffersForDrawDEM(gl, terrain);
if (!demBufferObject) {
console.log('Failed to set the positions of the vertices');
return;
}
//獲取光線:平行光
var lightDirection = getLight();
//預先給着色器傳遞一些不變的量
{
//使用幀緩衝區着色器
gl.useProgram(frameProgram);
//設置在幀緩存中繪製的MVP矩陣
var MvpMatrixFromLight = setFrameMVPMatrix(gl, terrain.sphere, lightDirection, frameProgram);
//使用顏色緩衝區着色器
gl.useProgram(drawProgram);
//設置在顏色緩衝區中繪製時光線的MVP矩陣
gl.uniformMatrix4fv(drawProgram.u_MvpMatrixFromLight, false, MvpMatrixFromLight.elements);
//設置光線的強度和方向
gl.uniform3f(drawProgram.u_DiffuseLight, 1.0, 1.0, 1.0); //設置漫反射光
gl.uniform3fv(drawProgram.u_LightDirection, lightDirection.elements); // 設置光線方向(世界座標系下的)
gl.uniform3f(drawProgram.u_AmbientLight, 0.2, 0.2, 0.2); //設置環境光
//將繪製在幀緩衝區的紋理傳遞給顏色緩衝區着色器的0號紋理單元
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, fbo.texture);
gl.uniform1i(drawProgram.u_Sampler, 0);
gl.useProgram(null);
}
//開始繪製
var tick = function () {
//幀緩存繪製
gl.bindFramebuffer(gl.FRAMEBUFFER, fbo); //將繪製目標切換爲幀緩衝區對象FBO
gl.viewport(0, 0, OFFSCREEN_WIDTH, OFFSCREEN_HEIGHT); // 爲FBO設置一個視口
gl.clearColor(0.2, 0.2, 0.4, 1.0); // Set clear color (the color is slightly changed)
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); // Clear FBO
gl.useProgram(frameProgram); //準備生成紋理貼圖
//分配緩衝區對象並開啓連接
initAttributeVariable(gl, frameProgram.a_Position, demBufferObject.vertexBuffer); // 頂點座標
initAttributeVariable(gl, frameProgram.a_Color, demBufferObject.colorBuffer); // 顏色
//分配索引並繪製
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, demBufferObject.indexBuffer);
gl.drawElements(gl.TRIANGLES, demBufferObject.numIndices, demBufferObject.indexBuffer.type, 0);
//顏色緩存繪製
gl.bindFramebuffer(gl.FRAMEBUFFER, null); //將繪製目標切換爲顏色緩衝區
gl.viewport(0, 0, canvas.width, canvas.height); // 設置視口爲當前畫布的大小
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); // Clear the color buffer
gl.useProgram(drawProgram); // 準備進行繪製
//設置MVP矩陣
setMVPMatrix(gl, canvas, terrain.sphere, lightDirection, drawProgram);
//分配緩衝區對象並開啓連接
initAttributeVariable(gl, drawProgram.a_Position, demBufferObject.vertexBuffer); // Vertex coordinates
initAttributeVariable(gl, drawProgram.a_Color, demBufferObject.colorBuffer); // Texture coordinates
initAttributeVariable(gl, drawProgram.a_Normal, demBufferObject.normalBuffer); // Texture coordinates
//分配索引並繪製
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, demBufferObject.indexBuffer);
gl.drawElements(gl.TRIANGLES, demBufferObject.numIndices, demBufferObject.indexBuffer.type, 0);
window.requestAnimationFrame(tick, canvas);
};
tick();
}
這段代碼的總體結構與上一篇的代碼相比並沒有太多的變化，首先仍然是調用initVertexBuffersForDrawDEM()初始化頂點數組，只是根據需要調整了下頂點數據的內容。然後傳遞非公用隨幀不變的數據，主要是幀緩存着色器中光源處觀察的MVP矩陣，顏色緩存着色器中光照的強度，以及幀緩存對象中的紋理對象。最後進行逐幀繪製：將光源處觀察的結果渲染到幀緩存；利用幀緩存的結果繪製帶陰影的結果到顏色緩存。
2.2.2. 具體改動
利用幀緩存繪製陰影的關鍵就在於繪製了兩遍地形，一個是關於當前視圖觀察下的繪製，另一個是在光源處觀察的繪製，一定要確保兩者的繪製都是正確的，注意兩者繪製時的MVP矩陣。
2.2.2.1. 獲取平行光
這個實例模擬的是在太陽光也就是平行光下產生的陰影，因此需要先獲取平行光方向。這裏描述的是太陽高度角30度，太陽方位角315度下的平行光方向:
//獲取光線
function getLight() {
// 設置光線方向(世界座標系下的)
var solarAltitude = 30.0;
var solarAzimuth = 315.0;
var fAltitude = solarAltitude * Math.PI / 180; //光源高度角
var fAzimuth = solarAzimuth * Math.PI / 180; //光源方位角
var arrayvectorX = Math.cos(fAltitude) * Math.cos(fAzimuth);
var arrayvectorY = Math.cos(fAltitude) * Math.sin(fAzimuth);
var arrayvectorZ = Math.sin(fAltitude);
var lightDirection = new Vector3([arrayvectorX, arrayvectorY, arrayvectorZ]);
lightDirection.normalize(); // Normalize
return lightDirection;
}
2.2.2.2. 設置幀緩存的MVP矩陣
對於點光源光對物體產生陰影，就像在點光源處用透視投影觀察物體一樣；與此對應，平行光對物體產生陰影就需要使用正射投影。雖然平行光在設置MVP矩陣的時候沒有具體的光源位置，但其實只要確定其中一條光線就可以了。在幀緩存中繪製的MVP矩陣如下：
//設置MVP矩陣
function setFrameMVPMatrix(gl, sphere, lightDirection, frameProgram) {
//模型矩陣
var modelMatrix = new Matrix4();
//modelMatrix.scale(curScale, curScale, curScale);
//modelMatrix.rotate(currentAngle[0], 1.0, 0.0, 0.0); // Rotation around x-axis
//modelMatrix.rotate(currentAngle[1], 0.0, 1.0, 0.0); // Rotation around y-axis
modelMatrix.translate(-sphere.centerX, -sphere.centerY, -sphere.centerZ);
//視圖矩陣
var viewMatrix = new Matrix4();
var r = sphere.radius + 10;
viewMatrix.lookAt(lightDirection.elements[0] * r, lightDirection.elements[1] * r, lightDirection.elements[2] * r, 0, 0, 0, 0, 1, 0);
//viewMatrix.lookAt(0, 0, r, 0, 0, 0, 0, 1, 0);
//投影矩陣
var projMatrix = new Matrix4();
var diameter = sphere.radius * 2.1;
var ratioWH = OFFSCREEN_WIDTH / OFFSCREEN_HEIGHT;
var nearHeight = diameter;
var nearWidth = nearHeight * ratioWH;
projMatrix.setOrtho(-nearWidth / 2, nearWidth / 2, -nearHeight / 2, nearHeight / 2, 1, 10000);
//MVP矩陣
var mvpMatrix = new Matrix4();
mvpMatrix.set(projMatrix).multiply(viewMatrix).multiply(modelMatrix);
//將MVP矩陣傳輸到着色器的uniform變量u_MvpMatrix
gl.uniformMatrix4fv(frameProgram.u_MvpMatrix, false, mvpMatrix.elements);
return mvpMatrix;
}
這個MVP矩陣通過地形的包圍球來設置，確定一條對準包圍球中心得平行光方向，設置正射投影即可。在教程《WebGL簡易教程(十二)：包圍球與投影》中論述了這個問題。
2.2.2.3. 設置顏色緩存的MVP矩陣
設置實際繪製的MVP矩陣就恢復成使用透視投影了，與之前的設置是一樣的，同樣在教程《WebGL簡易教程(十二)：包圍球與投影》中有論述：
//設置MVP矩陣
function setMVPMatrix(gl, canvas, sphere, lightDirection, drawProgram) {
//模型矩陣
var modelMatrix = new Matrix4();
modelMatrix.scale(curScale, curScale, curScale);
modelMatrix.rotate(currentAngle[0], 1.0, 0.0, 0.0); // Rotation around x-axis
modelMatrix.rotate(currentAngle[1], 0.0, 1.0, 0.0); // Rotation around y-axis
modelMatrix.translate(-sphere.centerX, -sphere.centerY, -sphere.centerZ);
//投影矩陣
var fovy = 60;
var projMatrix = new Matrix4();
projMatrix.setPerspective(fovy, canvas.width / canvas.height, 1, 10000);
//計算lookAt()函數初始視點的高度
var angle = fovy / 2 * Math.PI / 180.0;
var eyeHight = (sphere.radius * 2 * 1.1) / 2.0 / angle;
//視圖矩陣
var viewMatrix = new Matrix4(); // View matrix
viewMatrix.lookAt(0, 0, eyeHight, 0, 0, 0, 0, 1, 0);
/*
//視圖矩陣
var viewMatrix = new Matrix4();
var r = sphere.radius + 10;
viewMatrix.lookAt(lightDirection.elements[0] * r, lightDirection.elements[1] * r, lightDirection.elements[2] * r, 0, 0, 0, 0, 1, 0);
//投影矩陣
var projMatrix = new Matrix4();
var diameter = sphere.radius * 2.1;
var ratioWH = canvas.width / canvas.height;
var nearHeight = diameter;
var nearWidth = nearHeight * ratioWH;
projMatrix.setOrtho(-nearWidth / 2, nearWidth / 2, -nearHeight / 2, nearHeight / 2, 1, 10000);*/
//MVP矩陣
var mvpMatrix = new Matrix4();
mvpMatrix.set(projMatrix).multiply(viewMatrix).multiply(modelMatrix);
//將MVP矩陣傳輸到着色器的uniform變量u_MvpMatrix
gl.uniformMatrix4fv(drawProgram.u_MvpMatrix, false, mvpMatrix.elements);
}
3. 結果
最後在瀏覽器運行的結果如下所示，陰影存在於一些光照強度較暗的地方：
圖3-1：地形的陰影
通過ShadowMap生成陰影並不是要自己去實現陰影檢查算法，更像是對圖形變換、幀緩衝對象、着色器切換的基礎知識的綜合運用。
4. 參考
本文部分代碼和插圖來自《WebGL編程指南》，源代碼鏈接：地址 。會在此共享目錄中持續更新後續的內容。
