fix: material params

example/CustomTrailMaterial.ts

@@ -6,6 +6,7 @@ export class CustomTrailMaterial extends TrailMaterial {
   static FRAG = TrailMaterial.SG_FRAG(
     /* glsl */ `varying vec2 vUV; uniform sampler2D map;`,
     /* glsl */ `gl_FragColor.a = texture2D(map, vUV).r;`,
+    // /* glsl */ `gl_FragColor = vec4(vUV, 0., 1.0);`,
   );
 
   vertexShader = CustomTrailMaterial.VERT;

example/main.ts

@@ -52,7 +52,9 @@ async function main() {
   //     fragmentShader: CustomTrailMaterial.FRAG,
   //    }),
   // );
-  const trailLine = new Trail(undefined, new CustomTrailMaterial(trailTexture));
+  const trailLine = new Trail({ time: 0.5 }, new CustomTrailMaterial(trailTexture));
+  // const trailLine = new Trail({ time: 0.5 });
+  // trailLine.material.wireframe = true;
   const trailParticle = new TrailParticle(
     { size: 1, velocity: 2 },
     new CustomTrailParticleMaterial(particleTexture, new Color(0xffc107)),
@@ -77,15 +79,33 @@ async function main() {
     renderer.setSize(innerWidth, innerHeight);
   });
 
+  enum State {
+    Doing,
+    Pending,
+  }
   const speed = 0.04;
+  let idleCount = 0;
+  let state = State.Doing;
   const renderLoop = () => {
     ZAxis.rotation.z += speed;
     YAxis.rotation.y += speed * 0.35;
-    trailLine.position.y += 0.3;
-    if (trailLine.position.y > 10) {
-      trailLine.position.y = -10;
-      trailLine.reset();
+    if (state === State.Doing) {
+      trailLine.position.y += 0.3;
+      if (trailLine.position.y > 10) {
+        state = State.Pending;
+        idleCount = 0;
+        trailLine.emitting = false;
+      }
+    } else {
+      idleCount++;
+      if (idleCount > 2000 / 16) {
+        trailLine.position.y = -10;
+        trailLine.reset();
+        state = State.Doing;
+        trailLine.emitting = true;
+      }
     }
+
     renderer.render(scene, camera);
     requestAnimationFrame(renderLoop);
     // setTimeout(renderLoop, 256);

src/Trail.ts

@@ -60,7 +60,6 @@ export class Trail extends Mesh<UpdatableBufferGeometry, TrailMaterial> {
   reset() {
     delete this.brushCursor;
     delete this.lastTargetPose;
-    this.emitting = true;
   }
 
   stop() {
@@ -77,7 +76,6 @@ export class Trail extends Mesh<UpdatableBufferGeometry, TrailMaterial> {
 
     this.material.uniforms.brushVertexLen.value = this.brushVertex.length - 1;
     this.material.uniforms.cursor.value.w = this.length - 1;
-    this.material.uniforms.timeInfo.value.y = this.time;
 
     const { length, brushVertexLen, vertexLen, faceLen } = this;
     const brushData = new Float32Array(length * 4);
@@ -116,6 +114,7 @@ export class Trail extends Mesh<UpdatableBufferGeometry, TrailMaterial> {
     if (this.lastTimestamp !== undefined) this.currTime += (now - this.lastTimestamp) * 0.001;
     this.lastTimestamp = now;
     this.material.uniforms.timeInfo.value.x = this.currTime;
+    this.material.uniforms.timeInfo.value.y = this.time;
 
     const { geometry, material, emitting, currTime } = this;
     if (!emitting) return;
@@ -160,7 +159,6 @@ export class Trail extends Mesh<UpdatableBufferGeometry, TrailMaterial> {
     material.uniforms.cursor.value.x = brushCursor.low;
     material.uniforms.cursor.value.y = brushCursor.high;
     material.uniforms.cursor.value.z = brushCursor.len;
-    material.uniforms.timeInfo.value.y = this.time;
   };
 
   onBeforeRender(): void {

src/TrailMaterial.ts

@@ -7,7 +7,6 @@ import {
   RawShaderMaterial,
   Scene,
   ShaderMaterialParameters,
-  Texture,
   Vector2,
   Vector4,
   WebGLRenderer,
@@ -96,8 +95,8 @@ export class TrailMaterial extends RawShaderMaterial {
     this.uniforms.brushVertexLen = { value: 0 };
     this.uniforms.timeInfo = { value: new Vector2() };
     this.uniforms.color ??= { value: new Color(0xffffff) };
-    this.vertexShader ??= TrailMaterial.VERT;
-    this.fragmentShader ??= TrailMaterial.FRAG;
+    this.vertexShader = params?.vertexShader ?? TrailMaterial.VERT;
+    this.fragmentShader = params?.fragmentShader ?? TrailMaterial.FRAG;
   }
 
   onBeforeRender(_renderer: WebGLRenderer, _scene: Scene, camera: Camera) {

src/TrailParticle.ts

@@ -70,7 +70,6 @@ export default class TrailParticle extends InstancedMesh<
   reset() {
     delete this.cursor;
     delete this.lastTargetPose;
-    this.emitting = true;
     // this.avgEmitCount = -1;
   }
 

src/TrailParticleMaterial.ts

@@ -90,8 +90,8 @@ export class TrailParticleMaterial extends RawShaderMaterial {
     this.uniforms.timeInfo = { value: new Vector2() };
     this.uniforms.size = { value: 0 };
     this.uniforms.velocity = { value: 0 };
-    this.vertexShader ??= VERT;
-    this.fragmentShader ??= FRAG;
+    this.vertexShader = params?.vertexShader ?? VERT;
+    this.fragmentShader = params?.fragmentShader ?? FRAG;
   }
 
   onBeforeRender(_renderer: WebGLRenderer, _scene: Scene, camera: Camera) {