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

techbrood 发表于 2016-06-09 21:51:31

标签: webgl, heat, distortion

- +

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

本文将讲解如何通过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));

blob.png

上面的代码只是实现一个静态的波动变形,接着我们要把这个波动变成动画,可以使用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();

你可以自己在线试试

possitive(5) negative(1) views12518 comments0

发送私信

最新评论

请先 登录 再评论.
相关文章