Duck Hunting in krpano.

To be clear, we at Immercode don’t endorse cruelty on animals, especially for leisure purposes, but what a better way to talk about simple animations in krpano than a tribute to the historical Nintendo video game.

I know, animated hotspots have been a staple of krpano’s free plugin collection for a while, but let’s have a look behind the scenes anyway, trying to fly our pretty friend, the Immercode duck.



What we need is just a single, wiiide image containing all the frames of our looping animation one next to the other:


The original file for this image, duck.png, is 2056 x 257 pixels, that is: 8, 257 x 257 frames, one next to the other.

Once our “animation file” is ready, we can edit our pano’s xml and add a hotspot such as:

<hotspot name=”duck”
ath=”0″ atv=”0″

This hotspot is displaying a cropped version of our image, corresponding to the first frame, which we call “0”. Notice how we added 4 non-standard hotspot attributes, telling krpano how big a frame should be, how many we expect, and which one we are currently displaying.

Now, we can dig into the action performing the actual animation:

<action name=”animate”>
inc(hotspot[%1].frame, 1, get(hotspot[%1].lastframe), 0);

mul(xpos, hotspot[%1].frame, hotspot[%1].framewidth);


delayedcall(0.1, animate(%1));

What happens there?  First, we increment the frame counter, resetting it if it reaches the total number of frames.

Then we multiply the width of a single frame times the new frame index, so obtaining the starting point for our cropping. We update the crop property of our hotspot, and call on it the same action with a 100ms delay, for a 10fps rate.

Et voila. As usual, we prepared a simple demo on our website, try and resist the urge of clicking on those poor ducks…

Virtual Tours and SEO, an odd couple

I have a certain itch about Search Engine Optimization. It brings to my mind thoughts of seedy spammers promising you billions of visits, often together with some gold watches or blue pills.

Even “legit” SEO companies might end up using questionable methods, such as link farming, to deliver the results they promise.

But this doesn’t question the whole concept of being visible on search results, nor lifts content creators from the responsibility of following some simple, and common sense rules to make their pages search-engine friendly.

Rules like having meaningful images, and logos as <img> tags with properly descriptive “alt” properties, or having a single <h1> header per page, containing a suitable, concise, and keyword-friendly title for the page. A few, totally acceptable changes can have a big impact on your numbers.

I don’t want to make enemies around the virtual tour community, but when I have a look at the html source of most virtual tours created for viewers like krpano, what I see is just a lonely, sad container div, and 0, literally zero Google-friendly content. It comes as a surprise to me that in 2018, clients don’t ask about SEO when commissioning a virtual tour, are they oblivious or just don’t care about it? Most virtual tours are promoting businesses, after all.


The sad state of things

Do you think I’m exaggerating? Take a quick test, open one of your virtual tours online with Chrome, open the Developer Tools, select the tab Audits, then Perform an audit…, check the SEO box and run the audit.

To make some comparisons, this is the results for our Treasure Hunt Demo:


Pretty good, I would say. Using a different SEO analyzer (opens in a new tab), we still get a 69 out of 100, falling short because of the lack of redirection for www (which is due to our provider), and lack of social sharing, in which we are not interested.

Can your virtual tours do better? I can’t name anyone of course, but none of the tours we tested could go past the 78% mark for the Chrome SEO audit, and 50 in the SEO analyzer, with lows down in the 30s.

What could be done about it?

Get those layers out! Have some proper html in your page, keep just the essentials within your viewer’s inner guts, and have your headers, logos, and descriptions in the main body of the virtual tour page. And don’t forget about your meta tags.

Or ask for help to your pano healthcare provider.

UFOs in krpano

What a better way to talk about moving hotspots than having little UFOs running around your panos.

I know, there is already a plugin for moving hotspots, but last time I checked it was 99 euros, and even if I definitely don’t doubt it would be worth buying for some complex scripting, I wouldn’t cash out that money if all I need to do is having an element moving along a line.

Before we dive into the xml, let me introduce the hero of today’s story: The Immercode Spaceship.



Now, let’s create a hotspot with it:

<style name=”ufo-for-life”

<hotspot name=”ufo”
ath=”0″ atv=”0″

and let’s make it fly from our Javascript:“fly(‘ufo’, 0.5, 0.5)”);

where fly is an action we have defined in our xml as:

<action name=”fly”>
  set(x_pos, get(hotspot[%1].ath));
  add(x_pos, %2);

  set(y_pos, get(hotspot[%1].atv));
  sub(y_pos, %3);

  set(hotspot[%1].ath, get(x_pos));
  set(hotspot[%1].atv, get(y_pos));

  delayedcall(0.05, fly(%1,%2,%3));

What is this doing?

It’s taking the hotspot specified in the first parameter, adding the second parameter to its horizontal coordinate (in degrees) and subtracting – for krpano points above the horizon have a negative value as their vertical coordinate – the second parameter to its vertical position.

Then, the action is calling itself with a delay of 0.05 seconds, so creating an animation with 20 frames per second, and so making param 2 and 3, times 20, the horizontal and vertical speeds in degrees per second.

As simple as that.

Now, you can have fun with this live demo, and try to catch as many UFOs as you want before you get tired (my record is 14, I have a short attention span).

How to create a floor plan layer in krpano.

Buy the Virtual Tour Builder plugin, end of the story.

Or, if you enjoy playing around with krpano xml interface, follow these easy steps:

  1. Open up your Photoshop, or equivalent, and create 3 versions of the floor plan you want to create, in png format:
    1. the basic floorplan:floorplan-sample
    2. a .png file containing the areas that you want to be selectable for your virtual tour:floorplan-sample-hover
    3. one more file including those same areas in their “currently selected” or “mouse-hover” state:floorplan-sample-selectedUseless to say: These 3 files should have the same size in pixels, and be aligned, which can be easily done if working with different layers on the same image. Now, let’s call them: floorplan.png, floorplan-available.png, and floorplan-hover.png and let’s do some measuring.
  2. Now, before diving into some good ol’ krpano xml, we need to note down some numbers that will come handy later. First, the overall size of our floorplan files (in our example: 1520 x 1440). Then, for each selectable area of the floorplan, we need to retrieve in our image editing software (a functionality that is common to most) the coordinates of the upper-left corner, the width, and the height, as per the example:floorplan-sample-hover-measures
  3. Now, to krpano. The basic concept here is to have some happy little nested layers:
    • a “wrap” layer, containing the whole thing
    • a “background” layer, featuring the basic floorplan
    • 4 layers for each selectable area of the floorplan, shaped like the area itself:
      • one layer to show that the area is selectable (as a matter of fact, this could be already highlighted in the basic floorplan, but this approach makes things more flexible)
      • one layer to show that the area is currently selected
      • one layer to highlight an available area on mouseover (in the same color as the currently selected one)
      • one layer to intercept the click event and trigger the scene change

In our example, that would translate to:

<style name=”map-area” url=”some-1×1-bogus-hovermage.png” zorder=”20″ />
<style name=”map-area-current” url=”floorplan-hover.png” handcursor=”false” zorder=”18″ alpha=”0″ />
<style name=”map-area-hover” url=”floorplan-hover.png” handcursor=”false” zorder=”15″ alpha=”0″ />
<style name=”map-area-available” url=”floorplan-available.png” handcursor=”false” zorder=”10″ alpha=”1″ />

<layer name=”map-wrap” keep=”true” type=”container” maskchildren=”true” align=”righttop” oy=”0″ zorder=”10″ visible=”true”>

<layer name=”map-background” url=”floorplan.png” crop=”0|0|1520|1440″ />

<layer name=”map-area-1″ style=”map-area” ox=”128″ oy=”128″ width=”626″ height=”586″ onclick=”map-click(1);” onover=”map-over(1);” onout=”map-out(1);” />
<layer name=”map-area-1-current” style=”map-area-current” ox=”128″ oy=”128″ crop=”128|128|626|586″ />
<layer name=”map-area-1-hover” style=”map-area-hover” ox=”128″ oy=”128″ crop=”128|128|626|586″ />
<layer name=”map-area-1-available” style=”map-area-available” ox=”128″ oy=”128″ crop=”128|128|626|586″ />

<layer name=”map-area-2″ style=”map-area” ox=”769″ oy=”128″ width=”546″ height=”584″ onclick=”map-click(2);” onover=”map-over(2);” onout=”map-out(2);” />
<layer name=”map-area-2-current” style=”map-area-current” ox=”769″ oy=”128″ crop=”769|128|546|584″ />
<layer name=”map-area-2-hover” style=”map-area-hover” ox=”769″ oy=”128″ crop=”769|128|546|584″ />
<layer name=”map-area-2-available” style=”map-area-available” ox=”769″ oy=”128″ crop=”769|128|546|584″ />

<layer name=”map-area-3″ style=”map-area” ox=”608″ oy=”727″ width=”709″ height=”584″ onclick=”map-click(3);” onover=”map-over(3);” onout=”map-out(3);” />
<layer name=”map-area-3-current” style=”map-area-current” ox=”608″ oy=”727″ crop=”608|727|709|584″ />
<layer name=”map-area-3-hover” style=”map-area-hover” ox=”608″ oy=”727″ crop=”608|727|709|584″ />
<layer name=”map-area-3-available” style=”map-area-available” ox=”608″ oy=”727″ crop=”608|727|709|584″ />


Sorry for the horrible formatting. What I did there, and what you could more easily see if you copied that code and pasted in a friendlier text editor, is to give each group of 4 layers (as described above) a crop of the corresponding image, based on the coordinates and sizes defined on step 2. For example:

<layer name=”map-area-3″ style=”map-area” ox=”608″ oy=”727″ width=”709″ height=”584″ onclick=”map-click(3);” onover=”map-over(3);” onout=”map-out(3);” />

Has origin and sizes corresponding to the living room in our floorplan.

map-click, map-over and map-out are actions that make the whole thing work, and here they are:

<action name=”map-over”>
    tween( layer[map-area-%1-hover].alpha, 1 );
    tween( layer[map-area-%1-available].alpha, 0 );

make the proper hover layer visible and the available layer transparent

<action name=”map-out”>
  tween( layer[map-area-%1-hover].alpha, 0 );
  tween( layer[map-area-%1-available].alpha, 1 );

reverse of map-in

<action name=”map-click”>
  for ( set(i,1), i LT 4, inc(i),
  txtadd( area, ‘map-area-‘, get(i), ‘-current’ );
  set( layer[get(area)].alpha, 0 );
  set( layer[map-area-%1-current].alpha, 1 );

go through all areas to hide the currently visible “current” layer, make the “current” layer visible for the newly selected area, and call a custom action (up-to-you) to load the new scene.

Et voila.

For a live demo, visit this page from our website. You can find the xml I used for it, here.

VR and immersive applications for the retail industry.

Modern ecommerce is as good as it needs to be, and no revolution is expected any time soon.

VR? Why should someone prefer the hassle of going through virtual aisles, pushing imaginary trolleys, when they can just easily select a checkbox on a grid filled up with convenient photos of the product, and useful descriptions.
And still, now that VR headsets are expected to be in every house very soon, it’s happening. Apparently, there is some charm in reproducing the experience of a physical shop. Also, there are definitely advantages, for example when the products need to be evaluated in a context, like furniture, for example, whose size is not very intelligible from a white-background.

It’s no coincidence then, that IKEA is leading the way, since 2016 – remember? The year of VR! – with interactive an interactive kitchen, that also let you experience the world from the perspective of a 3-feet-tall child. Not only that, in 2017 IKEA Australia launched the IKEA Virtual Reality store, a virtual space providing a unique digital experience that allows you to ‘walk’ the iconic IKEA store and browse products.

More promising is the definitely the potential of AR applied to retail, with the possibility of showing the customer additional information about the products they are evaluating in a physical shop. But that’s another story.

In general, and I know this blog is turning less and less optimistic than it should be 🙂 , I don’t see a bit future for virtual shops, as ecommerce as it is offers already a better experience than real life. It would be like having mobile phones coming with cumbersome and heavy old-school vintage receivers. But, wait…


A virtual tour of Auschwitz Concentration Camp.

As I  mentioned the quite unusual choice of presenting a CGI VR tour of the most infamous Nazi concentration camp at the 2018 edition of the Czech VR Fest, I thought it’d be worth presenting its official virtual tour, which can be found here.

The tour, put together for the Panstwowe Muzeum Asuchwitz-Birkenau by Spacery360 and ai360, makes for full a visit of the compounds, thanks to the several technically-outstanding panoramas shot and prepared by Marek Kocjan, Leszek Cooper, and Agniezska Kocjan.

There’s actually three sets of panoramas, with descriptions in Polish or English: One from the Auschwitz 1 camp, one from the Auschwitz 2 – Birkenau, and one from the incoming railroads. I think that being there is a unique meditative experience about the evils of history, and that that feeling cannot be fully appreciated from images, but this tour is as close as it gets to a physical visit, even enriched by some striking bird’s eye views of the blocks.

The effort is really impressive: more than 200 panoramas, arranged within a functional UI, complete with historical information, references to books and other material, a map, and complementary non-360° galleries. Definitely worth spending some precious learning time.

Czech VR Fest in summary.

Having to miss the most anticipated IVRPA 2018 annual conference, to be held in Tokyo of all places, the Immercode team had at least a go at the second edition of the Czech VR Fest, in our beloved Prague, last weekend.

What to say about it, in short: interesting location – a recently renewed University building, non-stop conferences, mostly in Czech, an underwhelming expo area.

We skipped the party.


I still don’t know what’s the purpose of this structure, but it looks cool.

The topics addressed covered a wide range of fields, from “Use of VR/AR/MR technology in the pharmaceutical industry”, and “CT scan retopology – 3D modeling for VR applications”, to some “The influence of virtual reality on empathy”, and “VR, sexuality and relationship”. To each his own. Halls could hardly be said crowded – and quite a few attendants were spending their time playing on their phones, AR games, that is – but the young average age of the audience revealed a promising future for the Czech VR industry.

The exhibition space was quite small, and could entirely visited in what, 5 minutes? 10, maybe. Secular visitors could enjoy the big Playstation area, some virtual Skoda driving, a VR bicycle ride, some immersive anatomy, and what else: A virtual visit to a CGI Auschwitz concentration camp. Shout out to the youngsters at Hyperbolic Magnetism for their funny Beat Saber game.

If this sounds like a lazy report, it’s because it is, but that’s also reflecting the feeling we got from more than an exhibitor. Maybe the weather was so nice that everybody was just thinking about going out to enjoy some sunlight, or maybe visitors were not as many as expected, but at 3pm some corners were empty already, some others were packing. That’s also why we didn’t bother taking unflattering pictures.

Final take: expect some nice things coming from Czech Republic in VR, but if you don’t live there, and can’t speak the language, skip the conference and check out our reports.

Browse Categories