WebGL 雾化

目录

前言 

如何实现雾化

线性雾化公式

雾化因子关系图

根据雾化因子计算片元颜色公式

示例程序（Fog.js） 

代码详解​编辑

详解如何计算雾化因子（clamp()）

详解如何计算最终片元颜色（根据雾化因子计算片元颜色公式  mix()）

示例效果

示例程序（使用w分量代替顶点与视点的距离 Fog_w.js）

---

前言 

在三维图形学中，术语雾化（fog）用来描述远处的物体看上去较为模糊的现象。在现实中，任何介质中的物体都可能表现出雾化现象，比如水下的物体。本文的示例程序Fog将实现一个雾化的场景，场景中有一个立方体。程序的效果如下图所示，用户可以使用上下方向键调节雾的浓度。运行示例程序，试试上下方向键，看看雾的浓度改变的效果。

 

如何实现雾化

实现雾化的方式有很多种，这里使用最简单的一种： 线性雾化（linear fog）。在线性雾化中，某一点的雾化程度取决于它与视点之间的距离，距离越远雾化程度越高。线性雾化有起点和终点，起点表示开始雾化之处，终点表示完全雾化之处，两点之间某一点的雾化程度与该点与视点的距离呈线性关系。注意，比终点更远的点完全雾化了，即完全看不见了。某一点雾化的程度可以被定义为雾化因子（fog factor），并在线性雾化公式中被计算出来，如下式所示。

线性雾化公式

＜雾化因子＞=（＜终点＞-＜当前点与视点间的距离＞）/ （＜终点＞-＜起点＞）

这里 ＜起点＞≤＜当前点与视点间的距离＞≤＜终点＞ 

 如果雾化因子为1.0，表示该点完全没有被雾化，可以很清晰地看到此处的物体。如果其为0.0，就表示该点完全雾化了，此处的物体完全看不见，如下图所示。在视线上，起点之前的点的雾化因子为1.0，终点之后的点的雾化因子为0.0。

雾化因子关系图

在片元着色器中根据雾化因子计算片元的颜色，如下等式。 

根据雾化因子计算片元颜色公式

＜片元颜色＞=＜物体表面颜色＞×＜雾化因子＞+＜雾的颜色＞×（1-＜雾化因子＞）

来看一下示例程序

示例程序（Fog.js） 

如下显示了示例程序的代码。这里：（1）顶点着色器计算出当前顶点与视点的距离，并传入片元着色器；（2）片元着色器根据片元与视点的距离，计算雾化因子，最终计算出片元的颜色。注意，程序向着色器传入了视点在世界坐标系下的坐标（见附录G“世界坐标系和局部坐标系”），所以雾化因子是在世界坐标系下计算的。 

var VSHADER_SOURCE =
  'attribute vec4 a_Position;\n' +
  'attribute vec4 a_Color;\n' +
  'uniform mat4 u_MvpMatrix;\n' +
  'uniform mat4 u_ModelMatrix;\n' +
  'uniform vec4 u_Eye;\n' +     // 视点位置（世界坐标）
  'varying vec4 v_Color;\n' + 
  'varying float v_Dist;\n' +
  'void main() {\n' +
  '  gl_Position = u_MvpMatrix * a_Position;\n' +
  '  v_Color = a_Color;\n' +
     // 计算从视点到每个顶点的距离
  '  v_Dist = distance(u_ModelMatrix * a_Position, u_Eye);\n' +
  '}\n';
var FSHADER_SOURCE =
  '#ifdef GL_ES\n' +
  'precision mediump float;\n' +
  '#endif\n' +
  'uniform vec3 u_FogColor;\n' + // 雾的颜色
  'uniform vec2 u_FogDist;\n' +  // 雾的距离（起点、终点）
  'varying vec4 v_Color;\n' +
  'varying float v_Dist;\n' +
  'void main() {\n' +
     /* 
      计算雾化因子（雾化因子 = (终点 - 当前点与视点见的距离) / (终点 - 起点)）
      clamp函数：将第一个参数的值限制在第2个和第3个参数区间内，如果值在区间内，函数就直接返回第一个值，如果值小于区间的最小值或大于区间的最大值，函数就直接返回第二个参数或第三个参数
     */
  '  float fogFactor = clamp((u_FogDist.y - v_Dist) / (u_FogDist.y - u_FogDist.x), 0.0, 1.0);\n' +
    /* 计算片元颜色 mix函数：uFogColor*（1-雾因子）+v_Color*雾因子 */ 
  '  vec3 color = mix(u_FogColor, vec3(v_Color), fogFactor);\n' +
  '  gl_FragColor = vec4(color, v_Color.a);\n' +
  '}\n';

function main() {
  var canvas = document.getElementById('webgl');
  var gl = getWebGLContext(canvas);
  if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE))  return
  var n = initVertexBuffers(gl);
  var fogColor = new Float32Array([0.137, 0.231, 0.423]);  // 雾色
  var fogDist = new Float32Array([55, 80]); // 雾的距离[雾开始的地方，雾完全覆盖物体的地方]
  var eye = new Float32Array([25, 65, 35, 1.0]); // 视点位置

  var u_MvpMatrix = gl.getUniformLocation(gl.program, 'u_MvpMatrix');
  var u_ModelMatrix = gl.getUniformLocation(gl.program, 'u_ModelMatrix');
  var u_Eye = gl.getUniformLocation(gl.program, 'u_Eye');
  var u_FogColor = gl.getUniformLocation(gl.program, 'u_FogColor');
  var u_FogDist = gl.getUniformLocation(gl.program, 'u_FogDist'); // 获取用于存储雾起始点的uniform变量
	
  // 将雾的颜色、视点和雾距离传递给统一变量
  gl.uniform3fv(u_FogColor, fogColor); 
  gl.uniform2fv(u_FogDist, fogDist); 
  gl.uniform4fv(u_Eye, eye);  
  gl.clearColor(fogColor[0], fogColor[1], fogColor[2], 1.0); // 用雾的颜色清除
  gl.enable(gl.DEPTH_TEST);

  var modelMatrix = new Matrix4();
  modelMatrix.setScale(10, 10, 10);
  gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix.elements);
  var mvpMatrix = new Matrix4();
  mvpMatrix.setPerspective(30, canvas.width/canvas.height, 1, 1000);
  mvpMatrix.lookAt(eye[0], eye[1], eye[2], 0, 2, 0, 0, 1, 0);
  mvpMatrix.multiply(modelMatrix);
  gl.uniformMatrix4fv(u_MvpMatrix, false, mvpMatrix.elements);
  document.onkeydown = function(ev){ keydown(ev, gl, n, u_FogDist, fogDist); };

  // Clear color and depth buffer
  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  // Draw
  gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_BYTE, 0);
}

function keydown(ev, gl, n, u_FogDist, fogDist) {
  switch (ev.keyCode) {
    case 38: // Up arrow key -> Increase the maximum distance of fog
      fogDist[1]  += 1;
      break;
    case 40: // Down arrow key -> Decrease the maximum distance of fog
      if (fogDist[1] > fogDist[0]) fogDist[1] -= 1;
      break;
    default: return;
  }
  gl.uniform2fv(u_FogDist, fogDist);   // Pass the distance of fog
  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_BYTE, 0);
}

function initVertexBuffers(gl) {
  //    v6----- v5
  //   /|      /|
  //  v1------v0|
  //  | |     | |
  //  | |v7---|-|v4
  //  |/      |/
  //  v2------v3

  var vertices = new Float32Array([   // Vertex coordinates
     1, 1, 1,  -1, 1, 1,  -1,-1, 1,   1,-1, 1,    // v0-v1-v2-v3 front
     1, 1, 1,   1,-1, 1,   1,-1,-1,   1, 1,-1,    // v0-v3-v4-v5 right
     1, 1, 1,   1, 1,-1,  -1, 1,-1,  -1, 1, 1,    // v0-v5-v6-v1 up
    -1, 1, 1,  -1, 1,-1,  -1,-1,-1,  -1,-1, 1,    // v1-v6-v7-v2 left
    -1,-1,-1,   1,-1,-1,   1,-1, 1,  -1,-1, 1,    // v7-v4-v3-v2 down
     1,-1,-1,  -1,-1,-1,  -1, 1,-1,   1, 1,-1     // v4-v7-v6-v5 back
  ]);
  var colors = new Float32Array([     // Colors
    0.4, 0.4, 1.0,  0.4, 0.4, 1.0,  0.4, 0.4, 1.0,  0.4, 0.4, 1.0,  // v0-v1-v2-v3 front
    0.4, 1.0, 0.4,  0.4, 1.0, 0.4,  0.4, 1.0, 0.4,  0.4, 1.0, 0.4,  // v0-v3-v4-v5 right
    1.0, 0.4, 0.4,  1.0, 0.4, 0.4,  1.0, 0.4, 0.4,  1.0, 0.4, 0.4,  // v0-v5-v6-v1 up
    1.0, 1.0, 0.4,  1.0, 1.0, 0.4,  1.0, 1.0, 0.4,  1.0, 1.0, 0.4,  // v1-v6-v7-v2 left
    1.0, 1.0, 1.0,  1.0, 1.0, 1.0,  1.0, 1.0, 1.0,  1.0, 1.0, 1.0,  // v7-v4-v3-v2 down
    0.4, 1.0, 1.0,  0.4, 1.0, 1.0,  0.4, 1.0, 1.0,  0.4, 1.0, 1.0   // v4-v7-v6-v5 back
  ]);
  var indices = new Uint8Array([       // Indices of the vertices
     0, 1, 2,   0, 2, 3,    // front
     4, 5, 6,   4, 6, 7,    // right
     8, 9,10,   8,10,11,    // up
    12,13,14,  12,14,15,    // left
    16,17,18,  16,18,19,    // down
    20,21,22,  20,22,23     // back
  ]);
  var indexBuffer = gl.createBuffer();
  if (!initArrayBuffer(gl, vertices, 3, gl.FLOAT, 'a_Position')) return -1;
  if (!initArrayBuffer(gl, colors, 3, gl.FLOAT, 'a_Color')) return -1;
  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
  gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);
  return indices.length;
}

function initArrayBuffer (gl, data, num, type, attribute) {
  var buffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
  gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
  var a_attribute = gl.getAttribLocation(gl.program, attribute);
  gl.vertexAttribPointer(a_attribute, num, type, false, 0, 0);
  gl.enableVertexAttribArray(a_attribute);
  gl.bindBuffer(gl.ARRAY_BUFFER, null);
  return true;
}

代码详解

顶点着色器计算了顶点与视点间的距离：首先将顶点坐标转换到世界坐标系下，然后调用内置函数distance（）并将视点坐标（也是在世界坐标系下）和顶点坐标作为参数传入，distance（）函数算出二者间的距离，并赋值给v_Dist变量以传入片元着色器（第13行）。 

片元着色器根据上式 线性雾化公式和式 雾化因子计算片元公式计算出雾化后的片元颜色。我们分别通过u_FogColor变量和u_FogDist变量来传入雾的颜色（第19行）和范围（第20行），其中u_FogDist.x和u_FogDist.y分别是起点和终点与视点间的距离。

详解如何计算雾化因子（clamp()）

在根据式 线性雾化公式计算雾化因子时（第28行），我们用到了内置函数clamp（），这个函数的作用是将第1个参数的值限制在第2个和第3个参数的构成区间内。如果值在区间中，函数就直接返回这个值，如果值小于区间的最小值或大于区间的最大值，函数就返回区间的最小值或最大值。比如，本例将雾化因子限制在了0到1之间，因为视线上起点前的点和终点后的点直接根据式10.1计算出的雾化因子会是负数或大于1的数，需要将其修正成0和1。

详解如何计算最终片元颜色（根据雾化因子计算片元颜色公式  mix()）

然后，片元着色器根据式 雾化因子计算片元公式，利用雾化因子和雾的颜色计算雾化后的片元颜色（第30行）。这里用到了内置函数mix（），该函数会计算x＊（1-z）+y＊z，其中x、y和z分别是第1、2和3个参数。 
JavaScript中的main（）函数将创建计算雾化效果需要的那些值，并通过相应的uniform变量传入着色器。

你应当知道，除了线性雾化，还有多种其他雾化算法，如OpenGL中常用的指数雾化（见OpenGL Programming Guide）。使用其他的雾化算法也很简单，只需在着色器中修改雾化指数的计算方法即可。

示例效果

示例程序（使用w分量代替顶点与视点的距离 Fog_w.js）

在顶点着色器中计算顶点与视点的距离，会造成较大的开销，也许会影响性能。我们可以使用另外一种方法来近似估算出这个距离，那就是使用顶点经过模型视图投影矩阵变换后的坐标的w分量。在在本例中，顶点变换后的坐标就是gl_Position。之前，我们并未显式使用过gl_Position的w分量，实际上，这个w分量的值就是顶点的视图坐标的z分量乘以-1。在视图坐标系中，视点在原点，视线沿着Z轴负方向，观察者看到的物体其视图坐标系值z分量都是负的，而gl_Position的w分量值正好是z分量值乘以-1，所以可以直接使用该值来近似顶点与视点的距离。 

在顶点着色器中，将计算顶点与视点距离的部分替换成例10.7种那样，雾化效果基本不变。