[2.5D Map] Draw tour track with colors which depend on track values, e.g. elevation

[wolfgang-ch]

Track Colors

Color by elevation

Color by gradient

Additional Options

• Track legend to show the value for a color
• Map luminance to darken or brighten the map

[wolfgang-ch]

It seems that I found a very helpful description from the 2.5D map creator ("... I investigated various approaches to line rendering ..."), how lines are painted in the 2.5D map.

Until now I did not understood why it is so more complex compared than using a simple line drawing command but this description tells it.

https://blog.mapbox.com/drawing-antialiased-lines-with-opengl-8766f34192dc

Website as PDF: Drawing Antialiased Lines with OpenGL by Mapbox maps for developers.pdf

This is another description how to draw lines with OpenGL

https://blog.scottlogic.com/2019/11/18/drawing-lines-with-webgl.html

Website as PDF: Drawing Lines with WebGL.pdf

[wolfgang-ch]

The current line drawing algorithm is not perfect, there are overlapped parts in sharper curves, they disappear when zoomed in more or when zoomed out and less points are used.

The overlapped parts are also more visible when the path is less opaque.

[wolfgang-ch]

After 4 weeks of learning OpenGL, get used to the 2.5D map internal drawings and lots of try and error coding, now I saw the first light, that it works :-)

The colors seems to be inverted

For sure, there are still issues, but it works (partly :-)

[wolfgang-ch]

With a few fixes, it works :-)))

[wolfgang-ch]

Tracks can now also painted with an outline to make them better visible

[telemaxx]

2D vs 2.5D

@wolfgang-ch: it seems so, that you have now understood this complicate opengl stuff...

[telemaxx]

if we draw a compass rose at bottom left, instead of the Hexagon in the center it would look like this graphics:

than the compass would turn with the map.

[wolfgang-ch]

it seems so, that you have now understood this complicate opengl stuff...

This description https://blog.mapbox.com/drawing-antialiased-lines-with-opengl-8766f34192dc helped me a lot to understand what is going on in the two shaders but all the mathematics is still a part which I don't fully understand.

[wolfgang-ch]

if we draw a compass rose at bottom left, instead of the Hexagon in the center it would look like this graphics:

...

than the compass would turn with the map.

The hexagon is not a bitmap it is drawn with OpenGL commands https://github.com/mytourbook/mytourbook/blob/ws-map25-track-color/bundles/net.tourbook/src/net/tourbook/map25/HexagonRenderer.java but a compass rose could be an additional bitmap layer or you can draw it with OpenGL commands :-)

[wolfgang-ch]

it seems so, that you have now understood this complicate opengl stuff...

This description https://blog.mapbox.com/drawing-antialiased-lines-with-opengl-8766f34192dc helped me a lot to understand what is going on in the two shaders but all the mathematics is still a part which I don't fully understand.

What makes it also very complex is that the 2.5D map OpenGL commands are distributed over several methods and classes (files) and it's difficult to know what is currently set or not set because these commands depend on each other.

In the above hexagon example there are also some OpenGL commands which are outsourced, e.g. GLState..., _vbo.bind().
I think this is mainly done for performance reasons but makes it very difficult to understand it.

[telemaxx]

The hexagon is not a bitmap it is drawn with OpenGL commands https://github.com/mytourbook/mytourbook/blob/ws-map25-track-color/bundles/net.tourbook/src/net/tourbook/map25/HexagonRenderer.java but a compass rose could be an additional bitmap layer or you can draw it with OpenGL commands :-)

i think a bitmaplayer would zoom and move together with the map, but the compass should be fixed in size and position.
when i saw you´re Hexagon i thought this is the way to go.

This would be ideal:
https://github.com/telemaxx/vtm/blob/master/vtm-playground/src/org/oscim/test/renderer/SymbolRenderLayer.java

it.bitmap = CanvasAdapter.getBitmapAsset("", "symbols/food/cafe.svg");

but i am not sure where to put the "cafe.svg" graphics. i do not completely understand how to access icons and images in MT.

For the tests i use the star from MarkerToolkit. This is working. I have a star in the middle of the screen and this is not moving with the map, only turned and tilted.

This is like trekbuddy it did.

[telemaxx]

Only this is working, but i would prefer a svg graphics...

to be continued.

[wolfgang-ch]

i do not completely understand how to access icons and images in MT.

I had to put the shader files into the net.tourbook plugin

Here you can see how to access the shader file

mytourbook/bundles/net.tourbook/src/net/tourbook/map25/renderer/GLShaderMT.java

Lines 155 to 167 in 519e2b1

	public static int loadShaderDirectiveMT(final String file, final String directives) {
	final String path = "shaders/" + file + ".glsl";
	// final String vs = AssetAdapter.readTextFile(path);
	final URL bundleUrl = TourbookPlugin.getDefault().getBundle().getEntry(path);
	String fileURL = null;
	try {
	fileURL = NIO.getAbsolutePathFromBundleUrl(bundleUrl);
	} catch (final IOException e1) {
	e1.printStackTrace();
	}
	String vs = Util.readContentFromFile(fileURL);

[wolfgang-ch]

Art can now be created by setting the outline width

[telemaxx]

Nice Artwork!

i have tried youre tips.

For my tests i put 2 files in the shader dir:

when you're glsl is active in my program the content of that file is written correctly to console,
but when my svg or a.txt is active, only null

do i have to register new file somewhere?

[wolfgang-ch]

The AssetAdapter is accessing the vtm plugin, you have to use

       final String path = "shaders/YOUR-FILENAME";  
       final URL bundleUrl = TourbookPlugin.getDefault().getBundle().getEntry(path); 
       String fileURL = null; 
       try { 
          fileURL = NIO.getAbsolutePathFromBundleUrl(bundleUrl); 
      ...

[telemaxx]

i think i had it done that way. havent?

String file = "a.txt";  // this file exists in shaders and contain some text
final String path = "shaders/" + file;
final URL bundleUrl = TourbookPlugin.getDefault().getBundle().getEntry(path);
String fileURL = null;
System.out.println("bundlepath = " + bundleUrl.getPath() + " " + AssetAdapter.readTextFile(bundleUrl.getPath()));

try {
         fileURL = NIO.getAbsolutePathFromBundleUrl(bundleUrl);
 catch (final IOException e1) {
         e1.printStackTrace();
}
final String vs = AssetAdapter.readTextFile(fileURL);
System.out.println("fileurl = " + fileURL + " " + vs);

but anyhow i play now with markertoolkit.

sometimes when zooming and dragging, i lost orientation.
i think than would an (decent) optional compass helpful.

[telemaxx]

Compass Arrow is nicer.

[wolfgang-ch]

i think i had it done that way. havent?

You were using the AssetAdapter

[telemaxx]

Ok, that was the problem.
Now i can load a svg graphics, but it is to tiny. up scaling the svg with inkscape doesn't change it in MT.

using MarkerToolkit seems to be easier and i can easily change color and size.

[wolfgang-ch]

Support for opacity in the gradient colors

[telemaxx]

map25 toolbar filling with cool stuff!

@wolfgang-ch: Last week i tried your ws-map25-track-color branch.
since commit 8e4813c i have the problem that the track is only shown when "direction arrows" are on.
when i switch arrows off, i dont see the track. also parts of the map are missing and i get errors in the console:

18:56:32,429 [LWJGL Application] ERROR GLUtils - org.oscim.renderer.MapRenderer: finish: 	glError GL_INVALID_OPERATION (1282)
18:56:32,763 [LWJGL Application] ERROR GLUtils - org.oscim.renderer.MapRenderer: finish: 	glError GL_INVALID_OPERATION (1282)
18:56:33,111 [LWJGL Application] ERROR GLUtils - org.oscim.renderer.MapRenderer: finish: 	glError GL_INVALID_OPERATION (1282)

When i switch the arrows on again, everything is fine.

commit 519e2b1 is OK.

The last commit doesn't helps...

Test was on linux.

[wolfgang-ch]

When I run the last commit then it works with my external screen 2560x1440 which I use in my home office

When I run it with my notebook 4k screen then I get this error

@telemaxx Which OpenGL version/vendor are you using?

[wolfgang-ch]

After fixing this issue 77d32cf it is working now with the 4k display but Linux is reporting a new issue

[wolfgang-ch]

Linux is now also fixed bb4f924

[wolfgang-ch]

After fixing these issues, the NVIDIA compiler seems to be more tolerant

[telemaxx]

@telemaxx Which OpenGL version/vendor are you using?

with the commit from today its fine!

[wolfgang-ch]

map25 toolbar filling with cool stuff!

99% of the code is copied/reused from the 3D map

[wolfgang-ch]

The different track colors are now saved in the track option profiles

[wolfgang-ch]

2.5D and 3D map are using the same color profiles, when both maps are displaying the same tour values, e.g. elevation then both have the same colors

[wolfgang-ch]

A video is displaying the same color profiles better

25map-3map-color-profiles.mp4

[wolfgang-ch]

Track legend is now available

[wolfgang-ch]

Depending on the map and track colors, the legend units looks good or ugly, this can now be customized

[wolfgang-ch]

Luminance can be applied to the map

map25-luminance.mp4.mp4