[2.5D Map] Show direction arrows similar like in the 3D map

[wolfgang-ch]

The current direction arrows are using bitmaps which has UI limits when displayed rotated.

This very first approach is using a circle instead of an arrow 2.5D/3D symbol, this will be the next step but first learning of OpenGL skills is needed

[wolfgang-ch]

After many many hours and days of try and error, I could finally setup a dev environment to easily edit/test the vtm sources

MT commit
[2.5 Map] Using "vtm-parent" plugin for vtm development 7c01221

VTM commit
[2.5D Map] "vtm-parent" plugin setup for vtm development mytourbook/vtm@db276c4

[wolfgang-ch]

Finally, now static symbols are painted on the tour path but the more complex math part for me is coming, that the direction arrows are showing in the correct direction

Video_2022-08-13_143945_edit.mp4

[wolfgang-ch]

Direction arrows are now working :-))))

What helped me a lot for the math, examples in the internet, e.g.

• https://stackoverflow.com/questions/31462791/find-coordinates-to-draw-arrow-head-isoscele-triangle-at-the-end-of-a-line#answer-31469874
• https://stackoverflow.com/questions/51369452/get-coordinates-of-arrow-of-a-line-point
• https://math.stackexchange.com/questions/963331/finding-coordinates-of-cap-of-an-arrow

m25-arrows_edit.mp4

But there are some issues

• Arrows have not yet the same size (easy to fix)
• Some very big arrows, black areas (propably not very easy to fix)
  

[wolfgang-ch]

Implementing and testing 2.5D map features is sometimes creating nice effects which were not intended

m25-arrows.mp4

[wolfgang-ch]

Should this be the next direction arrow ?

next-direction-arrows.mp4

[telemaxx]

looks like a Paperplane, nice.

the current position could be an animated bicycle or an walking man. instead of the point.

https://m.youtube.com/watch?v=f3Cr8Yx3GGA

[FJBDev]

looks like a Paperplane, nice.

the current position could be an animated bicycle or an walking man. instead of the point.

And the MT user will choose their favorite icon in the MT preferences 😄

[wolfgang-ch]

looks like a Paperplane, nice.
the current position could be an animated bicycle or an walking man. instead of the point.

And the MT user will choose their favorite icon in the MT preferences 😄

... or can add their blender file

[FJBDev]

... or can add their blender file

That seems advanced for a "normal" user

[wolfgang-ch]

Paperplane arrows are now working :-)

Fin height = 0

m25-arrows-no-fin.mp4

Fin height > 0

m25-arrows-with-fin.mp4

Currently the fins have a typical 3D issue, z-fighting, the marked fins should not be visible, they are from the arrows which are behind the others.

[wolfgang-ch]

Z-Fighting is now fixed

@telemaxx Can the "old" direction arrows now be replaced with the new arrows ?

[wolfgang-ch]

With one middle fin it looks like an area of sharks

[telemaxx]

@telemaxx Can the "old" direction arrows now be replaced with the new arrows ?

Yes of course, you're arrows/sharks are looking a lot cooler than my arrows
and they are also visible when the map i tilted a lot.

[wolfgang-ch]

The sharks are also in the water

[wolfgang-ch]

The arrow head is set to be +1 higher than the arrow tail, when both have the same z-axis value and are overlapping, then the overlapping part was flickering, caused by the concurrent fragment shader cores.

[wolfgang-ch]

The direction arrow settings are now saved in the track option profiles

Video_2022-09-01_154548_edit.mp4

[wolfgang-ch]

There are a few track color issues when the opengl depth buffer is activated for the track. It seems that the line shader algorithm is not supporting track opacity:

• Track corners are flickering when navigating the map
• Track inner color is opaque for the direction arrow wings but the background is not opaque
• Direction arrow wings are painted above the track outline color but should be below

map25-issues.mp4

In the video it was not visible that the track inner color in not opaque for the background

[wolfgang-ch]

Many direction arrows

[telemaxx]

good 3D Benchmark.

how was the Performance, could you turn and move in Realtime?

[wolfgang-ch]

I recorded this video with 30 fps and it is smoothly

m25-performance.mp4

Last week I saw this video where each item is also moved and is not static as the direction arrows

https://www.youtube.com/watch?v=kuy17LVDESk&list=PLRL3Z3lpLmH1EF4g__4gPevJhTArzy0k5

It also performs very good with all my tours

[wolfgang-ch]

On the road to a new feature there are sometimes interresting effects.

m25-dir-arrows.mp4

[wolfgang-ch]

The animation speed can now be selected

m25-animation.mp4

When the 2.5D map is losing the focus, then the framerate will drop to 1 fps otherwise the selected fps is used. Dropping the fps to 1 will reduce the power consumption (and the pc vent could also stop earlier)

Power consumption with 30 fps

Power consumption with 1 fps

Is there a need to run animations when the 2.5D map do not have the focus ?

[wolfgang-ch]

With https://synthclipse.sourceforge.net/ the shader file editor (c++ editor) has similar features as when it would be a java file, HOWEVER this tool is not compatible with Mylyn tasklist, both need the same plugin but with different versions, so I'm using a separate Eclipse instance

[wolfgang-ch]

When profiling the OpenGL drawing commands then the directions arrows are consuming the least performance, most is consumed by painting the map

[wolfgang-ch]

This animated triangle is now using a different approach than the prevous animated arrows. The triangle position is now computed in the shader (GPU) and not in the CPU. This allows now to move different models on the tour track.

It took me some day's to finally get a working solution for the first step 😄 but there are additional steps, correct direction, smooth moving, ... 👷

m25-track-animation_edit.mp4

[FJBDev]

Nice 👍

[wolfgang-ch]

One small step further

m25-rotated-triangle.mp4

[wolfgang-ch]

Now it looks better, OpenGL has invinite possibilities, when you understand it

m25-rotated-triangle-2.mp4

[wolfgang-ch]

With my first blender experience I could change the color/texture of the skateboard to be more colorful

Original:

Modified:

m25-animation.mp4

[wolfgang-ch]

The map can now be synched with the animated position (the map is centered to the animated model). This is not yet perfect and fully smooth but better than before 😉

m25-animation-sync-pos.mp4

[wolfgang-ch]

The map can now be zoomed in that not the whole tour is fully visible, this was currently a limitation.

The model renderer can now smooth out e.g. page up/down or mouse-wheel events in the map player. So in this video the model is smoothed out with several page up events,. It was also needed, that the map position is smoothed out.

m25-animation.mp4

[wolfgang-ch]

The model is now moving very smoothly even when this video do not look always smoothly.

The map location is now also automatically adjusted to the model position which is centered in the map after the animation has ended.

There are still issues but it's now better than before 😄

m25-smooth.mp4

[wolfgang-ch]

Now with autoplay 😄

• The timeline control sets the relative position of the moving model, when the slider is moved then the animation takes 1 second until the selected position is reached. When the timeline control is selected, then autoplay mode is disabled.
• The speed control can set a positive speed, slider to the right side or negative speed, slider to the left side. On the right side of the slider there is a green or red indicator for the speed. Just before the end of the video, I pressed the space key which sets the speed slider to 0. When the speed control is selected, then autoplay mode is enabled.

The next step will be to show the moved model in the center of the map when in autoplay mode.

m25-autoplay.mp4

[wolfgang-ch]

The autoplayed model can now be centered in the map view.

m25-flight.mp4

[wolfgang-ch]

The plane is now turning better

m25-flight2.mp4

[wolfgang-ch]

With photos is looks more realistic however it looks jerky in the video but it was not on the screen. I recorded it with my NVIDIA GeForce RTX 2070 SUPER graphics card.

m25-flight-photo-3.mp4

Here are the protagonists from this flight, pilot Martin and me

[FJBDev]

The more I follow what you are developing here, the more it makes me think of a feature I always had in the back of my mind:

• Be able to take 2 identical tours (or more ?) and replay them live to compare them visually. Below is what my vision is of it:
  Example: When I run or bike a route that I do often, I'd like to compare of where I lost time and where I gained time for each tour

Note in highlighted red, the instant comparison of which tour is ahead

[wolfgang-ch]

I've never thought, that the 2.5D map should be displayed multiple times which is the reason why this map can be currently displayed only once and contains many static fields for just one instance. OpenGL can have multiple views but this would be time consuming to implement it like any other OpenGL code.

An alternative (but not so cool) could be to compare tours within the tour chart, they can be displayed multiple times for different tours, you just need a player for the tour chart similar like the new map player.

One of my next steps is that the model movement speed is according to the distance or time, currently it is according to the optimized track which skips time slices, except when you zoomed in very very close.

[wolfgang-ch]

I'm also using this track to test the moving model and here you can see how the speed is currently implemented and it's problems:

When a distance between 2 points is larger then the speed is higher and vice versa, on a "normal" track this is not so good visible that you can recognize it.

With the tour editor I modified an existing tour to have less points which can sometimes be easier to debug it.

m25-speed.mp4

[FJBDev]

I've never thought, that the 2.5D map should be displayed multiple times which is the reason why this map can be currently displayed only once and contains many static fields for just one instance. OpenGL can have multiple views but this would be time consuming to implement it like any other OpenGL code.

Maybe then having multiple objects on a single 2.5D map ? A 2D map would be fine too

An alternative (but not so cool) could be to compare tours within the tour chart, they can be displayed multiple times for different tours, you just need a player for the tour chart similar like the new map player.

Like you say, it's not so cool because a map, I think, is more easy for a user to see what the current location is than on a graph/chart. But having both the chart (bottom of my screenshot) and the map (top of my screenshot) would help

[wolfgang-ch]

GLTF models can now be selected in the UI when they are setup. I'm planning to set these 3 bicycles as being packaged into MT

Interresting is to see, tha the Penny-farthing model is also changing slightly the map colors, I've not yet recognized it until now. This model needs also a little bit more time to be loaded, therefor there is a delay when it is selected.

m25-model-selection.mp4

Map model edit dialog

[wolfgang-ch]

When a model is imported, then mostly it is not looking in the forward direction and the head is not at the correct position, this can be adjusted in the import dialog. With the Live update feature it can be easily adjusted.

m25-live-update.mp4

[wolfgang-ch]

Test Animated Model

The animated model is now merged into the main branch and can be tested 😎

Here are some hints and known issues

Start Animation

Currently the animation can be started only this way in the Track Options slideout

• Show direction arrows
• Animate

Changing this procedure is on my todo list at the top

Center Model

The model can be centered in the map when the map sync action is selected

Hidden Model

During loading of the map tiles, the model can be flickering or is partly hidden

Model Issues

• The model head position cannot be positioned correctly in all cases, in this case the model is moved to the side and not forward/backward
• More complex models can have textures, transparency or color issues. The high wheeler looks good but not the wood plane/truck

Re-live

Is not working properly

Background FPS

Is not working properly when enabled

[telemaxx]

Breaking News: Monster Skateboard in Hanover!

[wolfgang-ch]

Monster Skateboard in Hanover!

This morning I increased the model max size from 1'000 to 10'000 to be able to can see more details

[wolfgang-ch]

This is a monster skateboard with the model size of 2000, so there is room to the max.

That the model is better visible, the map tilt rotation axis can be adjusted which I did for this picture

There is a nice effect when the map model and direction arrows are displayed at the same time because the skateboard is slightly bumping up and down.

m25-model-and-arrows_edit.mp4

[wolfgang-ch]

I'm using the FastStone capture tool to record the videos. Until now I had to convert the recorded video from WMV format into MP4 by using an external tool, I used https://www.freeconvert.com/wmv-to-mp4

Since a few days, this capture tool can now also save directly into the MP4 format 😎
https://www.faststone.org/FSCaptureDetail.htm#History

[FJBDev]

I've used several times the open-source project OBS Studio and i had a good experience with it

[wolfgang-ch]

The model + model cursor can now be displayed/hidden in the tour player view

The model turning is now more realistic, the higher the turning angle the more it turns, before it was a static value. It was not so complicated to implement it, than what I first thought.

mytourbook/bundles/net.tourbook/src/net/tourbook/map/player/MapPlayerManager.java

Lines 994 to 1003 in ed2ded3

	final float angleDiff = setModelAngle_Difference(p21Angle, _previousAngle);
	final float angleDiffAbs = Math.abs(angleDiff);
	if (angleDiffAbs > 0.1) {
	// the next angle is larger than the min smooth angle
	// -> smoothout the animation with a smallers angle
	final float modelTurningAngle = (float) (angleDiffAbs * 0.01 * _modelTurningFactor);

m25-smooth-turning.mp4

[wolfgang-ch]

re-Live is now partly fixed

• Flickering when zoomed in/out
• Track painting is almost correct

The painted track is almost correct when just one tour is displayed but with many tours are displayed then the painted track is more and more wrong

What will not be fixed is the jerky painting of the track this would need a whole new track painting algorithm -> too complicated

m25-re-live.mp4

[wolfgang-ch]

re-Live stress test with all my tours

m25-re-live-all-tours.mp4

[wolfgang-ch]

Finally, this feature is now production ready 😎

[wolfgang-ch]

Creating an installable new version fails currently because the glTF model files are in the product files but are not expanded/saved where they can be loaded