精灵文字增加，drawcall随之增加，导致卡顿. "@galacean/engine": "0.9.20"

[lantianhaijiao]

https://stackblitz.com/edit/jbxt5u-4ue843?file=package.json,index.ts,index.css,index.html
import './index.css';
/**

• @title Text Renderer
• @category 2D
  */

// import { OrbitControl } from '@galacean/engine-toolkit-controls';
import {
Camera,
Color,
Font,
FontStyle,
TextRenderer,
Vector3,
WebGLEngine,
Texture2D,
SpriteRenderer,
Sprite,
Entity,
AssetType,
TextHorizontalAlignment,
TextVerticalAlignment,
} from '@galacean/engine';

// Create engine object
const engine = new WebGLEngine('canvas', {
alpha: true,
});
engine.canvas.resizeByClientSize();
const ColorTrans = (rgb: number): number => {
return rgb / 255;
};
const scene = engine.sceneManager.activeScene;
const rootEntity = scene.createRootEntity();

// Create camera
const cameraEntity = rootEntity.createChild('camera_entity');
cameraEntity.transform.setPosition(0, 0, 10);
cameraEntity.addComponent(Camera);
cameraEntity.isOrthographic = true;
// cameraEntity.addComponent(OrbitControl);
let source;
const loader = () => {
return new Promise((resolve) => {
engine.resourceManager
.load({
url: 'https://gw.alipayobjects.com/mdn/rms_7c464e/afts/img/A*d3N9RYpcKncAAAAAAAAAAAAAARQnAQ',
type: AssetType.Texture2D,
})
.then((texture) => {
source = texture;
resolve(texture);
});
});
};

// The text to display
let text = 'Galacean 文字';
// The position of text
const pos = new Vector3();
// The color of text
const color = new Color();
color.set(64 / 255, 187 / 255, 39 / 255, 1);
const randomNum = (min: number, max: number): number => {
return parseInt(Math.random() * (max - min + 1) + min + '');
};

// Create text with default params
// pos.set(0, 1.25, 0);
// pos.set(randomNum(0, 3), -randomNum(0, 3), 0);
let num = 0;
let zIndex = 1;
const addChild = (total) => {
for (let i = 0; i < total; i++) {
// text = test-${i};
// color.set(0, 0, 0, 1);
num++;
pos.set(randomNum(-2500, 3000) / 1000, -randomNum(-3000, 3000) / 1000, 1);
const entity = createSprite(pos);
pos.set(0, 0, 1.1);
createText('Arial', 100, false, false, entity, text, pos);
}
};
const init = async () => {
await loader();
addChild(50);
console.log('num--', num);
};
init();
setInterval(() => {
color.set(255 / 255, 165 / 255, 0 / 255, 1);
addChild(50);
}, 2000);

engine.run();

function createSprite(position: Vector3) {
const entity = rootEntity.createChild('sprite');
entity.transform.setScale(0.1, 0.1, 1);
const sprite = new Sprite(engine, source);
entity.transform.position = position;
entity.addComponent(SpriteRenderer).sprite = sprite;
return entity;
}
/**

• Create text to display by params.
• @param fontFamily - The font family
• @param fontSize - The size of font
• @param bold - The text whether bold
• @param italic - The text whether italic
  */
  function createText(
  fontFamily: string = 'Arial',
  fontSize: number = 26,
  bold: boolean = false,
  italic: boolean = false,
  Entity: Entity,
  text: string,
  position: Vector3
  ): void {
  // Create text entity
  const entity = Entity.createChild('text');
  entity.transform.position = position;
  // Add text renderer for text entity
  const renderer = entity.addComponent(TextRenderer);
  // Set text color
  renderer.color = color;
  // Set text to render
  renderer.text = text;
  // Set font with font family
  renderer.font = Font.createFromOS(entity.engine, fontFamily);
  // Set font size
  renderer.fontSize = fontSize;
  renderer.width = 1000;
  renderer.height = 1000;
  renderer.horizontalAlignment = TextHorizontalAlignment.Center;
  renderer.verticalAlignment = TextVerticalAlignment.Center;
  // Set font whether bold
  bold && (renderer.fontStyle |= FontStyle.Bold);
  // Set font whether italic
  italic && (renderer.fontStyle |= FontStyle.Italic);
  }

[cptbtptpbcptdtptp]

OK 我们检查一下。

[cptbtptpbcptdtptp]

检查了一下，现在文字图集的尺寸还只支持 256 * 256，而 demo 中文字的 fontsize 为 100，刚好导致了一句话在两张不同的纹理中，drawcall 就随着文字渲染器的数目翻倍了，导致性能下降。

可以通过适当缩小 FontSize 让文字打在一张图集中，这个插件可以检查文字图集是否打在一张贴图中，