I hope I can do

this For you

How we Create Them

OMG, Did we make that?

Performance Wall

Ughhh

Enter Three.JS

Sorta...
Now we Have
OPTIONS!

We Take Our Platforms for Granted 

Every Platforms Is Different

Webgl Has no Way to render Text

And off we go

https://github.com/parris/threejs-experiments/blob/master/text/1-simple.html

300 Strings, 10 seconds - (code)

Problem 1: ONe  Draw Call Per Mesh and Material

CPU -> GPU
Less Draw Calls = More better

More FPS = More Better

Trying again-(Code)

300 Strings???

Problem 2: Merging... Isn't Particularly Fast.
Problem 3: Threejs Text produces lots of Vertices, which makes merging is slow.

The Text Atlas

UV Mapping

4000 strings

psh no problem-(code)

Problem 4: It needs to look good always
Note: worse on non-retina and when you have "Transparency" (think seat numbers)

Ughhh what now!

Valve: Signed Distance FieldS + Text 

MY ELI5 - The distance field represents the distance of each pixel from the closest letter. We are hijacking an 8bit image to store distance data in it. As we change magnification we adjust transparency of some pixels, and show certain other pixels to make the text look smoother.

How can we Use this?

OUr Font File as A Texture

It performs Pretty Well
and looks pretty good

Pros

• Looks good with text at any size text
• Relatively fast
• More resource efficient (lighter memory footprint)

Cons

• A bit slower due to more vertices and more merging
• Need to deal with kerning
• Sometimes text is rounder than it should be
• No font-stack (i.e. fallbacks to alternative fonts when characters don't exist in the current font)

A compromise

Actually.. NO! We Rock!
Don't you EVEN!

Who even does this

• Chrome: http://www.lifehacker.com.au/2014/11/chromes-signed-distance-field-font-rendering-still-needs-work/
• Mapbox: https://www.mapbox.com/blog/text-signed-distance-fields/
• Valve: Team Fortress 2 (and the source engine)

PS: we're hiring :)
sf, nashville, argentina

Questions?