News • Examples • Documentation • Download • Buy • Forum • Contact
NOTE: This page is from an older version, see the latest version here.

Postprocessing Plugins pp_*.js Version 1.20.4

The post-processing plugins are high-performance WebGL shaders that will process the final rendered image. For more information about the related krpano WebGL API please see here.

Available Postprocessing Plugins:

  • Light - High-quality exposure and light/shadow control.
  • Blur - High-performance image blurring.
  • Sharpen - An Unsharp-Mask filter for sharpening or local contrast enhancement.

Third party post-processing plugins:
  • zFilter - Brightness, Hue, Saturation, Vibrance, Vignette, Sepia, Color-Blending.

Examples

Postprocessing Plugins Demo
Popups with Background-Blur
Zoom-based Sharpening

Light Postprocessing Plugin pp_light.js

  • A high-image-quality exposure processing plugin.
  • Content based lights and shadows control.
  • Highlight preservation to avoid that whites are getting gray on strong exposure reduction.
Syntax: 
<plugin name="pp_light" devices="html5" keep="true"
        url="pp_light.js" 
        enabled="true"
        exposure="0.0"
        lights="0.0"
        shadows="0.0"
        filterrange="60.0"
        masking="1.0"
        quality="7"
        order=""
        phase="2"
        />

Light Postprocessing Attributes

Attribute nameTypeDefault value
exposure
lights
shadows
 Number
Number
Number		 0.0
0.0
0.0
  • Exposure control:
    • Positive values will light the image.
    • Negative values will darken the image.
  • The exposure setting will affect the overall image, the lights and shadows settings only the lighter and darker parts of the image.
Attribute nameTypeDefault value
filterrangeNumber60.0
  • The range of the pixels that will be used for the lights and shadows changes.
  • Larger values for smoother transitions between lights and shadow changes.
  • The larger the setting, the larger the quality setting might need to be to avoid noise.
Attribute nameTypeDefault value
maskingNumber1.0
  • The lights / shadows mask range selection.
  • Larger values for a stronger lights / shadows separation, smaller values for more blending.
Attribute nameTypeDefault value
qualityint7 or 3
  • A quality / performance control.
  • Affects only the lights and shadows settings.
  • The lower the quality setting value the faster the image processing, but therefore also more noise will be in the resulting image.
  • Value range: 0 (lowest quality) to 50 (highest quality).
  • On mobile and tablet devices the default is 3 for faster rendering performance.
  • Note - changing the quality setting can be a costly operation (browser and GPU dependent), so it should be not changed during animations.

Blur Postprocessing Plugin pp_blur.js

  • A high-performance image blurring filter.
  • It uses a fixed-number of pixels (based on the quality setting) for calculating the blurred image. That means same rendering performance regardless of the blurring range.
Syntax: 
<plugin name="pp_blur" devices="html5" keep="true"
        url="pp_blur.js" 
        enabled="true"
        range="0.0"
        quality="10"
        linearrgb="false"
        mirroredges="false"
        order=""
        phase="2"
        />

Blur Postprocessing Attributes

Attribute nameTypeDefault value
range Number 0.0
  • The blurring range in pixel.
Attribute nameTypeDefault value
qualityint10 or 5
  • The quality setting affects the blurring quality and the rendering-performance.
  • The lower the quality setting value the faster the image processing, but therefore also more noise will be in the resulting image.
  • Value range: 1 (lowest quality) to 50 (highest quality). Typically a setting between 5 and 10 is enough for the most usage cases.
  • On mobile and tablet devices the default is 5 for faster rendering performance.
  • Note - changing the quality setting can be a costly operation (browser and GPU dependent), so it should be not changed during animations.
Attribute nameTypeDefault value
linearrgbBooleanfalse
  • Do the blurring in linear-RGB space.
  • This results in more correct blended/blurred colors, but also costs a bit performance, therefore it is disabled by default.
Attribute nameTypeDefault value
mirroredgesBooleanfalse
  • By default the pixels at the edges will get repeated when blurring the image.
  • When enabling this setting, the pixel will get mirrored instead.
  • This can improve the image quality a bit and reduce artefacts at the edges, but also costs a bit performance, therefore it is disabled by default.

Sharpen Postprocessing Plugin pp_sharpen.js

  • Sharpens the image by appling an Unsharp Mask.
  • That means first the image will be blurred and then the differences between the blurred image and the original image be enhanced.
  • For typical sharpening use smaller range settings together with higher strength settings.
  • For local contrast enhancements use larger range settings together with lower strength settings.
Syntax: 
<plugin name="pp_sharpen" devices="html5" keep="true"
        url="pp_sharpen.js" 
        enabled="true"
        strength="0.0"
        range="0.0"
        luminanceonly="true"
        quality="5"
        order=""
        phase="2"
        />

Sharpen Postprocessing Attributes

Attribute nameTypeDefault value
strength Number 0.0
  • The strength of the sharpening / contrast enhancement.
Attribute nameTypeDefault value
range Number 0.0
  • The blurring range in pixel.
Attribute nameTypeDefault value
luminanceonly Boolean true
  • Do sharpening only in the luminance channel instead of in RGB channels.
  • The processing is slightly faster when enabled (internally only 2 instead of 3 passes).
  • For normal sharping it shouldn't better what settings is used, but for local contrast enhancements it might look better when this setting is disabled.
Attribute nameTypeDefault value
qualityint5
  • The quality setting affects the blurring quality and the rendering-performance.
  • The lower the quality setting value the faster the image processing, but therefore also more noise will be in the resulting image.
  • Value range: 1 (lowest quality) to 50 (highest quality). Typically a setting between 5 and 10 is enough for the most usage cases.
  • For small range settings even a lower quality setting (e.g. 1-3) can be good enough.
  • The setting quality=1 is additionally a special case for a good performance / quality ratio at very low range settings (e.g. lower than 2) .
  • Note - changing the quality setting can be a costly operation (browser and GPU dependent), so it should be not changed during animations.

Common Postprocessing Plugin Attributes

Attribute nameTypeDefault value
enabledBooleantrue
  • Enable or disable the plugin.
Attribute nameTypeDefault value
orderint
  • A number for sorting.
  • When using several postprocessing plugin they will be ordered by this given number.
  • When not set, the plugins will be processed in the order they were first added.
Attribute nameTypeDefault value
phaseint2
  • The Postprocessing 'Phase'.
  • There are two phases:
    • phase=1
      • After rendering the pano image, but BEFORE rendering the hotspots.
      • Could be used e.g. for blurring the pano image, but keeping the hotspots sharp.
    • phase=2
      • After rendering the pano image and AFTER rendering the hotspots.
      • As last postprocessing step before showing the image on the screen.