A little About me

What you Could Get out of this Talk

  • A few ideas about how to optimize a WebGL app
  • Some WebGL/Three.js and graphics concepts 
  • How to get nice looking text in WebGL
  • Eh... Maybe you just want to see pretty things,
    and some cool code... (Ya, I got that!)

I hope I can do

this For you

Our Older SVG Maps

How we Create Them

OMG, Did we make that?

Performance Wall


Enter Three.JS

Now we Have

soooo let's talk about One Big Problem

We Take Our Platforms for Granted 

Every Platforms Is Different

Webgl Has no Way to render Text

And off we go

Problem 1: ONe  Draw Call Per Mesh and Material

A common Optimization
Mesh Merging

Less Draw Calls = More better

More FPS = More Better

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

Another Common Optimization
Textures, Sprites, and UV Mapping

UV Mapping

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

Ughhh what now!

We need something Different

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.

OUr Font File as A Texture


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


  • 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

I guess that's it

Some Thank Yous!

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