Fix TextRenderer or SpriteRenderer rendering errors

e2e/case/text-typed.ts

@@ -0,0 +1,79 @@
+/**
+ * @title TypedText
+ * @category Text
+ */
+
+import {
+  Camera,
+  Logger,
+  Script,
+  TextHorizontalAlignment,
+  TextRenderer,
+  TextVerticalAlignment,
+  Vector3,
+  WebGLEngine
+} from "@galacean/engine";
+import { initScreenshot, updateForE2E } from "./.mockForE2E";
+
+Logger.enable();
+WebGLEngine.create({ canvas: "canvas" }).then((engine) => {
+  engine.canvas.resizeByClientSize();
+  const scene = engine.sceneManager.activeScene;
+  const rootEntity = scene.createRootEntity();
+
+  // camera
+  const cameraEntity = rootEntity.createChild("camera_node");
+  cameraEntity.transform.position = new Vector3(0, 0, 10);
+  const camera = cameraEntity.addComponent(Camera);
+
+  const entity = rootEntity.createChild("text");
+  const textRenderer = entity.addComponent(TextRenderer);
+  textRenderer.fontSize = 64;
+  textRenderer.horizontalAlignment = TextHorizontalAlignment.Left;
+  textRenderer.verticalAlignment = TextVerticalAlignment.Top;
+  textRenderer.enableWrapping = true;
+  textRenderer.width = 4;
+
+  class TypedText extends Script {
+    private _renderer: TextRenderer;
+    private _text: string;
+    private _index = 0;
+    private _charCount = 0;
+    private _showText = "";
+    private _curTime = 0;
+    private _totalTime = 0.1;
+    private _isPlaying = false;
+
+    onUpdate(deltaTime: number): void {
+      if (this._isPlaying) {
+        if (this._curTime >= this._totalTime) {
+          if (this._index >= this._charCount) {
+            this._isPlaying = false;
+            initScreenshot(engine, camera);
+          } else {
+            this._showText += this._text[this._index++];
+            this._renderer.text = this._showText;
+          }
+          this._curTime = 0;
+        } else {
+          this._curTime += deltaTime;
+        }
+      }
+    }
+
+    play(textRenderer: TextRenderer, text: string = ""): void {
+      this._renderer = textRenderer;
+      this._text = text;
+      this._index = 0;
+      this._charCount = text.length;
+      this._showText = "";
+      this._curTime = this._totalTime;
+      this._isPlaying = true;
+    }
+  }
+
+  const typedText = entity.addComponent(TypedText);
+  typedText.play(textRenderer, "我这一生，走过许多地方的桥儿");
+
+  updateForE2E(engine, 100, 100);
+});

e2e/config.ts

@@ -207,5 +207,12 @@ export const E2E_CONFIG = {
       caseFileName: "postProcess-LDR-bloom-neutral",
       threshold: 0.2
     }
+  },
+  Text: {
+    TypedText: {
+      category: "Text",
+      caseFileName: "text-typed",
+      threshold: 0.4
+    }
   }
 };

packages/core/src/RenderPipeline/PrimitiveChunk.ts

@@ -138,38 +138,49 @@
   }
 
   private _freeArea(area: VertexArea): void {
-    const areas = this.vertexFreeAreas;
-    const areaLen = areas.length;
+    const freeAreas = this.vertexFreeAreas;
+    const areaLen = freeAreas.length;
     if (areaLen === 0) {
-      areas.push(area);
+      freeAreas.push(area);
       return;
     }
 
+    const { start, size } = area;
+    const end = start + size;
     const pool = PrimitiveChunk.areaPool;
-    let preArea = area;
-    let notMerge = true;
     for (let i = 0; i < areaLen; ++i) {
-      const curArea = areas[i];
-      const { start: preStart, size } = preArea;
-      const { start: curStart } = curArea;
-      const preEnd = preStart + size;
-      const curEnd = curStart + curArea.size;
-      if (preEnd < curStart) {
-        notMerge && areas.splice(i, 0, preArea);
-        return;
-      } else if (preEnd === curStart) {
-        curArea.start = preStart;
-        curArea.size += size;
-        pool.return(preArea);
-        preArea = curArea;
-        notMerge = false;
-      } else if (preStart === curEnd) {
-        curArea.size += size;
-        pool.return(preArea);
-        preArea = curArea;
-        notMerge = false;
-      } else if (preStart > curEnd) {
-        i + 1 === areaLen && areas.push(preArea);
+      const curFreeArea = freeAreas[i];
+      const curStart = curFreeArea.start;
+      const curEnd = curStart + curFreeArea.size;
+
+      if (end < curStart) {
+        // The area to be freed is to the left of the current free area and is not connected
+        freeAreas.splice(i, 0, area);
+        break;
+      } else if (end === curStart) {
+        // The area to be freed is to the left of the current free area and is connected
+        curFreeArea.start = start;
+        curFreeArea.size += size;
+        pool.return(area);
+        break;
+      } else if (start === curEnd) {
+        // The area to be freed is to the right of the current free area and is connected
+        curFreeArea.size += size;
+        pool.return(area);
+        const nextIndex = i + 1;
+        if (nextIndex < areaLen) {
+          const nextFreeArea = freeAreas[nextIndex];
+          if (end === nextFreeArea.start) {
+            // The cur free area after merge is to the left of the next free area and is connected
+            curFreeArea.size += nextFreeArea.size;
+            freeAreas.splice(nextIndex, 1);
+            pool.return(nextFreeArea);
+          }
+        }
+        break;
+      } else if (start > curEnd) {
+        // The area to be freed is to the right of the current free area and is not connected
+        i + 1 === areaLen && freeAreas.push(area);
       }
     }
   }