當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

WebGL简易教程(十四)：阴影

發(fā)布時間：2024/10/8 编程问答 38 如意码农

生活随笔收集整理的這篇文章主要介紹了 WebGL简易教程(十四)：阴影小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

1. 概述
2. 示例
- 2.1. 著色器部分
  - 2.1.1. 幀緩存著色器
  - 2.1.2. 顏色緩存著色器
- 2.2. 繪制部分
  - 2.2.1. 整體結(jié)構(gòu)
  - 2.2.2. 具體改動
    - 2.2.2.1. 獲取平行光
    - 2.2.2.2. 設(shè)置幀緩存的MVP矩陣
    - 2.2.2.3. 設(shè)置顏色緩存的MVP矩陣
3. 結(jié)果
4. 參考

1. 概述

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

找出陰影的位置。
將陰影位置的圖元調(diào)暗。

很明顯，關(guān)鍵還是在于如何去判斷陰影的位置。陰影檢測的算法當(dāng)然可以自己去實現(xiàn)，但其實OpenGL/WebGL已經(jīng)隱含了這種算法：假設(shè)攝像機在光源點，視線方向與光線一致，那么這個時候視圖中看不到的地方肯定就是存在陰影的地方。這實際上是由光源與物體之間的距離（也就是光源坐標(biāo)系下的深度Z值）決定的，深度較大的點為陰影點。如下圖所示，同一條光線上的兩個點P1和P2，P2的深度較大，所以P2為陰影點：

圖1-1：通過深度來判斷陰影

當(dāng)然，在實際進(jìn)行圖形渲染的時候，不會永遠(yuǎn)在光源處進(jìn)行觀察，這個時候可以把光源點觀察的結(jié)果保存下來——使用上一篇教程《WebGL簡易教程(十三)：幀緩存對象(離屏渲染)》中介紹的幀緩沖對象（FBO），將深度信息保存為紋理圖像，提供給實際圖形渲染時判斷陰影位置。這張紋理圖像就被稱為陰影貼圖（shadow map），也就是生成陰影比較常用的ShadowMap算法。

2. 示例

在上一篇教程《WebGL簡易教程(十三)：幀緩存對象(離屏渲染)》中已經(jīng)實現(xiàn)了幀緩沖對象的基本的框架，這里根據(jù)ShadowMap算法的原理稍微改進(jìn)下即可，具體代碼可參見文末的地址。

2.1. 著色器部分

同樣的定義了兩組著色器，一組繪制在幀緩存，一組繪制在顏色緩存。在需要的時候?qū)烧哌M(jìn)行切換。

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' + // 設(shè)置頂點坐標(biāo)

  '  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';

其中，頂點著色器部分沒有變化，主要是根據(jù)MVP矩陣算出合適的頂點坐標(biāo)；在片元著色器中，將渲染的深度值保存為片元顏色。這個渲染的結(jié)果將作為紋理對象傳遞給顏色緩存的著色器。

這里片元著色器中的深度rgbaDepth還經(jīng)過一段復(fù)雜的計算。這其實是一個編碼操作，將16位的深度值gl_FragCoord.z編碼為4個8位的gl_FragColor，從而進(jìn)一步提升精度，避免有的地方因為精度不夠而產(chǎn)生馬赫帶現(xiàn)象。

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' + // 環(huá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' +  //計算漫發(fā)射光的顏色

  '  vec3 ambient = u_AmbientLight * v_Color.rgb;\n' +  //計算環(huán)境光的顏色

  //'  gl_FragColor = vec4(v_Color.rgb * visibility, v_Color.a);\n' +

  '  gl_FragColor = vec4((diffuse+ambient) * visibility, v_Color.a);\n' +

  '}\n';

這段著色器繪制代碼在教程《WebGL簡易教程(十)：光照》繪制顏色和光照的基礎(chǔ)之上加入可陰影的繪制。頂點著色器中新加入了一個uniform變量u_MvpMatrixFromLight，這是在幀緩存中繪制的從光源處觀察的MVP矩陣，傳入到頂點著色器中，計算頂點在光源處觀察的位置v_PositionFromLight。

v_PositionFromLight又傳入到片元著色器，變?yōu)樵撈诠庠醋鴺?biāo)系下的坐標(biāo)。這個坐標(biāo)每個分量都是-1到1之間的值，將其歸一化到0到1之間，賦值給變量shadowCoord，其Z分量shadowCoord.z就是從光源處觀察時的深度了。與此同時，片元著色器接受了從幀緩沖對象傳入的渲染結(jié)果u_Sampler，里面保存著幀緩沖對象的深度紋理。從深度紋理從取出深度值為rgbaDepth，這是之前介紹過的編碼值，通過相應(yīng)的解碼函數(shù)unpackDepth()，解碼成真正的深度depth，也就是在光源處觀察的片元的深度。比較該片元從光源處觀察的深度shadowCoord.z與從光源處觀察得到的同一片元位置的渲染深度depth，如果shadowCoord.z較大，就說明為陰影位置。

注意這里比較時有個0.0015的容差，因為編碼解碼的操作仍然有精度的限制。

2.2. 繪制部分

2.2.1. 整體結(jié)構(gòu)

主要的繪制代碼如下：

//繪制

function DrawDEM(gl, canvas, fbo, frameProgram, drawProgram, terrain) {

  // 設(shè)置頂點位置

  var demBufferObject = initVertexBuffersForDrawDEM(gl, terrain);

  if (!demBufferObject) {

    console.log('Failed to set the positions of the vertices');

    return;

  }

  //獲取光線:平行光

  var lightDirection = getLight();

  //預(yù)先給著色器傳遞一些不變的量

  {

    //使用幀緩沖區(qū)著色器

    gl.useProgram(frameProgram);

    //設(shè)置在幀緩存中繪制的MVP矩陣

    var MvpMatrixFromLight = setFrameMVPMatrix(gl, terrain.sphere, lightDirection, frameProgram);

    //使用顏色緩沖區(qū)著色器

    gl.useProgram(drawProgram);

    //設(shè)置在顏色緩沖區(qū)中繪制時光線的MVP矩陣

    gl.uniformMatrix4fv(drawProgram.u_MvpMatrixFromLight, false, MvpMatrixFromLight.elements);

    //設(shè)置光線的強度和方向

    gl.uniform3f(drawProgram.u_DiffuseLight, 1.0, 1.0, 1.0);    //設(shè)置漫反射光

    gl.uniform3fv(drawProgram.u_LightDirection, lightDirection.elements);   // 設(shè)置光線方向(世界坐標(biāo)系下的)

    gl.uniform3f(drawProgram.u_AmbientLight, 0.2, 0.2, 0.2);    //設(shè)置環(huán)境光

    //將繪制在幀緩沖區(qū)的紋理傳遞給顏色緩沖區(qū)著色器的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); //將繪制目標(biāo)切換為幀緩沖區(qū)對象FBO

    gl.viewport(0, 0, OFFSCREEN_WIDTH, OFFSCREEN_HEIGHT); // 為FBO設(shè)置一個視口

    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); //準(zhǔn)備生成紋理貼圖

    //分配緩沖區(qū)對象并開啟連接

    initAttributeVariable(gl, frameProgram.a_Position, demBufferObject.vertexBuffer); // 頂點坐標(biāo)

    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); //將繪制目標(biāo)切換為顏色緩沖區(qū)

    gl.viewport(0, 0, canvas.width, canvas.height); // 設(shè)置視口為當(dāng)前畫布的大小

    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); // 準(zhǔn)備進(jìn)行繪制

    //設(shè)置MVP矩陣

    setMVPMatrix(gl, canvas, terrain.sphere, lightDirection, drawProgram);

    //分配緩沖區(qū)對象并開啟連接

    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();

}

這段代碼的總體結(jié)構(gòu)與上一篇的代碼相比并沒有太多的變化，首先仍然是調(diào)用initVertexBuffersForDrawDEM()初始化頂點數(shù)組，只是根據(jù)需要調(diào)整了下頂點數(shù)據(jù)的內(nèi)容。然后傳遞非公用隨幀不變的數(shù)據(jù)，主要是幀緩存著色器中光源處觀察的MVP矩陣，顏色緩存著色器中光照的強度，以及幀緩存對象中的紋理對象。最后進(jìn)行逐幀繪制：將光源處觀察的結(jié)果渲染到幀緩存；利用幀緩存的結(jié)果繪制帶陰影的結(jié)果到顏色緩存。

2.2.2. 具體改動

利用幀緩存繪制陰影的關(guān)鍵就在于繪制了兩遍地形，一個是關(guān)于當(dāng)前視圖觀察下的繪制，另一個是在光源處觀察的繪制，一定要確保兩者的繪制都是正確的，注意兩者繪制時的MVP矩陣。

2.2.2.1. 獲取平行光

這個實例模擬的是在太陽光也就是平行光下產(chǎn)生的陰影，因此需要先獲取平行光方向。這里描述的是太陽高度角30度，太陽方位角315度下的平行光方向:

//獲取光線

function getLight() {

  // 設(shè)置光線方向(世界坐標(biāo)系下的)

  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. 設(shè)置幀緩存的MVP矩陣

對于點光源光對物體產(chǎn)生陰影，就像在點光源處用透視投影觀察物體一樣；與此對應(yīng)，平行光對物體產(chǎn)生陰影就需要使用正射投影。雖然平行光在設(shè)置MVP矩陣的時候沒有具體的光源位置，但其實只要確定其中一條光線就可以了。在幀緩存中繪制的MVP矩陣如下：

//設(shè)置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矩陣傳輸?shù)街鞯膗niform變量u_MvpMatrix

  gl.uniformMatrix4fv(frameProgram.u_MvpMatrix, false, mvpMatrix.elements);

  return mvpMatrix;

}

這個MVP矩陣通過地形的包圍球來設(shè)置，確定一條對準(zhǔn)包圍球中心得平行光方向，設(shè)置正射投影即可。在教程《WebGL簡易教程(十二)：包圍球與投影》中論述了這個問題。

2.2.2.3. 設(shè)置顏色緩存的MVP矩陣

設(shè)置實際繪制的MVP矩陣就恢復(fù)成使用透視投影了，與之前的設(shè)置是一樣的，同樣在教程《WebGL簡易教程(十二)：包圍球與投影》中有論述：

//設(shè)置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()函數(shù)初始視點的高度

  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矩陣傳輸?shù)街鞯膗niform變量u_MvpMatrix

  gl.uniformMatrix4fv(drawProgram.u_MvpMatrix, false, mvpMatrix.elements);

}

3. 結(jié)果

最后在瀏覽器運行的結(jié)果如下所示，陰影存在于一些光照強度較暗的地方：

圖3-1：地形的陰影

通過ShadowMap生成陰影并不是要自己去實現(xiàn)陰影檢查算法，更像是對圖形變換、幀緩沖對象、著色器切換的基礎(chǔ)知識的綜合運用。

4. 參考

本文部分代碼和插圖來自《WebGL編程指南》，源代碼鏈接：地址。會在此共享目錄中持續(xù)更新后續(xù)的內(nèi)容。

總結(jié)

以上是生活随笔為你收集整理的WebGL简易教程(十四)：阴影的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： java第九章IO流与文件操作
下一篇： java实验四集合与函数式编程实验