WebGL簡易教程(十四)：陰影

目錄

• 1. 概述
• 2. 示例
  • 2.1. 着色器部分
    • 2.1.1. 幀緩存着色器
    • 2.1.2. 顏色緩存着色器
  • 2.2. 繪制部分
    • 2.2.1. 整體結構
    • 2.2.2. 具體改動
      • 2.2.2.1. 獲取平行光
      • 2.2.2.2. 設置幀緩存的MVP矩陣
      • 2.2.2.3. 設置顏色緩存的MVP矩陣
• 3. 結果
• 4. 參考

1. 概述

所謂陰影，就是物體在光照下向背光處投下影子的現象，使用陰影技術能提升圖形渲染的真實感。實現陰影的思路很簡單:

1. 找出陰影的位置。
2. 將陰影位置的圖元調暗。

很明顯，關鍵還是在於如何去判斷陰影的位置。陰影檢測的算法當然可以自己去實現，但其實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編程指南》，源代碼鏈接：地址 。會在此共享目錄中持續更新后續的內容。