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
  • 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