实现原版RainEffect的鼠标效果

[Schwarzkopf-Henkal]

如题，应当怎样实现原版 RainEffect 的背景层固定，雨滴层随着鼠标的移动而移动的效果？尝试过设置 background 属性为全透明图片（雨滴显示是黑的）或者设置 canvas 元素的 opacity，并另外设置背景，效果不好，主要是雨滴的折射效果没有了。

[SardineFish]

两种方式吧， 一是动态设置经过偏移后的 background ，例如外部把背景按照偏移量画到一个 canvas 上，然后将这个背景 canvas 设置为 background，这样雨滴反射的图像也能随之变化，缺点是动态设置 background 会带来额外开销。 或是在效果渲染管线的内部，取消掉与背景的混合，直接将雨滴渲染到透明的 FrameBuffer 上，得到仅有雨滴的一层效果

[SardineFish]

对于上述方法二，以下方案或许可行，待有空再测试一下：

删去 src/renderer.ts: 354

this.drawBackground();

src/renderer.ts: 352 改为

this.renderer.clear(new Color(0, 0, 0, 0));

[Schwarzkopf-Henkal]

老师您好，我按照第一种思路实现了一下，发现仅就显示效果来说还可以，但是对系统资源的消耗实在是太大了，性能堪忧。当然由于我不是从事前端相关行业的人，所以也可能是我实现比较糟糕。目测 reloadBackground 函数是性能瓶颈，不知道应该如何修改。如果功能在渲染器内就实现性能也许还会好一些。

[Schwarzkopf-Henkal]

然后就项目本身提一个想法，雨滴由于受到重力作用上下上下两端的大小不是一样的，下端会略大一些，这在原版 RainEffect 里面也是实现了的（至少看上去实现了？），但是现在的雨滴是上下对称的。（可能您也没什么时间改😥）

[SardineFish]

因为reloadBackground需要对新的背景渲染模糊效果，而且需要把纹理资源上传到GPU，本身就是开销比较大的，瓶颈主要在GPU，可以考虑一下第二种实现。上下端大小的问题，一个是/assets/img/raindrop.png这个纹理我用的是一个标准的椭圆，或许调整一下可行。另外雨滴滑落时生成的尾迹水滴跟雨滴混合也会形成上端较小的效果，或许降低雨滴的滑落速度或者比率，提高尾迹的生成密度或者尺寸也许能得到类似的效果。

[SardineFish]

这个PR #3 里加了仅渲染雨滴图层的支持，配合一个<div>用作 background，并且在 CSS 中使用 filter: blur() 实现背景模糊效果，大概可以得到目标的效果，参考其中的/examples/detached-background。但是目前雨滴层采样的背景图像不会随之移动，背景图像偏移过大会带来一定的视觉失真，这个问题等后续有空再解决。