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

Question

我正在寻找一种方法，在网页上拍摄图像或图像的一部分，然后渲染这种或类似的动画效果，其中图像是“波浪状的”。例子：

＆＃34;精神＆＃34;面积：

长袍区：

长袍区：

我希望参数化地控制波的速度和调制。

对我来说，它看起来像某种置换图。我想过要么使用片段着色器threejs \ {{{}}，要么使用canvas元素来实现相同的图像处理，但我不确定要使用的算法。

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

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.线），我们将得到这样的结果（非调整值）：

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

步骤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要求，并且会为我们进行插值：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

请注意，由于我们使用小数值，我们需要用半个像素进行补偿以与前一个段重叠，因为可以插入最终像素。否则我们将在结果中看到可见的波浪线。我们可以使用整数值，但这会产生更多的＃jaggy＆＃34;动画。

振荡器的值当然需要调整，定义网格大小等等。

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

优化和性能

使用画布本身作为源警告

当你从画布中绘制一些内容时，浏览器必须根据specs复制当前内容，将其用作目标区域的源。

  

当画布或CanvasRenderingContext2D对象被绘制到自身时，   绘图模型需要在图像之前复制源   绘制，因此可以复制画布的部分或临时位图   在自身的重叠部分。

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

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

LUT和值缓存

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

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

整数值

使用整数值并关闭图像平滑也是一种选择。结果不如小数值好，但 会给动画带来复古效果并且表现更好。

Sprite的片

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

带alpha通道的图像

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

最终结果演示

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

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

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

运行下面的演示时，

点击整页，以便更好地了解详细信息。

＆＃13;

＆＃13;

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

＆＃13;

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}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;