如何使用WebGL实现空气高温热变形动画特效

我们在炎炎夏日，或者在火堆旁，经常会观察到热源周围空气的不稳定波动现象。

本文将讲解如何通过WebGL来实现这个特效。该效果可用于热变形、波浪、水面波光等场合。

首先让我们来看看如何能画出一个普通的图像，然后看看我们如何能使它变形。

使用WebGL绘制图像

在踏得网之前的教程中，我们已经说明过，WebGL可以通过纹理对象来加载外部图像文件并渲染。

本文略过初始化WebGL绘制上下文、着色器程序创建等基本步骤的描述，直接演示如何加载纹理贴图：

//基于image对象来创建纹理
function createTextureByImgObject(imgObj) {
    //设置当前激活纹理
    webgl.activeTexture(webgl.TEXTURE0);

    //创建纹理对象，并设置其常用属性
    var textureObject = webgl.createTexture();
    webgl.bindTexture(webgl.TEXTURE_2D, textureObject);
    webgl.texImage2D(webgl.TEXTURE_2D, 0, webgl.RGBA, webgl.RGBA, webgl.UNSIGNED_BYTE, imgObj);
    //使用最近像素来处理纹理缩放后的点
    webgl.texParameteri(webgl.TEXTURE_2D, webgl.TEXTURE_MIN_FILTER, webgl.NEAREST);
    webgl.texParameteri(webgl.TEXTURE_2D, webgl.TEXTURE_MAG_FILTER, webgl.NEAREST);
    //使用边缘颜色来封装纹理，而不是左右两边的插值
    webgl.texParameteri(webgl.TEXTURE_2D, webgl.TEXTURE_WRAP_S, webgl.CLAMP_TO_EDGE);
    webgl.texParameteri(webgl.TEXTURE_2D, webgl.TEXTURE_WRAP_T, webgl.CLAMP_TO_EDGE);

    return textureObject;
}

//从DOM中通过img标签的id来加载并创建纹理贴图
function createTextureByImgID(imgID) {
    var imgObj = document.getElementById(imgID);
    if (imgObj == null) {
        return null;
    }
    return createTextureByImgObject(imgObj);
}

实现变形特效

正常情况下，我们的shader程序代码如下：

<script id="fsh_wave" type="x-shader/x-fragment">
  precision mediump float;
  varying vec2 textureCoordinate;
  uniform sampler2D inputImageTexture;
  uniform float time;

  void main(){
    vec4 color=texture2D(inputImageTexture,vec2(textureCoordinate.x, textureCoordinate.y));
    gl_FragColor = color;
  }
</script>

要想生成变形效果，我们可以调整textureCoordinate.x和y坐标映射值，具体而言，要产生竖向的波动变形，x得和y通过波动函数关联起来，常用的是正/余弦函数：

float frequency=100.0;//波动频率
float amp=0.003;//波动幅度
float distortion=sin(textureCoordinate.y*frequency)*amp;
vec4 color=texture2D(inputImageTexture,vec2(textureCoordinate.x+distortion, textureCoordinate.y));

上面的代码只是实现一个静态的波动变形，接着我们要把这个波动变成动画，可以使用requestAnimationFrame方法，

同时设置一个随着动画帧而变的时间参数：

precision mediump float;
varying vec2 textureCoordinate;
uniform sampler2D inputImageTexture;
uniform float time;//时间参数

void main(){
    float frequency=100.0;
    float amp=0.003;
    float speed=0.05;
    float distortion=sin(textureCoordinate.y*frequency + time*speed)*amp;
    vec4 color=texture2D(inputImageTexture,vec2(textureCoordinate.x+distortion, textureCoordinate.y));
    gl_FragColor = color;
}

time的设置在动画绘制函数中：

function draw() {
    webgl.uniform1f(itv.time, time++);
    webgl.clearColor(0.0, 0.0, 0.0, 1.0);
    webgl.clear(webgl.COLOR_BUFFER_BIT);
    webgl.drawArrays(webgl.TRIANGLE_STRIP, 0, 4);
    requestAnimationFrame(draw);
}

itv.time = webgl.getUniformLocation(programObject, "time");
draw();

你可以自己在线试试。