Рендеринг шрифтов для WebGL при помощи инструмента msdf-bmfont-xml и технологии MSDF

Индексбуфер ещё не пробовал. Это конечно вариант чтобы не дублировать геометрию. Но создаёт дополнительную нагрузку на CPU (их же надо ещё создать). Про батч тоже думал, это пока не реализовано. Это называется в WebGL interleaving. У нас очень много текстов, тысячи могут быть, и статические и динамические (меняющиеся). Это real-time GUI, мониторинг поездов и больше.

Я подумал что можно геометрию один раз пихать в буфер, но использовать её в последовательно вызывающих 2-х дроуколс. Или один буфер невозможно между двумя последовательными дроуколс шерить? Uniforms например можно шерить, они глобальные и если не меняются, то могут использоваться с совершенно разными дроуколс.

Проблемы нет. Просто надо отдельным drawcall рендерить.

АПИ уникальный. Элементы можно декларативно в JSON описывать, без того чтобы код писать. Свой синтакс.

#version 300 es
precision mediump float;

in vec2 v_texcoord;
uniform sampler2D u_texture;
uniform vec4 u_color;
uniform bool u_background_flag;
uniform vec4 u_background_color;
uniform vec4 u_stroke_color;
uniform float u_stroke_weight;
uniform float u_font_weight;
out vec4 outColor;

float median(float r, float g, float b) {
  return max(min(r, g), min(max(r, g), b));
}

void main() {
  if (u_background_flag == true) {
    // draw background
    outColor = u_background_color;
  } else {
    vec2 w = fwidth(v_texcoord);
    ivec2 sz = textureSize(u_texture, 0);
    float smoothing = clamp(w.x * float(sz.x) / 18.0, 0.0, 0.5);
    vec2 texcoord = vec2(v_texcoord.x, v_texcoord.y);
    vec3 sampleRGB = texture(u_texture, texcoord).rgb;
    float dist = median(sampleRGB.r, sampleRGB.g, sampleRGB.b);
    float alpha;
    vec4 color;
    if (u_stroke_color.a > 0.0 && u_stroke_weight > 0.0) {
      // draw only stroke outline without glyph
      alpha = smoothstep(u_stroke_weight - smoothing, u_stroke_weight + smoothing, dist);
      float outline = smoothstep(u_font_weight - smoothing, u_font_weight + smoothing, dist);
      outColor = u_stroke_color * (1.0 - outline) * alpha;
    } else {
      // draw only glyph without stroke
      alpha = smoothstep(u_font_weight - smoothing, u_font_weight + smoothing, dist);
      outColor = u_color * alpha;
    }
  }
}

// set transformation and projection matrices
this.setVertexShaderMatrices(node, worldProjectionMatrix, viewportProjectionMatrix);
// use already bound buffer and attributes
this._glRC.bindVertexArray(vai.vertexArrayObject);

if (renderToColorMap) {
  this._programmContext.backgroundFlag = 1;
  this._programmContext.backgroundColor = ColorUtil.toColor1FromId(index);
  // draw the background only
  node.shape.draw(this._glRC, 0, 6);
} else {
  const shape = node.shape as Text;
  if (shape.backgroundColor.a > 0) {
    // draw the background
    this._programmContext.backgroundFlag = 1;
    this._programmContext.backgroundColor = ColorUtil.toColor1(shape.backgroundColor);
    node.shape.draw(this._glRC, 0, 6);
  }

  this._programmContext.backgroundFlag = 0;
  this._programmContext.fontWeight = 0.44; // TODO
  this._programmContext.color = ColorUtil.toColor1(shape.color);
  const texture: Texture = this._textureCache.getTexture(shape.textureId);
  this._glRC.bindTexture(this._glRC.TEXTURE_2D, texture.texture);
  this._programmContext.textureUnit = this._textureUnit;

  // try to draw all strokes first, and then all glyphes
  if (shape.strokeColor.a > 0 && shape.strokeWeight > 0.0) {
    this._programmContext.strokeColor = ColorUtil.toColor1(shape.strokeColor);
    this._programmContext.strokeWeight = shape.normalizedStrokeWeight;
    node.shape.draw(this._glRC, 6, vai.vertexCount);
  }

  this._programmContext.strokeColor = COLOR_TRANSPARENT;
  this._programmContext.strokeWeight = 0.0;
  node.shape.draw(this._glRC, 6, vai.vertexCount);
}