How to use the krpano lensflare plugin for HTMl5 exports  

no avatar
Kolor Team
Topic author
Posts: 5848
Likes: 92 posts
Liked in: 199 posts
Joined: Tue Apr 09, 2013 10:59 am
Location: France

How to use the krpano lensflare plugin for HTMl5 exports

by benji33 » Tue Oct 03, 2017 9:22 am

I've tested it and here is the way to go with this plugin.

Plugin download:
Price: 49 €

1. Create a lensflares directory into the YOURTOURdata/graphics/ directory.
2. Copy paste the lenscore.xml file into this directory.
3. Copy the blinkstyleXwhere X is the lensfare selected style number directory into the lensfaresdirectory.
4. Copy the dustdirectory into the lensfaresdirectory also.
5. Create a file called lensflaresettings.xml into this directory and edit it.
6. Into your text editor create an xml tag for the lensflare plugin where each item is a lensflare.

- name is the unique name of the lensfare
- athand atvare the coordinates of the lensflare on horizontal and vertical axis
- the panoID for the selected scene must be added into the sceneattribute
- typattribute value is to the "blinkstyleX" selected above.

Code: Select all
<lensflares name="obj" webvr_enabled="false">
   <item name="lensfare1" ath="148.20" atv="-42.09" scene="pano10" typ="blinkstyle3" />

7. Save this file.
8. Into the YOURTOUR_skin.xml file add these lines:

Code: Select all
<include url="%FIRSTXML%/graphics/lensflares/lenscore.xml"/>
<include url="%FIRSTXML%/graphics/lensflares/lensflaresettings.xml"/>

9. Play with it.

Note: if you add the edit.xml module into the lensflaresdirectory it's possible to use the lensflare editor with the add of the ?initvars.addflaremode=1 at the end of the url.

2 people like this post.

no avatar
Posts: 10
Likes: 3 posts
Liked in: 3 posts
Joined: Fri Jan 06, 2017 10:04 am

Re: How to use the krpano lensflare plugin for HTMl5 exports

by RoryG » Mon Apr 30, 2018 1:41 pm

This KRPano HTML5 lens flare plugin (V3) works great with PTP, however the instructions above are for KRPano 1.8. For the latest Panotour Pro with 1.9, once you've built your tour copy the entire lensflare folder into the /<yourtour>data/graphics folder and add the following lines to your <yourtour>.xml file above the <include url="%FIRSTXML%/<yourtour>_skin.xml"/> line (note that on subsequent builds you'll have to add these two lines again):

Code: Select all
<!-- Lensflare plugin -->
  <krpano flare_dir="%FIRSTXML%/graphics/lensflare" />
  <include url="%FIRSTXML%/graphics/lensflare/core.xml" devices="desktop" />

The devices="desktop" statement is optional; although the plugin does work on mobiles and tablets it has a serious performance hit. On older iPads (Gen 4 and earlier) this can make features such as the gyroscope and autorotation unuseable, even on an Air 2 the performance hit is noticable. It also causes a hit on older desktop hardware or PCs with integrated graphics, although this isn't as bad as it is with mobile devices. I've tested it on a 2011 Macbook Pro with Intel HD 3000 graphics and performance is good in a browser window but stutters full screen. Chrome appears to provide the best performace on any desktop device.

Adding lens flares to individual panos is easy using the editor, just add ?initvars.addflaremode=1 to the end of the localhost address if viewing from Panotours "View last built tour in a built-in local web server" or to the URL if viewing the live version on a web host. You can add flares to multiple panos then click save which will download an updated lensflaresettings.xml which you can put in the lensflare folder. Example of the lensflaresettings.xml file:

Code: Select all
   <lensflares name="obj">
      <item name="flarka920023" ath="-1.97" atv="-25.75" scene="pano17" typ="blinkstyle8" dust_effect="false"/>
      <item name="flarka44598" ath="162.64" atv="-25.84" scene="pano113" typ="blinkstyle8" dust_effect="false"/>
      <item name="flarka111211" ath="63.49" atv="-6.23" scene="pano67" typ="blinkstyle5" dust_effect="false"/>
      <item name="flarka57240" ath="-19.06" atv="-31.77" scene="pano14" typ="blinkstyle8" dust_effect="false"/>
      <item name="flarka45618" ath="-25.86" atv="-38.73" scene="pano171" typ="blinkstyle8" dust_effect="false"/>

The settings file is fairly self-explanatory; name is a uniques name for each flare followed by ath horizontal and atv vertical coordinates. Scene is the pano the effect is applied to, blinkstyle is the lens flare style and dust_effect is true for on and false for off (I personally find the dust effect intrusive and go to great lengths to ensure my lens is clean when shooting panos!).

Once you've added the flares to the scenes you can remove the unused blinkstyle folders to save on webspace. If no more editing of the flare styles and positions are required once the tour is uploaded you can disable the edit function by removing the code from the <yourtour>data/graphics/lensflare/edit.xml file and replacing it with empty <krpano> tags:

Code: Select all


Lens flares when used appropriately can really add extra dynamics to a scene. I found I had to edit some of the blinkstyle png files to reduce the effect, especially the colour casts and sun disks (easily done by adjusting the tranparency in PS). In the following tour I've used an edited blinkstyle8 for most of the scenes, and blinkstyle5 for scenes with very low sun. Note the lens flares won't show up on mobiles or tablets:

Hope this helps,


Who is online

Users browsing this forum: No registered users and 0 guests