BatchedText CPU performance bottleneck

[codedpalette]

I'm using BatchedText to display large number (3000+) of Text objects in a single draw call. While my GPU rendering time is low, I noticed that about 30%-50% of my frame time is spent in the Text.onBeforeRender() method. I tried extending your classes to optimize the performance but without any luck. Do you have any ideas for potential optimizations? I'd be happy to create a PR if I'm successful, I just need a few pointers. Two potential ideas for improvement I noticed are checking for dirty flag on members in BatchedText._prepareForRender() loop, and caching computed uniforms in Text._prepareForRender(). My texts are mostly static, but I frequently change transformation matrices and clipRect, and also occasionally text alignment. I'm attaching the Chrome DevTools trace (taken with 4x CPU slowdown) so you can see the problem.

Trace-20250707T202647.json.zip

[npielawski]

Have you looked more into it? I am experiencing the same issue, most of the work is done on the CPU rather than the GPU.

What were you thinking in terms of caching?

Here is my trace on Firefox Developer Edition:

[npielawski]

I made a PoC where I tried to use the dirty flag, added caching and improved copying the values into memory. It does work for my project but breaks the demo for BatchedText (the individual text labels don't rotate individually anymore), but there is a 20-25% reduction in CPU ms/frame.

The new trace:

[npielawski]

I am adding the code here instead of making a PR because I don't know enough about Troika and there may be side effects to the modifications I am not aware of. For instance, I am making two caches, one for the main font, one for the outline, but I don't know if more caches are necessary.
This code is also breaking the demo's animation, but I don't have time to investigate why.

  _prepareForRender (material) {
    const isOutline = material.isTextOutlineMaterial
    const outlineOrMain = isOutline ? 'outline' : 'main';
    material.uniforms.uTroikaIsOutline.value = isOutline

    // Resize the texture to fit in powers of 2
    let texture = this._dataTextures[outlineOrMain];
    const desiredLength = Math.pow(2, Math.ceil(Math.log2(this._members.size * floatsPerMember)));
    if (!texture || desiredLength !== texture.image.data.length) {
      if (texture) texture.dispose();
      const width = Math.min(desiredLength / 4, 1024);
      texture = this._dataTextures[outlineOrMain] = new DataTexture(
        new Float32Array(desiredLength),
        width,
        desiredLength / 4 / width,
        RGBAFormat,
        FloatType
      );
      this._memberCache = new Map();
    }

    const texData = texture.image.data;
    const tmpBlock = new Float32Array(floatsPerMember);
    let anyUpload = false;
    if (!this._memberCache)
      this._memberCache = new Map();
    const globalRev = this._globalUniformRevision || 0;

    for (const [text, meta] of this._members.entries()) {
      const { index, dirty } = meta;
      if (index <= -1) {
        continue;
      }
      const startIndex = index * floatsPerMember

      const cachedEntry = this._memberCache.get(text.uuid + "-" + outlineOrMain);
      if (!dirty && cachedEntry && cachedEntry.rev === globalRev) {
        continue;
      }

      const matrix = text.matrix.elements;
      tmpBlock.set(matrix, 0);

      // Let the member populate the uniforms, since that does all the appropriate
      // logic and handling of defaults, and we'll just grab the results from there
      text._prepareForRender(material)
      const {
        uTroikaTotalBounds,
        uTroikaClipRect,
        uTroikaPositionOffset,
        uTroikaEdgeOffset,
        uTroikaBlurRadius,
        uTroikaStrokeWidth,
        uTroikaStrokeColor,
        uTroikaStrokeOpacity,
        uTroikaFillOpacity,
        uTroikaCurveRadius,
      } = material.uniforms;

      // Total bounds for uv (4)
      tmpBlock.set(uTroikaTotalBounds.value.toArray(), 16);
      // Clip rect (4)
      tmpBlock.set(uTroikaClipRect.value.toArray(), 20);

      // Color
      let color = isOutline ? (text.outlineColor || 0) : text.color;
      if (color == null) color = this.color;
      if (color == null) color = this.material.color;
      if (color == null) color = 0xffffff;
      const fillHex = (typeof color === 'number') ? color : tempColor.set(color).getHex();
      tmpBlock[24] = fillHex;

      // fill opacity and curve radius
      tmpBlock[25] = uTroikaFillOpacity.value;
      tmpBlock[26] = uTroikaCurveRadius.value;
      tmpBlock[27] = 0; // blank

      if (isOutline) {
        // Outline properties
        tmpBlock[28] = uTroikaPositionOffset.value.x;
        tmpBlock[29] = uTroikaPositionOffset.value.y;
        tmpBlock[30] = uTroikaEdgeOffset.value;
        tmpBlock[31] = uTroikaBlurRadius.value;
      } else {
        // Stroke properties
        tmpBlock[28] = uTroikaStrokeWidth.value;
        tmpBlock[29] = (typeof uTroikaStrokeColor.value === 'number') ? uTroikaStrokeColor.value : tempColor.set(uTroikaStrokeColor.value).getHex();
        tmpBlock[30] = uTroikaStrokeOpacity.value;
      }

      let needCopy = true;
      if (cachedEntry && cachedEntry.block && cachedEntry.block.length === floatsPerMember) {
        const cachedBlock = cachedEntry.block;
        needCopy = false;
        for (let i = 0; i < floatsPerMember; i++) {
          if (cachedBlock[i] !== tmpBlock[i]) { needCopy = true; break; }
        }
      }

      if (needCopy) {
        texData.set(tmpBlock, startIndex);
        anyUpload = true;

        const saved = new Float32Array(floatsPerMember);
        saved.set(tmpBlock);
        this._memberCache.set(text.uuid + "-" + outlineOrMain, { block: saved, rev: globalRev });
      } else {
        cachedEntry.rev = globalRev;
      }

      if (dirty) meta.dirty = false;
    }
    if (anyUpload) {
      texture.needsUpdate = true;
    }
    material.setMatrixTexture(texture);

    // For the non-member-specific uniforms:
    super._prepareForRender(material);
  }