Polygon hotspot zorder in CSS3d

  • Hi everyone,

    (See edits below)

    I'm developing a "plugin" tool-suite for displaying user activity stats based on viewing data recorded and displayed in-pano. I have two modes at this moment, a "heatmap" mode and a grid mode. The heatmap just uses a alpha image, transparency and size to convey activity, but the grid uses transparency and color via hotspot polygons.

    As you can see in the picture, the image hotspots in the pano overlap the polygons and no matter what I do to the "zorder", I can't get the polygon to go in front of the image hotspot. The grid is loaded and generated dynamically and most of the images are loaded directly from the XML, but the heatmap which is also generated dynamically works fine.


    My question, Is it possible to somehow make these polygons behave according to the "zorder" attribute? Perhaps by nesting it somehow?

    EDIT : Seemingly the problem does not occur on Safari on either OSX or IOS.. And after some more testing I found that the problem occurs when KRpano is run in CSS3d mode not webGL...

    For some reason bloody FF has rendered itself unable to initiate a WEBGL session on my main dev system... I hate mozilla.....

    Reverted back to FF 44 that does not blacklist my GPU... and now the zorder is good again... So in essence, the zorder with polygons only goes wrong when in CSS3d mode. I don't know if that is worth while fussing about...

    Thanks anyway!

    5 Mal editiert, zuletzt von Timescale (8. Mai 2016 um 01:24) aus folgendem Grund: Found out it works everywhere but in CSS3d mode in FF... not worth checking out it in my opinion

  • Hi,

    internally there are currently these 3 layers:

    1. a WebGL layer (when WebGL is supported) - here the pano and the webgl-hotspots will be rendered
    2. a SVG layer - here polygonal hotspots will be rendered
    3. a HTML layer - here the CSS3D hotspots and the 2d <layer> elements will be rendered


    Mixing the order elements is always only possible within one layer.

    See the hotspot 'renderer' setting for selecting a rendering method for a hotspot:
    https://krpano.com/docu/xml/#hotspot.renderer

    But I'm working on supporting the polygonal hotspots also via WebGL - then they could be mixed again with other by WebGL-rendered hotspots.

    Best regards,
    Klaus

  • I figured it would be something like that.

    Well, I'm not really bothered by it at this point. I suspect most users will have webGL capable devices anyway and the order of the layers at this time works just fine for what I need it to do.

    If, in the future, polygons will also be rendered via webGL, then it probably work automatically for me as my hotspot scripts all provide zoders anyway.

    Thanks Klaus.

  • Does this mean that it's not possible to put a spot above a polygon using this version of krpano ?

    Here is a temporary link to the tour i'm working on : http://www.aircamera.fr/visite_virtuelle/VTT/360.html
    As you can see I placed all the spotpoints a little bit off the polygons. Otherwise, we can't click on them.
    But I have some panoramas where there will be polygons everywhere. So I can't place my pointspots on the side. I have to find another solution...
    http://www.aircamera.fr/visite_virtuel….8099&f=48.4325

    Is someone able to help me ? Thank you very much !

  • [code]

    Does this mean that it's not possible to put a spot above a polygon using this version of krpano ?

    It means that in browsers that support webGL, image hotspots will always be rendered behind the polygon. You can't use zorder to make a hotspot appear in front of a polygon. if the browser only does CSS3D (which you ideally do not want) It will be the other way around.

    Here is a temporary link to the tour i'm working on : http://www.aircamera.fr/visite_virtuelle/VTT/360.html
    As you can see I placed all the spotpoints a little bit off the polygons. Otherwise, we can't click on them.
    But I have some panoramas where there will be polygons everywhere. So I can't place my pointspots on the side. I have to find another solution...
    http://www.aircamera.fr/visite_virtuel….8099&f=48.4325

    Assuming that everybody is webGL compliant and that hotspots will always be rendered behind hotspots this could be a problem, but not nessesarily. You can still click a hotspot that is behind a polygon. If the polygon is set to enable=false, the mouse event will simply go to the next object in line. The only thing you have to make sure of is that the polygons are transparent enough to see the hotspots

    Is someone able to help me ? Thank you very much !

    I hope this will!

  • "I hope this will!"
    Of course it helps ! Thank you !
    This is a good idea. I would prefer manage the position with zorder, but your idea sounds good to me !
    However, when I try to add enable="false" it does't change my problem yet :
    Here is PTP original code :


    Where did I make a mistake ?


  • <style name="pathway" edge="center" capture="false" enabled="true" height="prop" renderer="css3d" url="%SWFPATH%/add_hotspot/picture/icon/pathway_Icon.gif"
    distorted="true" type="image" visible="true" width="60" zoom="true" zorder="5" alpha="0" onloaded="delayedcall(.5, tween(alpha,1,1.3,easeoutback););"

    />

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!