如何重新创建这种"波浪"图像效果？

Question

我正在寻找一种方法,在网页上拍摄图像或图像的一部分,并渲染这种或类似的动画效果,其中图像是"波浪状的".例子:

"精神"领域:

长袍区:

长袍区:

优选地,我想参数化地控制波的速度和调制.

对我来说,它看起来像某种置换图.我想过或者使用一个片段着色器threejs\seriously.js或使用画布元素来实现相同的图像处理,但我不能确定要使用的算法.

什么是实现这一目标的方法？

Answer 1

振荡器和位移

您可以使用振荡器结合网格来解决这个问题.网格中的每条线都是振荡的,线之间的差异用于移动图像的一部分.

在我看来,最简单的方法是首先创建一个振荡器对象.它可以是非常基本的,但关键是可以实例化对象,并在本地跟踪当前值.

第1步:振荡器对象

function Osc(speed) {

    var frame = 0;                           // pseudo frame to enable animation

    this.current = function(x) {             // returns current sinus value
        frame += 0.005 * speed;              // value to tweak..
        return Math.sin(frame + x * speed);
    };
}

例如,展开对象以使用频率,幅度和速度作为参数.如果要使用很多,也要考虑采用原型方法.

如果我们创建一个包含五个位置的简单网格,其中三个中间垂直线正在振荡(边缘,为1.和5.线),我们将得到这样的结果(非调整值):

振荡网格线的动画可视化:

function Osc(speed) {

  var frame = 0;

  this.current = function(x) {
    frame += 0.005 * speed;
    return Math.sin(frame + x * speed);
  };
}

var canvas = document.querySelector("canvas"),
    ctx = canvas.getContext("2d"),
    w = canvas.width,
    h = canvas.height;

var o1 = new Osc(0.05), // oscillator 1
    o2 = new Osc(0.03), // oscillator 2
    o3 = new Osc(0.06); // oscillator 3

(function loop() {
  ctx.clearRect(0, 0, w, h);
  for (var y = 0; y < h; y++) {
    ctx.fillRect(w * 0.25 + o1.current(y * 0.2) * 10, y, 1, 1);
    ctx.fillRect(w * 0.50 + o2.current(y * 0.2) * 10, y, 1, 1);
    ctx.fillRect(w * 0.75 + o3.current(y * 0.2) * 10, y, 1, 1);
  }
  requestAnimationFrame(loop);
})();

<canvas width=230 height=250></canvas>

第2步:使用网格中的线条之间的差异图像

下一步是简单地计算每条线的生成点之间的差异.

数学是直截了当的,我们唯一需要确保的是线条不重叠,因为这会产生负宽度:

// initial static values representing the grid line positions:
var w = canvas.width, h = canvas.height,
    x0 = 0, x1 = w * 0.25, x2 = w * 0.5, x3 = w * 0.75, x4 = w;

// absolute positions for wavy lines
var lx1 = x1 + o1.current(y*0.2);  // 0.2 is arbitrary and tweak-able
var lx2 = x2 + o2.current(y*0.2);
var lx3 = x3 + o3.current(y*0.2);

// calculate each segment's width
var w0 = lx1;        // - x0
var w1 = lx2 - lx1;
var w2 = lx3 - lx2;
var w3 =  x4 - lx3;

如果我们现在将这些值提供drawImage()给目的地,使用源的静态固定宽度(即网格单元大小),我们将得到如下结果.

我们不需要迭代位图中的像素,因为它drawImage()可以是硬件加速的,不需要满足CORS要求,并且会为我们进行插值:

var img = new Image();
img.onload = waves;
img.src = "//i.imgur.com/PwzfNTk.png";

function waves() {

  var canvas = document.querySelector("canvas"),
    ctx = canvas.getContext("2d"),
    w = canvas.width,
    h = canvas.height;

  ctx.drawImage(this, 0, 0);

  var o1 = new Osc(0.05), o2 = new Osc(0.03), o3 = new Osc(0.06),
      x0 = 0, x1 = w * 0.25, x2 = w * 0.5, x3 = w * 0.75, x4 = w;

  (function loop() {
    ctx.clearRect(0, 0, w, h);
    for (var y = 0; y < h; y++) {

      // segment positions
      var lx1 = x1 + o1.current(y * 0.2) * 3; // scaled to enhance demo effect
      var lx2 = x2 + o2.current(y * 0.2) * 3;
      var lx3 = x3 + o3.current(y * 0.2) * 3;

      // segment widths
      var w0 = lx1;
      var w1 = lx2 - lx1;
      var w2 = lx3 - lx2;
      var w3 = x4 - lx3;

      // draw image lines ---- source ----   --- destination ---
      ctx.drawImage(img, x0, y, x1     , 1,  0        , y, w0, 1);
      ctx.drawImage(img, x1, y, x2 - x1, 1,  lx1 - 0.5, y, w1, 1);
      ctx.drawImage(img, x2, y, x3 - x2, 1,  lx2 - 1  , y, w2, 1);
      ctx.drawImage(img, x3, y, x4 - x3, 1,  lx3 - 1.5, y, w3, 1);
    }
    requestAnimationFrame(loop);
  })();
}

function Osc(speed) {

  var frame = 0;

  this.current = function(x) {
    frame += 0.002 * speed;
    return Math.sin(frame + x * speed * 10);
  };
}

<canvas width=230 height=300></canvas>

请注意,由于我们使用小数值,我们需要用半个像素进行补偿以与前一个段重叠,因为可以对内部像素进行插值.否则我们将在结果中看到可见的波浪线.我们可以使用整数值,但这会产生更"锯齿"的动画.

当然需要调整振荡器的值,定义网格尺寸等等.

下一步是重复水平轴的振荡器,并使用画布本身作为图像源.

优化和性能

使用画布本身作为来源警告

当您从画布到自身绘制某些内容时,浏览器必须根据规范制作当前内容的副本,并将其用作目标区域的源.

当画布或CanvasRenderingContext2D对象被绘制到自身时,绘图模型需要在绘制图像之前复制源,因此可以将画布的一部分或划痕位图复制到自身的重叠部分.

这意味着对于drawImage()我们使用画布本身作为源的每个操作,都会发生此复制过程.

这可能会影响性能,所以为了避免这种情况,我们可以使用第二个canvas元素,我们首先复制完成的垂直传递,然后使用第二个画布作为水平传递的源.

LUT和值缓存

要进一步提高性能,请缓存可缓存的每个值计算.例如,每个段(x1-x0等)的上面的源宽度可以缓存到sw变量(或其他名称).这就是所谓的微优化,但这是一个重要的情况.

对于正弦值,比例等,将计算缓存到LUT或查找表中可能是有利的.可以选择频率以使表长度在某个水平上匹配.我没有在这里展示这个,但是如果浏览器难以跟上以防网格具有高分辨率,那么需要考虑一下.

整数值

使用整数值并关闭图像平滑也是一种选择.结果并不像分数值那么好,但它会给出一个复古十岁上下看动画,并有更好的表现.

精灵片

作为最后的手段,可以动态预生成帧作为精灵表.这需要更多的内存并且具有初始成本,但几乎在任何情况下都能顺利运行.挑战是找到一个循环点,而不是使用太多的内存.

带alpha通道的图像

使用alpha通道避免图像(如下面的演示)将有助于您需要清除两次额外的,一个用于离屏画布,一个用于主画布.否则,先前的位移将显示在后台.

最终结果的演示

这是一个包含垂直和水平波浪线的完整演示.为简单起见,我只使用4x4网格.

结果与示例看起来并不完全相同,但应该给出一个想法.这只是提高网格分辨率和调整参数的问题.此外,问题中给出的示例是使用附加效果和图层预先设置动画,而这些效果和图层只能通过波浪/位移来实现.

其他变化是,现在每个段的重叠分布在整个段上,只需在开头添加0.5,但也可以在结尾添加0.5.水平传递也是内联宽度差.

运行下面的演示时单击"完整页面"以更好地查看详细信息.

var img = new Image();
img.onload = waves;
img.src = "//i.imgur.com/nMZoUok.png";

function waves() {
  var canvas = document.querySelector("canvas"),
      ctx = canvas.getContext("2d"),
      w = canvas.width,
      h = canvas.height;

  ctx.drawImage(this, 0, 0);

  var o1 = new Osc(0.05), o2 = new Osc(0.03), o3 = new Osc(0.06),  // osc. for vert
      o4 = new Osc(0.08), o5 = new Osc(0.04), o6 = new Osc(0.067), // osc. for hori
      
      // source grid lines
      x0 = 0, x1 = w * 0.25, x2 = w * 0.5, x3 = w * 0.75, x4 = w,
      y0 = 0, y1 = h * 0.25, y2 = h * 0.5, y3 = h * 0.75, y4 = h,
      
      // cache source widths/heights
      sw0 = x1, sw1 = x2 - x1, sw2 = x3 - x2, sw3 = x4 - x3,
      sh0 = y1, sh1 = y2 - y1, sh2 = y3 - y2, sh3 = y4 - y3,
      
      vcanvas = document.createElement("canvas"),  // off-screen canvas for 2. pass
      vctx = vcanvas.getContext("2d");

  vcanvas.width = w; vcanvas.height = h;           // set to same size as main canvas

  (function loop() {
    ctx.clearRect(0, 0, w, h);
    
    for (var y = 0; y < h; y++) {

      // segment positions
      var lx1 = x1 + o1.current(y * 0.2) * 2.5,
          lx2 = x2 + o2.current(y * 0.2) * 2,
          lx3 = x3 + o3.current(y * 0.2) * 1.5,

          // segment widths
          w0 = lx1,
          w1 = lx2 - lx1,
          w2 = lx3 - lx2,
          w3 =  x4 - lx3;

      // draw image lines
      ctx.drawImage(img, x0, y, sw0, 1, 0        , y, w0      , 1);
      ctx.drawImage(img, x1, y, sw1, 1, lx1 - 0.5, y, w1 + 0.5, 1);
      ctx.drawImage(img, x2, y, sw2, 1, lx2 - 0.5, y, w2 + 0.5, 1);
      ctx.drawImage(img, x3, y, sw3, 1, lx3 - 0.5, y, w3 + 0.5, 1);
    }

    // pass 1 done, copy to off-screen canvas:
    vctx.clearRect(0, 0, w, h);    // clear off-screen canvas (only if alpha)
    vctx.drawImage(canvas, 0, 0);
    ctx.clearRect(0, 0, w, h);     // clear main (onlyif alpha)

    for (var x = 0; x < w; x++) {
      var ly1 = y1 + o4.current(x * 0.32),
          ly2 = y2 + o5.current(x * 0.3) * 2,
          ly3 = y3 + o6.current(x * 0.4) * 1.5;

      ctx.drawImage(vcanvas, x, y0, 1, sh0, x, 0        , 1, ly1);
      ctx.drawImage(vcanvas, x, y1, 1, sh1, x, ly1 - 0.5, 1, ly2 - ly1 + 0.5);
      ctx.drawImage(vcanvas, x, y2, 1, sh2, x, ly2 - 0.5, 1, ly3 - ly2 + 0.5);
      ctx.drawImage(vcanvas, x, y3, 1, sh3, x, ly3 - 0.5, 1,  y4 - ly3 + 0.5);
    }

    requestAnimationFrame(loop);
  })();
}

function Osc(speed) {

  var frame = 0;

  this.current = function(x) {
    frame += 0.002 * speed;
    return Math.sin(frame + x * speed * 10);
  };
}

html, body {width:100%;height:100%;background:#555;margin:0;overflow:hidden}
canvas {background:url(https://i.imgur.com/KbKlmpk.png);background-size:cover;height:100%;width:auto;min-height:300px}

<canvas width=230 height=300></canvas>