title: Creating Signed Distance Field Images on the Fly for WebGL Application
body: <p>I am working on a "CAD" like program in HTML5 that requires drawing many thousands (700,000+) of images on the screen. I think, "fortunately" the many images are replicated uses of a unique set of images. The unique set is many orders of magnitude less than the instances of them. One example I am working with has 700,000+ instances of a 360 unique set of images. The images are actually generated on the fly when the program first loads and they are rectangles with the "name" of the image centered about the middle of the rectangle (no color within the rectange, etc, just a rectangle outline with the text in the middle, text and rectangle outline is black). The program should be able to display the images at many magnification levels, and of course, be fast enough for it to be useful. </p>
  
  <p>A first implementation worked well with SVG images loaded. Due to the vector aspect of the images, it worked nicely at all magnifications. But after about 70,000 or so instances the program started to run out of memory. I assume because the DOM is not able to keep up with so many instances. </p>
  
  <p>After a lot of studying and experimentation, I was able to implement a working version of the program using WebGL. It works pretty well, and it is fast. I know I will have to implement all the fun things I got from SVG for free, like CSS colors, listeners, individual elements in the DOM, etc, but I was not using a lot of that anyhow.</p>
  
  <p>So far I've been able to implement a system that can render a lot of different instances of a subset of rectangles using a shape atlas with 1 texture and then using the standard technique of passing the texture coordinates to the pixel shader for rendering. This worked OK, except that the strings in the center of the atlas shape did not look too good at all magnifications. For the program to be most useful, I need to be able to display the strings clearly. Generating the rectangle atlases form a canvas 2d, even at high resolutions, with the strings as part of the atlas rectangles, while quite straightforward to do, did not seem to render well at all magnifications. I looked into generating string atlases by themselves, which is fine, but it seems to me that I should be able to create an image atlas that can display pretty well at a reasonable number of magnifications including the text, and perhaps save a bunch of unique draw calls for simply generating the text using Signed Distance Fields. </p>
  
  <p>This is where I have hit a wall. I found a few places that reference this paper -> <a href="https://steamcdn-a.akamaihd.net/apps/valve/2007/SIGGRAPH2007_AlphaTestedMagnification.pdf" rel="nofollow noreferrer">Improved Alpha-Tested Magnification for Vector Textures and Special Effects</a>. It seems exactly what I am looking for. I think of my unique set of rectangle, text pairs as "decals" as outlined in the paper above. In my case, I would have all my unique instances generate a lower resolution SDF version (64x64) of a high resolution version (2048x2048) of the instances and then change my fragment shader to be able to render at any resolution as outlined here -> <a href="http://www.mapbox.com/blog/text-signed-distance-fields/" rel="nofollow noreferrer">Drawing Text with Signed Distance Fields in Mapbox GL</a>. However, I have not found anywhere that shows how to generate a lower resolution version SDF from a high resolution image. </p>
  
  <p>My question(s) is (are) the following:</p>
  
  <ol>
  <li><p>How do I generate a lower resolution SDF version (64x64) of a hi-res image (2048x2048) generated on the fly using canvas and JavaScript so I can create a texture to use in my fragment shader? Ideally, this would only have to be generated once at the start of the program.</p></li>
  <li><p>Am I thinking about his correctly? Is the text doomed to have to be drawn by itself separately using an SDF font atlas?</p></li>
  </ol>