SardineFish

Safari on iOS support WebGL2, but refer to https://caniuse.com/webgl2 > Can be enabled in the "Experimental Features" developer menu It seems that WebGL2 is not supported by default unless enable...

If you want to use a another canvas as the background, in your case, the canvas created by three.js. You need to call `raindropFx.setBackground()` every frame after threeJs complete the...

@UstymUkhman > May I suggest to add it into the Readme of this project? Thanks for that, I will update it soon, or feel free to make a PR. >...

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

对于上述方法二，以下方案或许可行，待有空再测试一下： 删去 [src/renderer.ts: 354](https://github.com/SardineFish/raindrop-fx/blob/master/src/renderer.ts#L354) ```typescript this.drawBackground(); ``` [src/renderer.ts: 352](https://github.com/SardineFish/raindrop-fx/blob/master/src/renderer.ts#L352) 改为 ```typescript this.renderer.clear(new Color(0, 0, 0, 0)); ```

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

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

是 NPM 上的版本么？

初步认定问题源于代码中使用的 `?.` 运算符无法在 Vue 默认的项目构建设置下使用，鄙人才学疏浅，对 Vue 的构建配置了解不多，尚未能成功在 Vue 构建流中加入对 `?.` 的支持。由于这个项目基于 esbuild 和 typescript，目前还没找到合适的解决方案在构建流中引入 babel，项目里诸如 `?.` 这类 ESNext 的语法特性用的还不少（ 可能需要额外抽时间对项目重构一下，如果你那边有找到相关解决方案，可以同步到这个 Issue 下

A preview version of InputSystem package (v0.2.2-preview) is used in project.