News Examples Documentation Download Buy Forum Contact

zFilter Plugin zfilter.js WebGL + HTML5 only
by indexofrefraction - (send forum message)


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

Just check out the examples and module demos below!

zFilter 1.1.2 / 2018-05-25 - indexofrefraction

Syntax / XML Usage Example

<plugin name="zfilter"
	blendcolor="0" blendmode="add"

  • Add zfilter.js to your project folder
  • In your html (index/tour.html) ensure that you embedd krpano with html5:"only+webgl"
    embedpano({ html5:"only+webgl", ... });
  • In your main xml (tour.xml) add
    <plugin name="zfilter" url="zfilter.js"
    	preload="true" keep="true" />
    or just use the full block above with all attibutes on their default values.
  • A simple intro for example, can be done by setting initial attribute values
    in combination with an onstart action tweening the attributes back to the defaults.
    <plugin name="zfilter" url="zfilter.js"
    	preload="true" keep="true"
    	mixcolor="0xff000000" />
    <action name="intro" autorun="onstart">
    	tween(plugin[zfilter].mixcolor, 0x00000000, 2.0);
  • Note: zFilter is optimized to minimize the performance load on your devices.
    If all attributes are set to their default values, the plugin stays idle and does
    not affect the performance at all.

Plugin Attributes

Attribute nameTypeValue
ready (read only)Booleantrue | false
shaders (read only)Numbernumber of active WebGL shaders
  • ready is true if the plugin is loaded and ready
  • shaders contains the number of active WebGL shaders
  • url must point to the plugin (documentation)
  • preload should be set to true (documentation)
  • also keep should be true for most cases (documentation)
Attribute nameTypeDefault valueMinMax
  • Basic image filters
  • Examples:
    • set(plugin[zfilter].brightness, 0.25);
    • tween(plugin[zfilter].saturation, -1.0, 1.0);
Attribute nameTypeDefault valueMinMax
  • Sobel edge detection
  • Examples:
    • set(plugin[zfilter].sobel, 0.5);
    • tween(plugin[zfilter].sobel, 1.0, 1.0);
Attribute nameTypeDefault valueMinMax
  • Blurs the image
    • Note: Blurring is done by an intelligent, performance optimized algorithm,
      but it needs more passes (WebGL shaders), the stronger you're blurring the image.
      For devices with low performance you should avoid high blur values.
  • Examples:
    • set(plugin[zfilter].blur, 10);
    • tween(plugin[zfilter].blur, 25, 1.0);
Attribute nameTypeDefault valueMinMax
  • blendcolor blends the image with a color by a blendmode (alpha 100% = blended image)
  • 32bit ARGB value layout:
    • 1st byte: alpha (0x00 disables the shader)
    • 2nd byte: red
    • 3rd byte: green
    • 4th byte: blue
    • please read section about 32bit ARGB values
  • supported blendmodes:
    • add, subtract, multiply, darken, colorburn, linearburn, lighten, screen
    • colordodge, lineardodge, overlay, softlight, hardlight, vividlight, linearlight,
    • pinlight, difference, exclusion, hue, saturation, color, luminosity, mix
  • Examples:
    • set(plugin[zfilter].blendmode, 'overlay');
    • set(plugin[zfilter].blendcolor, 0xffff0000);
    • tween(plugin[zfilter].blendcolor, 0x8000ff00, 1.0);
Attribute nameTypeDefault valueMinMax
  • vignettecolor blends a black vignette over the image
  • 32bit ARGB value layout:
    • 1st byte: alpha (0x00 disables the shader)
    • 2nd byte: aspect ratio (0x00 stage aspect ratio, 0xff circle 1:1 ratio)
    • 3rd byte: softness (0x00 soft, 0xff hard)
    • 4th byte: radius (0x00 zero, 0x80 fit screen, 0xff max)
    • please read section about 32bit ARGB values
  • Examples:
    • set(plugin[zfilter].vignettecolor, 0xffc01090);
    • tween(plugin[zfilter].vignettecolor, 0xff5060b0, 1.0);
Attribute nameTypeDefault valueMinMax
  • mixcolor mixes the image with a color (alpha 100% = given color)
  • 32bit ARGB value layout:
    • 1st byte: alpha (0x00 disables the shader)
    • 2nd byte: red
    • 3rd byte: green
    • 4th byte: blue
    • please read section about 32bit ARGB values
  • Examples:
    • set(plugin[zfilter].mixcolor, 0xffff0000);
    • tween(plugin[zfilter].mixcolor, 0x8000ff00, 1.0);

32bit ARGB values

32bit ARGB values consist of 4 bytes, each with a range of hexadecimal 0x00 to 0xff.
Normally 32bit ARGB values are used for colors and are mapped to alpha, red, green and blue,
but zFilter can also map them to other parameters as in the vignettecolor attibute.
The byte to shader parameter mapping is described above for each attribute.

  • You can set 32bit ARGB values by Numbers or Strings in decimal or hex format
  • Reading a 32bit ARGB value returns a String in hexadecimal format
  • Examples:
    • set(plugin[zfilter].blendcolor, 0x8000ff00);
    • tween(plugin[zfilter].blendcolor, 0xffff0000, 2.0);
    • copy(col, plugin[zfilter].blendcolor);

Buy / Order the plugin

This is a commercial plugin - to use it, it must be purchased.
Before you buy, please check the Compatibility / Requirements / Limitations!

zFilter is split up in modules which can be purchased separately.
If additional modules are ordered at a later time, you will receive a combined build
containing all (new and older) purchases.

Compatibility / Requirements / Limitations
  • krpano 1.19-pr12 or newer, html5 + webl only! (Flash is not supported)
  • zFilter affects the panorama image and hotspots (if their renderer is set to webgl)
  • zFilter has no effect on layers
  • zFilter is tied to your krpano license (needs a registered version of krpano)
  • All copyrights to zFilter are exclusively owned by indexofrefraction.
  • This plugin is offered as a commercial plugin. It is provided "As Is" without warranty of any kind, either express or implied, including any warranty of quality, merchantability, or fitness for a particular purpose. In no event will the author of the plugin be liable for loss of data, costs of procurement of substitute goods or services or any special, consequential or incidental damages, under any cause of action and regardless of whether or not the plugin author have been advised of the possibility of such damage. This limitation will apply notwithstanding any failure of essential purpose of any limited remedy provided herein. In any event the plugin author will have no liability arising out of this agreement.

Buy zFilter modules

module select included attributes
Adjustments gamma, brightness, contrast, exposure, hue, saturation, vibrance, sepia, mixcolor
Blur blur
Vignette vignettecolor
Blend blendcolor
Sobel sobel

In the purchase form, please register using the exact
name and email you are using for your krpano license
You can check your registration information with the "krpano Tools" application.

* VAT: Depending on your country or company status VAT may be added to the price.
In the Share‑It order form select your country and enter your VAT/UID number to remove the VAT.
The correct price will be shown on the next page in the order form.


Intro with effects (source)

Popup with effects

Effect combos

Panorama images (licensed under CC BY-SA 3.0)
© The Ocean Agency / XL Catlin Seaview Survey / Aaron Spence and Christophe Bailhache

Module demos

Adjustments module

Blur module

Vignette module

Blend module

Sobel module

Panorama images (licensed under CC BY-SA 3.0)
© The Ocean Agency / XL Catlin Seaview Survey / Aaron Spence and Christophe Bailhache