时隔两年，继续完成这个系列，现在回顾一下两年前的这篇文章 前端实现旗帜飘动效果系列 (Ⅳ)：webgl实现 ，发现自己当初对webgl的理解不透彻，产生了很多纰漏，也走了不少歪路，实际上使用shader有更方便的实现方法，新的思路不再需要做复杂的仿射，只需通过简单的三角函数控制片元着色器的采样位置即可。
核心是pixi过滤器PIXI.Filter以及片元着色器。
① PIXI.Filter类可以忽略顶点着色器，因为pixi.js内置了一套默认的顶点着色器，如果传入空，就是用该着色器模板（pixi v5版）：
vTuber行业越来越火爆，看着那些形形色色的皮套，忍不住自己实现一遍的冲动，说起2D骨骼动画软件，Spine2D首当其冲。这次就用它来耍一耍。
为啥我不用live2D？毕竟这是日本软件，英语的本地化翻译不知道靠不靠谱，与Spine价格也差不太多，看了一些教程，操作也比较复杂，感觉更倾向于给不熟悉编程的设计人员使用。
不知道老网民们还记不记得这个魔性的时钟插件：
作为网上冲浪十数载的网虫，不久前看到这个图瞬间破防，直接梦回10年前的QQ空间，感叹一下岁月蹉跎、时光荏苒、青春不在、不胜唏嘘….
(￣ε(#￣)☆╰╮(￣▽￣///)
无意中看到miro的画布有一个无缝滚动+缩放的功能：https://miro.com/app/board/uXjVMR5OCp8=/?share_link_id=751850163166
看到“无缝滚动”这个关键词，当时一开始想着是不是用类似pixi.js里类似TilingSprite的实现方式，把网格图片平铺开来。但是miro画布缩放的时候依然能保持网格线清晰，于是使用renderTexture绘制网格，并在缩放过程中动态修改网格的尺寸，重新生成renderTexture给TilingSprite使用。