Idea to render charts in browser using WebGL 3D

[mgrouch]

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

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

• https://github.com/Dirk--/openCPN-ECDIS
• ECDIS: S-52 vs S-101/S-401 OpenCPN/OpenCPN#2325
• vector-tile support nrenner/brouter-web#289

[mgrouch]

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

@malcolmh is the one behind

• https://github.com/OpenNauticalChart/S-57_Java_Suite

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

Just very simple sets of symbols

• https://github.com/OpenNauticalChart/josm

(easing editing OSM-database using JOSM)

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

• https://www.opendem.info/

You might also like

• https://wiki.opennauticalchart.org/index.php?title=Category:Data_Sources
• https://wiki.opennauticalchart.org/index.php?title=Category:Applications

[mgrouch]

S-101 symbology link

https://github.com/iho-ohi/S-101_Portrayal-Catalogue

[malcolmh]

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.

…

On 16 Jun 2022, at 18:09, Mikhail Grushinskiy ***@***.***> wrote: S-101 symbology link https://github.com/iho-ohi/S-101_Portrayal-Catalogue — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.

[mgrouch]

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

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

• https://wiki.openstreetmap.org/wiki/Key:seamark
• https://wiki.openstreetmap.org/wiki/Seamarks/Seamark_Tagging_Schema

[malcolmh]

On 16 Jun 2022, at 20:20, Mikhail Grushinskiy ***@***.***> wrote: Thanks! I’ve ported your code completely into Kotlin. https://github.com/mgrouch/kotlin-sandbox/tree/main/kotlin-s57

Good luck with that!

How can I add depth contours to display?

Find a source of depth data, convert into OSM format, merge with OSM DB data. The renderer will do the rest.

How the code was originally written?

From scratch

Did you use some LUA to Java converters?

No

From which files object types maps were generated?

None