{"id":1627,"date":"2025-09-01T21:25:42","date_gmt":"2025-09-02T01:25:42","guid":{"rendered":"https:\/\/jausoft.com\/blog\/?p=1627"},"modified":"2025-09-01T21:25:42","modified_gmt":"2025-09-02T01:25:42","slug":"next-steps-for-graph-jogamp-gamp-i","status":"publish","type":"post","link":"https:\/\/jausoft.com\/blog\/2025\/09\/01\/next-steps-for-graph-jogamp-gamp-i\/","title":{"rendered":"Next Steps for GraphUI in JogAmp &#038; Gamp (I)"},"content":{"rendered":"<p>After the release of <a href=\"https:\/\/jogamp.org\">JogAmp<\/a> <a href=\"https:\/\/jogamp.org\/wiki\/index.php?title=SW_Tracking_Report_Objectives_for_the_release_2.6.0\">2.6.0<\/a> and the launch of <a href=\"https:\/\/jausoft.com\/cgit\/gamp.git\/about\/\">Gamp<\/a> earlier with its initial Graph code, I need to recapitulate the existing Graph and <a href=\"https:\/\/jausoft.com\/blog\/tag\/graph_type_rendering\/\">GraphUI<\/a> code base within <a href=\"https:\/\/jogamp.org\/jogl\">Jogl<\/a> to evaluate our next steps including its <a href=\"https:\/\/jausoft.com\/cgit\/gamp.git\/about\/\">Gamp<\/a> implementation.<!--more--><\/p>\n<p><a href=\"https:\/\/jogamp.org\">JogAmp<\/a>&#8216;s <a href=\"https:\/\/jogamp.org\/jogl\">Jogl<\/a> contains the Java code-base of <a href=\"https:\/\/jausoft.com\/blog\/tag\/graph_type_rendering\/\">GraphUI<\/a> and <a href=\"https:\/\/jausoft.com\/cgit\/gamp.git\/about\/\">Gamp<\/a> shall evolve into its native C++ companion. Both are considered cross-platform, while only Gamp is able to be fully compiled down to the metal and executed w\/o virtual machine while still capable of serving web browser via WebAssembly (yes, this involves a virtual machine again).<\/p>\n<h3>Jogl&#8217;s current Graph Implementation<\/h3>\n<ul>\n<li><em>Resolution independent NURBS curves rendering<\/em> via GPU shader (the base), including\n<ul>\n<li>OutlineShape w\/ quadratic curves and lines<\/li>\n<li>Delaunay tessellation<\/li>\n<li>GPU vertex- and texture-coordinate pipeline of OutlineShapes into Region objects<\/li>\n<li>GPU shader management for various use-cases\n<ul>\n<li>Monochrome, colorchannel, (streaming) textures, per-pixel clipping, ..<\/li>\n<li>Antialiasing 2nd pass using a multisample framebuffer object per region of a OutlineShapes<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<li>Font support\n<ul>\n<li>Typecast TTF font parser, developed by David Schweinsberg and patched (enhanced tables, bug fixes)<\/li>\n<li>Streaming in TTF font files<\/li>\n<li>Single Glyph to OutlineShape conversion<\/li>\n<\/ul>\n<\/li>\n<li>Text shaping, i.e. layout unicode text string to a list of OutlineShapes (Glyph Data)\n<ul>\n<li>This includes kerning, orientation, etc and rudimentary output validation<\/li>\n<li>Implementation is focused on performance, i.e. reuses pre-processed tessellated OutlineShapes, which will be scaled and translated via the usual model-matrix into world- or any other sub-space.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h3><\/h3>\n<p>&nbsp;<\/p>\n<h3>Jogl&#8217;s current GraphUI Implementation<\/h3>\n<p>GraphUI&#8217;s code base has been designed and implemented in a test- or design-driven manner, step by step &#8211; and is subject to be changed.<\/p>\n<p>A Shape represents the basic node, independent from Graph, while GraphShape is its Graph derivation.<\/p>\n<p>A Shape holds its pointer and keyboard listener and owns its dedicated translation, scale, rotation and zoom parameters as well its cached 4&#215;4 counterpart matrix.<\/p>\n<ul>\n<li>Simple DAG scenegraph w\/ Shape and Group within a Scene\n<ul>\n<li>The usual setup, however, it uses a simple projection + model-view matrix combo instead of a dedicated camera view-matrix (<em>TODO?<\/em>).<\/li>\n<li>Ray picking<\/li>\n<li>Pointer\/Mouse event propagation inside out w\/ coordinate transformation<\/li>\n<li>Shapes are reusable (DAG) and the OutlineShape data is cached for re-usage for performance<\/li>\n<li>Lacks cached world-matrix or model-view matrix for e.g. picking (<em>TODO<\/em>)<\/li>\n<\/ul>\n<\/li>\n<li>Layout (w\/ CSS semantics)\n<ul>\n<li>BoxLayout<\/li>\n<li>GridLayout<\/li>\n<li>Alignment, Gap, Margin and Padding<\/li>\n<\/ul>\n<\/li>\n<li>Shape and (layout) Group implementations\n<ul>\n<li>Label, a text string label<\/li>\n<li>Button, a multi-state w\/ text for each<\/li>\n<li>ImageButton, a single texture button<\/li>\n<li>TexSeqButton, a texture streaming button<\/li>\n<li>MediaButton, a streaming video texture button<\/li>\n<li>GLButton, a full GLEventListener button to embed OpenGL visuals<\/li>\n<li>HUDShape, a head-up-display shape usable for custom tool-tip implementations<\/li>\n<\/ul>\n<\/li>\n<li>Widgets, i.e. Shape\/Group w\/ complex controls (interaction)\n<ul>\n<li>MediaPlayer a MediaButton with UI, subtitles and controls<\/li>\n<li>RangedGroup clipped (grid) Group w\/ slider<\/li>\n<li>RangeSlider a scroll-slider<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<h3>Graph Enhancements<\/h3>\n<p>The following items are earmarked (but not funded) to be implemented for Graph.<\/p>\n<ul>\n<li>Tessellation\n<ul>\n<li>Used Delaunay tessellation works for most shapes, however, certain corner cases still exist w\/ wrong results<\/li>\n<li>Alternative traditional GLU tessellation could be utilized as an optional fallback\n<ul>\n<li>Performance impact might be limited due to the caching within OutlineShape<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<li>Antialiasing (AA)\n<ul>\n<li>Current state\n<ul>\n<li>Use full scene multisampling (MSAA), e.g. 2x &#8211; 4x gives good results, or<\/li>\n<li>use our internal framebuffer based OutlineShape region multisampling on low DPI, e.g. 4x gives good results, or<\/li>\n<li>use a high resolution monitor &gt;= 200 DPI (?)<\/li>\n<\/ul>\n<\/li>\n<li>Enhancement: Single pass AA by Graph shader\n<ul>\n<li>Widen shader area of lines and curve segments, model-based (performance, reused)\n<ul>\n<li>otherwise, AA <em>gradient<\/em> would reduce the actual model representation <em>mass<\/em><\/li>\n<\/ul>\n<\/li>\n<li>Pass original line coordinates (approximated texture coords) to render similar to curves<\/li>\n<li>Find appropriate <em>gradient stepping<\/em> for AA<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1617\" src=\"https:\/\/jausoft.com\/blog\/wp-content\/uploads\/2025\/08\/FreeBSD-UISceneDemo03b.png\" alt=\"\" width=\"1280\" height=\"720\" srcset=\"https:\/\/jausoft.com\/blog\/wp-content\/uploads\/2025\/08\/FreeBSD-UISceneDemo03b.png 1280w, https:\/\/jausoft.com\/blog\/wp-content\/uploads\/2025\/08\/FreeBSD-UISceneDemo03b-300x169.png 300w, https:\/\/jausoft.com\/blog\/wp-content\/uploads\/2025\/08\/FreeBSD-UISceneDemo03b-768x432.png 768w, https:\/\/jausoft.com\/blog\/wp-content\/uploads\/2025\/08\/FreeBSD-UISceneDemo03b-1088x612.png 1088w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/p>\n<h3><\/h3>\n<h3><\/h3>\n<h3>\nPotential Gamp Implementation of Graph\/GraphUI<\/h3>\n<p>So far, I have <em>simply<\/em> translated the existing Java code into C++20 while also flattened certain internal data representations.<\/p>\n<p>The currently existing shape demos demonstrate non-curve <em>glutess <\/em>tessellation using floats (sub-module) as well as line and curve capable Graph tessellation using Delaunay. This was a first approach to potentially use <em>glutess<\/em> as an alternative in the next steps forward.<em><br \/>\n<\/em><\/p>\n<p>As you can see above, the biggest code-base on the <em>TODO<\/em> list is the font\/type parsing, text and GraphUI segment.<\/p>\n<h4>Font\/Type Parsing<\/h4>\n<ul>\n<li>Translate our enhance Typecast Java codebase (see above) to C++<\/li>\n<li>Use <a href=\"https:\/\/github.com\/nothings\/stb\"><em>stb<\/em><\/a>&#8216;s TTF implementation<\/li>\n<li>Use <a href=\"https:\/\/github.com\/harfbuzz\/harfbuzz\"><em>HarfBuzz<\/em><\/a>&#8216;s OpenType implementation (?, not fully compatible w\/ TrueType?)<\/li>\n<\/ul>\n<h4>Test Shaping (Layout)<\/h4>\n<ul>\n<li>Translate our text layout Java codebase (see above) to C++ (small, good enough?)<\/li>\n<li>Use <a href=\"https:\/\/github.com\/harfbuzz\/harfbuzz\"><em>HarfBuzz<\/em><\/a>&#8216;s implementation (?, bigger)<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h4>Java to C++ Source Compiler<\/h4>\n<p>I will also double check for a good Java to C++ source code translator (not bytecode), i.e. soothing the typing a little.<br \/>\nHowever, so far the few existing ones were not sufficient as they either used a bytecode approach, obfuscated the C++ target making the result unreadable really.<\/p>\n<p>It is C++&#8217;s high expressiveness which probably simply must be done by hand.<br \/>\nOf course, I used a few <em>sed<\/em> scripts to shortcut the usual naming replacements.<\/p>\n<h3>Conclusion so far&#8230;<\/h3>\n<p>Lots to do, get something done &#8211; day by day.<\/p>\n<h3>Funding &amp; Contracting<\/h3>\n<p>To continue JogAmp to support its wide range of user applications and to potentially further Gamp, I seek contracting work (best in a related project) or direct project funding by companies and institutions. Please contact me <em>sgothel at jausoft dot com<\/em>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1618\" src=\"https:\/\/jausoft.com\/blog\/wp-content\/uploads\/2025\/08\/Screenshot-2025-03-24-at-06-21-28-Gamp-GraphShapes01.png\" alt=\"\" width=\"1706\" height=\"1111\" srcset=\"https:\/\/jausoft.com\/blog\/wp-content\/uploads\/2025\/08\/Screenshot-2025-03-24-at-06-21-28-Gamp-GraphShapes01.png 1706w, https:\/\/jausoft.com\/blog\/wp-content\/uploads\/2025\/08\/Screenshot-2025-03-24-at-06-21-28-Gamp-GraphShapes01-300x195.png 300w, https:\/\/jausoft.com\/blog\/wp-content\/uploads\/2025\/08\/Screenshot-2025-03-24-at-06-21-28-Gamp-GraphShapes01-768x500.png 768w, https:\/\/jausoft.com\/blog\/wp-content\/uploads\/2025\/08\/Screenshot-2025-03-24-at-06-21-28-Gamp-GraphShapes01-1536x1000.png 1536w, https:\/\/jausoft.com\/blog\/wp-content\/uploads\/2025\/08\/Screenshot-2025-03-24-at-06-21-28-Gamp-GraphShapes01-1088x709.png 1088w\" sizes=\"auto, (max-width: 1706px) 100vw, 1706px\" \/><\/p>\n<p style=\"text-align: center;\">(<a href=\"https:\/\/jausoft.com\/cgit\/gamp.git\/about\/\">A Gamp Browser-Screenshot<\/a>)<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>After the release of JogAmp 2.6.0 and the launch of Gamp earlier with its initial Graph code, I need to recapitulate the existing Graph and GraphUI code base within Jogl to evaluate our next steps including its Gamp implementation.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[7,59,3,8,1],"tags":[9,51,13,74,22,71,16,44,31,17,68,73,24],"class_list":["post-1627","post","type-post","status-publish","format-standard","hentry","category-3d-opengl","category-c-language","category-computer-stuff","category-jogamp","category-uncategorized","tag-3d","tag-c","tag-embedded-device","tag-ffmpeg","tag-fonts","tag-graph_type_rendering","tag-java","tag-jogamp","tag-mobile","tag-opengl","tag-type-rendering","tag-video","tag-web"],"_links":{"self":[{"href":"https:\/\/jausoft.com\/blog\/wp-json\/wp\/v2\/posts\/1627","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jausoft.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jausoft.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jausoft.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/jausoft.com\/blog\/wp-json\/wp\/v2\/comments?post=1627"}],"version-history":[{"count":27,"href":"https:\/\/jausoft.com\/blog\/wp-json\/wp\/v2\/posts\/1627\/revisions"}],"predecessor-version":[{"id":1676,"href":"https:\/\/jausoft.com\/blog\/wp-json\/wp\/v2\/posts\/1627\/revisions\/1676"}],"wp:attachment":[{"href":"https:\/\/jausoft.com\/blog\/wp-json\/wp\/v2\/media?parent=1627"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jausoft.com\/blog\/wp-json\/wp\/v2\/categories?post=1627"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jausoft.com\/blog\/wp-json\/wp\/v2\/tags?post=1627"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}