OpenNauticalChart/josm

Idea to render charts in browser using WebGL 3D

Opened this issue · 8 comments

mgrouch commented

I initially explained it here OpenCPN/OpenCPN#2714

Since then I've made better progress on this idea.
The idea is to render S57 ENC vector charts in browser natively using WebGL.
It actually looks quite promising. I took S57 parser and render in Java from JOSM.
https://www.javatips.net/api/josm-plugins-master/seachart/src/s57/S57dec.java

I've converted it into Kotlin. (Both parser and renderer which uses AWT canvas).
Rnderer is coded to render all objects specified in chart. (Not by icons, but by actual code writing on canvas)
See here: https://github.com/mgrouch/kotlin-sandbox/tree/main/kotlin-s57
Parser is very very close to be running in browser using Kotlin JS.
I've tested it a little on JVM already.
Renderer should be possible to port from AWT canvas to WebGL in Kotlin).
Might be using https://github.com/revaultch/gwt-awt (converted to Kotlin)

Caching for performance in browser can be handled using IndexedDB of browser.
Might use: https://github.com/JuulLabs/indexeddb
or something else

Conversion of depth contour lines into 3D mesh using triangulation libraries in Kotlin can be done with:
https://github.com/slaviboy/DelaunatorKotlin
https://github.com/ricardomatias/delaunator

3D rendering or 2D with WebGL:

https://github.com/Pozo/threejs-kotlin
https://github.com/markaren/three-kt-wrapper

https://github.com/openrndr/openrndr

I've played with WebGL and 3D rendering of reliefs with it too in Kotlin
https://github.com/mgrouch/kotlin-sandbox/tree/main/kotlin-webgl

Rest of UI can be done using kvision https://github.com/rjaros/kvision

What do you think? I'll code more but, more people helping would be better.
Kotlin and IntelliJ really make it way easier than anything I could think of.

Thanks

Dirk-- commented

Hi Mikhail,
would love to see a browser based vector-tile-nautical-chart-renderer!
see also

mgrouch commented

I was able to port JOSM S57 code to Kotlin and run it on JVM.
See code here: https://github.com/mgrouch/kotlin-sandbox/tree/main/kotlin-s57

@Dirk--
Thanks for the IHO symbology link. JOSM S57 is using OSM symbology and that code needs to change to render proper IHO symbols instead. SVGs make it easier to render it.

I've stopped short at completing of port to Kotlin JS. So it is Kotlin JVM so far. However it's not that much left to
make parser to run by JavaScript compiled with Kotlin JS. Renderer needs to change to render proper symbology.
Also I do not see that current renderer does depth contours. It does just land borders. That needs to be worked out too.

Kotlin code does look much nicer and concise compared to Java. And it can be compiled into JavaScript to be run in browser
or nodeJS.

Dirk-- commented

@malcolmh is the one behind

(wich is the renderer serving raster-tiles to openseamap.org)

Just very simple sets of symbols

(easing editing OSM-database using JOSM)

OSM-database does not hold any depth contours (unwanted feature). To get open-data, try

You might also like

malcolmh commented
mgrouch commented

The S-57 & S-101 portrayals are the “simplified” symbols that were defined for use in very basic ECDIS equipment. A browser-based chart display is not limited in the complexity of displayed images, so the much clearer portrayals defined in S-4/INT-1 for paper charts should be the candidate for such a project.. That is what I use in my renderer.
…

Thanks! I’ve ported your code completely into Kotlin.

https://github.com/mgrouch/kotlin-sandbox/tree/main/kotlin-s57

How can I add depth contours to display?

How the code was originally written?
Did you use some LUA to Java converters?
From which files object types maps were generated?

thanks

Dirk-- commented

S-101: Most up to date and official registry: https://registry.iho.int/portrayal/list.do

OpenSeaMaps are generated from objects out of OSM-database within namespace 'seamark:', see

malcolmh commented