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. 概述

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

找出陰影的位置，
將陰影位置的圖元調暗，

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/17736.html

標籤：其他

上一篇：OpenGL 之 Compute Shader（通用計算并行加速）

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