Idea: Radial blur

[Eyemanatpc]

First of all: I love this extension. It would be awesome to have this for VLC as well... (if you have recomendations for another player providing such experience, pls tell me)

But i have an idea to improve the visual experience, i think. The usual blur-effect is OK, but i think it would look much better if anything like the "radial-zoom blur" would be available (like in PS, see screenshot). This would provide smother transitions from the Clip-edges to the ambi.

Alternative it would be great to have an blur-effect which increases. Starting form the Clip-edges with less blur but inceases as spreading.

And to improve this even more, maybe it would be awesome to combine this two blur-effect.

I did some samples via image-editing, from the clip "[HD] Trippy Animation courtesy of Anthony Francisco Schepperd".

Original:

Radial-zoom-blur:

Increase-blur:

Just my ideas... but at least the radial-zoom-blur looks better to me than the usual blur-over-whole-image. Nevertheless, amazing extension, thanks for providing this tool to us ! :D

[WesselKroos]

Great idea!

It does require me to write a custom WebGL blur shader that can create this kind of blur effect, since browsers have no support for it. I did some investigation into creating a WebGL blur shader in 2022-2023 to improve performance, but dropped the idea since it seemed too complex without benefits: #113 comment

Your idea might make this worth while, but expect it to take a long time to develop this. (Unless someone comes along with a complete code example of a good performing WebGL blur shader with customizable strength.)

[WesselKroos]

Todo:

• [ ] Recreate the chromium blur in WebGL:
  • [ ] Create a Dual kawase downsample shader using mipmaps
  • [ ] Create a Dual kawase upsample shader
  • [ ] Combine the downsample and upsample shaders
  • [ ] Draw with the new shaders
  • [ ] Implement handling of a floating blur values
• [ ] Replace the native chromium blur canvas with the new WebGL blur shader in the extension
• [ ] Convert the current blur setting value to an amount of down/upsample iterations for the shader
• [ ] Implement a lens blur effect
  • [x] Implement a lens blur via 2 passes (horizontal, then vertically) Example code Example 1-pass: https://codepen.io/wesselkroos/pen/abgLWOZ Example 2-pass: https://codepen.io/wesselkroos/pen/abgLVRQ
  • [ ] Bound the amount of blur to 2 within the video edges + a few pixels
  • [ ] Gradually increase the amount of down/upsample iterations from the center
  • [ ] Gradually increase the amount of down/upsample iterations from the video edges
  • [ ] Clamp the maximum down/upsample interations to a radius of the corners of the ambient light based on the corner of the video edges to the corner of the ambient light edges
  • [ ] Measure the floating setting value of a pixel based on the video edge corner to the edge of the radius of the corner of the ambient light
• [ ] Implement a variable gradual radial(-kind of) blur effect
  • [ ] Add an acceleration setting
  • [ ] Convert the acceleration setting to a blur start value, based on a percentage of the blur value
  • [ ] Replace the start of 1 with the converted blur start value and calculate the blur value in between the video edges and the ambient edges