Next challenge: laying out text that runs from right to left (Arabic) with all kinds of ligatures and what not. But that is not for the faint of heart. 
Edit: by the way, are you sure you render the text using pre-multiplied alpha, Hai? If not, you may want to change the shader to: Color.rgb = uFgColor.rgb;.
Left: wrong blend mode. … Right: correct blend mode.
Ola Hai,
I’ve taken a bunch of snapshots of SDF text, you can find the album here:
Most of the images are from text that looks great, even at smaller sizes. Some of them exhibit flaws, though, and I’ve indicated them here or there. Have fun looking at your great work.
-Paul
@paul.houx This thing wouldn’t be where it is without your efforts! Thanks for jumping in! Also thanks for making the album, I went through it - some useful stuff in there to track down more of the formatting issues.
I updated the shader to handle a premultiply toggle. I’m not sure if my formulation is 100% correct. If you have some time, would you mind taking a look?
Thanks,
Hai
Cinder-SdfText has come a long way since the initial release! Much of this is thanks to the might hands of @paul.houx and contributions from @ryanbartley and @num3ric.
Recnt New Features:
Obligatory Screenshot
All 400 fonts on my system, loaded, rendered and recorded in real time.
This looks fantastic, awesome work guys.
Is this the kind of thing that could go into the core Cinder library for rendering text in the future? And if not what are its limitations / advantages over TextureFont apart from the obvious quality / resolution benefits etc. Is it more / less computationally expensive to initialise / render text on the fly for example?
Excited to get to grips with this, if theres anything I might be able to help with to bring this to OSX too let me know 
Hi,
Hai’s (and a bit of my) work was based on the TextureFont classes, so in general they are similar. Here are the differences:
TextureFont, but we also added left, centered, right and justified alignment. The code is only slightly slower because of this, but the difference is hardly noticeable in most cases. More layout options are not provided at this time, since that should really be handled more generically in Cinder. This solution was designed to render high quality text efficiently in OpenGL. It wasn’t our goal to replace Adobe Indesign. Lastly, if you intent to use static text, consider creating the mesh once and reuse it. It’s on our TODO list to provide an out-of-the-box solution for this in the form of a SdfTextMesh class.-Paul
P.S.: as for integration into the Cinder code: I would love to see that. It should completely replace TextureFont in my opinion, but that would require support for dynamic texture creation (adding missing glyphs on-the-fly), preferably on a separate thread. I would also break out most of the layout code and use it not only for TextureFont, but also for TextBox and basically anywhere text is used. As you can understand, this takes quite some engineering to do it properly. I know proper text handling is high on the wish list, so hopefully we’ll see some of this in the core soon. It’s just a matter of time.
By the way, here’s an example of an SDF texture that is generated by this solution:
This is wonderful stuff. You guys are amazing. 
Added a SdfTextMesh class to cache the geometry for text.
It’s relatively straight forward to use. A ‘run’ is created for each section of text. You can have multiple runs in a single SdfTextMesh object. Each run supports most of the features from SdfText::DrawOptions. Internally, SdfTextMesh caches gl::BatchRef objects on an as needed basis corresponding to textures and glyphs.
Example looks something like this:
mSdfTextMesh = gl::SdfTextMesh::create();
std::string blockText( "Some realyy long text." );
Rectf blockBoundsRect( 40, mSdfText->getAscent() + 40, getWindowWidth() - 40, getWindowHeight() - 40 );
gl::SdfTextMesh::Run::Options blockOptions = gl::SdfTextMesh::Run::Options().setAlignment( mAlignment ).setJustify( mJustify );
mBlockRun = mSdfTextMesh->appendTextWrapped( blockText, mSdfText, blockBoundsRect, blockOptions );
vec2 baseline = vec2( 10, 30 );
mAlignmentRun = gl::SdfTextMesh::Run::create( "LEFT", mSdfText, baseline );
mSdfTextMesh->appendText( mAlignmentRun );
baseline = vec2( 10, getWindowHeight() - mSdfText->getDescent() );
mFpsRun = gl::SdfTextMesh::Run::create( "fps", mSdfText, baseline );
mSdfTextMesh->appendText( mFpsRun );
float fontNameWidth = mSdfText->measureString( mSdfText->getName() ).x;
baseline = vec2( getWindowWidth() - fontNameWidth - 10, getWindowHeight() - mSdfText->getDescent() );
mSdfTextMesh->appendText( mFont.getName(), mSdfText, baseline );
Obligatory Screenshot
Initial version of OS X has been added. There are still some issues:
If anyone wants to brave an iOS version, please feel free!
Obligatory Screenshots
I tried to build this with XCode 6.2, but the project file is incompatible. Probably a newer version. Then I tried with cmake, but I had to make some modifications similar to Petros’s pull request to readLittle, writeLittle calls. And probably for similar reasons boost::algorithm::trim_right_copy (here and here) gives errors for char32_t. Errors here
Are you using the latest version? Both of those issues should be resolved.
Thanks. The newer version builds fine. I tried this two days ago, and didn’t notice these changes in the OS X commits.
Added build files for iOS for Cinder-SdfText. The following samples also have build projects updates:
I don’t currently have an iOS device that’s provisioned to run apps - if anyone wants to run test it and report back, that would be helpful!
Obligatory Screenshot
Hey.
Had mixed results building on iOS (iPhone 6S)
Basic - Success
MeshPages - Success
BasicMesh - Fail
StarWars - Fail
I get a runtime error for both of these:
|error | void cinder::app::AppBase::executeLaunch()[137] Uncaught exception, type: cinder::Exception, what: Invalid out stream
libc++abi.dylib: terminating with uncaught exception of type cinder::Exception: Invalid out stream
Would you mind double checking these? A stack trace from the line that’s throwing the exception would be helpful.
The provisioning stuff finally came through for me and I was able to run all 4 samples on my 6S+ without issue.Here’s a screenshot of Star Wars:
I have encountered a strange issue with measureString. It does not seem to return the correct size if I change the font size. With size 24 it seems to be ok, but otherwise it differs from the drawn string.
This is drawn with Helvetica on OSX with the BasicApp sample.
I draw the string and the rect like this:
gl::translate( vec2( 100 ) );
vec2 strSize = mSdfText->measureString( str );
Rectf rect( vec2( 0, -strSize.y ), vec2( strSize.x, 0 ) );
gl::drawStrokedRect( rect );
mSdfText->drawString( str, vec2( 0 ) );
Am I missing something? Should I use the size in different way instead of assuming that the size and the drawn string match?
Hi Gabor,
can you try to make the following change?
(To avoid confusion: on the left side is the current version, the right side is what I think it should be.)
I am using this block in a large project at the moment and had to make a few changes when I ran into some issues. I’ll probably create a PR when I’ve finished working on the project, but you can try this now if you want to.
-Paul
Hi Paul,
Thanks. I made the change, but the bounding box size still doesn’t match the text size.
-Gabor
