将 gif 贴到 cesium 三维球上

前言

最近做项目的过程中，碰到一些不太寻常的需求——将 gif 图贴到三维球上。
​

首先我们分析下这一需求，朝 cesium 三维球上贴图并非难事，很多方式都能做到。

采用多边形、方形、甚至于 SingleTileImageryProvider api，都能做到。
​

但是问题最麻烦的地方在于，不仅仅要贴图片，而是需要贴 gif 动图。
​

如果不是动图，而是一系列静态图片的话，实现起来的难度反而小一些。
​

无非是，设置一些定时器，定时将当前加载的图片切换为下一张。笔者之前，就做过这种轮播效果。
​

​

但是现在，问题的难点在于，如何针对一张 gif 也实现这种播放的效果呢？

一些思考

稍微梳理一下思路，便不难得出，我们需要考虑以下几点问题：
​

1. 浏览器是否提供现成的api，直接让 canvas 支持 gif 动图的加载。
2. 如果 canvas 不支持动图，那么前端是否有现成的工具，可以将 gif 里的每一帧拆分出来，拆分出每一帧后，我们就可以像上面的做法，控制这些帧来实现轮播的效果了。
3. 如果找不到现成的可以拆分 gif 帧的工具，那么就只有采用将 gif 处理成一系列的图片的方式来实现了。

按照这样的思路，我们来一条条的寻找解决方案。
​
第一条，直接可以从原理上否决掉，目前没有任何一个浏览器会支持该功能。原因，其实也很容易能想明白。canvas 其实就是一个画布，它被设计出来就是干类似于绘画的工作。你要是想要在画布上实现动画效果，就只有通过改变每一帧画布上要绘制的内容，来实现。
​

canvas 的 api 只提供较为底层，较为基础的绘画功能，绘制点线面等等，webgl 也不提供动图的支持，因为无论是 canvas 还是 webgl，通俗意义上讲，都是一张画布，它实质是不变的，想要变化，则需要人为的去控制。
​

既然第一条思路行不通，那么第二条思路，可以解决我们的问题么？

着手解决问题

带着这个思路，笔者在网上找寻了一番，果然找到了一个有力的工具：https://themadcreator.github.io/gifler/
​

它可以支持将 gif 解析成帧，并且还封装了一些动画接口，方便供我们调用。
​

默认情况下，直接调用 animate 方法即可为我们在目标的 canvas 上绘制出该 gif 动画。

codepen demo

当然，还有另外的使用方式，通过调用 frame api 或者 get api。
​

下面这个 demo，是使用 frame api 调用的方式。
​codepen demo

可以看出来，两种使用方式，大同小异，结果也并无差别，唯一不同的是，第二种方式，方便我们去控制每一帧数据。
​

那么怎么将该工具应用于我们 cesium 贴图中去，实现动画效果呢？
​

首先，结合 gifler 和 cesium，不难写出如下代码

let canvas = document.createElement("canvas");
let url =
  "https://media.giphy.com/media/VbEq7lhC0gVMFUX819/giphy-downsized.gif?cid=ecf05e471i9fq42unyxtjoci88jd019z2aana25ytggjay33&rid=giphy-downsized.gif&ct=g";
let gifImageLayer;
let rectangle = Cesium.Rectangle.fromDegrees(...[92.07, 27.67, 118.66, 39.45]);

function onDrawFrame(ctx, frame) {
  ctx.canvas.width = frame.width;
  ctx.canvas.height = frame.height;

  ctx.drawImage(frame.buffer, 0, 0);

  const provider = new Cesium.SingleTileImageryProvider({
    url: canvas.toDataURL(),
    rectangle
  });
  gifImageLayer = viewer.imageryLayers.addImageryProvider(provider);
}

gifler(url).frames(canvas, onDrawFrame);

​

基本逻辑就是，在动图每一帧调用的时候，都将像素点绘制在 canvas 上，然后将 canvas 导出成图片，然后再调用 cesium 的 SingleTileImageryProvider api，将该帧以图层的方式，贴到球面上。
​

最终呈现出来的效果是这样的：

虽然看起来还不错，但是这段代码，实质上是有一些问题的。

比如，频繁的添加新的 layer，却没有处理之前重复的 layer，短期内好像看不出大问题，但是当页面运行时间长了，会占用大量的内存，造成页面内存泄漏。

那有没有改进的方案呢？
​
世界上本没有路，走的人多了也便成了路。
​
对于解决问题的方案，同样如此一般。
​
方案当然有很多，但是唯有不断尝试，才能找到问题的最佳解决方案。
​
既然一直增加不行，那么，为了防止内存泄漏，每次增加之前，将上一个删除不就行了么？

function onDrawFrame(ctx, frame) {
 	// 不断地将之前添加的 layer 从 imageryLayers 中删除掉
  viewer.imageryLayers.remove(gifImageLayer, true);
  
  ctx.canvas.width = frame.width;
  ctx.canvas.height = frame.height;

  ctx.drawImage(frame.buffer, 0, 0);

  const provider = new Cesium.SingleTileImageryProvider({
    url: canvas.toDataURL(),
    rectangle
  });
  gifImageLayer = viewer.imageryLayers.addImageryProvider(provider);
}

​
如上所示，改改我们的代码，看看运行以后，会出现什么结果：

结果发现，这个效果完全不行，因为切换帧的时候，没有过渡，会导致出现闪屏的效果。
​
既然先移除再增加不行，那么先增加再移除是否可行呢？
​
按照思路，再改改我们的代码：

function onDrawFrame(ctx, frame) {
  ctx.canvas.width = frame.width;
  ctx.canvas.height = frame.height;

  ctx.drawImage(frame.buffer, 0, 0);

  const provider = new Cesium.SingleTileImageryProvider({
    url: canvas.toDataURL(),
    rectangle
  });
  let layer = viewer.imageryLayers.addImageryProvider(provider);

  // 不断地将之前添加的 layer 从 imageryLayers 中删除掉
  viewer.imageryLayers.remove(gifImageLayer, true);
  gifImageLayer = layer;
}

没想到，再次运行我们的代码，结果比之前反而闪烁的更严重了：
​

不要气馁，按照道理来说，这个思路并没有问题，问题，应该出现在，增加上一个图层和删除下一个图层这两步操作，应该并不是同步操作，而是异步的。
​
对于这个问题，不要着急，我们也有好的解决方案，每次增加一帧后，不再删除上一帧了，而是改成，删除倒数第二帧、倒数第三帧…
​

一个个试下去，不愁试不出比较理想的方案。
​

实际在操作的过程中，你会发现，其实，在每次删除倒数第二帧的时候，过渡就已经很自然了，但是为了效果更好，我们每次删除倒数第三帧：
​

function onDrawFrame(ctx, frame) {
  ctx.canvas.width = frame.width;
  ctx.canvas.height = frame.height;

  ctx.drawImage(frame.buffer, 0, 0);

  const provider = new Cesium.SingleTileImageryProvider({
    url: canvas.toDataURL(),
    rectangle
  });
  let layer = viewer.imageryLayers.addImageryProvider(provider);

  // 不断地将之前添加的 layer 从 imageryLayers 中删除掉
  viewer.imageryLayers.remove(gifImageLayer3, true);
  gifImageLayer3 = gifImageLayer2;
  gifImageLayer2 = gifImageLayer;
  gifImageLayer = layer;
}

改进以后，最终的效果是这样的：

可以看出来，效果已经很自然了。

下面是完整的 demo：
codepen demo

精益求精

一般情况下，按照套路来说，童鞋们可能会觉得我这篇文章这就写完了。
​

但是，其实细细的思索一番，还有一种方式，可以把代码写的更优雅一些。
​

为什么要不断的移除之前的图层，再重复创建新的图层，而不将之前的图层缓存起来呢？
​

我们知道的是，js 里面不能手动释放内存，即使将对象设置为 null，它也会在之后的某次垃圾回收的时候才会被清除掉。如果加一层缓存，就可以减少创建新的对象，使我们的代码性能更高效。
​

所以，我们可以再次修改下我们的代码，将每个新图层做一个缓存：

function onDrawFrame(ctx, frame) {
  let { data_offset } = frame;

  // 如果有缓存，则直接将缓存的图层顶到最上面；否则，将创建新的图层，并加入缓存
  if (gifImageLayerList[data_offset]) {
    viewer.imageryLayers.raiseToTop(gifImageLayerList[data_offset]);
  } else {
    ctx.canvas.width = frame.width;
    ctx.canvas.height = frame.height;

    ctx.drawImage(frame.buffer, 0, 0);

    const provider = new Cesium.SingleTileImageryProvider({
      url: canvas.toDataURL(),
      rectangle
    });
    let layer = viewer.imageryLayers.addImageryProvider(provider);
    gifImageLayerList[data_offset] = layer;
  }
}

可以看到，最后的效果其实跟之前的一般无二，但是效率比之前肯定要高一些。

codepen 示例

后记

既然我们采用第二种方式，实现了我们想要的效果，那么前面的第三点思考到这里，就不用再深入下去了。
​

虽然，看起来，这篇文章写下来，实现这个功能好像很轻松，但是事实上，在解决这个问题的过程中，还是碰到了一些特别需要思考的问题。

1. gif 贴上去，动画速度太快，怎么控制
2. gif 图片太大的时候，加载速度很慢，该怎么处理

第二个问题，其实没有太好的解决方案，毕竟资源摆在那儿，靠前端不太好整出合理的解决方案。

而第一个问题其实挺有意思的，一开始，博主以为是 gifler 框架里面没有处理时间间隔的问题，于是想了很多方案，比如将 onDrawFrame 改成 async/await 函数，里面插入一个自己封装的 sleep 函数，开始 sleep 的时候，暂停动画，sleep 结束以后再恢复执行动画。这一过程，就达到了将后面的进程阻塞一段时间再切换 layer，似乎能达到比较理想的效果。

但是这个解决方案，在需要不断切换 gif 图片的时候，就失效了。切换的时候，直接就没有办法阻塞住进程，这个问题困扰了我很久，最后还是没找到太好的解决方案。
​
就在我以为进行不下去的时候，没想到抓到了问题的症结所在。
​
看了 gifler 工具的源码，才发现，gif 播放的太快，本质上是 gif 图片本身的问题。
​
可以看到，在源码里面，作者其实想到了这个问题，做了细致的处理的。

所以，这个问题最方便的解决方案，其实是，调整下 gif， 将 gif 每一帧播放的间隔时间拉长一些就行了。
​

当然，上面我采用的方案是使用 layer 的方式来解决的，其实用 polygon 或者 rectangle 也能实现。
​

亦或者推广一下，不用在 cesium 里面，而用在其他 webgl 框架或者 canvas 框架中，采用上面的思路，都能实现这样的效果。