feat(*): add blur filter support for canvas renderer#7
Conversation
|
Cool! I just created a new dual-filter blur shader in my game a couple days ago! Let me review this! |
| var sigmaY = (dimensions == 2) ? 0 : sigma; // eslint-disable-line eqeqeq | ||
| var maxSigma = Math.max(sigmaX, sigmaY); | ||
|
|
||
| this.filterString = maxSigma > 0 ? 'blur(' + maxSigma + 'px)' : ''; |
There was a problem hiding this comment.
@stepancar This is fine but I'm curious, is it possible to use Kawase Dual Filter blur? Gaussian blur is very expensive to compute since it needs ~3+ render target switches on the GPU, which is a lot of overhead. Kawase Dual Filter is I assume due to memory consideration, the output of the blur filter will not be cached to memory for all the frames in the lottie?
|
@Tommy-Hu Kawase Dual Filter is not supported by the Canvas 2D API, nor is it supported by SVG. It might be possible to implement it using an additional WebGL context, but the overhead of transferring from 2D to WebGL would likely negate any benefits. |
2 participants
airbnb/lottie-web#3189
Currently, the canvas renderer does not support the blur effect.
Before
After
Here, I’m using ctx.filter = 'blur(20px)'. I also experimented with ctx.filter = 'url(#svgFilter)', and that works as well.
https://github.com/airbnb/lottie-web/compare/master...stepancar:lottie-web:feat/blur-filter?expand=1
The only issue with that approach is that scaling becomes tricky, so I decided to go with the simpler solution as a first step.