zFilter Plugin zfilter.js WebGL + HTML5 only

by indexofrefraction - (send forum message)

Description

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

Table of Contents

• Description
• Syntax / XML Usage Example
• Plugin Attributes
• 32bit ARGB values
• Buy / Order the Plugin
• Examples
• Module demos
• Forum Discussion Thread

Syntax / XML Usage Example

<plugin name="zfilter"
	url="zfilter.js"
	preload="true"
	keep="true"
	gamma="2.2"
	brightness="0"
	contrast="0"
	exposure="0"
	hue="0"
	saturation="0"
	vibrance="0"
	sepia="0"
	sobel="0"
	blur="0"
	blendcolor="0" blendmode="add"
	vignettecolor="0"
	mixcolor="0"
        />

• 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);
  </action>

• 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

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)

License

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

Examples

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

krpano Forum Discussion Thread

zFilter Plugin Thread