Virtual Tour & links rendering

[PanierAvide]

Describe the feature

As now, Virtual Tour Plugin offers two way to render links :

• 3D : a 3D model of arrow, placed by default at the bottom of a picture
• Markers : a more flexible representation, placed using GPS coordinates relatively to current picture, but mostly around the vertical horizon

If one want to do a rendering similar to this one, it may not be possible at the moment:

Because :

• If in 3D mode, arrows are at correct position in image, but are not fully configurable (no projected circle around for easier clicking, no way to change 3D symbol)
• If in marker mode, arrows can be configured more freely, but can't be put (as far as I know) grouped together at the bottom of the picture

Two possibilities to achieve such feature :

• In 3D mode : allow to define a custom 3D model for the arrow (possibly many to choose link per link a different symbol), and add a circle hover effect for easier clicking on arrow
• In markers mode : allow an easy positioning relatively to bottom of the picture

Alternatives you've considered

• Markers mode offers a markerVerticalOffset parameter to compensate for viewer position relatively to horizon, but doesn't seem to be usable to group markers at the bottom (or maybe I missed something during my tests 😅 ).
• Arrow styles can already be changed (color, size, hover color), best I achieved is this, but users still find arrows too thin to click. Feedbacks suggested a triangle shape would be a simple replacement and thick enough to ease clicking.
• Using a approach similar to Google Street View (described in an issue there) where you can click wherever in the picture and be directed to corresponding nearest image, or a more far one. I guess this could be implemented without any changes in PSV (a marker updated on mouse move, and computations to determine what picture would be best suiting). That needs quite a good level of comprehension of WebGL and 3D management, which I don't have 😅
• Managing arrow rendering outside of PSV, as a classic HTML overlay on the bottom of the viewer. This could be possible in the current state of PSV, as all events to detect rotation are available, as well as functions to change picture. I guess that would be dommage to not use current PSV navigation possibilities as they cover 90% of the needs.

Additional context

A vast UI rework of the Panoramax/GeoVisio web viewer will occur relatively soon, one of the demanded changes concern the navigation between pictures. We have to make it the simplest and easiest possible to use by a wide range of users, on both mobile and PC. So I'm looking for solutions to do so, and I'm a bit restricted by current possibilities, leading to this feature/issue 😁 I don't realize how much of work or changes that would need, paid development is still a possibility on our side.

[mistic100]

I don't think I will be able to provide any acceptable solution, given the plugin is more of a general purpose and obviously not oriented to street-viewing.
To achieve the desired rendering it is not a mater of allowing to change the arrow 3D model or change the position, it requires to develop something completely new (mapilliary uses standard SVGs with CSS transforms).

Give more options to the markers will not help either, it will not change the facts that markers behind the camera won't be visible.

So I guess the solution is "Managing arrow rendering outside of PSV" but do it as a new rendering mode in the plugin.

[PanierAvide]

Thanks for your feedback. How could we called this new rendering mode ? I can start working on a PR that could extend the plugin to do so.

[mistic100]

• flat
• arrows
• immersive
• ...

[PanierAvide]

Before going into something too deep, I would like to tests a few things, especially replacing the 3D model of the arrow. I can see that there are two files for the arrow:

• Arrow itself
• And its outline

And both are available in 2 formats:

• STL (which I guess I can edit using Blender)
• A JSON file (probably the Three.js JSON scene format ?)

What is the process to pass from STL to JSON file ? A quick search through the repo and the web lead to nothing 😅 Thanks for your help 😃

[mistic100]

• goto https://threejs.org/editor/
• import STL model
• select model
• export geometry

the weird orientation and huge size is because I created the model with SolidWorks, this is handled here

Photo-Sphere-Viewer/packages/virtual-tour-plugin/src/constants.ts

Lines 38 to 43 in b274a94

	const scale = 0.03;
	const rot = Math.PI / 2;
	arrow.scale(scale, scale, scale);
	arrow.rotateX(rot);
	arrowOutline.scale(scale, scale, scale);
	arrowOutline.rotateX(rot);

[mistic100]

I have experimented with CSS3DRenderer

(the two arrows are hardcoded, now it needs to be wired with the plugin and tweak the rendering parameters)

[PanierAvide]

Looks very promising ! Thanks for spending time on this issue. Just to give some food for thoughts in the process, this is what we are trying to implement in GeoVisio/Panoramax (based on our UX designer material) :

I guess this implementation you're trying would allow to have different symbol for each link ? Let me know if I can be of any help on this ☺️

[mistic100]

@PanierAvide would you have time to test the virtual-tour-arrows branch ?

Currently it replaces the previous 3D arrows, I don't know if I will keep the old ones.

In the plugin configuration :

• arrowStyle still allows to customize the default arrows (image or element + size) the default arrow is the same as the "markers" mode (SVG with hover effect)
• arrowsPosition currently allows to change the minAngle and maxAngle (if you set them equal, the arrows won't tilt, like in Mapilliary), perhaps more options are needed here

In the link configuration :

• arrowStyle is still here (same options as the default one)
• you should be able to place the arrows as expected with linkOffset (yaw + pitch + depth)

arrowStyle.element can be a callback the build a new element for each link, I suppose it is easier than overriding the element for each link. But of course if you use simple PNGs, just define arrowStyle.image on each link.

[PanierAvide]

This is looking very good ! The positioning of arrows is far better, they are always visible even in a very upper or lower angle.

Offered parameters are really nice, and fit perfectly our needs 💯

I have a bug though (tested on Firefox 123.0, under Linux), where mouse drag doesn't move anymore the sphere, but a tile of image instead. This happens if mouse start dragging around arrows :

[PanierAvide]

Hi, do you have any updates on this topic ? Do you want that I look out on the drag issue ?

[mistic100]

I have no bandwidth to work on PSV until June. Yes you can look at this specific bug if you want. I am not sure I pushed all my last changes though (shame on me)