You are not logged in.

Dear visitor, welcome to krpano.com Forum. If this is your first visit here, please read the Help. It explains in detail how this page works. To use all features of this page, you should consider registering. Please use the registration form, to register here or read more information about the registration process. If you are already registered, please login here.

Timescale

Trainee

  • "Timescale" started this thread

Posts: 120

Location: Netherlands

Occupation: Archaeologist, Timescale R&D

  • Send private message

1

Saturday, May 7th 2016, 3:53pm

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!

This post has been edited 5 times, last edit by "Timescale" (May 8th 2016, 1:24am) with the following reason: Found out it works everywhere but in CSS3d mode in FF... not worth checking out it in my opinion


2

Tuesday, May 10th 2016, 2:01pm

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

Timescale

Trainee

  • "Timescale" started this thread

Posts: 120

Location: Netherlands

Occupation: Archaeologist, Timescale R&D

  • Send private message

3

Tuesday, May 10th 2016, 3:23pm

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.

4

Sunday, May 22nd 2016, 10:53am

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 !

Timescale

Trainee

  • "Timescale" started this thread

Posts: 120

Location: Netherlands

Occupation: Archaeologist, Timescale R&D

  • Send private message

5

Sunday, May 22nd 2016, 2:33pm

[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_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
Is someone able to help me ? Thank you very much !
I hope this will!

6

Sunday, May 22nd 2016, 5:44pm

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

Source code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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 ?

Timescale

Trainee

  • "Timescale" started this thread

Posts: 120

Location: Netherlands

Occupation: Archaeologist, Timescale R&D

  • Send private message

7

Sunday, May 22nd 2016, 6:54pm

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

8

Monday, May 23rd 2016, 11:57am

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

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

Timescale

Trainee

  • "Timescale" started this thread

Posts: 120

Location: Netherlands

Occupation: Archaeologist, Timescale R&D

  • Send private message

9

Monday, May 23rd 2016, 12:49pm

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!

10

Tuesday, May 24th 2016, 7:47pm

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

jordi

Intermediate

Posts: 465

Location: Barcelona

Occupation: creating ideas & coding them

  • Send private message

11

Tuesday, October 24th 2017, 3:10pm

is there any improvement her so we can have normal hotspot above polygonal without using css3d?
everpano.com step beyond 360

12

Thursday, October 26th 2017, 2:20pm

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.

jordi

Intermediate

Posts: 465

Location: Barcelona

Occupation: creating ideas & coding them

  • Send private message

13

Thursday, October 26th 2017, 6:27pm

*thumbsup* *thumbsup*
everpano.com step beyond 360