zFilter 3 - WebGL Postprocessing Plugin

This is the zFilter 3 - WebGL Postprocessing Plugin Thread

zFilter is a postpocessing WebGL shader plugin for dynamic effects on your panorama image,
layers and hotspots. It allows you to add visual effects for startup intros, scene changes,
information popups, etc. Setting or tweening simple attributes adjusts the brightness,
saturation or blurs your panorama, layers or hotpots!

zFilter 1.0 release 2018.05
zFilter 2.0 release 2019-11
zFilter 3.0 release 2023-04

more infos in this thread or on the plugin page :
https://krpano.com/plugins/userplugins/zfilter

Hi Jerome,

Yes, all existing customer will get the update for free.

I did a last check now and when the documentation is online,
i'll send out the new builds.

and maybe to explain the main updates in zfilter 2 :

- the new fblur shader performs much faster and works great in low performance situations
- the layer / hotspot filters allow for example blurring simply like set(layer[xyz].blur, 10);
- the support for kprano 1.20 phase allows to blur the pano, but not the hotspots
- the support for kprano 1.20 order and a new internal order allow new looks by order changes
- and ofc those fun shaders work great for transitions or intro effects

best, index

ok the updated plugin page is online now, thanks Klaus !

for existing and possible new users, please check out the new documentation
there are a lot of new live examples where you can play around,
and explore the abilities and performance of zfilter.

https://krpano.com/plugins/userplugins/zfilter

of course i'm always happy for feedback,
or if you have questions, you can post them here in the plugin thread.

also, if you have some nice, finished tours using zfilter, please post your links :)

best, index

to existing users :

I will try to send all updates out to the existing users today.
if you didnt receive anything until tonight, please check your spam folders.
specifically gmail ignores / spam filters anything that mentions a zip file !

and lastly as info :
you should not need to change your tours to update,
everything works the same, the new features are all additional.

hi, juyatu

the zfilter editor was never meant for public use, it is just a tool to find and test filter values.

but based on this official example
https://krpano.com/releases/1.20.…der-blend-cubes

here a small example to create your own sliders, with chinese text

<krpano>


	<plugin name="zfilter" url="plugins/zfilter.js" preload="true" keep="true"
			fquality.mobile="5" fquality.tablet="10" fquality.desktop="15" />


	<view hlookat="0" fov="90" fovmin="60" fovmax="120" />


	<image>
		<sphere url="pano/lady_elliot.jpg"/>
	</image>


	<layer name="slider_bg" type="container" bgcolor="0x000000" bgalpha="0.5" align="topleft" x="30" y="30" handcursor="false" width="220" height="18" />
	<layer name="slider_title" type="text" align="topleft" html="saturation / 饱和" parent="slider_bg" bg="false" css="color:#fff;font-size:10px;padding-left:5px;" alpha="0.5" enabled="false" />
	<layer name="slider_grip" type="container" bgcolor="0xffffff" bgalpha="0.5" align="left" edge="center" parent="slider_bg" x="110" width="10" height="18" bgcapture="true"
	       ondown="copy(drag_currentx, x); copy(drag_stagex, mouse.stagex);
	               asyncloop(pressed,
	                 calc(newx, drag_currentx + (mouse.stagex - drag_stagex));
	                 clamp(newx, calc(layer[slider_grip].width/2), calc(layer[slider_bg].pixelwidth - layer[slider_grip].width/2));
	                 copy(x, newx);
	                 calc(valx, (newx - layer[slider_grip].width/2) / (layer[slider_bg].pixelwidth - layer[slider_grip].width));
	                 calc(valx, valx * 2 - 1);
	                 copy(plugin[zfilter].saturation, valx);
	               );"
			/>


</krpano>

instead of
copy(plugin[zfilter].saturation, valx);
just use
copy(layer[yourlayer].saturation, valx);

or... use a variable
<set var="yourtarget" val="layer[yourlayer]"/>
and
copy(calc(yourtarget + '.saturation'), valx);

and in general...
you do not need that editor target variable to use zfilter
you can just set the values in the xml

<action name="setup" autorun="onstart">
	if(plugin[zfilter].ready,
		// add zfilter to layer and hotspot
		addzfilter(layer[mylayer1]);
		addzfilter(layer[mylayer2]);
		addzfilter(layer[mylayer3]);
		addzfilter(hotspot[myhotspot1]);
		addzfilter(hotspot[myhotspot2]);
		addzfilter(hotspot[myhotspot3]);


		set(layer[mylayer1].saturation, -1);
		set(layer[myhotspot2].blur, 10);
		// ... etc
		set(plugin[zfilter].brightness, 0.5);
	);
</action>

ps. just in case you dont know...

<set var="yourtarget" val="layer[yourlayer]"/>
can be changed in an action like
set(yourtarget, layer[otherlayer]);

Quote from juyatu

Can I set the center locations of 'ripple' and 'Swirl'?

hi juyatu,
no sorry, atm there is no support for changing the center for swirl / ripple.
best. index

hi dafoz,

yes that works, but only with limited filters (brightness, contrast, saturation, hue, sepia and blur) and with renderer=css3d
see here : https://krpano.com/plugins/userplugins/zfilter/#elements
and here: https://krpano.com/plugins/userplugins/zfilter/#purchase

hotspot & layer filters are technically css filters accessible by simple krpano attributes
eg. <layer name="test" blur="10" /> or set(layer[test].blur, 10); or tween(layer[test].blur, 10, 1);

i didn't have the time to fix the ShareIt problem, yet, for the moment if you're interested to buy it, just contact me by pm.

best, index

ps. example is here
https://krpano.com/plugins/userpl…/#example_layer
it would also work for an image layer (<layer name="image" url="image.jpg" ... />)

Ok, the plugin plugin page is finally updated and zFilter is now available via Gumroad
https://krpano.com/plugins/userplugins/zfilter

I had to give up the separate modules, this was not possible with Gumroad.
Existing clients who just bought single modules can upgrade to the full version with a discount of 50%.
There is no public link for this, so please contact me if you want to upgrade.

Furthermore the new zFlare Plugin was released today and can be used together with zFilter. More info here:
https://krpano.com/forum/wbb/inde…&threadID=18621
https://krpano.com/plugins/userplugins/zflare

zFlare and zFilter are separate plugins, but there is a discount if bought as package
Additionally until 31.12.2021 there is a CHRISTMAS DISCOUNT of 20% for all of my plugins !
just enter "xmas21" in the discount field on Gumroad.

.

hi,
this is possible but note: krpano itself only supports blurring all or no hotspots.
the zfilter hotspot blur is based on css and works only with renderer=ccs3d hotspots
if you have a lot of hotspots / layers, doing this may be (very) demanding on your hardware

first set phase=2 to have your hotspots not blurred

<plugin name="zfilter" ... phase="2" ... />
tween(plugin[zfilter].blur, 10);

now blur your selected hotspots / layers manually :

addzfilter(hotspot[...]); and tween(hotspot[...].blur, 10);
addzfilter(layer[...]); and tween(layer[...].blur, 10);

to join this you would interate though all your hotspots / layer, skip the unwanted ones,
do addzfilter() for each element and build two string with all names and all blur values, eg
items = "hotspot[aa].blur|hotspot[bb].blur|....|layer[xx].blur|layer[yy].blur|...."
values = "10|10|...|10|10..."
then tween the main blur and the hotspots and layers together
tween(calc("plugin[zfilter].blur|" + items), calc("10|" + values), ...);