You are not logged in.

Postprocessing Plugin Example - Multi-Pass-Blur

Dear visitor, welcome to krpano.com Forum. If this is your first visit here, please read the Help. It explains in detail how this page works. To use all features of this page, you should consider registering. Please use the registration form, to register here or read more information about the registration process. If you are already registered, please login here.

klaus.krpano

Administrator

  • "klaus.krpano" started this thread

Posts: 12,895

  • Send private message

1

Friday, April 7th 2017, 11:03pm

Postprocessing Plugin Example - Multi-Pass-Blur

Hi,

according to this request here:
WebGL createPostProcessingShader returns null
I have made a postprocessing plugin example that blurs the pano image (with an approximated gaussian blur).

Here a demo:
Postprocessing Plugin Example - Multi-Pass-Blur

The plugin source:
postprocessing_multipass_blur.js

The example xml: (changes the blur in a loop)
postprocessing_multipass_blur.xml

Here the full example for downloading:
krpano_postprocessing_multipass_blur.zip

The image will be blurred in 6 rendering passes with 9-taps/samples per pixel. That's quite a lot and a requires a good GPU for good performance.
When only lower blurring ranges are requires the number of passes could be reduced to 2 or 4 in the plugin source for better performance.

Best regards,
Klaus

Umalo

Professional

Posts: 1,051

Location: Osijek, Croatia, EU

  • Send private message

2

Sunday, April 9th 2017, 1:41pm

*thumbsup* Wow. Could be useful. Thanks.

indexofrefraction

Professional

Posts: 904

  • Send private message

3

Sunday, April 9th 2017, 6:54pm

wow, thanks klaus...

thats a great one!

Alexey Tkachenko

Professional

Posts: 760

Location: Sevastopol, Crimea, Russian Federation

Occupation: Interpreting, Building virtual tours

  • Send private message

4

Monday, April 10th 2017, 11:29am

Really cool stuff, Klaus! Thanks a lot! *thumbup* *thumbsup*
Regards,

Alexey

ramirox3

Intermediate

Posts: 260

Location: La Ceja, Colombia

Occupation: photographer

  • Send private message

5

Monday, April 10th 2017, 3:59pm

I would like to know what could be a creative use of this plugin. I would like to hear something about it
Ramiro

indexofrefraction

Professional

Posts: 904

  • Send private message

6

Monday, April 10th 2017, 5:27pm

@klaus...

did you test the optimal samples per blur value ?

perspixe

Trainee

Posts: 64

Location: Bologna, Italia, Vancouver, BC

  • Send private message

7

Tuesday, November 28th 2017, 12:26pm

This is working great. on a 650M 1080p fullscreen.
Android S7 with Opera jumpy frame rate. Will try lower demanding settings.
Is it possible to define a mask to apply the blur?
- only on certain areas of the pano (hv coordinates)
- only on certain areas of the screen (circle feathered mask for example).
That's a demanding... ;-)
Very impressed.

4 passes still too much for S7, 2 ok and not too visible artifacts on small screen, but on a desktop, 2 has a lot of artifacts.

Sander Schat

Beginner

Posts: 22

  • Send private message

8

Thursday, January 11th 2018, 9:10pm

Just to verify:

i can do this also with a simple 'tween' action on the blur right?

Source code

 
1
2
3
4
5

<action name="add_blur">

tween(plugin[pp].blur, 4, 1);
        
</action>


It does work, but maybe it might be too heavy on calculations?

Edit: (Extra question):

can the image also be 'darkened' abit with this plugin?
Where do i add the settings to do this?

(Just a setting in the js, not to interact with it via layer. Although that would make it a lot cooler *smile* )

Sergey74

Intermediate

Posts: 191

Location: Russia, Chelyabinsk

Occupation: professional noob

  • Send private message

9

Friday, January 12th 2018, 10:45am

Quoted from "Sander Schat"

can the image also be 'darkened' abit with this plugin?
Where do i add the settings to do this?
Just add a black layer with the necessary transparency
See example https://panosphera.ru/blog/virtual-tour/montenegro - click the share button or settings ︙
translation difficulties *huh*

Sander Schat

Beginner

Posts: 22

  • Send private message

10

Friday, January 12th 2018, 10:55am

Quoted from "Sergey74"

Just add a black layer with the necessary transparency


Yes thanks for the insight! thinking outside the plugin of course :)


Edit:
this little bit did the trick:

Source code

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<action name="add_blur">

        tween(plugin[pp].blur, 4, 1);

        addlayer(blur_shader);
        set(layer[blur_shader].type, container);
        set(layer[blur_shader].zorder, 50);
        set(layer[blur_shader].align, lefttop);
        set(layer[blur_shader].width, 100%);
        set(layer[blur_shader].height, 100%);
        set(layer[blur_shader].bgcolor, 0x000000);
        set(layer[blur_shader].bgalpha, 0.15);
        set(layer[blur_shader].bgcapture, false);
        set(layer[blur_shader].handcursor, false);
        set(layer[blur_shader].alpha, 1);
        set(layer[blur_shader].keep, true);

    </action>

    <action name="remove_blur">

        tween(plugin[pp].blur, 0, 0.5);
        tween(layer[blur_shader].alpha, 0, 0.5, '', removelayer(blur_shader) );


    </action>

Umalo

Professional

Posts: 1,051

Location: Osijek, Croatia, EU

  • Send private message

11

Sunday, May 13th 2018, 1:53pm

Hi Klaus

Would it be possible to define area inside sphere where to apply the blur?
E.g.

Source code

 
1

set(plugin[pp].blur, 4, ath_top_left,atv_top_left, ath_bottom_left, atv_bottom_left, ath_top_right, atv_top_right, ath_bottom_right, atv_bottom_right);

or
making bb plugin child of the distorted hotspot and then applying blur?

indexofrefraction

Professional

Posts: 904

  • Send private message

12

Sunday, May 13th 2018, 5:20pm

@umalo
in the examples the effect always affects the complete panorama.
a mask would be possible in theory, but that would need a more complex implementation than the given examples.
also hotspots/layers can't be blurred like that, yet. i think klaus said maybe in some future update

This post has been edited 1 times, last edit by "indexofrefraction" (May 13th 2018, 6:14pm)

360boy

Intermediate

Posts: 232

Location: Mexico City

Occupation: Virtual tours, Krpano coding, Graphic Design, Photographer, Panographer

  • Send private message

13

Tuesday, August 20th 2019, 5:39pm

Hello Klaus,
This is an awesome plugin and I have been using it for some time on desktop tour versions. Just recently I started using it as well on mobile devices as and found the following bug on an android phone (Moto G7 Power) where it degrades a lot the image quality just by being present (blur="0" at right side of the image, left side is without it being loaded. Check the helicopter icon) Already tested on other phones (iphone 8, galaxy s10) and everything is fine but as I can't guarantee this won't happen on other devices just removed it for mobile. Is there any turnaround for this? I really would like to keep this feature.
Best
360boy has attached the following image:
  • blur_distortion.jpg
www.imagen360.com
www.facebook.com/Erantzcani360
www.facebook.com/imagen360mx/

Sergey74

Intermediate

Posts: 191

Location: Russia, Chelyabinsk

Occupation: professional noob

  • Send private message

14

Tuesday, August 20th 2019, 7:59pm

I also wrote about it here
translation difficulties *huh*

360boy

Intermediate

Posts: 232

Location: Mexico City

Occupation: Virtual tours, Krpano coding, Graphic Design, Photographer, Panographer

  • Send private message

15

Wednesday, August 21st 2019, 4:30pm

Same issue indeed Sergey74, in your post Klaus wrote about a possible recompression by internet provider but that's not the case as I'm having the issue locally with test server. It doesn't happens on all mobiles but's related to this blur plugin no doubt, when I disable it image gets back to normality.

Klaus, I can provide more details/screencaptures if needed, this is an awesome plugin, hope you can fix it.

Best
www.imagen360.com
www.facebook.com/Erantzcani360
www.facebook.com/imagen360mx/

Similar threads