zFlare Plugin zflare.js HTML5 only

by indexofrefraction - (send forum message)

Description

zFlare is a lensflare plugin to enhance the visual effect of your panorama images.

• zFlare is a pure javascript plugin for a minimal performance impact !
• supports mobile webvr and true webvr !
• supports 3D tours: distant and positioned lights, fading out in dollhouse mode!
• supports multiple flares at the same time !
• is simple to use ! two lines to add the plugin and a flare.
• you can design your own lensflares !
• can get extended by the zFilter plugin for extra filter effects !

Just check out the examples below!

zFlare 2.5.8 / 2022-11-29 - indexofrefraction

Table of Contents

• Description
• Concept
• Usage Example
• plugin Attributes
• flare Attributes
• flarespot Attributes
• flarefilter Attributes
• Buy / Order the Plugin
• Examples
• Forum Discussion Thread

Concept

zFlare.js adds three custom xml elements to krpano:

<flare name="myname" preset="mypreset" ... />

• a flare is a composition / preset of flarespot elements
• it is possible to have multiple flares active
  in this case each flare needs an unique name
• the flare attributes describe the preset / composition to use
  and the position of the light source

<flarespot name="mypreset|myname" ... />
<flarefilter name="mypreset|filtername" ... />

• flarespots and flarefilters are elements of your own flare compositions / presets
• flarespots are an image hospots / visible flares
  flarefilters are zFilter plugin filter effects, ie. exposure when looking into the light source
  note: flarefilters need an active zFilter plugin
• the flarespot attributes describe the position, scale, rotate and alpha behaviour
  the flarefilter alpha attribute describes the filter strength / value behaviour

Usage Example

• Add zflare.js and its assets folder to your project
• In your main xml (tour.xml) add
  

  <plugin name="zflare" url="zflare.js"
  	preload="true" keep="true" />

• Finally add a flare to a scene simply like
  

  <scene name="myscene" ... >
  	<flare name="sun" preset="summer01" ath="35" atv="-15" />
  </scene>

To define your own flare composition / preset you would

• Define arrays using flarespots and flarefilters using the same preset name
  

  <flarespot name="sunbeam|sun"
  	   asset="flares/flare006_512.jpg"
  	   pos="0.0" scale="0.5" alpha="0.5" />
  <flarespot name="sunbeam|hexa1"
  	   asset="polys/hexa007_128.jpg"
  	   pos="0.2" scale="0.6" alpha="0.4" />
  <flarespot name="sunbeam|hexa2"
  	   asset="polys/hexa007_128.jpg"
  	   pos="0.5" scale="0.8" alpha="0.6" />
  <flarespot name="sunbeam|flare3"
  	   asset="rings/ring004_128.jpg"
  	   pos="0.8" scale="1" alpha="0.75" />
  <flarefilter name="sunbeam|exposure"
  	   alpha="0.1" alphamap="0|0.2|1|0" reset="0" />
  

• And access it by its preset name in any scene
  

  <scene name="myscene" ... >
  	<flare name="sun" preset="sunbeam" ath="35" atv="-15" />
  </scene>

Plugin Attributes

<plugin name="zflare"
	url="zflare.js"
	preload="true"
	keep="true"
	alpha="1.0"
	scale="1.0"
	assets="zflares"
	mark="false"
	forcegrid="false"
	zfiltername="zfilter"
	skipfilter=""
	edgewidth="0.1"
	offsetfade="500"
	webvr="3"
	webvrfov="50"
	fovbase="60"
	mode3d="1"
	rafloop="true"
	imageready="onblendcomplete"
        />

flare Attributes

<flare name="myname"
       keep="false"
       preset="summer01"
       ath="0" atv="0" depth="1000"
       tx="0" ty="0" tz="0"
       torigin="world"
       alpha="1.0"
       spotalpha="1.0"
       filteralpha="1.0"
       scale="1.0"
       mark="false"
       skipfilter=""
       edgewidth=""
       offsetfade=""
       distfade=""
       />

flarespot Attributes

Prerequisites:

• a flarespot is an image hotspot as part of a flare preset
• flarespots and flarefilters are read onxmlcomplete, dynamic changes are not supported!
  ie. you can set or change attributes by xml, but you can't tween them in an action.
• flarespots and flarefilters are normally defined globally, outside of all scenes!
  like this they are accessible from all scenes.
  
• flarespots and flarefilter do not use memory if there is no active flare using them.

<flarespot name="mypreset|myname"
	   blendmode="add"
	   url=""
	   asset=""
	   pos="0" posmap="" posclamp=""
	   scale="0" scalemap="" scaleclamp=""
	   alpha="0" alphamap="" alphaclamp="0|1" alpha90="0"
	   rot="0"  rlock="false" rcomp="false"
	   xoff="0" yoff="0"
	   edgefade="-1.0"
	   />

flarefilter Attributes

Prerequisites:

• flarefilters are zFilter plugin filter effects as part of flare presets
  ie. a raising exposure when looking into the light source
  note: flarefilters need an active zFilter plugin
• flarespots and flarefilters are read onxmlcomplete, dynamic changes are not supported!
  ie. you can set or change attributes by xml, but you can't tween them in an action.
• flarespots and flarefilters are normally defined globally, outside of all scenes!
  like this they are accessible from all scenes.
  
• flarespots and flarefilter do not use memory if there is no active flare using them.

<flarefilter name="mypreset|filtername"
	     reset=""
	     blendmode="add"
	     color="0x000000"
	     alpha="0" alphamap="" alphaclamp="0|1"
	     />

flarespot and flarefilter

Attribute Mapping and Clamping

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!

Compatibility / Requirements / Limitations

• krpano 1.20 or newer, html5 + webgl only! (Flash is not supported)
  support for all features requires krpano 1.20.11 or higher
• zFlare is tied to your krpano license (needs a registered version of krpano)
• zFilter is a separate plugin (not included in this purchase)

License

• All copyrights to zFlare 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

Withdrawal period

• 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

Example <flare> using the built in "summer01" preset
xml: tour-simple.xml
xml: tour-simple-zfilter.xml (combined with zFilter)

Example <flare> with <flarespot> and <flarefilter> definitions
xml: tour-complex.xml
xml: tour-complex-zfilter.xml (combined with zFilter)


zFlare Example
use right-click to enable fullscreen


WebVR / vtourskin Example
use right-click to enable fullscreen


3D Example
Click on the floor to move and look around to explore the distant and positioned lights.
also notice the fading on dollhouse enter/ exit.
use right-click to enable fullscreen


zFlare with / without zFilter Comparison
To see the extra effect of zFilter, zoom out and look directly into the sun.
use right-click to enable fullscreen


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

zFlare Plugin Thread