Some questions about implementation/performance.

[zwcloud]

I have implemented Easy Scalable Text Rendering on the GPU with OpenGL without the anti-aliasing part. Great thanks to @evanw . 👍

msjh.ttf, character: 'D', font-size: 400

But I think there are some problems:

Every glyph will consume a drawcall. (code taken from compiled.js)

    for (var i = 0, count1 = this._usedInstances; i < count1; i = i + 1 | 0) {
      var instance = in_List.get(this._instances, i);

      if (instance.glyph.area != null) {
        for (var j = 0, count = Canvas.JITTER_PATTERN.length; j < count; j = j + 1 | 0) {
          var offset = in_List.get(Canvas.JITTER_PATTERN, j);
          this._transformB.set2(this._transformA);
          this._transformB.translate1(instance.offset);
          this._transformB.translate2(offset.x * scale, offset.y * scale);
          this._transformB.scale1(instance.scale);

          if (j % 2 == 0) {
            this._glyphMaterial.setUniformVec41(GLSLX_NAME_COLOR, j == 0 ? 1 : 0, j == 2 ? 1 : 0, j == 4 ? 1 : 0, 0);
          }

          GPU.in_Material.setUniformMat32(this._glyphMaterial, GLSLX_NAME_MATRIX3, this._transformB);
          this._context.draw(GPU.Primitive.TRIANGLES, this._glyphMaterial, instance.glyph.area);
        }
      }
    }

I haven't test it but I think the performance will be very bad when rendering many characters. So I changed a little: all glyph contours (line-segments and quadratic bezier segments) are combined into one mesh, and then rendered in the same way. The output should be the same.

But, if all glyphs are combined and rendered at the same time, we won't be able to use per-glyph color. All the text will have the same color. I don't have any idea how to solve this.

Do you have any suggestions? @evanw

[zwcloud]

Nevermind. I solved the problem by using the “invert” feature of the stencil buffer instead. Text colors are saved in vertex colors.

By the way, I think MSAA is good enough for mobile and 4K monitors, because their ppi is big enough.

result:

msjh.ttf, font-size: 100