前言

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

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

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

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

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

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

test.gif

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

一些思考

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

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

按照这样的思路，我们来一条条的寻找解决方案。

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

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

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

着手解决问题

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

image.png

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

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

https://codepen.io/wuzhiqin/pen/vYZabwy

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

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

https://codepen.io/wuzhiqin/pen/YzQjgyZ

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

那么怎么将该工具应用于我们 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，将该帧以图层的方式，贴到球面上。

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

cesium上贴gif.gif

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

比如，频繁的添加新的 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);
}

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

cesium上贴gif2.gif

结果发现，这个效果完全不行，因为切换帧的时候，没有过渡，会导致出现闪屏的效果。

既然先移除再增加不行，那么先增加再移除是否可行呢？

按照思路，再改改我们的代码：

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

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

cesium上贴gif3.gif

不要气馁，按照道理来说，这个思路并没有问题，问题，应该出现在，增加上一个图层和删除下一个图层这两步操作，应该并不是同步操作，而是异步的。

对于这个问题，不要着急，我们也有好的解决方案，每次增加一帧后，不再删除上一帧了，而是改成，删除倒数第二帧、倒数第三帧......

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

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

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

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

cesium上贴gif4.gif

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

下面是完整的 demo：
https://codepen.io/wuzhiqin/pen/xxrJBgV

精益求精

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

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

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

我们知道的是，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;
  }
}

可以看到，最后的效果其实跟之前的一般无二，但是效率比之前肯定要高一些。
https://codepen.io/wuzhiqin/pen/oNwPboM

后记

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

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

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

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

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

但是这个解决方案，在需要不断切换 gif 图片的时候，就失效了。切换的时候，直接就没有办法阻塞住进程，这个问题困扰了我很久，最后还是没找到太好的解决方案。

就在我以为进行不下去的时候，没想到抓到了问题的症结所在。

看了 gifler 工具的源码，才发现，gif 播放的太快，本质上是 gif 图片本身的问题。

可以看到，在源码里面，作者其实想到了这个问题，做了细致的处理的。

image.png

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

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

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