Polygon hotspot zorder in CSS3d

Timescale

Schüler

Beiträge: 120

Wohnort: Netherlands

Beruf: Archaeologist, Timescale R&D

Samstag, 7. Mai 2016, 15:53

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!

Dieser Beitrag wurde bereits 5 mal editiert, zuletzt von »Timescale« (8. Mai 2016, 01:24) aus folgendem Grund: Found out it works everywhere but in CSS3d mode in FF... not worth checking out it in my opinion

Zum Seitenanfang

klaus.krpano

Administrator

Beiträge: 13 499

Dienstag, 10. Mai 2016, 14:01

Hi,

internally there are currently these 3 layers:

a WebGL layer (when WebGL is supported) - here the pano and the webgl-hotspots will be rendered
a SVG layer - here polygonal hotspots will be rendered
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:
http://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

Zum Seitenanfang

Timescale

Schüler

Beiträge: 120

Wohnort: Netherlands

Beruf: Archaeologist, Timescale R&D

Dienstag, 10. Mai 2016, 15:23

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.

Zum Seitenanfang

aircamera

Anfänger

Beiträge: 33

Sonntag, 22. Mai 2016, 10:53

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_virtuelle….8099&f=48.4325

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

Zum Seitenanfang

Timescale

Schüler

Beiträge: 120

Wohnort: Netherlands

Beruf: Archaeologist, Timescale R&D

Sonntag, 22. Mai 2016, 14:33

[code]

Zitat von »aircamera«

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.

Zitat von »aircamera«

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_virtuelle….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

Zitat von »aircamera«

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

I hope this will!

Zum Seitenanfang

aircamera

Anfänger

Beiträge: 33

Sonntag, 22. Mai 2016, 17:44

"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 :

Quellcode

<hotspot name="spotpolygon9482"
tag="polygon"
style="Polygonpisteverte"
descriptionid=""
handcursor="false"
enable="false">
    <point ath="-122.121464" atv="38.813559" />
    .
    .
    .
    <point ath="-133.538260" atv="23.246637" />
    <point ath="-114.034511" atv="43.465784" />
  </hotspot>
  <hotspot name="spotpolygon9482" devices="flash" zorder="1"/>
  <hotspot name="spotpolygon9482" devices="html5" zorder="3" zorder2="1"/>

Where did I make a mistake ?

Zum Seitenanfang

Timescale

Schüler

Beiträge: 120

Wohnort: Netherlands

Beruf: Archaeologist, Timescale R&D

Sonntag, 22. Mai 2016, 18:54

The hotspot names are the same. That could be a problem as KRpano will overwrite hotpots with the same same.

Zum Seitenanfang

aircamera

Anfänger

Beiträge: 33

Montag, 23. Mai 2016, 11:57

I found the mistake.
The code is enabled="false" not enable="false"

Thank you very much for this good idea ! It works now.

Zum Seitenanfang

Timescale

Schüler

Beiträge: 120

Wohnort: Netherlands

Beruf: Archaeologist, Timescale R&D

Montag, 23. Mai 2016, 12:49

Zitat von »aircamera«

I found the mistake.
The code is enabled="false" not enable="false"

Thank you very much for this good idea ! It works now.

Ah, yes, sorry for that! Me and my big sausage fingers... Glad to hear it's working!

Zum Seitenanfang

klaus.krpano

Administrator

Beiträge: 13 499

Dienstag, 24. Mai 2016, 19:47

Hi,

by adding - renderer="css3d" - to the <hotspot>, it's possible to place an image hotspot above polygonal hotspots in the current version.

Best regards,
Klaus

Zum Seitenanfang

jordi

Profi

Beiträge: 583

Wohnort: Barcelona

Beruf: creating ideas & coding them

Dienstag, 24. Oktober 2017, 15:10

is there any improvement her so we can have normal hotspot above polygonal without using css3d?

everpano.com step beyond 360

Zum Seitenanfang

klaus.krpano

Administrator

Beiträge: 13 499

Donnerstag, 26. Oktober 2017, 14:20

I'm working on WebGL support for polygonal hotspots - then they can be mixed in any order (via the zorder setting) with the other WebGL rendered hotspots.