zFilter Plugin zfilter.js WebGL + HTML5 only

by indexofrefraction - (send forum message)

Description

• adjustment shaders gamma, brightness, contrast,
  exposure, hue, saturate, vibrance, sepia, invert and mixcolor
• blurring with blur and fblur (fastblur) !
• vignette and color blending !
• fun shaders swirl, pixelate, ripple, split and sobel !
• filter and background filter support for layers and hotspots !
  brightness, contrast, saturate, hue, sepia, invert, blur, dropshadow
• value editor and logger plus live examples

zFilter 3 change log

• krpano 1.21 support and compatibilty
• new invert/bginvert attributes for postpocessing and layers/hotspots !
• new dropshadow attribute and layers/hotspots !
• auto add/removezfilter for layers and hotspots and addzfilter setting
• layer/hotspot filter value range changes with csslegacy setting
• haszfilter() function for layers/hotspots
• enhanced editor, logger and CSS filter example for layers and hotspots

Table of Contents

• Description
• Syntax / XML Usage Example
• Plugin Attributes
• Plugin Attributes (Postprocessing Filters)
• 32bit ARGB values
• Layer and Hotspot Attributes
• Layer and Hotspot Attributes (CSS Filters)
• Buy / Order the Plugin
• Examples
• Forum Discussion Thread

Syntax / XML Usage Example

<plugin name="zfilter"
	url="zfilter.js"
	preload="true"
	keep="true"
	regkey=""
	enabled="true"
	phase="2"
	order=""
	webvr="2"
	addzfilter="false"
	csslegacy="false"
	gamma="2.2"
	brightness="0"
	contrast="0"
	exposure="0"
	hue="0"
	saturate="0"
	vibrance="0"
	sepia="0"
	invert="0"
	swirl="0"
	pixelate="0"
	ripple="0"
	sobel="0"
	split="0"
	fquality.mobile="3"
	fquality.tablet="6"
	fquality.desktop="9"
	fblur="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" regkey="abcdef" />

  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" regkey="abcdef"
  	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

• 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:
  • an ARGB value of 0x801eff64 means:
    0x8000ff00 --> A = 0x80/128, R = 0x1e/30, G = 0xFF/255, B = 0x64/100
  • set(plugin[zfilter].blendcolor, 0x8000ff00);
  • tween(plugin[zfilter].blendcolor, 0xffff0000, 2.0);
  • copy(col, plugin[zfilter].blendcolor);

Layer and Hotspot Attributes

• hotspots and layers must get manually initialized by calling addzfilter()
  and released using removezfilter() before removing the layer/hotspot
• krpano 1.21 and above:
  addzfilter() is handled automatically if addzfilter="true"
  removezfilter() is handled automatically in any case
• Supported attributes are:
  brightness, contrast, saturate, hue, sepia, invert, blur, dropshadow and
  bgbrightness, bgcontrast, bgsaturate, bghue, bgsepia, bginvert, bgblur
• Hotspots need to be rendered with renderer=css3d
• Browser support:
  The normal filters should work on most current main browsers,
  but support may vary, specially if multiple filters are active.
• Technical note: krpano 1.21 has a limited support for CSS filters
  (background, layers, type=container or text)
  zFilter provides full support for CSS filters
  (foreground & background, hotspots & layers, type=container, text and image)
  

• set(hotspot[myhotspot].saturate, -1);
• tween(layer[mylayer].blur, 15, 1);
• tween(layer[mylayer].blur|layer[mylayer].alpha, 15|0, 1);

Layer and Hotspot Attributes (CSS Filters)

new value ranges with krpano 1.21+ or old krpano versions with csslegacy="false"
note: these ranges correspond to the regular CSS filter value ranges

Old / legacy value ranges for old krpano versions with csslegacy="true"
note: these ranges correspond to the panorama postprocessing filters provided by zFilter

note: csslegacy="true" is supported for old krpano versions below 1.21, only!
         on kprano 1.21 it is mandatory to use the new value ranges!

addzfilter(layer or hotspot)

removezfilter(layer or hotspot)

haszfilter(variable, layer or hotspot)

zfiltersupport(variable)

Buy / Order the plugin

• krpano 1.20 or newer, html5 + webgl only! (Flash is not supported)
• Postprocessing filters work on the panorama and on hotspots with renderer=webgl
• Layer and hotpot filters support a limited set of effects and require renderer=css3d
• Support for layer and hotpot filters are depending on browser support
• Support for true webVR is experimental
• 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.
• Third parties are not allowed not use your licensed plugin to create new projects, including modified versions of your projects.
• You are not allowed to rent, lease, lend or sublicense your plugin.
• Offering your licensed plugin to third parties on a hosting platform is not allowed without a separate hosting license. In such cases (e.g. integration in content management services) please contact: support@refraction.ch

• For any digital content purchased online, you agree upon checkout that the withdrawal period will expire 14 days after you purchase such digital content or when you start downloading the content for the first time, whichever is sooner.

Examples

krpano Forum Discussion Thread