You are not logged in.

Tourvista

Intermediate

  • "Tourvista" started this thread

Posts: 258

Location: Leicester UK

  • Send private message

1

Wednesday, October 5th 2016, 12:55pm

Distorted hotspot shows a thin black line around

Hello,

Thank you very much in advance for helping.

I've got the following virtual tour:

Find the hazards

Basically you need to click in the hazards and after that the hazard is either fixed or removed.
You can test this by clicking the hose on the floor, next to the big box filled with metal bits.

In order to achieve this I add several distorted hotspots. In the case of the hose, I add 3 images:

http://clients.tourvista.co.uk/vt/mintra…rds/safe_46.png

http://clients.tourvista.co.uk/vt/mintra…ds/safe_46b.png

http://clients.tourvista.co.uk/vt/mintra…ds/safe_46c.png


They're 1000x1000px PNG-24 with transparency.

You can see the XML file here
See underneath a little summary of the actions I use to add the images:

Source code

1
2
3
4
...        delayedcall(2, add_safe(%1); adjust_safe(%1));...
    <action name="add_safe">        addhotspot(safe_%1);        set(hotspot[safe_%1].alpha,0);        set(hotspot[safe_%1].ath,);        set(hotspot[safe_%1].capture,false);        set(hotspot[safe_%1].distorted,true);        set(hotspot[safe_%1].enabled,false);        set(hotspot[safe_%1].handcursor,false);        set(hotspot[safe_%1].keep,false);        set(hotspot[safe_%1].url,%HTMLPATH%/files/images/hazards/safe_%1.png);        set(hotspot[safe_%1].visible,false);        set(hotspot[safe_%1].zoom,false);        set(hotspot[safe_%1].zorder,0);    </action>
    <action name="adjust_safe">        ...        if (%1 == 46, hs_l(46); add_safe(46b); hs_f(46b); add_safe(46c); hs_d(46c));        ...    </action>
    <action name="hs_f">  set(hotspot[safe_%1].ath,0);   </action>    <action name="hs_d">  set(hotspot[safe_%1].atv,90);  </action>



As you can see the problem is that there is a thin black line around each image.

I tried save the images in a different shape, format, and smoothing the edges, but nothing worked.

Any ideas how can I remove that line?




Update:

I managed to to get rid of the black line by using:


Source code

1
        set(hotspot[safe_%1].renderer,css3d);



Everything looks great in Chrome, but in Firefox some of the hotspot images disappears when they touch the edge of the browser.






I understand that's a well know Firefox CSS3D rendering bug, so there is nothing I can do abut it. Back to the original problem, the black thin line.

Thanks!

This post has been edited 1 times, last edit by "Tourvista" (Oct 5th 2016, 1:18pm)


2

Wednesday, October 5th 2016, 1:58pm

Hi,

the problem seems to be the alpha channel storage in the png.

It's about 'pre-multipled-alpha' or not - as it seems the image border alpha blends into the black background color of the image.

Maybe try keeping some image content around the alpha-channel-mask to avoid that.

Beside of that - using such large images with only a very little content is waste of texture memory. Consider generating a hotspot where most of the image is part of the content - e.g. with methods like here:
Example/Tutorial - Extract a Distorted Hotspot from any kind of Pano Image (with perfect pixel alignment)

Best regards,
Klaus

Tourvista

Intermediate

  • "Tourvista" started this thread

Posts: 258

Location: Leicester UK

  • Send private message

3

Wednesday, October 5th 2016, 2:29pm

Thanks for your quick reply Klaus

I was afraid you were going to point to the method explained in that post :-)

You're correct. The way I do it is a waste, but It was done long time ago. The client has requested to update the virtual tour to make it work 100% in HTML5 and I was hoping that I could do that without re-writing the way it works.

It seems that I don't have any other choice though.

Thanks,

Rafael

4

Wednesday, October 5th 2016, 2:39pm

It seems that I don't have any other choice though.

Try extending the image content over the mask - e.g. like in this image:

Tourvista

Intermediate

  • "Tourvista" started this thread

Posts: 258

Location: Leicester UK

  • Send private message

5

Wednesday, October 12th 2016, 11:46am

Thanks for your help.

At the end I decided to use your distorted hotspot technique, which wasn't that hard at all.

Cheers