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

阿新 • • 發佈：2019-12-07

1. 概述
2. 示例
- 2.1. 著色器部分
  - 2.1.1. 幀快取著色器
  - 2.1.2. 顏色快取著色器
- 2.2. 繪製部分
  - 2.2.1. 整體結構
  - 2.2.2. 具體改動
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程式設計指南》，原始碼連結：地址。會在此共享目錄中持續更新後續的內

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. 參考

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

WebGL簡易教程(十一)：紋理

WebGL簡易教程(十五)：載入gltf模型

WebGL簡易教程(十)：光照

webpack4 系列教程(十四)：Clean Plugin and Watch Mode

RabbitMQ入門教程(十四)：RabbitMQ單機叢集搭建

Spring Boot教程十四：基於自定義註解的AOP資料來源自動切換

WebGL簡易教程(四)：顏色

【黑金原創教程】【FPGA那些事兒-驅動篇I 】實驗十四：儲存模組

【黑金原創教程】【FPGA那些事兒-驅動篇I 】實驗二十四：SD卡模組

ExtJs 入門教程十四[資料代理：DataProxy]

WebGL簡易教程(一)：第一個簡單示例

WebGL簡易教程(二)：向著色器傳輸資料

WebGL簡易教程(三)：繪製一個三角形(緩衝區物件)

WebGL簡易教程(五)：圖形變換(模型、檢視、投影變換)

WebGL簡易教程(六)：第一個三維示例(使用模型檢視投影變換)

WebGL簡易教程(七)：繪製一個矩形體

WebGL簡易教程(九)：綜合例項：地形的繪製

WebGL簡易教程(十三)：幀快取物件(離屏渲染)

Web前端面試指導(十四)：如何居中一個元素（正常、絕對定位、浮動元素）?

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. 參考

相關推薦