You are not logged in.

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,047

Location: Osijek, Croatia, EU

  • Send private message

2

Sunday, April 9th 2017, 1:41pm

*thumbsup* Wow. Could be useful. Thanks.

3

Sunday, April 9th 2017, 6:54pm

wow, thanks klaus...

thats a great one!

Alexey Tkachenko

Professional

Posts: 737

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: 197

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

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.

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

Trainee

Posts: 124

Location: Russia, Chelyabinsk

Occupation: professional noob

  • Send private message

9

Friday, January 12th 2018, 10:45am

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*

10

Friday, January 12th 2018, 10:55am

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,047

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?

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)


Similar threads