Support trail render

e2e/case/trailRenderer-basic.ts

@@ -0,0 +1,98 @@
+/**
+ * @title Trail Renderer Basic
+ * @category Trail
+ */
+import {
+  Camera,
+  Color,
+  CurveKey,
+  GradientAlphaKey,
+  GradientColorKey,
+  Logger,
+  ParticleCompositeCurve,
+  ParticleCurve,
+  ParticleGradient,
+  Script,
+  TrailRenderer,
+  Vector3,
+  WebGLEngine
+} from "@galacean/engine";
+import { initScreenshot, updateForE2E } from "./.mockForE2E";
+
+// Create engine
+WebGLEngine.create({
+  canvas: "canvas"
+}).then((engine) => {
+  Logger.enable();
+  engine.canvas.resizeByClientSize();
+
+  const scene = engine.sceneManager.activeScene;
+  const rootEntity = scene.createRootEntity();
+  scene.background.solidColor = new Color(0.1, 0.1, 0.15, 1);
+
+  // Create camera
+  const cameraEntity = rootEntity.createChild("camera");
+  cameraEntity.transform.position = new Vector3(0, 5, 15);
+  cameraEntity.transform.lookAt(new Vector3(0, 0, 0));
+  const camera = cameraEntity.addComponent(Camera);
+  camera.fieldOfView = 60;
+
+  // Create trail entity
+  const trailEntity = rootEntity.createChild("trail");
+  trailEntity.transform.position = new Vector3(0, 0, 0);
+
+  // Add TrailRenderer component
+  const trail = trailEntity.addComponent(TrailRenderer);
+  trail.time = 2.0;
+  trail.width = 0.5;
+  trail.minVertexDistance = 0.05;
+  trail.color.set(1, 0.5, 0, 1);
+
+  // Setup width curve (taper from head to tail)
+  trail.widthCurve = new ParticleCompositeCurve(
+    new ParticleCurve(new CurveKey(0, 1), new CurveKey(1, 0))
+  );
+
+  // Setup color gradient (orange to blue with fade out)
+  const gradient = new ParticleGradient(
+    [
+      new GradientColorKey(0, new Color(1, 0.5, 0, 1)),
+      new GradientColorKey(0.5, new Color(1, 0, 0.5, 1)),
+      new GradientColorKey(1, new Color(0, 0.5, 1, 1))
+    ],
+    [
+      new GradientAlphaKey(0, 1),
+      new GradientAlphaKey(0.7, 0.8),
+      new GradientAlphaKey(1, 0)
+    ]
+  );
+  trail.colorGradient = gradient;
+
+  // Add movement script
+  class MoveScript extends Script {
+    private _time = 0;
+    private _radius = 4;
+    private _speed = 2;
+    private _verticalSpeed = 1.5;
+
+    onUpdate(deltaTime: number): void {
+      this._time += deltaTime;
+      const t = this._time * this._speed;
+
+      // Lissajous curve movement
+      const x = Math.sin(t) * this._radius;
+      const y = Math.sin(t * this._verticalSpeed) * 2;
+      const z = Math.cos(t * 0.7) * this._radius;
+
+      this.entity.transform.position.set(x, y, z);
+    }
+  }
+
+  trailEntity.addComponent(MoveScript);
+
+  // engine.run();
+
+  // Run for e2e testing
+  updateForE2E(engine, 50, 20);
+  initScreenshot(engine, camera);
+});

e2e/config.ts

@@ -433,6 +433,14 @@ export const E2E_CONFIG = {
       diffPercentage: 0
     }
   },
+  Trail: {
+    basic: {
+      category: "Trail",
+      caseFileName: "trailRenderer-basic",
+      threshold: 0,
+      diffPercentage: 0
+    }
+  },
   Other: {
     ProjectLoader: {
       category: "Advance",

packages/core/src/trail/TrailMaterial.ts

@@ -1,20 +1,85 @@
+import { Color } from "@galacean/engine-math";
 import { Engine } from "../Engine";
 import { Material } from "../material/Material";
-import { BlendFactor, Shader } from "../shader";
+import { BlendFactor, CullMode, Shader, ShaderPass, SubShader } from "../shader";
+import { Texture2D } from "../texture";
+import { ShaderMacro } from "../shader/ShaderMacro";
+import { ShaderProperty } from "../shader/ShaderProperty";
 import FRAG_SHADER from "./trail.fs.glsl";
 import VERT_SHADER from "./trail.vs.glsl";
 
-Shader.create("trail", VERT_SHADER, FRAG_SHADER);
-
+/**
+ * Trail material.
+ */
 export class TrailMaterial extends Material {
+  private static _baseTextureMacro: ShaderMacro = ShaderMacro.getByName("MATERIAL_HAS_BASETEXTURE");
+  private static _baseColorProp: ShaderProperty = ShaderProperty.getByName("material_BaseColor");
+  private static _baseTextureProp: ShaderProperty = ShaderProperty.getByName("material_BaseTexture");
+
+  private static _isShaderCreated = false;
+
+  private static _createShader(): void {
+    if (TrailMaterial._isShaderCreated) return;
+
+    const shaderPass = new ShaderPass(VERT_SHADER, FRAG_SHADER);
+    const subShader = new SubShader("default", [shaderPass]);
+    Shader.create("trail", [subShader]);
+    TrailMaterial._isShaderCreated = true;
+  }
+
+  /**
+   * Base color.
+   */
+  get baseColor(): Color {
+    return this.shaderData.getColor(TrailMaterial._baseColorProp);
+  }
+
+  set baseColor(value: Color) {
+    const baseColor = this.shaderData.getColor(TrailMaterial._baseColorProp);
+    if (value !== baseColor) {
+      baseColor.copyFrom(value);
+    }
+  }
+
+  /**
+   * Base texture.
+   */
+  get baseTexture(): Texture2D {
+    return <Texture2D>this.shaderData.getTexture(TrailMaterial._baseTextureProp);
+  }
+
+  set baseTexture(value: Texture2D) {
+    this.shaderData.setTexture(TrailMaterial._baseTextureProp, value);
+    if (value) {
+      this.shaderData.enableMacro(TrailMaterial._baseTextureMacro);
+    } else {
+      this.shaderData.disableMacro(TrailMaterial._baseTextureMacro);
+    }
+  }
+
+  /**
+   * Create a trail material instance.
+   * @param engine - Engine to which the material belongs
+   */
   constructor(engine: Engine) {
+    TrailMaterial._createShader();
     super(engine, Shader.find("trail"));
 
+    const shaderData = this.shaderData;
+    shaderData.setColor(TrailMaterial._baseColorProp, new Color(1, 1, 1, 1));
+
+    // Default blend state for additive blending
     const target = this.renderState.blendState.targetBlendState;
     target.enabled = true;
-    target.sourceColorBlendFactor = target.sourceAlphaBlendFactor = BlendFactor.SourceAlpha;
-    target.destinationColorBlendFactor = target.destinationAlphaBlendFactor = BlendFactor.One;
+    target.sourceColorBlendFactor = BlendFactor.SourceAlpha;
+    target.destinationColorBlendFactor = BlendFactor.One;
+    target.sourceAlphaBlendFactor = BlendFactor.SourceAlpha;
+    target.destinationAlphaBlendFactor = BlendFactor.One;
 
+    // Disable depth write for transparent rendering
     this.renderState.depthState.writeEnabled = false;
+
+    // Disable culling for double-sided rendering
+    this.renderState.rasterState.cullMode = CullMode.Off;
   }
 }