Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Idea: Radial blur #253

Open
Eyemanatpc opened this issue Jul 17, 2024 · 2 comments
Open

Idea: Radial blur #253

Eyemanatpc opened this issue Jul 17, 2024 · 2 comments

Comments

@Eyemanatpc
Copy link

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).
radial-zoom blur
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:
Ambi-Blur-without

Radial-zoom-blur:
Ambi-Blur-radial-zoom-blur

Increase-blur:
Ambi-Blur-increase

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
Copy link
Owner

WesselKroos commented Jul 18, 2024

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 WesselKroos changed the title Idea: New type of Blur Idea: Radial blur Jul 18, 2024
@WesselKroos
Copy link
Owner

WesselKroos commented Jul 20, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants