GraphUI – Type Animation at your Fingertips

And probably the last of the Graph Type Rendering and UI Saga, just for today 😉 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 matrix. Something unique regarding performance and it is the core principle of the whole little GraphUI + Graph Resolution Independent Curve Rendering itself.

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.)

Edit: Update with flawless layout available.

And here it is UISceneDemo03, 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.

(Direct video URL, download and share – or just view at original resolution)

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

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:

(Direct video URL, download and share – or just view at original resolution)

 

2 thoughts on “GraphUI – Type Animation at your Fingertips”

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

  2. I have to thank my son for adding this distinguishing note, since we talked about this demo at the breakfast table and I was forced to explain the ‘magic potion’. Since we are doing some C++ animation using vector math together, the traditional concept of plain images and distortion was only known to him due to our pacman game.

    “Why would anybody distort images for a curve shape and lose quality?”, right! 😉

    gfxbox2 https://jausoft.com/cgit/cs_class/gfxbox2.git/about/
    pacman https://jausoft.com/cgit/cs_class/pacman.git/about/

Comments are closed.