{"id":1258,"date":"2023-03-22T12:19:17","date_gmt":"2023-03-22T16:19:17","guid":{"rendered":"https:\/\/jausoft.com\/blog\/?p=1258"},"modified":"2023-03-30T09:30:36","modified_gmt":"2023-03-30T13:30:36","slug":"graphui-type-animation-at-your-fingertips","status":"publish","type":"post","link":"https:\/\/jausoft.com\/blog\/2023\/03\/22\/graphui-type-animation-at-your-fingertips\/","title":{"rendered":"GraphUI – Type Animation at your Fingertips"},"content":{"rendered":"

And probably the last of the Graph Type Rendering and UI<\/a> Saga, just for today \ud83d\ude09 Since I started to love Type Rendering<\/em>, I need to show more than just processing text into a static Graph Region. The Type Animation<\/em> use case was born, having Glyphs cached on the GPU and fiddling with their modelview matrix. Something unique regarding performance and it is the core principle of the whole little GraphUI + Graph Resolution Independent Curve Rendering itself.<\/p>\n

Working on Type Animation resolved some other issues in our API and enhanced its flexibility. Currently I change the Graph Font processing to optionally preserve the Glyphs for individual usage while also preserving the text layout like kerning. This is a work in progress, so if you see wrong kerning in the following video – you are correct. It will be resolved. (Perfect layout incl. kerning is already provided for a whole text region.)<\/em><\/p>\n

Edit<\/strong>: Update with flawless layout available<\/a>.<\/p>\n

And here it is UISceneDemo03<\/a>, showing a text animation assembling one line of text, while each glyph coming from from a random 3D point moving to its destination – all at once.<\/p>\n

https:\/\/jausoft.com\/Files\/media\/20230322-UISceneDemo03.mp4<\/a><\/video><\/div>\n

(Direct video URL<\/a>, download and share – or just view at original resolution)<\/p>\n

Edit<\/em><\/strong>: Each animated type’s original quadratic shape is preserved, cached in its original em-size and then rendered on the GPU in perfect quality<\/em> for each rendered frame using its current modelview matrix (rotation, scale and translation). This is unlike a traditional font API<\/em>, where one creates static images at a certain resolution and size, then resizes and distort the pixel shape!<\/p>\n

Before working on the above Type Animation demo, I had a poor first one where my wife & boss told me its far too boring. So just in case you are curious .. here the boring one, UISceneDemo02<\/a>:<\/p>\n

https:\/\/jausoft.com\/Files\/media\/20230322-UISceneDemo02.mp4<\/a><\/video><\/div>\n

(Direct video URL<\/a>, download and share – or just view at original resolution)<\/p>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

And probably the last of the Graph Type Rendering and UI Saga, just for today \ud83d\ude09 Since I started to love Type Rendering, I need to show more than just processing text into a static Graph Region. The Type Animation use case was born, having Glyphs cached on the GPU and fiddling with their modelview… Continue reading GraphUI – Type Animation at your Fingertips<\/span> →<\/span><\/a><\/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,3,8],"tags":[9,13,71,16,44,17,46,68,73],"class_list":["post-1258","post","type-post","status-publish","format-standard","hentry","category-3d-opengl","category-computer-stuff","category-jogamp","tag-3d","tag-embedded-device","tag-graph_type_rendering","tag-java","tag-jogamp","tag-opengl","tag-openjdk","tag-type-rendering","tag-video"],"_links":{"self":[{"href":"https:\/\/jausoft.com\/blog\/wp-json\/wp\/v2\/posts\/1258","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=1258"}],"version-history":[{"count":13,"href":"https:\/\/jausoft.com\/blog\/wp-json\/wp\/v2\/posts\/1258\/revisions"}],"predecessor-version":[{"id":1280,"href":"https:\/\/jausoft.com\/blog\/wp-json\/wp\/v2\/posts\/1258\/revisions\/1280"}],"wp:attachment":[{"href":"https:\/\/jausoft.com\/blog\/wp-json\/wp\/v2\/media?parent=1258"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jausoft.com\/blog\/wp-json\/wp\/v2\/categories?post=1258"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jausoft.com\/blog\/wp-json\/wp\/v2\/tags?post=1258"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}