From 4a8aa701412d524a1f7e0ea07fb5d9efcdd143a8 Mon Sep 17 00:00:00 2001
From: errnull <errnull@libsvg.com>
Date: Thu, 23 Mar 2023 15:44:55 +0800
Subject: [PATCH 01/20] Support trail effects (#1251)

---
 packages/core/src/shader/ShaderPool.ts        |   3 +
 .../core/src/shaderlib/extra/trail.fs.glsl    |  12 +
 .../core/src/shaderlib/extra/trail.vs.glsl    |  36 ++
 packages/core/src/trail/TrailMaterial.ts      |  20 -
 packages/core/src/trail/TrailRenderer.ts      | 566 +++++++++++-------
 packages/core/src/trail/index.ts              |   1 -
 packages/core/src/trail/trail.fs.glsl         |   9 -
 packages/core/src/trail/trail.vs.glsl         |  14 -
 8 files changed, 410 insertions(+), 251 deletions(-)
 create mode 100644 packages/core/src/shaderlib/extra/trail.fs.glsl
 create mode 100644 packages/core/src/shaderlib/extra/trail.vs.glsl
 delete mode 100644 packages/core/src/trail/TrailMaterial.ts
 delete mode 100644 packages/core/src/trail/trail.fs.glsl
 delete mode 100644 packages/core/src/trail/trail.vs.glsl

diff --git a/packages/core/src/shader/ShaderPool.ts b/packages/core/src/shader/ShaderPool.ts
index 61473002c6..b217f3eb65 100644
--- a/packages/core/src/shader/ShaderPool.ts
+++ b/packages/core/src/shader/ShaderPool.ts
@@ -5,6 +5,8 @@ import blinnPhongFs from "../shaderlib/extra/blinn-phong.fs.glsl";
 import blinnPhongVs from "../shaderlib/extra/blinn-phong.vs.glsl";
 import particleFs from "../shaderlib/extra/particle.fs.glsl";
 import particleVs from "../shaderlib/extra/particle.vs.glsl";
+import trailFs from "../shaderlib/extra/trail.fs.glsl";
+import trailVs from "../shaderlib/extra/trail.vs.glsl";
 import pbrSpecularFs from "../shaderlib/extra/pbr-specular.fs.glsl";
 import pbrFs from "../shaderlib/extra/pbr.fs.glsl";
 import pbrVs from "../shaderlib/extra/pbr.vs.glsl";
@@ -43,6 +45,7 @@ export class ShaderPool {
 
     Shader.create("skybox", [new ShaderPass(skyboxVs, skyboxFs, forwardPassTags)]);
     Shader.create("particle-shader", [new ShaderPass(particleVs, particleFs, forwardPassTags)]);
+    Shader.create("trail-shader", [new ShaderPass(trailVs, trailFs, forwardPassTags)]);
     Shader.create("SpriteMask", [new ShaderPass(spriteMaskVs, spriteMaskFs, forwardPassTags)]);
     Shader.create("Sprite", [new ShaderPass(spriteVs, spriteFs, forwardPassTags)]);
     Shader.create("background-texture", [new ShaderPass(backgroundTextureVs, backgroundTextureFs, forwardPassTags)]);
diff --git a/packages/core/src/shaderlib/extra/trail.fs.glsl b/packages/core/src/shaderlib/extra/trail.fs.glsl
new file mode 100644
index 0000000000..4afe2749d5
--- /dev/null
+++ b/packages/core/src/shaderlib/extra/trail.fs.glsl
@@ -0,0 +1,12 @@
+varying vec4 vColor;
+varying vec2 v_uv;
+uniform sampler2D u_texture;
+void main(void)
+{
+  #ifdef trailTexture
+    vec4 textureColor = texture2D(u_texture, v_uv);
+    gl_FragColor = vColor * textureColor;
+  #else
+    gl_FragColor = vColor;
+  #endif
+}
\ No newline at end of file
diff --git a/packages/core/src/shaderlib/extra/trail.vs.glsl b/packages/core/src/shaderlib/extra/trail.vs.glsl
new file mode 100644
index 0000000000..86dd37019c
--- /dev/null
+++ b/packages/core/src/shaderlib/extra/trail.vs.glsl
@@ -0,0 +1,36 @@
+uniform mat4 u_projMat;
+uniform mat4 u_viewMat;
+uniform mat4 u_modelMat;
+
+uniform float u_textureTileS;
+uniform float u_textureTileT;
+
+uniform vec4 u_headColor;
+uniform vec4 u_tailColor;
+
+uniform float u_currentTime;
+uniform float u_trailLifeTime;
+
+attribute vec3 a_position;
+attribute vec3 a_nodeCenter;
+
+attribute float a_nodeIndex;
+attribute float a_vertexNodeIndex;
+attribute float a_trailBirthTime;
+
+varying vec2 v_uv;
+varying vec4 vColor;
+
+void main(){
+  float s = a_nodeIndex / 80.0 * u_textureTileS;
+  float t = a_vertexNodeIndex * u_textureTileT;
+  v_uv = vec2( s, t );
+
+  float normalizeTime = (u_currentTime - a_trailBirthTime) / u_trailLifeTime;
+  vec4 realPosition = vec4( ( 1.0 - normalizeTime ) * a_position.xyz + normalizeTime * a_position.xyz, 1.0 ); 
+  gl_Position = u_projMat * u_viewMat * realPosition;
+
+  if (normalizeTime < 1.0){
+    vColor = ( 1.0 - normalizeTime ) * u_headColor + normalizeTime * u_tailColor;
+  }
+}
diff --git a/packages/core/src/trail/TrailMaterial.ts b/packages/core/src/trail/TrailMaterial.ts
deleted file mode 100644
index 86ec16f929..0000000000
--- a/packages/core/src/trail/TrailMaterial.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { Engine } from "../Engine";
-import { Material } from "../material/Material";
-import { BlendFactor, Shader } from "../shader";
-import FRAG_SHADER from "./trail.fs.glsl";
-import VERT_SHADER from "./trail.vs.glsl";
-
-Shader.create("trail", VERT_SHADER, FRAG_SHADER);
-
-export class TrailMaterial extends Material {
-  constructor(engine: Engine) {
-    super(engine, Shader.find("trail"));
-
-    const target = this.renderState.blendState.targetBlendState;
-    target.enabled = true;
-    target.sourceColorBlendFactor = target.sourceAlphaBlendFactor = BlendFactor.SourceAlpha;
-    target.destinationColorBlendFactor = target.destinationAlphaBlendFactor = BlendFactor.One;
-
-    this.renderState.depthState.writeEnabled = false;
-  }
-}
diff --git a/packages/core/src/trail/TrailRenderer.ts b/packages/core/src/trail/TrailRenderer.ts
index dc772a1e7e..b06ef203f9 100644
--- a/packages/core/src/trail/TrailRenderer.ts
+++ b/packages/core/src/trail/TrailRenderer.ts
@@ -1,250 +1,402 @@
-import { Matrix, Quaternion, Vector3 } from "@oasis-engine/math";
-import { Entity } from "../Entity";
-import { Buffer } from "../graphic/Buffer";
-import { BufferUsage } from "../graphic/enums/BufferUsage";
-import { MeshTopology } from "../graphic/enums/MeshTopology";
-import { VertexElementFormat } from "../graphic/enums/VertexElementFormat";
-import { VertexElement } from "../graphic/VertexElement";
-import { BufferMesh } from "../mesh/BufferMesh";
-import { MeshRenderer } from "../mesh/MeshRenderer";
-import { RenderContext } from "../RenderPipeline/RenderContext";
-import { Texture2D } from "../texture";
-import { TrailMaterial } from "./TrailMaterial";
 
-const _tempVector3 = new Vector3();
+import { Renderer } from "../Renderer";
+import { BufferMesh } from "../mesh/BufferMesh";
+import { BaseMaterial } from "../material";
+import { CullMode, Shader } from "../shader";
+import { Buffer, BufferBindFlag, BufferUsage, Mesh, MeshTopology, VertexElement, VertexElementFormat } from "../graphic";
+import { ICustomClone } from "../clone/ComponentCloner";
+import { Vector3, Matrix, Color } from "@oasis-engine/math";
+import { Texture } from "../texture";
 
 /**
- * @deprecated
+ * Trail Renderer Component.
  */
-export class TrailRenderer extends MeshRenderer {
-  private _vertexStride: number;
-  private _vertices: Float32Array;
+export class TrailRenderer extends Renderer implements ICustomClone {
+  private _mesh: Mesh;
+  private _texture: Texture;
+  private _material: BaseMaterial;
+
+  private _currentLength: number = 0;
+  private _currentEnd: number = -1;
+  private _currentNodeIndex: number = 0;
+
+  private _width: number = 1.0;
+  private _maxLength: number = 0.0;
+
+  private _time: number = 1.0;
+  private _trailBirthTimes: Float32Array;
+  private _trailBirthTimesBuffer: Buffer;
+
+  private _vertexCount: number = 0;
+  private _verticesPerNode: number = 2.0;
+
+  private _nodeIDsBuffer: Buffer;
+  private _nodeIDs: Float32Array;
+
+  private _vertexNodeIDsBuffer: Buffer;
+  private _vertexNodeIDs: Float32Array;
+
   private _vertexBuffer: Buffer;
-  private _stroke;
-  private _minSeg;
-  private _lifetime;
-  private _maxPointNum;
-  private _points: Array<Vector3>;
-  private _pointStates: Array<number>;
-  private _strapPoints: Array<Vector3>;
-  private _curPointNum;
-  private _prePointsNum;
+  private _positions: Float32Array;
+
+  private _headVertexArray: Array<Vector3>;
+  private _tempHeadVertexArray: Array<Vector3>;
+
+  private _headColor: Color = new Color();
+  private _trailColor: Color = new Color();
+
+  private _textureTileS: number = 8.0;
+  private _textureTileT: number = 1.0;
+
   /**
-   * @deprecated
+   * Mesh of trail.
    */
-  constructor(entity: Entity, props: any) {
-    super(entity);
-
-    this._stroke = props.stroke || 0.2;
-    this._minSeg = props.minSeg || 0.02;
-    this._lifetime = props.lifetime || 1000;
-    this._maxPointNum = (this._lifetime / 1000.0) * entity.engine.targetFrameRate;
-
-    this._points = [];
-    this._pointStates = [];
-    this._strapPoints = [];
-    for (let i = 0; i < this._maxPointNum; i++) {
-      this._points.push(new Vector3());
-      this._pointStates.push(this._lifetime);
-
-      this._strapPoints.push(new Vector3());
-      this._strapPoints.push(new Vector3());
+  get mesh(): Mesh {
+    return this._mesh;
+  }
+
+  set mesh(value: Mesh) {
+    this._mesh = value;
+  }
+
+  /**
+   * Texture of trail.
+   */
+  get texture(): Texture {
+    return this._texture;
+  }
+
+  set texture(value: Texture) {
+    this._texture = value;
+    if (value) {
+      this.material.shaderData.enableMacro("trailTexture");
+      this.material.shaderData.setTexture("u_texture", value);
+      this.material.shaderData.setFloat("u_textureTileS", this._textureTileS);
+      this.material.shaderData.setFloat("u_textureTileT", this._textureTileT);
+    } else {
+      this.material.shaderData.disableMacro("trailTexture");
     }
-    this._curPointNum = 0;
+  }
 
-    const mtl = props.material || new TrailMaterial(this.engine);
-    this.setMaterial(mtl);
+  /**
+   * Material of trail.
+   */
+  get material(): BaseMaterial {
+    return this._material;
+  }
+
+  set material(value: BaseMaterial) {
+    this._material = value;
+  }
+
+  /**
+   * Width of trail.
+   */
+  get width(): number {
+    return this._width;
+  }
 
-    this.setTexture(props.texture);
-    this._initGeometry();
+  set width(value: number) {
+    this._width = value;
+    this._init();
+  }
+
+  /**
+   * Time of trail node life.
+   */
+  get time(): number {
+    return this._time;
+  }
+
+  set time(value: number) {
+    this._time = value;
+    this._init();
+    this.material.shaderData.setFloat("u_trailLifeTime", value);
+  }
+
+  /**
+   * Positions vertex of trail.
+   */
+  get positions(): Float32Array {
+    return this._positions;
+  }
+
+  set positions(value: Float32Array) {
+    this._positions = value;
+  }
+
+  /**
+   * NodeIDs vertex of trail.
+   */
+  get nodeIDs(): Float32Array {
+    return this._nodeIDs;
+  }
+
+  set nodeIDs(value: Float32Array) {
+    this._nodeIDs = value;
+  }
+
+  /** 
+   * Head color for trail
+   */
+  get headColor(): Color {
+    return this._headColor;
+  }
+
+  set headColor(value: any) {
+    this._headColor.copyFrom(value);
+    this.material.shaderData.setVector4("u_headColor", value);
+  }
+
+  /**
+   * Trail color for trail
+   */
+  get trailColor(): Color {
+    return this._trailColor;
+  }
+
+  set trailColor(value: any) {
+    this._trailColor.copyFrom(value);
+    this.material.shaderData.setVector4("u_tailColor", value);
+  }
+
+  /**
+   * Texture tile S for trail
+   */
+  get textureTileS(): number {
+    return this._textureTileS;
+  }
+
+  set textureTileS(value: number) {
+    this._textureTileS = value;
+    this.material.shaderData.setFloat("u_textureTileS", value);
+  }
+
+  /**
+   * Texture tile T for trail
+   */
+  get textureTileT(): number {
+    return this._textureTileT;
+  }
+
+  set textureTileT(value: number) {
+    this._textureTileT = value;
+    this.material.shaderData.setFloat("u_textureTileT", value);
+  }
+
+  constructor(props) {
+    super(props);
+
+    this._createMaterial();
   }
 
   /**
    * @internal
    */
-  update(deltaTime: number) {
-    let mov = 0,
-      newIdx = 0;
-    for (let i = 0; i < this._curPointNum; i++) {
-      this._pointStates[i] -= deltaTime;
-      if (this._pointStates[i] < 0) {
-        mov++;
-      } else if (mov > 0) {
-        newIdx = i - mov;
-
-        // Move data
-        this._pointStates[newIdx] = this._pointStates[i];
-
-        // Move point
-        this._points[newIdx].copyFrom(this._points[i]);
-      }
-    }
-    this._curPointNum -= mov;
-
-    let appendNewPoint = true;
-    if (this._curPointNum === this._maxPointNum) {
-      appendNewPoint = false;
-    } else if (this._curPointNum > 0) {
-      const lastPoint = this._points[this._points.length - 1];
-      if (Vector3.distance(this.entity.transform.worldPosition, lastPoint) < this._minSeg) {
-        appendNewPoint = false;
-      } else {
-        // debugger
-      }
-    }
+  _cloneTo(target: TrailRenderer): void {
+    target.mesh = this._mesh;
+  }
+
+  private _init() {
+    this._currentLength = 0;
+    this._currentEnd = -1;
+    this._currentNodeIndex = 0;
+    this._maxLength = this._time * 128;
+
+
+    this._createHeadVertexList();
+    this._createTempHeadVertexList();
+
+    this._vertexCount = this._maxLength * this._verticesPerNode;
+    this._positions = new Float32Array((this._vertexCount + this._verticesPerNode) * 3);
+    this._nodeIDs = new Float32Array(this._vertexCount + 2);
+    this._vertexNodeIDs = new Float32Array(this._vertexCount + 2);
+    this._trailBirthTimes = new Float32Array(this._vertexCount + 2);
+
+    this._createMesh();
+  }
+
+  private _createMaterial(): BaseMaterial {
+    this._material = new BaseMaterial(this.engine, Shader.find("trail-shader"));
+    this._material.isTransparent = true;
+    return this._material;
+  }
+
+  private _createMesh(): BufferMesh {
+    const mesh = new BufferMesh(this.engine, "trail-Mesh");
+
+    const nodeIDsButter = new Buffer(this.engine, BufferBindFlag.VertexBuffer, this._nodeIDs, BufferUsage.Dynamic);
+    mesh.setVertexBufferBinding(nodeIDsButter, 4, 0)
+
+    const vertexNodeIDsBuffer = new Buffer(this.engine, BufferBindFlag.VertexBuffer, this._vertexNodeIDs, BufferUsage.Dynamic);
+    mesh.setVertexBufferBinding(vertexNodeIDsBuffer, 4, 1);
 
-    if (appendNewPoint) {
-      this._pointStates[this._curPointNum] = this._lifetime;
-      this._points[this._curPointNum].copyFrom(this.entity.transform.worldPosition);
+    const positionBuffer = new Buffer(this.engine, BufferBindFlag.VertexBuffer, this.positions, BufferUsage.Dynamic);
+    mesh.setVertexBufferBinding(positionBuffer, 12, 2);
 
-      this._curPointNum++;
+    const trailBirthTimesBuffer = new Buffer(this.engine, BufferBindFlag.VertexBuffer, this._trailBirthTimes, BufferUsage.Dynamic);
+    mesh.setVertexBufferBinding(trailBirthTimesBuffer, 4, 3);
+
+    mesh.setVertexElements(
+      [
+        new VertexElement("a_nodeIndex", 0, VertexElementFormat.Float, 0),
+        new VertexElement("a_vertexNodeIndex", 0, VertexElementFormat.Float, 1),
+        new VertexElement("a_position", 0, VertexElementFormat.Vector3, 2),
+        new VertexElement("a_trailBirthTime", 0, VertexElementFormat.Float, 3),
+      ])
+    mesh.addSubMesh(0, 0, MeshTopology.TriangleStrip);
+
+    this._nodeIDsBuffer = nodeIDsButter;
+    this._vertexNodeIDsBuffer = vertexNodeIDsBuffer;
+    this._vertexBuffer = positionBuffer;
+    this._trailBirthTimesBuffer = trailBirthTimesBuffer;
+    this._mesh = mesh;
+
+    return mesh;
+  }
+
+  private _createHeadVertexList(): void {
+    const headWidth = this.width == 0 ? 1 : this.width;
+    this._headVertexArray = [];
+
+    let halfWidth = headWidth || 1.0;
+    halfWidth = halfWidth / 2.0;
+
+    this._headVertexArray.push(new Vector3(-halfWidth, 0, 0));
+    this._headVertexArray.push(new Vector3(halfWidth, 0, 0));
+
+    this._verticesPerNode = 2;
+  }
+
+  private _createTempHeadVertexList(): void {
+    this._tempHeadVertexArray = [];
+    for (let i = 0; i < 128; i++) {
+      this._tempHeadVertexArray.push(new Vector3(0, 0, 0));
     }
   }
 
   /**
-   * @deprecated
-   * Set trail texture.
-   * @param texture
+   * @override
    */
-  setTexture(texture: Texture2D) {
-    if (texture) {
-      this.getMaterial().shaderData.setTexture("u_texture", texture);
+  protected _render(context: any): void {
+    const { mesh, material } = this;
+
+    const renderPipeline = context.camera._renderPipeline;
+    const meshRenderDataPool = this._engine._meshRenderDataPool;
+    const renderState = material.renderState;
+    renderState.rasterState.cullMode = CullMode.Off;
+
+    const subMeshes = mesh.subMeshes;
+    for (let i = 0, n = subMeshes.length; i < n; i++) {
+      if (material) {
+        const renderData = meshRenderDataPool.getFromPool();
+        renderData.set(this, material, mesh, subMeshes[i]);
+        renderPipeline.pushRenderData(context, renderData);
+      }
     }
   }
 
   /**
    * @override
+   * @internal
    */
-  protected _render(context: RenderContext): void {
-    this._updateStrapVertices(context.camera, this._points);
-    this._updateStrapCoords();
-    this._vertexBuffer.setData(this._vertices);
-
-    super._render(context);
-  }
-
-  private _initGeometry() {
-    const mesh = new BufferMesh(this._entity.engine);
-
-    const vertexStride = 20;
-    const vertexCount = this._maxPointNum * 2;
-    const vertexFloatCount = vertexCount * vertexStride;
-    const vertices = new Float32Array(vertexFloatCount);
-    const vertexElements = [
-      new VertexElement("POSITION", 0, VertexElementFormat.Vector3, 0),
-      new VertexElement("TEXCOORD_0", 12, VertexElementFormat.Vector2, 0)
-    ];
-    const vertexBuffer = new Buffer(this.engine, vertexFloatCount * 4, BufferUsage.Dynamic);
-
-    mesh.setVertexBufferBinding(vertexBuffer, vertexStride);
-    mesh.setVertexElements(vertexElements);
-    mesh.addSubMesh(0, vertexCount, MeshTopology.TriangleStrip);
-
-    this._vertexBuffer = vertexBuffer;
-    this._vertexStride = vertexStride;
-    this._vertices = vertices;
-    this.mesh = mesh;
-  }
-
-  private _updateStrapVertices(camera, points: Array<Vector3>) {
-    const m: Matrix = camera.viewMatrix;
-    const e = m.elements;
-    const vx = new Vector3(e[0], e[4], e[8]);
-    const vy = new Vector3(e[1], e[5], e[9]);
-    const vz = new Vector3(e[2], e[6], e[10]);
-    const s = this._stroke;
-
-    vy.scale(s);
-
-    const up = new Vector3();
-    const down = new Vector3();
-
-    const rotation = new Quaternion();
-
-    Vector3.transformByQuat(vx, rotation, vx);
-    Vector3.transformByQuat(vy, rotation, vy);
-
-    const dy = new Vector3();
-    const cross = new Vector3();
-    const perpVector = new Vector3();
-
-    vx.normalize();
-
-    const vertices = this._vertices;
-    //-- quad pos
-    for (let i = 0; i < this._maxPointNum; i++) {
-      //-- center pos
-      if (i < this._curPointNum) {
-        const p = points[i];
-
-        if (i === this._curPointNum - 1 && i !== 0) {
-          Vector3.subtract(p, points[i - 1], perpVector);
-        } else {
-          Vector3.subtract(points[i + 1], p, perpVector);
-        }
-
-        this._projectOnPlane(perpVector, vz, perpVector);
-        perpVector.normalize();
-
-        // Calculate angle between vectors
-        let angle = Math.acos(Vector3.dot(vx, perpVector));
-        Vector3.cross(vx, perpVector, cross);
-        if (Vector3.dot(cross, vz) <= 0) {
-          angle = Math.PI * 2 - angle;
-        }
-        Quaternion.rotationAxisAngle(vz, angle, rotation);
-        Vector3.transformByQuat(vy, rotation, dy);
-
-        Vector3.add(p, dy, up);
-        Vector3.subtract(p, dy, down);
-      }
+  update(deltaTime: number): void {
+    this._updateBuffer();
+  }
 
-      const p0 = (i * 2 * this._vertexStride) / 4;
-      const p1 = ((i * 2 + 1) * this._vertexStride) / 4;
-      vertices[p0] = up.x;
-      vertices[p0 + 1] = up.y;
-      vertices[p0 + 2] = up.z;
+  private _updateBuffer(): void {
+    let nextIndex = this._currentEnd + 1 >= this._maxLength ? 0 : this._currentEnd + 1;
 
-      vertices[p1] = down.x;
-      vertices[p1 + 1] = down.y;
-      vertices[p1 + 2] = down.z;
+    if (this._currentLength < this._maxLength) {
+      this._currentLength++;
     }
-  }
-
-  private _updateStrapCoords() {
-    if (this._prePointsNum === this._curPointNum) {
-      return;
+    this._currentEnd++;
+    if (this._currentEnd >= this._maxLength) {
+      this._currentEnd = 0;
     }
 
-    this._prePointsNum = this._curPointNum;
+    const currentEntityMatrix = new Matrix();
+    currentEntityMatrix.copyFrom(this.entity.transform.worldMatrix);
+
+    this._updateSingleBuffer(nextIndex, currentEntityMatrix);
+    this._updateNodeIndex(this._currentEnd, this._currentNodeIndex);
+    this._currentNodeIndex++;
+
+    this._updateTrailUniform();
+  }
 
-    const count = this._curPointNum;
-    const texDelta = 1.0 / count;
-    const vertices = this._vertices;
-    for (let i = 0; i < count; i++) {
-      const d = 1.0 - i * texDelta;
-      const p0 = (i * 2 * this._vertexStride) / 4;
-      const p1 = ((i * 2 + 1) * this._vertexStride) / 4;
+  private _updateSingleBuffer(nodeIndex: number, transformMatrix: Matrix) {
+    const { positions } = this;
 
-      vertices[p0] = 0;
-      vertices[p0 + 1] = d;
+    for (let i = 0; i < this._headVertexArray.length; i++) {
+      let vertex = this._tempHeadVertexArray[i];
+      vertex.copyFrom(this._headVertexArray[i]);
+    }
+    for (let i = 0; i < this._headVertexArray.length; i++) {
+      let vertex = this._tempHeadVertexArray[i];
+      vertex.transformToVec3(transformMatrix);
+    }
+    for (let i = 0; i < this._headVertexArray.length; i++) {
+      let positionIndex = ((this._verticesPerNode * nodeIndex) + i) * 3;
+      let transformedHeadVertex = this._tempHeadVertexArray[i];
 
-      vertices[p1] = 1.0;
-      vertices[p1 + 1] = d;
+      positions[positionIndex] = transformedHeadVertex.x;
+      positions[positionIndex + 1] = transformedHeadVertex.y;
+      positions[positionIndex + 2] = transformedHeadVertex.z;
     }
+    const finalVertexCount = this._currentLength * this._verticesPerNode * 3;
+    let finalMeshStart = -1;
+    if (finalVertexCount == positions.length - this._verticesPerNode * 3) {
+      this._appendLastNodeForSubmesh();
+
+      finalMeshStart = (this._verticesPerNode * (nodeIndex + 1));
+      this.mesh.subMeshes[0].start = finalMeshStart;
+      this.mesh.subMeshes[0].count = (this._currentLength + 1) * 2 - finalMeshStart;
+      this.mesh.subMeshes[1].start = 0;
+      this.mesh.subMeshes[1].count = finalMeshStart;
+    } else {
+      if (this.mesh.subMesh) {
+        this.mesh.subMesh.start = 0;
+        this.mesh.subMesh.count = this._currentLength * 2;
+      }
+    }
+    this._vertexBuffer.setData(positions);
   }
 
-  private _projectOnVector(a: Vector3, p: Vector3, out: Vector3): void {
-    const n_p = p.clone();
-    Vector3.normalize(n_p, n_p);
-    const cosine = Vector3.dot(a, n_p);
-    out.x = n_p.x * cosine;
-    out.y = n_p.y * cosine;
-    out.z = n_p.z * cosine;
+  private _updateNodeIndex(nodeIndex: number, id: number) {
+    for (let i = 0; i < this._verticesPerNode; i++) {
+      let baseIndex = nodeIndex * this._verticesPerNode + i;
+      this._nodeIDs[baseIndex] = id;
+      this._vertexNodeIDs[baseIndex] = i;
+      this._trailBirthTimes[baseIndex] = performance.now() / 1000;;
+    }
+    let lastIndex = this._currentLength * this._verticesPerNode;
+    for (let i = 0; i < this._verticesPerNode * 2; i++) {
+      this._nodeIDs[lastIndex + i] = this._nodeIDs[i];
+      this._vertexNodeIDs[lastIndex + i] = this._vertexNodeIDs[i];
+      this._trailBirthTimes[lastIndex + i] = this._trailBirthTimes[i];
+    }
+    this._nodeIDsBuffer.setData(this._nodeIDs);
+    this._vertexNodeIDsBuffer.setData(this._vertexNodeIDs);
+    this._trailBirthTimesBuffer.setData(this._trailBirthTimes);
   }
 
-  private _projectOnPlane(a: Vector3, n: Vector3, out: Vector3) {
-    this._projectOnVector(a, n, _tempVector3);
-    Vector3.subtract(a, _tempVector3, out);
+  private _updateTrailUniform() {
+    this.material.shaderData.setFloat("u_currentTime", performance.now() / 1000);
+  }
+
+  private _appendLastNodeForSubmesh() {
+    if (this.mesh.subMeshes.length != 2) {
+      this.mesh.clearSubMesh();
+      this.mesh.addSubMesh(0, 0, MeshTopology.TriangleStrip);
+      this.mesh.addSubMesh(0, 0, MeshTopology.TriangleStrip);
+    }
+    // 将 TriangleStrip 分成两个 subMesh，
+    // 要在第一段末尾多绘制第二段的首节点，
+    // 不然会出现断层；
+    let lastIndex = this._currentLength * this._verticesPerNode * 3;
+    for (let i = 0; i < 2 * this._verticesPerNode * 3; i++) {
+      this._positions[lastIndex + i] = this._positions[i];
+    }
   }
 }
diff --git a/packages/core/src/trail/index.ts b/packages/core/src/trail/index.ts
index e05821cbdf..916ea74368 100644
--- a/packages/core/src/trail/index.ts
+++ b/packages/core/src/trail/index.ts
@@ -1,2 +1 @@
 export { TrailRenderer } from "./TrailRenderer";
-export { TrailMaterial } from "./TrailMaterial";
diff --git a/packages/core/src/trail/trail.fs.glsl b/packages/core/src/trail/trail.fs.glsl
deleted file mode 100644
index f682678188..0000000000
--- a/packages/core/src/trail/trail.fs.glsl
+++ /dev/null
@@ -1,9 +0,0 @@
-varying vec2 v_uv;
-
-uniform sampler2D u_texture;
-
-void main(void) {
-
-  gl_FragColor = texture2D(u_texture, v_uv);
-
-}
diff --git a/packages/core/src/trail/trail.vs.glsl b/packages/core/src/trail/trail.vs.glsl
deleted file mode 100644
index e08da4229d..0000000000
--- a/packages/core/src/trail/trail.vs.glsl
+++ /dev/null
@@ -1,14 +0,0 @@
-attribute vec3 POSITION;
-attribute vec2 TEXCOORD_0;
-
-varying vec2 v_uv;
-
-uniform mat4 u_projMat;
-uniform mat4 u_viewMat;
-
-void main() {
-
-  gl_Position = u_projMat * u_viewMat * vec4( POSITION, 1.0 );
-  v_uv = TEXCOORD_0;
-
-}

From c78007ff4e7a80c85e1750b76679e49ad9ad0179 Mon Sep 17 00:00:00 2001
From: errnull <errnull@libsvg.com>
Date: Fri, 24 Mar 2023 16:17:29 +0800
Subject: [PATCH 02/20] feat: update max length.

---
 packages/core/src/trail/TrailRenderer.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/src/trail/TrailRenderer.ts b/packages/core/src/trail/TrailRenderer.ts
index b06ef203f9..4e5af1aeca 100644
--- a/packages/core/src/trail/TrailRenderer.ts
+++ b/packages/core/src/trail/TrailRenderer.ts
@@ -201,7 +201,7 @@ export class TrailRenderer extends Renderer implements ICustomClone {
     this._currentLength = 0;
     this._currentEnd = -1;
     this._currentNodeIndex = 0;
-    this._maxLength = this._time * 128;
+    this._maxLength = this._time * 120;
 
 
     this._createHeadVertexList();

From 334481e9abeb3ed63db400d8340bd27a1c736650 Mon Sep 17 00:00:00 2001
From: errnull <errnull@libsvg.com>
Date: Thu, 13 Apr 2023 16:40:13 +0800
Subject: [PATCH 03/20] feat: remove useless import.

---
 packages/core/src/trail/TrailRenderer.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/core/src/trail/TrailRenderer.ts b/packages/core/src/trail/TrailRenderer.ts
index 264e498b0a..00cc1bd7cb 100644
--- a/packages/core/src/trail/TrailRenderer.ts
+++ b/packages/core/src/trail/TrailRenderer.ts
@@ -5,7 +5,6 @@ import { BaseMaterial } from "../material";
 import { CullMode, Shader } from "../shader";
 import { Buffer, BufferBindFlag, BufferUsage, Mesh, MeshTopology, VertexElement, VertexElementFormat } from "../graphic";
 import { ICustomClone } from "../clone/ComponentCloner";
-import { Vector3, Matrix, Color } from "@oasis-engine/math";
 import { Texture } from "../texture";
 
 /**

From 25f823e47935b13f6b0972bc90cde598bca7acea Mon Sep 17 00:00:00 2001
From: errnull <errnull@libsvg.com>
Date: Thu, 13 Apr 2023 17:22:01 +0800
Subject: [PATCH 04/20] feat: update import.

---
 packages/core/src/trail/TrailRenderer.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/core/src/trail/TrailRenderer.ts b/packages/core/src/trail/TrailRenderer.ts
index 00cc1bd7cb..cbe89f5a76 100644
--- a/packages/core/src/trail/TrailRenderer.ts
+++ b/packages/core/src/trail/TrailRenderer.ts
@@ -1,10 +1,11 @@
-import { Vector3, Matrix, Color } from "@galacean/math";
+import { Vector3, Matrix, Color } from "@galacean/engine-math";
 import { Renderer } from "../Renderer";
 import { BufferMesh } from "../mesh/BufferMesh";
 import { BaseMaterial } from "../material";
 import { CullMode, Shader } from "../shader";
 import { Buffer, BufferBindFlag, BufferUsage, Mesh, MeshTopology, VertexElement, VertexElementFormat } from "../graphic";
 import { ICustomClone } from "../clone/ComponentCloner";
+
 import { Texture } from "../texture";
 
 /**

From 7457e04bc3a9c5a832146acd247fcdc61349dd11 Mon Sep 17 00:00:00 2001
From: errnull <errnull@libsvg.com>
Date: Thu, 13 Apr 2023 18:43:21 +0800
Subject: [PATCH 05/20] feat: modify code optimization comments.

---
 packages/core/src/trail/TrailRenderer.ts | 63 ++++++++----------------
 1 file changed, 20 insertions(+), 43 deletions(-)

diff --git a/packages/core/src/trail/TrailRenderer.ts b/packages/core/src/trail/TrailRenderer.ts
index cbe89f5a76..2d108c1318 100644
--- a/packages/core/src/trail/TrailRenderer.ts
+++ b/packages/core/src/trail/TrailRenderer.ts
@@ -41,6 +41,7 @@ export class TrailRenderer extends Renderer implements ICustomClone {
 
   private _headVertexArray: Array<Vector3>;
   private _tempHeadVertexArray: Array<Vector3>;
+  private _tempEntityMatrix: Matrix;
 
   private _headColor: Color = new Color();
   private _trailColor: Color = new Color();
@@ -114,54 +115,32 @@ export class TrailRenderer extends Renderer implements ICustomClone {
     this.material.shaderData.setFloat("u_trailLifeTime", value);
   }
 
-  /**
-   * Positions vertex of trail.
-   */
-  get positions(): Float32Array {
-    return this._positions;
-  }
-
-  set positions(value: Float32Array) {
-    this._positions = value;
-  }
-
-  /**
-   * NodeIDs vertex of trail.
-   */
-  get nodeIDs(): Float32Array {
-    return this._nodeIDs;
-  }
-
-  set nodeIDs(value: Float32Array) {
-    this._nodeIDs = value;
-  }
-
   /** 
-   * Head color for trail
+   * Head color for trail.
    */
   get headColor(): Color {
     return this._headColor;
   }
 
-  set headColor(value: any) {
+  set headColor(value: Color) {
     this._headColor.copyFrom(value);
     this.material.shaderData.setVector4("u_headColor", value);
   }
 
   /**
-   * Trail color for trail
+   * Trail color for trail.
    */
   get trailColor(): Color {
     return this._trailColor;
   }
 
-  set trailColor(value: any) {
+  set trailColor(value: Color) {
     this._trailColor.copyFrom(value);
     this.material.shaderData.setVector4("u_tailColor", value);
   }
 
   /**
-   * Texture tile S for trail
+   * Texture tile S for trail.
    */
   get textureTileS(): number {
     return this._textureTileS;
@@ -173,7 +152,7 @@ export class TrailRenderer extends Renderer implements ICustomClone {
   }
 
   /**
-   * Texture tile T for trail
+   * Texture tile T for trail.
    */
   get textureTileT(): number {
     return this._textureTileT;
@@ -207,6 +186,7 @@ export class TrailRenderer extends Renderer implements ICustomClone {
     this._createHeadVertexList();
     this._createTempHeadVertexList();
 
+    this._tempEntityMatrix = new Matrix();
     this._vertexCount = this._maxLength * this._verticesPerNode;
     this._positions = new Float32Array((this._vertexCount + this._verticesPerNode) * 3);
     this._nodeIDs = new Float32Array(this._vertexCount + 2);
@@ -231,7 +211,7 @@ export class TrailRenderer extends Renderer implements ICustomClone {
     const vertexNodeIDsBuffer = new Buffer(this.engine, BufferBindFlag.VertexBuffer, this._vertexNodeIDs, BufferUsage.Dynamic);
     mesh.setVertexBufferBinding(vertexNodeIDsBuffer, 4, 1);
 
-    const positionBuffer = new Buffer(this.engine, BufferBindFlag.VertexBuffer, this.positions, BufferUsage.Dynamic);
+    const positionBuffer = new Buffer(this.engine, BufferBindFlag.VertexBuffer, this._positions, BufferUsage.Dynamic);
     mesh.setVertexBufferBinding(positionBuffer, 12, 2);
 
     const trailBirthTimesBuffer = new Buffer(this.engine, BufferBindFlag.VertexBuffer, this._trailBirthTimes, BufferUsage.Dynamic);
@@ -270,7 +250,7 @@ export class TrailRenderer extends Renderer implements ICustomClone {
 
   private _createTempHeadVertexList(): void {
     this._tempHeadVertexArray = [];
-    for (let i = 0; i < 128; i++) {
+    for (let i = 0; i < this._verticesPerNode; i++) {
       this._tempHeadVertexArray.push(new Vector3(0, 0, 0));
     }
   }
@@ -315,10 +295,8 @@ export class TrailRenderer extends Renderer implements ICustomClone {
       this._currentEnd = 0;
     }
 
-    const currentEntityMatrix = new Matrix();
-    currentEntityMatrix.copyFrom(this.entity.transform.worldMatrix);
-
-    this._updateSingleBuffer(nextIndex, currentEntityMatrix);
+    this._tempEntityMatrix.copyFrom(this.entity.transform.worldMatrix);
+    this._updateSingleBuffer(nextIndex, this._tempEntityMatrix);
     this._updateNodeIndex(this._currentEnd, this._currentNodeIndex);
     this._currentNodeIndex++;
 
@@ -326,7 +304,6 @@ export class TrailRenderer extends Renderer implements ICustomClone {
   }
 
   private _updateSingleBuffer(nodeIndex: number, transformMatrix: Matrix) {
-    const { positions } = this;
 
     for (let i = 0; i < this._headVertexArray.length; i++) {
       let vertex = this._tempHeadVertexArray[i];
@@ -340,13 +317,13 @@ export class TrailRenderer extends Renderer implements ICustomClone {
       let positionIndex = ((this._verticesPerNode * nodeIndex) + i) * 3;
       let transformedHeadVertex = this._tempHeadVertexArray[i];
 
-      positions[positionIndex] = transformedHeadVertex.x;
-      positions[positionIndex + 1] = transformedHeadVertex.y;
-      positions[positionIndex + 2] = transformedHeadVertex.z;
+      this._positions[positionIndex] = transformedHeadVertex.x;
+      this._positions[positionIndex + 1] = transformedHeadVertex.y;
+      this._positions[positionIndex + 2] = transformedHeadVertex.z;
     }
     const finalVertexCount = this._currentLength * this._verticesPerNode * 3;
     let finalMeshStart = -1;
-    if (finalVertexCount == positions.length - this._verticesPerNode * 3) {
+    if (finalVertexCount == this._positions.length - this._verticesPerNode * 3) {
       this._appendLastNodeForSubmesh();
 
       finalMeshStart = (this._verticesPerNode * (nodeIndex + 1));
@@ -360,7 +337,7 @@ export class TrailRenderer extends Renderer implements ICustomClone {
         this.mesh.subMesh.count = this._currentLength * 2;
       }
     }
-    this._vertexBuffer.setData(positions);
+    this._vertexBuffer.setData(this._positions);
   }
 
   private _updateNodeIndex(nodeIndex: number, id: number) {
@@ -391,9 +368,9 @@ export class TrailRenderer extends Renderer implements ICustomClone {
       this.mesh.addSubMesh(0, 0, MeshTopology.TriangleStrip);
       this.mesh.addSubMesh(0, 0, MeshTopology.TriangleStrip);
     }
-    // 将 TriangleStrip 分成两个 subMesh，
-    // 要在第一段末尾多绘制第二段的首节点，
-    // 不然会出现断层；
+    // Split TriangleStrip into two subMeshes;
+    // Copy the head node of the second submesh to the end of the first submesh;
+    // Avoid gap in the trail.
     let lastIndex = this._currentLength * this._verticesPerNode * 3;
     for (let i = 0; i < 2 * this._verticesPerNode * 3; i++) {
       this._positions[lastIndex + i] = this._positions[i];

From 262709b279589f2de0c794982f7a433cd3e742dc Mon Sep 17 00:00:00 2001
From: errnull <errnull@libsvg.com>
Date: Fri, 14 Apr 2023 10:55:00 +0800
Subject: [PATCH 06/20] feat: create trail material.

---
 packages/core/src/trail/TrailMaterial.ts | 12 +++++
 packages/core/src/trail/TrailRenderer.ts | 61 ++++++++----------------
 2 files changed, 33 insertions(+), 40 deletions(-)
 create mode 100644 packages/core/src/trail/TrailMaterial.ts

diff --git a/packages/core/src/trail/TrailMaterial.ts b/packages/core/src/trail/TrailMaterial.ts
new file mode 100644
index 0000000000..e439b20a9a
--- /dev/null
+++ b/packages/core/src/trail/TrailMaterial.ts
@@ -0,0 +1,12 @@
+import { Engine } from "../Engine";
+import { BaseMaterial } from "../material";
+import { CullMode, Shader } from "../shader";
+
+export class TrailMaterial extends BaseMaterial {
+    constructor(engine: Engine) {
+        super(engine, Shader.find("trail-shader"));
+        
+        this.isTransparent = true;
+        this.renderState.rasterState.cullMode = CullMode.Off;
+    }
+}
\ No newline at end of file
diff --git a/packages/core/src/trail/TrailRenderer.ts b/packages/core/src/trail/TrailRenderer.ts
index 2d108c1318..d7594246b0 100644
--- a/packages/core/src/trail/TrailRenderer.ts
+++ b/packages/core/src/trail/TrailRenderer.ts
@@ -2,11 +2,10 @@ import { Vector3, Matrix, Color } from "@galacean/engine-math";
 import { Renderer } from "../Renderer";
 import { BufferMesh } from "../mesh/BufferMesh";
 import { BaseMaterial } from "../material";
-import { CullMode, Shader } from "../shader";
 import { Buffer, BufferBindFlag, BufferUsage, Mesh, MeshTopology, VertexElement, VertexElementFormat } from "../graphic";
-import { ICustomClone } from "../clone/ComponentCloner";
-
 import { Texture } from "../texture";
+import { ICustomClone } from "../clone/ComponentCloner";
+import { TrailMaterial } from "./TrailMaterial";
 
 /**
  * Trail Renderer Component.
@@ -14,7 +13,6 @@ import { Texture } from "../texture";
 export class TrailRenderer extends Renderer implements ICustomClone {
   private _mesh: Mesh;
   private _texture: Texture;
-  private _material: BaseMaterial;
 
   private _currentLength: number = 0;
   private _currentEnd: number = -1;
@@ -70,26 +68,15 @@ export class TrailRenderer extends Renderer implements ICustomClone {
   set texture(value: Texture) {
     this._texture = value;
     if (value) {
-      this.material.shaderData.enableMacro("trailTexture");
-      this.material.shaderData.setTexture("u_texture", value);
-      this.material.shaderData.setFloat("u_textureTileS", this._textureTileS);
-      this.material.shaderData.setFloat("u_textureTileT", this._textureTileT);
+      this.getMaterial().shaderData.enableMacro("trailTexture");
+      this.getMaterial().shaderData.setTexture("u_texture", value);
+      this.getMaterial().shaderData.setFloat("u_textureTileS", this._textureTileS);
+      this.getMaterial().shaderData.setFloat("u_textureTileT", this._textureTileT);
     } else {
-      this.material.shaderData.disableMacro("trailTexture");
+      this.getMaterial().shaderData.disableMacro("trailTexture");
     }
   }
 
-  /**
-   * Material of trail.
-   */
-  get material(): BaseMaterial {
-    return this._material;
-  }
-
-  set material(value: BaseMaterial) {
-    this._material = value;
-  }
-
   /**
    * Width of trail.
    */
@@ -112,7 +99,7 @@ export class TrailRenderer extends Renderer implements ICustomClone {
   set time(value: number) {
     this._time = value;
     this._init();
-    this.material.shaderData.setFloat("u_trailLifeTime", value);
+    this.getMaterial().shaderData.setFloat("u_trailLifeTime", value);
   }
 
   /** 
@@ -124,7 +111,7 @@ export class TrailRenderer extends Renderer implements ICustomClone {
 
   set headColor(value: Color) {
     this._headColor.copyFrom(value);
-    this.material.shaderData.setVector4("u_headColor", value);
+    this.getMaterial().shaderData.setVector4("u_headColor", value);
   }
 
   /**
@@ -136,7 +123,7 @@ export class TrailRenderer extends Renderer implements ICustomClone {
 
   set trailColor(value: Color) {
     this._trailColor.copyFrom(value);
-    this.material.shaderData.setVector4("u_tailColor", value);
+    this.getMaterial().shaderData.setVector4("u_tailColor", value);
   }
 
   /**
@@ -148,7 +135,7 @@ export class TrailRenderer extends Renderer implements ICustomClone {
 
   set textureTileS(value: number) {
     this._textureTileS = value;
-    this.material.shaderData.setFloat("u_textureTileS", value);
+    this.getMaterial().shaderData.setFloat("u_textureTileS", value);
   }
 
   /**
@@ -160,15 +147,17 @@ export class TrailRenderer extends Renderer implements ICustomClone {
 
   set textureTileT(value: number) {
     this._textureTileT = value;
-    this.material.shaderData.setFloat("u_textureTileT", value);
+    this.getMaterial().shaderData.setFloat("u_textureTileT", value);
   }
 
   constructor(props) {
     super(props);
 
-    this._createMaterial();
+    const mtl = this.getMaterial() || new TrailMaterial(this.engine);
+    this.setMaterial(mtl);
   }
 
+
   /**
    * @internal
    */
@@ -196,12 +185,6 @@ export class TrailRenderer extends Renderer implements ICustomClone {
     this._createMesh();
   }
 
-  private _createMaterial(): BaseMaterial {
-    this._material = new BaseMaterial(this.engine, Shader.find("trail-shader"));
-    this._material.isTransparent = true;
-    return this._material;
-  }
-
   private _createMesh(): BufferMesh {
     const mesh = new BufferMesh(this.engine, "trail-Mesh");
 
@@ -259,20 +242,18 @@ export class TrailRenderer extends Renderer implements ICustomClone {
    * @override
    */
   protected _render(context: any): void {
-    const { mesh, material } = this;
+    const { mesh } = this;
 
+    const subMeshes = mesh.subMeshes;
     const renderPipeline = context.camera._renderPipeline;
     const meshRenderDataPool = this._engine._meshRenderDataPool;
-    const renderState = material.renderState;
-    renderState.rasterState.cullMode = CullMode.Off;
 
-    const subMeshes = mesh.subMeshes;
     for (let i = 0, n = subMeshes.length; i < n; i++) {
-      if (material) {
-        const renderData = meshRenderDataPool.getFromPool();
+      const material = this.getMaterial();
+      if (!material) continue;
+      const renderData = meshRenderDataPool.getFromPool();
         renderData.set(this, material, mesh, subMeshes[i]);
         renderPipeline.pushRenderData(context, renderData);
-      }
     }
   }
 
@@ -359,7 +340,7 @@ export class TrailRenderer extends Renderer implements ICustomClone {
   }
 
   private _updateTrailUniform() {
-    this.material.shaderData.setFloat("u_currentTime", performance.now() / 1000);
+    this.getMaterial().shaderData.setFloat("u_currentTime", performance.now() / 1000);
   }
 
   private _appendLastNodeForSubmesh() {

From c3d40f4733e3c162e020855a57e0706381ade775 Mon Sep 17 00:00:00 2001
From: errnull <errnull@libsvg.com>
Date: Fri, 14 Apr 2023 11:00:00 +0800
Subject: [PATCH 07/20] feat: remove useless import.

---
 packages/core/src/trail/TrailRenderer.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/core/src/trail/TrailRenderer.ts b/packages/core/src/trail/TrailRenderer.ts
index d7594246b0..844ad3dea1 100644
--- a/packages/core/src/trail/TrailRenderer.ts
+++ b/packages/core/src/trail/TrailRenderer.ts
@@ -1,11 +1,10 @@
-import { Vector3, Matrix, Color } from "@galacean/engine-math";
 import { Renderer } from "../Renderer";
 import { BufferMesh } from "../mesh/BufferMesh";
-import { BaseMaterial } from "../material";
 import { Buffer, BufferBindFlag, BufferUsage, Mesh, MeshTopology, VertexElement, VertexElementFormat } from "../graphic";
 import { Texture } from "../texture";
 import { ICustomClone } from "../clone/ComponentCloner";
 import { TrailMaterial } from "./TrailMaterial";
+import { Vector3, Matrix, Color } from "@galacean/engine-math";
 
 /**
  * Trail Renderer Component.

From c66f95e36402a990ad758358784aa3c8dad0f217 Mon Sep 17 00:00:00 2001
From: errnull <errnull@libsvg.com>
Date: Fri, 14 Apr 2023 13:23:12 +0800
Subject: [PATCH 08/20] feat: add imp for trail width cut.

---
 .../core/src/shaderlib/extra/trail.vs.glsl    |  2 +-
 packages/core/src/trail/TrailRenderer.ts      | 30 +++++++++++++++++++
 2 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/packages/core/src/shaderlib/extra/trail.vs.glsl b/packages/core/src/shaderlib/extra/trail.vs.glsl
index 86dd37019c..0bfdd5cfb7 100644
--- a/packages/core/src/shaderlib/extra/trail.vs.glsl
+++ b/packages/core/src/shaderlib/extra/trail.vs.glsl
@@ -27,7 +27,7 @@ void main(){
   v_uv = vec2( s, t );
 
   float normalizeTime = (u_currentTime - a_trailBirthTime) / u_trailLifeTime;
-  vec4 realPosition = vec4( ( 1.0 - normalizeTime ) * a_position.xyz + normalizeTime * a_position.xyz, 1.0 ); 
+  vec4 realPosition = vec4( ( 1.0 - normalizeTime ) * a_position.xyz + normalizeTime * a_nodeCenter.xyz, 1.0 ); 
   gl_Position = u_projMat * u_viewMat * realPosition;
 
   if (normalizeTime < 1.0){
diff --git a/packages/core/src/trail/TrailRenderer.ts b/packages/core/src/trail/TrailRenderer.ts
index 844ad3dea1..b04a67917c 100644
--- a/packages/core/src/trail/TrailRenderer.ts
+++ b/packages/core/src/trail/TrailRenderer.ts
@@ -29,6 +29,9 @@ export class TrailRenderer extends Renderer implements ICustomClone {
 
   private _nodeIDsBuffer: Buffer;
   private _nodeIDs: Float32Array;
+  
+  private _nodeCentersBuffer: Buffer;
+  private _nodeCenters: Float32Array;
 
   private _vertexNodeIDsBuffer: Buffer;
   private _vertexNodeIDs: Float32Array;
@@ -39,6 +42,8 @@ export class TrailRenderer extends Renderer implements ICustomClone {
   private _headVertexArray: Array<Vector3>;
   private _tempHeadVertexArray: Array<Vector3>;
   private _tempEntityMatrix: Matrix;
+  private _tempCenterVertex: Vector3;
+
 
   private _headColor: Color = new Color();
   private _trailColor: Color = new Color();
@@ -175,9 +180,11 @@ export class TrailRenderer extends Renderer implements ICustomClone {
     this._createTempHeadVertexList();
 
     this._tempEntityMatrix = new Matrix();
+    this._tempCenterVertex = new Vector3();
     this._vertexCount = this._maxLength * this._verticesPerNode;
     this._positions = new Float32Array((this._vertexCount + this._verticesPerNode) * 3);
     this._nodeIDs = new Float32Array(this._vertexCount + 2);
+    this._nodeCenters = new Float32Array((this._vertexCount + this._verticesPerNode) * 3);
     this._vertexNodeIDs = new Float32Array(this._vertexCount + 2);
     this._trailBirthTimes = new Float32Array(this._vertexCount + 2);
 
@@ -199,16 +206,21 @@ export class TrailRenderer extends Renderer implements ICustomClone {
     const trailBirthTimesBuffer = new Buffer(this.engine, BufferBindFlag.VertexBuffer, this._trailBirthTimes, BufferUsage.Dynamic);
     mesh.setVertexBufferBinding(trailBirthTimesBuffer, 4, 3);
 
+    const nodeCentersBuffer = new Buffer(this.engine, BufferBindFlag.VertexBuffer, this._nodeCenters, BufferUsage.Dynamic);
+    mesh.setVertexBufferBinding(nodeCentersBuffer, 12, 4);
+
     mesh.setVertexElements(
       [
         new VertexElement("a_nodeIndex", 0, VertexElementFormat.Float, 0),
         new VertexElement("a_vertexNodeIndex", 0, VertexElementFormat.Float, 1),
         new VertexElement("a_position", 0, VertexElementFormat.Vector3, 2),
         new VertexElement("a_trailBirthTime", 0, VertexElementFormat.Float, 3),
+        new VertexElement("a_nodeCenter", 0, VertexElementFormat.Vector3, 4),
       ])
     mesh.addSubMesh(0, 0, MeshTopology.TriangleStrip);
 
     this._nodeIDsBuffer = nodeIDsButter;
+    this._nodeCentersBuffer = nodeCentersBuffer;
     this._vertexNodeIDsBuffer = vertexNodeIDsBuffer;
     this._vertexBuffer = positionBuffer;
     this._trailBirthTimesBuffer = trailBirthTimesBuffer;
@@ -285,6 +297,10 @@ export class TrailRenderer extends Renderer implements ICustomClone {
 
   private _updateSingleBuffer(nodeIndex: number, transformMatrix: Matrix) {
 
+    this._tempCenterVertex.set(0, 0, 0);
+    this._tempCenterVertex.transformToVec3(transformMatrix);
+    this._updateNodeCenter(nodeIndex, this._tempCenterVertex);
+
     for (let i = 0; i < this._headVertexArray.length; i++) {
       let vertex = this._tempHeadVertexArray[i];
       vertex.copyFrom(this._headVertexArray[i]);
@@ -338,6 +354,20 @@ export class TrailRenderer extends Renderer implements ICustomClone {
     this._trailBirthTimesBuffer.setData(this._trailBirthTimes);
   }
 
+  private _updateNodeCenter(nodeIndex: number, nodeCenter: Vector3) {
+    for ( var i = 0; i < this._verticesPerNode; i ++ ) {
+      let baseIndex = ((this._verticesPerNode * nodeIndex) + i) * 3;
+      this._nodeCenters[baseIndex] = nodeCenter.x;
+      this._nodeCenters[baseIndex + 1] = nodeCenter.y;
+      this._nodeCenters[baseIndex + 2] = nodeCenter.z;
+    }
+    let lastIndex = this._currentLength * this._verticesPerNode * 3;
+    for (let i = 0; i < 2 * this._verticesPerNode * 3; i++) {
+      this._nodeCenters[lastIndex + i] = this._nodeCenters[i];
+    }
+    this._nodeCentersBuffer.setData(this._nodeCenters);
+  }
+
   private _updateTrailUniform() {
     this.getMaterial().shaderData.setFloat("u_currentTime", performance.now() / 1000);
   }

From 922a48b8e8d683eddd4ab1adbe49c39d3f8d4a82 Mon Sep 17 00:00:00 2001
From: errnull <errnull@libsvg.com>
Date: Fri, 14 Apr 2023 14:44:52 +0800
Subject: [PATCH 09/20] feat: update explanatory for uv s&t.

---
 packages/core/src/trail/TrailRenderer.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/core/src/trail/TrailRenderer.ts b/packages/core/src/trail/TrailRenderer.ts
index b0037cf2c5..63ee24dc38 100644
--- a/packages/core/src/trail/TrailRenderer.ts
+++ b/packages/core/src/trail/TrailRenderer.ts
@@ -131,7 +131,7 @@ export class TrailRenderer extends Renderer implements ICustomClone {
   }
 
   /**
-   * Texture tile S for trail.
+   * Tile Texture WrapMode S-axis for trail.
    */
   get textureTileS(): number {
     return this._textureTileS;
@@ -143,7 +143,7 @@ export class TrailRenderer extends Renderer implements ICustomClone {
   }
 
   /**
-   * Texture tile T for trail.
+   * Tile Texture WrapMode T-axis for trail.
    */
   get textureTileT(): number {
     return this._textureTileT;

From c83de9bc811eef5833c5bebf57d1c322b5d27f45 Mon Sep 17 00:00:00 2001
From: errnull <errnull@libsvg.com>
Date: Wed, 19 Apr 2023 02:40:50 +0800
Subject: [PATCH 10/20] feat: update texture dragging.

---
 .../core/src/shaderlib/extra/trail.vs.glsl    | 17 +++++++++----
 packages/core/src/trail/TrailMaterial.ts      |  7 +++---
 packages/core/src/trail/TrailRenderer.ts      | 24 +++++++++++++++----
 3 files changed, 35 insertions(+), 13 deletions(-)

diff --git a/packages/core/src/shaderlib/extra/trail.vs.glsl b/packages/core/src/shaderlib/extra/trail.vs.glsl
index 2fc40d8aaa..31238f7804 100644
--- a/packages/core/src/shaderlib/extra/trail.vs.glsl
+++ b/packages/core/src/shaderlib/extra/trail.vs.glsl
@@ -3,6 +3,7 @@ uniform mat4 camera_ViewMat;
 
 uniform float u_textureTileS;
 uniform float u_textureTileT;
+uniform float u_textureDragging;
 
 uniform vec4 u_headColor;
 uniform vec4 u_tailColor;
@@ -21,12 +22,18 @@ varying vec2 v_uv;
 varying vec4 vColor;
 
 void main(){
-  float s = a_nodeIndex / 80.0 * u_textureTileS;
-  float t = a_vertexNodeIndex * u_textureTileT;
-  v_uv = vec2( s, t );
-
   float normalizeTime = (u_currentTime - a_trailBirthTime) / u_trailLifeTime;
-  vec4 realPosition = vec4( ( 1.0 - normalizeTime ) * a_position.xyz + normalizeTime * a_nodeCenter.xyz, 1.0 ); 
+  float s = 0.0;
+  float t = 0.0;
+  if (u_textureDragging == 1.0) { 
+    s = normalizeTime * u_textureTileS; 
+    t = a_vertexNodeIndex * u_textureTileT;
+  } else { 
+    s = a_nodeIndex / 200.0 * u_textureTileS;
+    t = a_vertexNodeIndex * u_textureTileT;
+  }
+  v_uv = vec2( s, t );
+  vec4 realPosition = vec4( ( 1.0 - normalizeTime ) * a_position.xyz + normalizeTime * a_position.xyz, 1.0 ); 
   gl_Position = camera_ProjMat * camera_ViewMat * realPosition;
 
   if (normalizeTime < 1.0){
diff --git a/packages/core/src/trail/TrailMaterial.ts b/packages/core/src/trail/TrailMaterial.ts
index e439b20a9a..e191ade925 100644
--- a/packages/core/src/trail/TrailMaterial.ts
+++ b/packages/core/src/trail/TrailMaterial.ts
@@ -1,12 +1,13 @@
 import { Engine } from "../Engine";
-import { BaseMaterial } from "../material";
+import { BaseMaterial, BlendMode } from "../material";
 import { CullMode, Shader } from "../shader";
 
 export class TrailMaterial extends BaseMaterial {
     constructor(engine: Engine) {
         super(engine, Shader.find("trail-shader"));
-        
+
         this.isTransparent = true;
+        this.blendMode = BlendMode.Additive;
         this.renderState.rasterState.cullMode = CullMode.Off;
     }
-}
\ No newline at end of file
+}
diff --git a/packages/core/src/trail/TrailRenderer.ts b/packages/core/src/trail/TrailRenderer.ts
index 63ee24dc38..ce3054e6c2 100644
--- a/packages/core/src/trail/TrailRenderer.ts
+++ b/packages/core/src/trail/TrailRenderer.ts
@@ -29,7 +29,7 @@ export class TrailRenderer extends Renderer implements ICustomClone {
 
   private _nodeIDsBuffer: Buffer;
   private _nodeIDs: Float32Array;
-  
+
   private _nodeCentersBuffer: Buffer;
   private _nodeCenters: Float32Array;
 
@@ -48,9 +48,11 @@ export class TrailRenderer extends Renderer implements ICustomClone {
   private _headColor: Color = new Color();
   private _trailColor: Color = new Color();
 
-  private _textureTileS: number = 8.0;
+  private _textureTileS: number = 1.0;
   private _textureTileT: number = 1.0;
 
+  private _textureDragging: boolean = false;
+
   /**
    * Mesh of trail.
    */
@@ -154,6 +156,18 @@ export class TrailRenderer extends Renderer implements ICustomClone {
     this.getMaterial().shaderData.setFloat("u_textureTileT", value);
   }
 
+  /**
+   * Texture Dragging mode for trail.
+   */
+  get textureDragging(): boolean {
+    return this._textureDragging;
+  }
+
+  set textureDragging(value: boolean) {
+    this._textureDragging = value;
+    this.getMaterial().shaderData.setFloat("u_textureDragging", value ? 1.0 : 0.0);
+  }
+
   constructor(props) {
     super(props);
 
@@ -263,8 +277,8 @@ export class TrailRenderer extends Renderer implements ICustomClone {
       const material = this.getMaterial();
       if (!material) continue;
       const renderData = meshRenderDataPool.getFromPool();
-        renderData.set(this, material, mesh, subMeshes[i]);
-        renderPipeline.pushRenderData(context, renderData);
+      renderData.set(this, material, mesh, subMeshes[i]);
+      renderPipeline.pushRenderData(context, renderData);
     }
   }
 
@@ -355,7 +369,7 @@ export class TrailRenderer extends Renderer implements ICustomClone {
   }
 
   private _updateNodeCenter(nodeIndex: number, nodeCenter: Vector3) {
-    for ( var i = 0; i < this._verticesPerNode; i ++ ) {
+    for (var i = 0; i < this._verticesPerNode; i++) {
       let baseIndex = ((this._verticesPerNode * nodeIndex) + i) * 3;
       this._nodeCenters[baseIndex] = nodeCenter.x;
       this._nodeCenters[baseIndex + 1] = nodeCenter.y;

From f26212b2ff603a397d2a19c86e2013f1ec6be292 Mon Sep 17 00:00:00 2001
From: errnull <adaptedintelligence@gmail.com>
Date: Wed, 19 Apr 2023 11:32:11 +0800
Subject: [PATCH 11/20] feat: update material shaderData to renderer
 shaderData.

---
 packages/core/src/trail/TrailRenderer.ts | 33 +++++++++++++-----------
 1 file changed, 18 insertions(+), 15 deletions(-)

diff --git a/packages/core/src/trail/TrailRenderer.ts b/packages/core/src/trail/TrailRenderer.ts
index ce3054e6c2..902ecdc472 100644
--- a/packages/core/src/trail/TrailRenderer.ts
+++ b/packages/core/src/trail/TrailRenderer.ts
@@ -4,6 +4,7 @@ import { Buffer, BufferBindFlag, BufferUsage, Mesh, MeshTopology, VertexElement,
 import { Texture } from "../texture";
 import { ICustomClone } from "../clone/ComponentCloner";
 import { TrailMaterial } from "./TrailMaterial";
+import { Entity } from "../Entity";
 import { Vector3, Matrix, Color } from "@galacean/engine-math";
 
 /**
@@ -74,12 +75,12 @@ export class TrailRenderer extends Renderer implements ICustomClone {
   set texture(value: Texture) {
     this._texture = value;
     if (value) {
-      this.getMaterial().shaderData.enableMacro("trailTexture");
-      this.getMaterial().shaderData.setTexture("u_texture", value);
-      this.getMaterial().shaderData.setFloat("u_textureTileS", this._textureTileS);
-      this.getMaterial().shaderData.setFloat("u_textureTileT", this._textureTileT);
+      this.shaderData.enableMacro("trailTexture");
+      this.shaderData.setTexture("u_texture", value);
+      this.shaderData.setFloat("u_textureTileS", this._textureTileS);
+      this.shaderData.setFloat("u_textureTileT", this._textureTileT);
     } else {
-      this.getMaterial().shaderData.disableMacro("trailTexture");
+      this.shaderData.disableMacro("trailTexture");
     }
   }
 
@@ -105,7 +106,7 @@ export class TrailRenderer extends Renderer implements ICustomClone {
   set time(value: number) {
     this._time = value;
     this._init();
-    this.getMaterial().shaderData.setFloat("u_trailLifeTime", value);
+    this.shaderData.setFloat("u_trailLifeTime", value);
   }
 
   /** 
@@ -117,7 +118,7 @@ export class TrailRenderer extends Renderer implements ICustomClone {
 
   set headColor(value: Color) {
     this._headColor.copyFrom(value);
-    this.getMaterial().shaderData.setColor("u_headColor", value);
+    this.shaderData.setColor("u_headColor", value);
   }
 
   /**
@@ -129,7 +130,7 @@ export class TrailRenderer extends Renderer implements ICustomClone {
 
   set trailColor(value: Color) {
     this._trailColor.copyFrom(value);
-    this.getMaterial().shaderData.setColor("u_tailColor", value);
+    this.shaderData.setColor("u_tailColor", value);
   }
 
   /**
@@ -141,7 +142,7 @@ export class TrailRenderer extends Renderer implements ICustomClone {
 
   set textureTileS(value: number) {
     this._textureTileS = value;
-    this.getMaterial().shaderData.setFloat("u_textureTileS", value);
+    this.shaderData.setFloat("u_textureTileS", value);
   }
 
   /**
@@ -153,7 +154,7 @@ export class TrailRenderer extends Renderer implements ICustomClone {
 
   set textureTileT(value: number) {
     this._textureTileT = value;
-    this.getMaterial().shaderData.setFloat("u_textureTileT", value);
+    this.shaderData.setFloat("u_textureTileT", value);
   }
 
   /**
@@ -165,12 +166,14 @@ export class TrailRenderer extends Renderer implements ICustomClone {
 
   set textureDragging(value: boolean) {
     this._textureDragging = value;
-    this.getMaterial().shaderData.setFloat("u_textureDragging", value ? 1.0 : 0.0);
+    this.shaderData.setFloat("u_textureDragging", value ? 1.0 : 0.0);
   }
 
-  constructor(props) {
-    super(props);
-
+  /* @internal
+   */
+  constructor(entity: Entity) {
+    super(entity);
+    
     const mtl = this.getMaterial() || new TrailMaterial(this.engine);
     this.setMaterial(mtl);
   }
@@ -383,7 +386,7 @@ export class TrailRenderer extends Renderer implements ICustomClone {
   }
 
   private _updateTrailUniform() {
-    this.getMaterial().shaderData.setFloat("u_currentTime", performance.now() / 1000);
+    this.shaderData.setFloat("u_currentTime", performance.now() / 1000);
   }
 
   private _appendLastNodeForSubmesh() {

From 237bd995bc6d20f7426697d2ca4b5aa61fcbccc9 Mon Sep 17 00:00:00 2001
From: errnull <errnull@libsvg.com>
Date: Wed, 19 Apr 2023 11:51:07 +0800
Subject: [PATCH 12/20] feat: update explanatory for uv s&t.

---
 packages/core/src/trail/TrailRenderer.ts | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/core/src/trail/TrailRenderer.ts b/packages/core/src/trail/TrailRenderer.ts
index 902ecdc472..b356f51e3d 100644
--- a/packages/core/src/trail/TrailRenderer.ts
+++ b/packages/core/src/trail/TrailRenderer.ts
@@ -134,7 +134,10 @@ export class TrailRenderer extends Renderer implements ICustomClone {
   }
 
   /**
-   * Tile Texture WrapMode S-axis for trail.
+   * Texture UV S-axis for trail.
+   * textureTileS == 1 => Texture AspectFill;
+   * textureTileS >  1 => Texture Tile;
+   * textureTileS <  1 => Texture strech
    */
   get textureTileS(): number {
     return this._textureTileS;
@@ -146,7 +149,10 @@ export class TrailRenderer extends Renderer implements ICustomClone {
   }
 
   /**
-   * Tile Texture WrapMode T-axis for trail.
+   * Texture UV T-axis for trail.
+   * textureTileT == 1 => Texture AspectFill;
+   * textureTileT >  1 => Texture Tile;
+   * textureTileT <  1 => Texture strech;
    */
   get textureTileT(): number {
     return this._textureTileT;

From f086d3bdb509c71599875b20d0cd1fe544d44a1b Mon Sep 17 00:00:00 2001
From: errnull <errnull@libsvg.com>
Date: Wed, 19 Apr 2023 13:00:46 +0800
Subject: [PATCH 13/20] feat: merge
 a_nodeIndex&a_vertexNodeIndex&a_trailBirthTime to a_nodeIndexData.

---
 .../core/src/shaderlib/extra/trail.vs.glsl    | 17 ++---
 packages/core/src/trail/TrailRenderer.ts      | 65 +++++++------------
 2 files changed, 33 insertions(+), 49 deletions(-)

diff --git a/packages/core/src/shaderlib/extra/trail.vs.glsl b/packages/core/src/shaderlib/extra/trail.vs.glsl
index 31238f7804..1b9990332c 100644
--- a/packages/core/src/shaderlib/extra/trail.vs.glsl
+++ b/packages/core/src/shaderlib/extra/trail.vs.glsl
@@ -13,24 +13,25 @@ uniform float u_trailLifeTime;
 
 attribute vec3 a_position;
 attribute vec3 a_nodeCenter;
-
-attribute float a_nodeIndex;
-attribute float a_vertexNodeIndex;
-attribute float a_trailBirthTime;
+attribute vec3 a_nodeIndexData;
 
 varying vec2 v_uv;
 varying vec4 vColor;
 
 void main(){
-  float normalizeTime = (u_currentTime - a_trailBirthTime) / u_trailLifeTime;
+
+  float nodeIndex = a_nodeIndexData.x;
+  float vertexNodeIndex = a_nodeIndexData.y;
+  float trailBirthTime =  a_nodeIndexData.z;
+  float normalizeTime = (u_currentTime - trailBirthTime) / u_trailLifeTime;
   float s = 0.0;
   float t = 0.0;
   if (u_textureDragging == 1.0) { 
     s = normalizeTime * u_textureTileS; 
-    t = a_vertexNodeIndex * u_textureTileT;
+    t = vertexNodeIndex * u_textureTileT;
   } else { 
-    s = a_nodeIndex / 200.0 * u_textureTileS;
-    t = a_vertexNodeIndex * u_textureTileT;
+    s = nodeIndex / 200.0 * u_textureTileS;
+    t = vertexNodeIndex * u_textureTileT;
   }
   v_uv = vec2( s, t );
   vec4 realPosition = vec4( ( 1.0 - normalizeTime ) * a_position.xyz + normalizeTime * a_position.xyz, 1.0 ); 
diff --git a/packages/core/src/trail/TrailRenderer.ts b/packages/core/src/trail/TrailRenderer.ts
index b356f51e3d..7453103245 100644
--- a/packages/core/src/trail/TrailRenderer.ts
+++ b/packages/core/src/trail/TrailRenderer.ts
@@ -22,21 +22,16 @@ export class TrailRenderer extends Renderer implements ICustomClone {
   private _maxLength: number = 0.0;
 
   private _time: number = 1.0;
-  private _trailBirthTimes: Float32Array;
-  private _trailBirthTimesBuffer: Buffer;
 
   private _vertexCount: number = 0;
   private _verticesPerNode: number = 2.0;
 
-  private _nodeIDsBuffer: Buffer;
-  private _nodeIDs: Float32Array;
+  private _nodeIndexBuffer: Buffer;
+  private _nodeIndexData: Float32Array;
 
   private _nodeCentersBuffer: Buffer;
   private _nodeCenters: Float32Array;
 
-  private _vertexNodeIDsBuffer: Buffer;
-  private _vertexNodeIDs: Float32Array;
-
   private _vertexBuffer: Buffer;
   private _positions: Float32Array;
 
@@ -206,10 +201,8 @@ export class TrailRenderer extends Renderer implements ICustomClone {
     this._tempCenterVertex = new Vector3();
     this._vertexCount = this._maxLength * this._verticesPerNode;
     this._positions = new Float32Array((this._vertexCount + this._verticesPerNode) * 3);
-    this._nodeIDs = new Float32Array(this._vertexCount + 2);
     this._nodeCenters = new Float32Array((this._vertexCount + this._verticesPerNode) * 3);
-    this._vertexNodeIDs = new Float32Array(this._vertexCount + 2);
-    this._trailBirthTimes = new Float32Array(this._vertexCount + 2);
+    this._nodeIndexData = new Float32Array((this._vertexCount + this._verticesPerNode) * 3);
 
     this._createMesh();
   }
@@ -217,36 +210,26 @@ export class TrailRenderer extends Renderer implements ICustomClone {
   private _createMesh(): BufferMesh {
     const mesh = new BufferMesh(this.engine, "trail-Mesh");
 
-    const nodeIDsButter = new Buffer(this.engine, BufferBindFlag.VertexBuffer, this._nodeIDs, BufferUsage.Dynamic);
-    mesh.setVertexBufferBinding(nodeIDsButter, 4, 0)
-
-    const vertexNodeIDsBuffer = new Buffer(this.engine, BufferBindFlag.VertexBuffer, this._vertexNodeIDs, BufferUsage.Dynamic);
-    mesh.setVertexBufferBinding(vertexNodeIDsBuffer, 4, 1);
-
     const positionBuffer = new Buffer(this.engine, BufferBindFlag.VertexBuffer, this._positions, BufferUsage.Dynamic);
-    mesh.setVertexBufferBinding(positionBuffer, 12, 2);
-
-    const trailBirthTimesBuffer = new Buffer(this.engine, BufferBindFlag.VertexBuffer, this._trailBirthTimes, BufferUsage.Dynamic);
-    mesh.setVertexBufferBinding(trailBirthTimesBuffer, 4, 3);
+    mesh.setVertexBufferBinding(positionBuffer, 12, 0);
 
     const nodeCentersBuffer = new Buffer(this.engine, BufferBindFlag.VertexBuffer, this._nodeCenters, BufferUsage.Dynamic);
-    mesh.setVertexBufferBinding(nodeCentersBuffer, 12, 4);
+    mesh.setVertexBufferBinding(nodeCentersBuffer, 12, 1);
+
+    const nodeIndexBuffer = new Buffer(this.engine, BufferBindFlag.VertexBuffer, this._nodeIndexData, BufferUsage.Dynamic);
+    mesh.setVertexBufferBinding(nodeIndexBuffer, 12, 2);
 
     mesh.setVertexElements(
       [
-        new VertexElement("a_nodeIndex", 0, VertexElementFormat.Float, 0),
-        new VertexElement("a_vertexNodeIndex", 0, VertexElementFormat.Float, 1),
-        new VertexElement("a_position", 0, VertexElementFormat.Vector3, 2),
-        new VertexElement("a_trailBirthTime", 0, VertexElementFormat.Float, 3),
-        new VertexElement("a_nodeCenter", 0, VertexElementFormat.Vector3, 4),
+        new VertexElement("a_position", 0, VertexElementFormat.Vector3, 0),
+        new VertexElement("a_nodeCenter", 0, VertexElementFormat.Vector3, 1),
+        new VertexElement("a_nodeIndexData", 0, VertexElementFormat.Vector3, 2),
       ])
     mesh.addSubMesh(0, 0, MeshTopology.TriangleStrip);
 
-    this._nodeIDsBuffer = nodeIDsButter;
-    this._nodeCentersBuffer = nodeCentersBuffer;
-    this._vertexNodeIDsBuffer = vertexNodeIDsBuffer;
     this._vertexBuffer = positionBuffer;
-    this._trailBirthTimesBuffer = trailBirthTimesBuffer;
+    this._nodeCentersBuffer = nodeCentersBuffer;
+    this._nodeIndexBuffer = nodeIndexBuffer;
     this._mesh = mesh;
 
     return mesh;
@@ -361,20 +344,20 @@ export class TrailRenderer extends Renderer implements ICustomClone {
 
   private _updateNodeIndex(nodeIndex: number, id: number) {
     for (let i = 0; i < this._verticesPerNode; i++) {
-      let baseIndex = nodeIndex * this._verticesPerNode + i;
-      this._nodeIDs[baseIndex] = id;
-      this._vertexNodeIDs[baseIndex] = i;
-      this._trailBirthTimes[baseIndex] = performance.now() / 1000;;
+      let baseIndex = ((this._verticesPerNode * nodeIndex) + i) * 3;
+
+      this._nodeIndexData[baseIndex] = id;
+      this._nodeIndexData[baseIndex + 1] = i;
+      this._nodeIndexData[baseIndex + 2] = performance.now() / 1000;
     }
-    let lastIndex = this._currentLength * this._verticesPerNode;
+
+    let lastIndex = (this._currentLength * this._verticesPerNode) * 3;
     for (let i = 0; i < this._verticesPerNode * 2; i++) {
-      this._nodeIDs[lastIndex + i] = this._nodeIDs[i];
-      this._vertexNodeIDs[lastIndex + i] = this._vertexNodeIDs[i];
-      this._trailBirthTimes[lastIndex + i] = this._trailBirthTimes[i];
+      this._nodeIndexData[lastIndex + i] = this._nodeIndexData[i];
+      this._nodeIndexData[lastIndex + i + 1] = this._nodeIndexData[i + 1];
+      this._nodeIndexData[lastIndex + i + 2] = this._nodeIndexData[i + 2];
     }
-    this._nodeIDsBuffer.setData(this._nodeIDs);
-    this._vertexNodeIDsBuffer.setData(this._vertexNodeIDs);
-    this._trailBirthTimesBuffer.setData(this._trailBirthTimes);
+    this._nodeIndexBuffer.setData(this._nodeIndexData);
   }
 
   private _updateNodeCenter(nodeIndex: number, nodeCenter: Vector3) {

From 5493427fe967372709f14240984afc2c1304903f Mon Sep 17 00:00:00 2001
From: errnull <errnull@libsvg.com>
Date: Wed, 19 Apr 2023 13:01:17 +0800
Subject: [PATCH 14/20] feat: update code.

---
 packages/core/src/shaderlib/extra/trail.vs.glsl | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/core/src/shaderlib/extra/trail.vs.glsl b/packages/core/src/shaderlib/extra/trail.vs.glsl
index 1b9990332c..ee54bd78ea 100644
--- a/packages/core/src/shaderlib/extra/trail.vs.glsl
+++ b/packages/core/src/shaderlib/extra/trail.vs.glsl
@@ -23,6 +23,7 @@ void main(){
   float nodeIndex = a_nodeIndexData.x;
   float vertexNodeIndex = a_nodeIndexData.y;
   float trailBirthTime =  a_nodeIndexData.z;
+  
   float normalizeTime = (u_currentTime - trailBirthTime) / u_trailLifeTime;
   float s = 0.0;
   float t = 0.0;

From b68d62aeda3a8077c54d5bf58103f65d7a5895a8 Mon Sep 17 00:00:00 2001
From: errnull <errnull@libsvg.com>
Date: Wed, 19 Apr 2023 13:10:49 +0800
Subject: [PATCH 15/20] feat: Update code.

---
 packages/core/src/trail/TrailRenderer.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/core/src/trail/TrailRenderer.ts b/packages/core/src/trail/TrailRenderer.ts
index 7453103245..f36d4ad836 100644
--- a/packages/core/src/trail/TrailRenderer.ts
+++ b/packages/core/src/trail/TrailRenderer.ts
@@ -132,7 +132,7 @@ export class TrailRenderer extends Renderer implements ICustomClone {
    * Texture UV S-axis for trail.
    * textureTileS == 1 => Texture AspectFill;
    * textureTileS >  1 => Texture Tile;
-   * textureTileS <  1 => Texture strech
+   * textureTileS <  1 => Texture Strech;
    */
   get textureTileS(): number {
     return this._textureTileS;
@@ -147,7 +147,7 @@ export class TrailRenderer extends Renderer implements ICustomClone {
    * Texture UV T-axis for trail.
    * textureTileT == 1 => Texture AspectFill;
    * textureTileT >  1 => Texture Tile;
-   * textureTileT <  1 => Texture strech;
+   * textureTileT <  1 => Texture Strech;
    */
   get textureTileT(): number {
     return this._textureTileT;
@@ -230,6 +230,7 @@ export class TrailRenderer extends Renderer implements ICustomClone {
     this._vertexBuffer = positionBuffer;
     this._nodeCentersBuffer = nodeCentersBuffer;
     this._nodeIndexBuffer = nodeIndexBuffer;
+
     this._mesh = mesh;
 
     return mesh;

From 64f769e2c618e8d1c129a14d8360a16bf95459a1 Mon Sep 17 00:00:00 2001
From: errnull <errnull@libsvg.com>
Date: Wed, 19 Apr 2023 13:26:35 +0800
Subject: [PATCH 16/20] feat: update data.

---
 packages/core/src/shaderlib/extra/trail.vs.glsl | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/core/src/shaderlib/extra/trail.vs.glsl b/packages/core/src/shaderlib/extra/trail.vs.glsl
index ee54bd78ea..7cd4f46b29 100644
--- a/packages/core/src/shaderlib/extra/trail.vs.glsl
+++ b/packages/core/src/shaderlib/extra/trail.vs.glsl
@@ -23,7 +23,7 @@ void main(){
   float nodeIndex = a_nodeIndexData.x;
   float vertexNodeIndex = a_nodeIndexData.y;
   float trailBirthTime =  a_nodeIndexData.z;
-  
+
   float normalizeTime = (u_currentTime - trailBirthTime) / u_trailLifeTime;
   float s = 0.0;
   float t = 0.0;
@@ -31,7 +31,7 @@ void main(){
     s = normalizeTime * u_textureTileS; 
     t = vertexNodeIndex * u_textureTileT;
   } else { 
-    s = nodeIndex / 200.0 * u_textureTileS;
+    s = nodeIndex / 60.0 * u_textureTileS;
     t = vertexNodeIndex * u_textureTileT;
   }
   v_uv = vec2( s, t );

From 6b505a206ceb085500e5b9e51ea349c7179a510e Mon Sep 17 00:00:00 2001
From: errnull <errnull@libsvg.com>
Date: Wed, 19 Apr 2023 14:02:53 +0800
Subject: [PATCH 17/20] feat: update time and max length.

---
 packages/core/src/trail/TrailRenderer.ts | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/core/src/trail/TrailRenderer.ts b/packages/core/src/trail/TrailRenderer.ts
index f36d4ad836..029b6e9eb5 100644
--- a/packages/core/src/trail/TrailRenderer.ts
+++ b/packages/core/src/trail/TrailRenderer.ts
@@ -99,9 +99,10 @@ export class TrailRenderer extends Renderer implements ICustomClone {
   }
 
   set time(value: number) {
-    this._time = value;
+    // 
+    this._time = Number(value.toFixed(1));
     this._init();
-    this.shaderData.setFloat("u_trailLifeTime", value);
+    this.shaderData.setFloat("u_trailLifeTime", this._time);
   }
 
   /** 
@@ -191,7 +192,7 @@ export class TrailRenderer extends Renderer implements ICustomClone {
     this._currentLength = 0;
     this._currentEnd = -1;
     this._currentNodeIndex = 0;
-    this._maxLength = this._time * 120;
+    this._maxLength = this._time * 60;
 
 
     this._createHeadVertexList();

From 084d8dd00ace7a8ab6b00090cd0697373bed6676 Mon Sep 17 00:00:00 2001
From: errnull <errnull@libsvg.com>
Date: Wed, 19 Apr 2023 14:51:12 +0800
Subject: [PATCH 18/20] feat: update max length.

---
 packages/core/src/trail/TrailRenderer.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/core/src/trail/TrailRenderer.ts b/packages/core/src/trail/TrailRenderer.ts
index 029b6e9eb5..f3bb394901 100644
--- a/packages/core/src/trail/TrailRenderer.ts
+++ b/packages/core/src/trail/TrailRenderer.ts
@@ -175,7 +175,7 @@ export class TrailRenderer extends Renderer implements ICustomClone {
    */
   constructor(entity: Entity) {
     super(entity);
-    
+
     const mtl = this.getMaterial() || new TrailMaterial(this.engine);
     this.setMaterial(mtl);
   }
@@ -192,7 +192,7 @@ export class TrailRenderer extends Renderer implements ICustomClone {
     this._currentLength = 0;
     this._currentEnd = -1;
     this._currentNodeIndex = 0;
-    this._maxLength = this._time * 60;
+    this._maxLength = this._time * 120;
 
 
     this._createHeadVertexList();

From dd6bf6522b04c3528e9b3f083ce2573bcc6123a3 Mon Sep 17 00:00:00 2001
From: errnull <errnull@libsvg.com>
Date: Wed, 19 Apr 2023 14:59:55 +0800
Subject: [PATCH 19/20] feat: update max length.

---
 packages/core/src/shaderlib/extra/trail.vs.glsl | 3 ++-
 packages/core/src/trail/TrailRenderer.ts        | 5 +++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/core/src/shaderlib/extra/trail.vs.glsl b/packages/core/src/shaderlib/extra/trail.vs.glsl
index 7cd4f46b29..12fe133ad1 100644
--- a/packages/core/src/shaderlib/extra/trail.vs.glsl
+++ b/packages/core/src/shaderlib/extra/trail.vs.glsl
@@ -1,6 +1,7 @@
 uniform mat4 camera_ProjMat;
 uniform mat4 camera_ViewMat;
 
+uniform float u_maxLength;
 uniform float u_textureTileS;
 uniform float u_textureTileT;
 uniform float u_textureDragging;
@@ -31,7 +32,7 @@ void main(){
     s = normalizeTime * u_textureTileS; 
     t = vertexNodeIndex * u_textureTileT;
   } else { 
-    s = nodeIndex / 60.0 * u_textureTileS;
+    s = (nodeIndex / u_maxLength) * u_textureTileS;
     t = vertexNodeIndex * u_textureTileT;
   }
   v_uv = vec2( s, t );
diff --git a/packages/core/src/trail/TrailRenderer.ts b/packages/core/src/trail/TrailRenderer.ts
index f3bb394901..544bd64ec8 100644
--- a/packages/core/src/trail/TrailRenderer.ts
+++ b/packages/core/src/trail/TrailRenderer.ts
@@ -22,6 +22,7 @@ export class TrailRenderer extends Renderer implements ICustomClone {
   private _maxLength: number = 0.0;
 
   private _time: number = 1.0;
+  private _trailFPS: number = 120;
 
   private _vertexCount: number = 0;
   private _verticesPerNode: number = 2.0;
@@ -103,6 +104,7 @@ export class TrailRenderer extends Renderer implements ICustomClone {
     this._time = Number(value.toFixed(1));
     this._init();
     this.shaderData.setFloat("u_trailLifeTime", this._time);
+    this.shaderData.setFloat("u_maxLength", this._trailFPS);
   }
 
   /** 
@@ -192,8 +194,7 @@ export class TrailRenderer extends Renderer implements ICustomClone {
     this._currentLength = 0;
     this._currentEnd = -1;
     this._currentNodeIndex = 0;
-    this._maxLength = this._time * 120;
-
+    this._maxLength = this._time * this._trailFPS;
 
     this._createHeadVertexList();
     this._createTempHeadVertexList();

From b49bf8674ef76772431ada0e021afbba0d6c5e42 Mon Sep 17 00:00:00 2001
From: errnull <errnull@libsvg.com>
Date: Wed, 19 Apr 2023 16:34:12 +0800
Subject: [PATCH 20/20] feat: rename texture scale var.

---
 .../core/src/shaderlib/extra/trail.vs.glsl    | 12 +++---
 packages/core/src/trail/TrailRenderer.ts      | 40 +++++++++----------
 2 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/packages/core/src/shaderlib/extra/trail.vs.glsl b/packages/core/src/shaderlib/extra/trail.vs.glsl
index 12fe133ad1..cf045811e9 100644
--- a/packages/core/src/shaderlib/extra/trail.vs.glsl
+++ b/packages/core/src/shaderlib/extra/trail.vs.glsl
@@ -2,8 +2,8 @@ uniform mat4 camera_ProjMat;
 uniform mat4 camera_ViewMat;
 
 uniform float u_maxLength;
-uniform float u_textureTileS;
-uniform float u_textureTileT;
+uniform float u_textureScaleY;
+uniform float u_textureScaleX;
 uniform float u_textureDragging;
 
 uniform vec4 u_headColor;
@@ -29,11 +29,11 @@ void main(){
   float s = 0.0;
   float t = 0.0;
   if (u_textureDragging == 1.0) { 
-    s = normalizeTime * u_textureTileS; 
-    t = vertexNodeIndex * u_textureTileT;
+    s = normalizeTime * u_textureScaleY; 
+    t = vertexNodeIndex * u_textureScaleX;
   } else { 
-    s = (nodeIndex / u_maxLength) * u_textureTileS;
-    t = vertexNodeIndex * u_textureTileT;
+    s = (nodeIndex / u_maxLength) * u_textureScaleY;
+    t = vertexNodeIndex * u_textureScaleX;
   }
   v_uv = vec2( s, t );
   vec4 realPosition = vec4( ( 1.0 - normalizeTime ) * a_position.xyz + normalizeTime * a_position.xyz, 1.0 ); 
diff --git a/packages/core/src/trail/TrailRenderer.ts b/packages/core/src/trail/TrailRenderer.ts
index 544bd64ec8..a1d6cc8850 100644
--- a/packages/core/src/trail/TrailRenderer.ts
+++ b/packages/core/src/trail/TrailRenderer.ts
@@ -45,8 +45,8 @@ export class TrailRenderer extends Renderer implements ICustomClone {
   private _headColor: Color = new Color();
   private _trailColor: Color = new Color();
 
-  private _textureTileS: number = 1.0;
-  private _textureTileT: number = 1.0;
+  private _textureScaleY: number = 1.0;
+  private _textureScaleX: number = 1.0;
 
   private _textureDragging: boolean = false;
 
@@ -73,8 +73,8 @@ export class TrailRenderer extends Renderer implements ICustomClone {
     if (value) {
       this.shaderData.enableMacro("trailTexture");
       this.shaderData.setTexture("u_texture", value);
-      this.shaderData.setFloat("u_textureTileS", this._textureTileS);
-      this.shaderData.setFloat("u_textureTileT", this._textureTileT);
+      this.shaderData.setFloat("u_textureScaleY", this._textureScaleY);
+      this.shaderData.setFloat("u_textureScaleX", this._textureScaleX);
     } else {
       this.shaderData.disableMacro("trailTexture");
     }
@@ -133,32 +133,32 @@ export class TrailRenderer extends Renderer implements ICustomClone {
 
   /**
    * Texture UV S-axis for trail.
-   * textureTileS == 1 => Texture AspectFill;
-   * textureTileS >  1 => Texture Tile;
-   * textureTileS <  1 => Texture Strech;
+   * textureScaleY == 1 => Texture AspectFill;
+   * textureScaleY >  1 => Texture Tile;
+   * textureScaleY <  1 => Texture Strech;
    */
-  get textureTileS(): number {
-    return this._textureTileS;
+  get textureScaleY(): number {
+    return this._textureScaleY;
   }
 
-  set textureTileS(value: number) {
-    this._textureTileS = value;
-    this.shaderData.setFloat("u_textureTileS", value);
+  set textureScaleY(value: number) {
+    this._textureScaleY = value;
+    this.shaderData.setFloat("u_textureScaleY", value);
   }
 
   /**
    * Texture UV T-axis for trail.
-   * textureTileT == 1 => Texture AspectFill;
-   * textureTileT >  1 => Texture Tile;
-   * textureTileT <  1 => Texture Strech;
+   * textureScaleX == 1 => Texture AspectFill;
+   * textureScaleX >  1 => Texture Tile;
+   * textureScaleX <  1 => Texture Strech;
    */
-  get textureTileT(): number {
-    return this._textureTileT;
+  get textureScaleX(): number {
+    return this._textureScaleX;
   }
 
-  set textureTileT(value: number) {
-    this._textureTileT = value;
-    this.shaderData.setFloat("u_textureTileT", value);
+  set textureScaleX(value: number) {
+    this._textureScaleX = value;
+    this.shaderData.setFloat("u_textureScaleX", value);
   }
 
   /**