@realsee/five 6.8.0 → 6.8.1

package/docs/documents/features_flowing-light-2d-pass.html

@@ -11,7 +11,7 @@
 <p><strong>Definition</strong>: <a href="../../five/renderer/postprocessing/passes/flowing-light-2d-pass.d.ts">FlowingLight2DPass</a></p>
 </blockquote>
 <p><code>FlowingLight2DPass</code> 是 <code>FivePass</code> 的子类,核心接口如下:</p>
-<pre><code class="ts"><span class="hl-10">import</span><span class="hl-1"> </span><span class="hl-3">*</span><span class="hl-1"> </span><span class="hl-10">as</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1"> </span><span class="hl-10">from</span><span class="hl-1"> </span><span class="hl-9">&#39;three&#39;</span><span class="hl-1">;</span><br/><span class="hl-10">import</span><span class="hl-1"> { </span><span class="hl-6">FivePass</span><span class="hl-1"> } </span><span class="hl-10">from</span><span class="hl-1"> </span><span class="hl-9">&#39;./pass&#39;</span><span class="hl-1">;</span><br/><span class="hl-10">import</span><span class="hl-1"> { </span><span class="hl-10">type</span><span class="hl-1"> </span><span class="hl-6">Camera</span><span class="hl-1"> } </span><span class="hl-10">from</span><span class="hl-1"> </span><span class="hl-9">&#39;../../../core/camera&#39;</span><span class="hl-1">;</span><br/><br/><span class="hl-3">type</span><span class="hl-1"> </span><span class="hl-7">Line</span><span class="hl-1"> = {</span><br/><span class="hl-1">  </span><span class="hl-6">id</span><span class="hl-1">?: </span><span class="hl-7">string</span><span class="hl-1">;                   </span><span class="hl-8">// 可选的唯一标识符,不传则自动生成 UUID</span><br/><span class="hl-1">  </span><span class="hl-6">points</span><span class="hl-1">: </span><span class="hl-7">THREE</span><span class="hl-1">.</span><span class="hl-7">Vector2</span><span class="hl-1">[];      </span><span class="hl-8">// 归一化坐标路径点 [0, 1]</span><br/><span class="hl-1">  </span><span class="hl-6">totalLength</span><span class="hl-1">: </span><span class="hl-7">number</span><span class="hl-1">;           </span><span class="hl-8">// 路径总长度(归一化单位)</span><br/><span class="hl-1">  </span><span class="hl-6">color</span><span class="hl-1">: </span><span class="hl-7">THREE</span><span class="hl-1">.</span><span class="hl-7">Color</span><span class="hl-1">;            </span><span class="hl-8">// 光带颜色</span><br/><span class="hl-1">  </span><span class="hl-6">opacity</span><span class="hl-1">?: </span><span class="hl-7">number</span><span class="hl-1">;              </span><span class="hl-8">// 光带不透明度(0-1)</span><br/><span class="hl-1">  </span><span class="hl-6">duration</span><span class="hl-1">?: </span><span class="hl-7">number</span><span class="hl-1">;             </span><span class="hl-8">// 动画时长(毫秒)</span><br/><span class="hl-1">  </span><span class="hl-6">delay</span><span class="hl-1">?: </span><span class="hl-7">number</span><span class="hl-1">;                </span><span class="hl-8">// 动画延迟(毫秒)</span><br/><span class="hl-1">  </span><span class="hl-6">lineWidth</span><span class="hl-1">?: </span><span class="hl-7">number</span><span class="hl-1">;            </span><span class="hl-8">// 线宽(归一化单位)</span><br/><span class="hl-1">  </span><span class="hl-6">tailLengthRatio</span><span class="hl-1">?: </span><span class="hl-7">number</span><span class="hl-1">;      </span><span class="hl-8">// 尾巴长度比例(0-1),默认 0.2</span><br/><span class="hl-1">};</span><br/><br/><span class="hl-10">export</span><span class="hl-1"> </span><span class="hl-3">class</span><span class="hl-1"> </span><span class="hl-7">FlowingLight2DPass</span><span class="hl-1"> </span><span class="hl-3">extends</span><span class="hl-1"> </span><span class="hl-7">FivePass</span><span class="hl-1"> {</span><br/><span class="hl-1">  </span><span class="hl-3">constructor</span><span class="hl-1">(</span><span class="hl-6">camera</span><span class="hl-1">: </span><span class="hl-7">Camera</span><span class="hl-1">);</span><br/><br/><span class="hl-1">  </span><span class="hl-8">// 设置要渲染的路径列表</span><br/><span class="hl-1">  </span><span class="hl-3">public</span><span class="hl-1"> </span><span class="hl-5">setLines</span><span class="hl-1">(</span><span class="hl-6">lines</span><span class="hl-1">: </span><span class="hl-7">Line</span><span class="hl-1">[]): </span><span class="hl-7">void</span><span class="hl-1">;</span><br/><br/><span class="hl-1">  </span><span class="hl-8">// 修改单条线的参数(通过 id)</span><br/><span class="hl-1">  </span><span class="hl-3">public</span><span class="hl-1"> </span><span class="hl-5">setLine</span><span class="hl-1">(</span><span class="hl-6">params</span><span class="hl-1">: { </span><span class="hl-6">id</span><span class="hl-1">: </span><span class="hl-7">string</span><span class="hl-1"> } &amp; </span><span class="hl-7">Partial</span><span class="hl-1">&lt;</span><span class="hl-7">Omit</span><span class="hl-1">&lt;</span><span class="hl-7">Line</span><span class="hl-1">, </span><span class="hl-9">&#39;id&#39;</span><span class="hl-1">&gt;&gt;): </span><span class="hl-7">void</span><span class="hl-1">;</span><br/><br/><span class="hl-1">  </span><span class="hl-3">public</span><span class="hl-1"> </span><span class="hl-5">render</span><span class="hl-1">(</span><br/><span class="hl-1">    </span><span class="hl-6">renderer</span><span class="hl-1">: </span><span class="hl-7">THREE</span><span class="hl-1">.</span><span class="hl-7">WebGLRenderer</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-6">writeBuffer</span><span class="hl-1">: </span><span class="hl-7">THREE</span><span class="hl-1">.</span><span class="hl-7">WebGLRenderTarget</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-6">readBuffer</span><span class="hl-1">: </span><span class="hl-7">THREE</span><span class="hl-1">.</span><span class="hl-7">WebGLRenderTarget</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-6">deltaTime</span><span class="hl-1">: </span><span class="hl-7">number</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-6">maskActive</span><span class="hl-1">?: </span><span class="hl-7">boolean</span><span class="hl-1">,</span><br/><span class="hl-1">  ): </span><span class="hl-7">void</span><span class="hl-1">;</span><br/><br/><span class="hl-1">  </span><span class="hl-3">public</span><span class="hl-1"> </span><span class="hl-5">dispose</span><span class="hl-1">(): </span><span class="hl-7">void</span><span class="hl-1">;</span><br/><span class="hl-1">}</span>
+<pre><code class="ts"><span class="hl-10">import</span><span class="hl-1"> </span><span class="hl-3">*</span><span class="hl-1"> </span><span class="hl-10">as</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1"> </span><span class="hl-10">from</span><span class="hl-1"> </span><span class="hl-9">&#39;three&#39;</span><span class="hl-1">;</span><br/><span class="hl-10">import</span><span class="hl-1"> { </span><span class="hl-6">FivePass</span><span class="hl-1"> } </span><span class="hl-10">from</span><span class="hl-1"> </span><span class="hl-9">&#39;./pass&#39;</span><span class="hl-1">;</span><br/><span class="hl-10">import</span><span class="hl-1"> { </span><span class="hl-10">type</span><span class="hl-1"> </span><span class="hl-6">Camera</span><span class="hl-1"> } </span><span class="hl-10">from</span><span class="hl-1"> </span><span class="hl-9">&#39;../../../core/camera&#39;</span><span class="hl-1">;</span><br/><br/><span class="hl-3">type</span><span class="hl-1"> </span><span class="hl-7">Line</span><span class="hl-1"> = {</span><br/><span class="hl-1">  </span><span class="hl-6">id</span><span class="hl-1">?: </span><span class="hl-7">string</span><span class="hl-1">;                   </span><span class="hl-8">// 可选的唯一标识符,不传则自动生成 UUID</span><br/><span class="hl-1">  </span><span class="hl-6">points</span><span class="hl-1">: </span><span class="hl-7">THREE</span><span class="hl-1">.</span><span class="hl-7">Vector2</span><span class="hl-1">[];      </span><span class="hl-8">// 归一化坐标路径点 [0, 1]</span><br/><span class="hl-1">  </span><span class="hl-6">totalLength</span><span class="hl-1">: </span><span class="hl-7">number</span><span class="hl-1">;           </span><span class="hl-8">// 路径总长度(归一化单位)</span><br/><span class="hl-1">  </span><span class="hl-6">color</span><span class="hl-1">: </span><span class="hl-7">THREE</span><span class="hl-1">.</span><span class="hl-7">Color</span><span class="hl-1">;            </span><span class="hl-8">// 光带颜色</span><br/><span class="hl-1">  </span><span class="hl-6">opacity</span><span class="hl-1">?: </span><span class="hl-7">number</span><span class="hl-1">;              </span><span class="hl-8">// 光带不透明度(0-1)</span><br/><span class="hl-1">  </span><span class="hl-6">duration</span><span class="hl-1">?: </span><span class="hl-7">number</span><span class="hl-1">;             </span><span class="hl-8">// 动画时长(毫秒)</span><br/><span class="hl-1">  </span><span class="hl-6">startTime</span><span class="hl-1">?: </span><span class="hl-7">number</span><span class="hl-1">;            </span><span class="hl-8">// 线条开始时间(毫秒),默认使用当前内部时间</span><br/><span class="hl-1">  </span><span class="hl-6">lineWidth</span><span class="hl-1">?: </span><span class="hl-7">number</span><span class="hl-1">;            </span><span class="hl-8">// 线宽(归一化单位)</span><br/><span class="hl-1">  </span><span class="hl-6">tailLengthRatio</span><span class="hl-1">?: </span><span class="hl-7">number</span><span class="hl-1">;      </span><span class="hl-8">// 尾巴长度比例(0-1),默认 0.2</span><br/><span class="hl-1">};</span><br/><br/><span class="hl-10">export</span><span class="hl-1"> </span><span class="hl-3">class</span><span class="hl-1"> </span><span class="hl-7">FlowingLight2DPass</span><span class="hl-1"> </span><span class="hl-3">extends</span><span class="hl-1"> </span><span class="hl-7">FivePass</span><span class="hl-1"> {</span><br/><span class="hl-1">  </span><span class="hl-3">constructor</span><span class="hl-1">(</span><span class="hl-6">camera</span><span class="hl-1">: </span><span class="hl-7">Camera</span><span class="hl-1">);</span><br/><br/><span class="hl-1">  </span><span class="hl-8">// 批量设置路径列表(替换所有现有线条)</span><br/><span class="hl-1">  </span><span class="hl-3">public</span><span class="hl-1"> </span><span class="hl-5">setLines</span><span class="hl-1">(</span><span class="hl-6">lines</span><span class="hl-1">: </span><span class="hl-7">Line</span><span class="hl-1">[]): </span><span class="hl-7">void</span><span class="hl-1">;</span><br/><br/><span class="hl-1">  </span><span class="hl-8">// 追加一条或多条线,返回生成的 id 数组</span><br/><span class="hl-1">  </span><span class="hl-3">public</span><span class="hl-1"> </span><span class="hl-5">addLine</span><span class="hl-1">(...</span><span class="hl-6">lines</span><span class="hl-1">: </span><span class="hl-7">Line</span><span class="hl-1">[]): </span><span class="hl-7">string</span><span class="hl-1">[];</span><br/><br/><span class="hl-1">  </span><span class="hl-8">// 按 id 移除一条或多条线,返回实际移除的数量</span><br/><span class="hl-1">  </span><span class="hl-3">public</span><span class="hl-1"> </span><span class="hl-5">removeLine</span><span class="hl-1">(...</span><span class="hl-6">ids</span><span class="hl-1">: </span><span class="hl-7">string</span><span class="hl-1">[]): </span><span class="hl-7">number</span><span class="hl-1">;</span><br/><br/><span class="hl-1">  </span><span class="hl-8">// 修改单条线的参数(通过 id),支持部分更新</span><br/><span class="hl-1">  </span><span class="hl-3">public</span><span class="hl-1"> </span><span class="hl-5">setLine</span><span class="hl-1">(</span><span class="hl-6">params</span><span class="hl-1">: { </span><span class="hl-6">id</span><span class="hl-1">: </span><span class="hl-7">string</span><span class="hl-1"> } &amp; </span><span class="hl-7">Partial</span><span class="hl-1">&lt;</span><span class="hl-7">Omit</span><span class="hl-1">&lt;</span><span class="hl-7">Line</span><span class="hl-1">, </span><span class="hl-9">&#39;id&#39;</span><span class="hl-1">&gt;&gt;): </span><span class="hl-7">void</span><span class="hl-1">;</span><br/><br/><span class="hl-1">  </span><span class="hl-3">public</span><span class="hl-1"> </span><span class="hl-5">render</span><span class="hl-1">(</span><br/><span class="hl-1">    </span><span class="hl-6">renderer</span><span class="hl-1">: </span><span class="hl-7">THREE</span><span class="hl-1">.</span><span class="hl-7">WebGLRenderer</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-6">writeBuffer</span><span class="hl-1">: </span><span class="hl-7">THREE</span><span class="hl-1">.</span><span class="hl-7">WebGLRenderTarget</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-6">readBuffer</span><span class="hl-1">: </span><span class="hl-7">THREE</span><span class="hl-1">.</span><span class="hl-7">WebGLRenderTarget</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-6">deltaTime</span><span class="hl-1">: </span><span class="hl-7">number</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-6">maskActive</span><span class="hl-1">?: </span><span class="hl-7">boolean</span><span class="hl-1">,</span><br/><span class="hl-1">  ): </span><span class="hl-7">void</span><span class="hl-1">;</span><br/><br/><span class="hl-1">  </span><span class="hl-3">public</span><span class="hl-1"> </span><span class="hl-5">dispose</span><span class="hl-1">(): </span><span class="hl-7">void</span><span class="hl-1">;</span><br/><span class="hl-1">}</span>
 </code><button type="button">Copy</button></pre>
 
 <h2 id="concepts" class="tsd-anchor-link">Concepts<a href="#concepts" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2>
@@ -99,11 +99,11 @@
 <td style="text-align:left">动画周期(毫秒)。光头从路径起点完成一个周期的时长。</td>
 </tr>
 <tr>
-<td style="text-align:left"><code>delay</code></td>
+<td style="text-align:left"><code>startTime</code></td>
 <td style="text-align:left"><code>number</code></td>
 <td style="text-align:left"></td>
-<td style="text-align:left"><code>0</code></td>
-<td style="text-align:left">动画延迟(毫秒)。延迟后才开始播放动画。</td>
+<td style="text-align:left">当前内部时间</td>
+<td style="text-align:left">线条开始时间(毫秒)。控制线条动画从何时开始播放,可用于多条线错开起始时间。</td>
 </tr>
 <tr>
 <td style="text-align:left"><code>lineWidth</code></td>
@@ -128,13 +128,26 @@
 <h3 id="_" class="tsd-anchor-link"><code>constructor(camera: Camera)</code><a href="#_" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3>
 <p>初始化 Pass,需传入相机以获取屏幕分辨率。</p>
 <h3 id="_-1" class="tsd-anchor-link"><code>setLines(lines: Line[])</code><a href="#_-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3>
-<p>更新要渲染的路径列表。可随时调用以修改或新增路径。</p>
-<p><strong>自动生成 ID</strong>: 如果 line 没有提供 <code>id</code>,会自动生成 UUID。</p>
+<p>批量设置路径列表,替换所有现有线条。可随时调用以修改或新增路径。</p>
+<p><strong>自动生成 ID</strong>: 如果 line 没有提供 <code>id</code>,会自动生成 UUID。
+<strong>自动设置 startTime</strong>: 如果 line 没有提供 <code>startTime</code>,会使用当前内部时间。</p>
 <p><strong>示例</strong>:</p>
-<pre><code class="ts"><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">pathLine</span><span class="hl-1">: </span><span class="hl-7">Line</span><span class="hl-1"> = {</span><br/><span class="hl-1">  </span><span class="hl-6">id:</span><span class="hl-1"> </span><span class="hl-9">&#39;my-line-1&#39;</span><span class="hl-1">,  </span><span class="hl-8">// 可选,不传则自动生成</span><br/><span class="hl-1">  </span><span class="hl-6">points:</span><span class="hl-1"> [</span><br/><span class="hl-1">    </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-4">THREE</span><span class="hl-1">.</span><span class="hl-5">Vector2</span><span class="hl-1">(</span><span class="hl-11">0.3</span><span class="hl-1">, </span><span class="hl-11">0.7</span><span class="hl-1">),</span><br/><span class="hl-1">    </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-4">THREE</span><span class="hl-1">.</span><span class="hl-5">Vector2</span><span class="hl-1">(</span><span class="hl-11">0.7</span><span class="hl-1">, </span><span class="hl-11">0.7</span><span class="hl-1">),</span><br/><span class="hl-1">    </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-4">THREE</span><span class="hl-1">.</span><span class="hl-5">Vector2</span><span class="hl-1">(</span><span class="hl-11">0.7</span><span class="hl-1">, </span><span class="hl-11">0.3</span><span class="hl-1">),</span><br/><span class="hl-1">  ],</span><br/><span class="hl-1">  </span><span class="hl-6">totalLength:</span><span class="hl-1"> </span><span class="hl-11">0.8</span><span class="hl-1">,  </span><span class="hl-8">// 归一化单位</span><br/><span class="hl-1">  </span><span class="hl-6">color:</span><span class="hl-1"> </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-4">THREE</span><span class="hl-1">.</span><span class="hl-5">Color</span><span class="hl-1">(</span><span class="hl-11">0x00c2ff</span><span class="hl-1">),</span><br/><span class="hl-1">  </span><span class="hl-6">opacity:</span><span class="hl-1"> </span><span class="hl-11">0.8</span><span class="hl-1">,</span><br/><span class="hl-1">  </span><span class="hl-6">duration:</span><span class="hl-1"> </span><span class="hl-11">2000</span><span class="hl-1">,</span><br/><span class="hl-1">  </span><span class="hl-6">delay:</span><span class="hl-1"> </span><span class="hl-11">500</span><span class="hl-1">,</span><br/><span class="hl-1">  </span><span class="hl-6">lineWidth:</span><span class="hl-1"> </span><span class="hl-11">0.01</span><span class="hl-1">,</span><br/><span class="hl-1">};</span><br/><span class="hl-6">pass</span><span class="hl-1">.</span><span class="hl-5">setLines</span><span class="hl-1">([</span><span class="hl-6">pathLine</span><span class="hl-1">]);</span>
+<pre><code class="ts"><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">pathLine</span><span class="hl-1">: </span><span class="hl-7">Line</span><span class="hl-1"> = {</span><br/><span class="hl-1">  </span><span class="hl-6">id:</span><span class="hl-1"> </span><span class="hl-9">&#39;my-line-1&#39;</span><span class="hl-1">,  </span><span class="hl-8">// 可选,不传则自动生成</span><br/><span class="hl-1">  </span><span class="hl-6">points:</span><span class="hl-1"> [</span><br/><span class="hl-1">    </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-4">THREE</span><span class="hl-1">.</span><span class="hl-5">Vector2</span><span class="hl-1">(</span><span class="hl-11">0.3</span><span class="hl-1">, </span><span class="hl-11">0.7</span><span class="hl-1">),</span><br/><span class="hl-1">    </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-4">THREE</span><span class="hl-1">.</span><span class="hl-5">Vector2</span><span class="hl-1">(</span><span class="hl-11">0.7</span><span class="hl-1">, </span><span class="hl-11">0.7</span><span class="hl-1">),</span><br/><span class="hl-1">    </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-4">THREE</span><span class="hl-1">.</span><span class="hl-5">Vector2</span><span class="hl-1">(</span><span class="hl-11">0.7</span><span class="hl-1">, </span><span class="hl-11">0.3</span><span class="hl-1">),</span><br/><span class="hl-1">  ],</span><br/><span class="hl-1">  </span><span class="hl-6">totalLength:</span><span class="hl-1"> </span><span class="hl-11">0.8</span><span class="hl-1">,  </span><span class="hl-8">// 归一化单位</span><br/><span class="hl-1">  </span><span class="hl-6">color:</span><span class="hl-1"> </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-4">THREE</span><span class="hl-1">.</span><span class="hl-5">Color</span><span class="hl-1">(</span><span class="hl-11">0x00c2ff</span><span class="hl-1">),</span><br/><span class="hl-1">  </span><span class="hl-6">opacity:</span><span class="hl-1"> </span><span class="hl-11">0.8</span><span class="hl-1">,</span><br/><span class="hl-1">  </span><span class="hl-6">duration:</span><span class="hl-1"> </span><span class="hl-11">2000</span><span class="hl-1">,</span><br/><span class="hl-1">  </span><span class="hl-6">startTime:</span><span class="hl-1"> </span><span class="hl-11">500</span><span class="hl-1">,</span><br/><span class="hl-1">  </span><span class="hl-6">lineWidth:</span><span class="hl-1"> </span><span class="hl-11">0.01</span><span class="hl-1">,</span><br/><span class="hl-1">};</span><br/><span class="hl-6">pass</span><span class="hl-1">.</span><span class="hl-5">setLines</span><span class="hl-1">([</span><span class="hl-6">pathLine</span><span class="hl-1">]);</span>
 </code><button type="button">Copy</button></pre>
 
-<h3 id="_-2" class="tsd-anchor-link"><code>setLine(params: { id: string } &amp; Partial&lt;Omit&lt;Line, 'id'&gt;&gt;)</code><a href="#_-2" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3>
+<h3 id="_-2" class="tsd-anchor-link"><code>addLine(...lines: Line[]): string[]</code><a href="#_-2" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3>
+<p>追加一条或多条线到现有列表中,不影响已有线条。返回新增线条的 id 数组。</p>
+<p><strong>示例</strong>:</p>
+<pre><code class="ts"><span class="hl-8">// 追加单条线</span><br/><span class="hl-3">const</span><span class="hl-1"> [</span><span class="hl-4">id1</span><span class="hl-1">] = </span><span class="hl-6">pass</span><span class="hl-1">.</span><span class="hl-5">addLine</span><span class="hl-1">({</span><br/><span class="hl-1">  </span><span class="hl-6">points:</span><span class="hl-1"> [</span><br/><span class="hl-1">    </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-4">THREE</span><span class="hl-1">.</span><span class="hl-5">Vector2</span><span class="hl-1">(</span><span class="hl-11">0.1</span><span class="hl-1">, </span><span class="hl-11">0.1</span><span class="hl-1">),</span><br/><span class="hl-1">    </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-4">THREE</span><span class="hl-1">.</span><span class="hl-5">Vector2</span><span class="hl-1">(</span><span class="hl-11">0.9</span><span class="hl-1">, </span><span class="hl-11">0.9</span><span class="hl-1">),</span><br/><span class="hl-1">  ],</span><br/><span class="hl-1">  </span><span class="hl-6">totalLength:</span><span class="hl-1"> </span><span class="hl-11">1.13</span><span class="hl-1">,</span><br/><span class="hl-1">  </span><span class="hl-6">color:</span><span class="hl-1"> </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-4">THREE</span><span class="hl-1">.</span><span class="hl-5">Color</span><span class="hl-1">(</span><span class="hl-11">0xff0000</span><span class="hl-1">),</span><br/><span class="hl-1">  </span><span class="hl-6">duration:</span><span class="hl-1"> </span><span class="hl-11">2000</span><span class="hl-1">,</span><br/><span class="hl-1">});</span><br/><br/><span class="hl-8">// 追加多条线</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">ids</span><span class="hl-1"> = </span><span class="hl-6">pass</span><span class="hl-1">.</span><span class="hl-5">addLine</span><span class="hl-1">(</span><br/><span class="hl-1">  {</span><br/><span class="hl-1">    </span><span class="hl-6">points:</span><span class="hl-1"> [...],</span><br/><span class="hl-1">    </span><span class="hl-6">totalLength:</span><span class="hl-1"> </span><span class="hl-11">0.8</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-6">color:</span><span class="hl-1"> </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-4">THREE</span><span class="hl-1">.</span><span class="hl-5">Color</span><span class="hl-1">(</span><span class="hl-11">0x00ff00</span><span class="hl-1">),</span><br/><span class="hl-1">    </span><span class="hl-6">duration:</span><span class="hl-1"> </span><span class="hl-11">1500</span><span class="hl-1">,</span><br/><span class="hl-1">  },</span><br/><span class="hl-1">  {</span><br/><span class="hl-1">    </span><span class="hl-6">points:</span><span class="hl-1"> [...],</span><br/><span class="hl-1">    </span><span class="hl-6">totalLength:</span><span class="hl-1"> </span><span class="hl-11">1.2</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-6">color:</span><span class="hl-1"> </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-4">THREE</span><span class="hl-1">.</span><span class="hl-5">Color</span><span class="hl-1">(</span><span class="hl-11">0x0000ff</span><span class="hl-1">),</span><br/><span class="hl-1">    </span><span class="hl-6">duration:</span><span class="hl-1"> </span><span class="hl-11">1800</span><span class="hl-1">,</span><br/><span class="hl-1">  },</span><br/><span class="hl-1">);</span><br/><span class="hl-8">// ids = [&#39;uuid-1&#39;, &#39;uuid-2&#39;]</span>
+</code><button type="button">Copy</button></pre>
+
+<h3 id="_-3" class="tsd-anchor-link"><code>removeLine(...ids: string[]): number</code><a href="#_-3" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3>
+<p>按 id 移除一条或多条线,返回实际移除的数量。如果 id 不存在,会在控制台输出警告。</p>
+<p><strong>示例</strong>:</p>
+<pre><code class="ts"><span class="hl-8">// 移除单条线</span><br/><span class="hl-6">pass</span><span class="hl-1">.</span><span class="hl-5">removeLine</span><span class="hl-1">(</span><span class="hl-6">id1</span><span class="hl-1">);</span><br/><br/><span class="hl-8">// 移除多条线</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">removedCount</span><span class="hl-1"> = </span><span class="hl-6">pass</span><span class="hl-1">.</span><span class="hl-5">removeLine</span><span class="hl-1">(</span><span class="hl-6">id1</span><span class="hl-1">, </span><span class="hl-6">id2</span><span class="hl-1">, </span><span class="hl-6">id3</span><span class="hl-1">);</span><br/><span class="hl-6">console</span><span class="hl-1">.</span><span class="hl-5">log</span><span class="hl-1">(</span><span class="hl-9">`移除了 </span><span class="hl-3">${</span><span class="hl-6">removedCount</span><span class="hl-3">}</span><span class="hl-9"> 条线`</span><span class="hl-1">);</span>
+</code><button type="button">Copy</button></pre>
+
+<h3 id="_-4" class="tsd-anchor-link"><code>setLine(params: { id: string } &amp; Partial&lt;Omit&lt;Line, 'id'&gt;&gt;)</code><a href="#_-4" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3>
 <p>通过 <code>id</code> 修改单条线的参数。支持部分更新,只更新传入的字段。</p>
 <p><strong>性能优化</strong>:</p>
 <ul>
@@ -151,9 +164,9 @@
 <li>动画时间(<code>uTime</code>)不会被重置,流光继续从当前位置播放</li>
 <li>建议修改 <code>points</code> 时同时更新 <code>totalLength</code></li>
 </ul>
-<h3 id="_-3" class="tsd-anchor-link"><code>render(...)</code><a href="#_-3" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3>
+<h3 id="_-5" class="tsd-anchor-link"><code>render(...)</code><a href="#_-5" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3>
 <p>由 EffectComposer 自动调用,无需手动调用。自动同步渲染目标尺寸。</p>
-<h3 id="_-4" class="tsd-anchor-link"><code>dispose()</code><a href="#_-4" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3>
+<h3 id="_-6" class="tsd-anchor-link"><code>dispose()</code><a href="#_-6" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3>
 <p>释放 InstancedMesh、着色材质和渲染目标资源,避免内存泄漏。销毁 Pass 时必须调用。</p>
 <h2 id="examples" class="tsd-anchor-link">Examples<a href="#examples" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2>
 <h3 id="快速上手-quick-example" class="tsd-anchor-link">快速上手 (Quick Example)<a href="#快速上手-quick-example" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3>
@@ -161,7 +174,7 @@
 </code><button type="button">Copy</button></pre>
 
 <h3 id="多条路径-动态更新" class="tsd-anchor-link">多条路径 &amp; 动态更新<a href="#多条路径-动态更新" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3>
-<pre><code class="typescript"><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">pass</span><span class="hl-1"> = </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-5">FlowingLight2DPass</span><span class="hl-1">(</span><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-6">camera</span><span class="hl-1">);</span><br/><br/><span class="hl-8">// 初始路径集合</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">paths</span><span class="hl-1"> = [</span><br/><span class="hl-1">  {</span><br/><span class="hl-1">    </span><span class="hl-6">points:</span><span class="hl-1"> [</span><br/><span class="hl-1">      </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-4">THREE</span><span class="hl-1">.</span><span class="hl-5">Vector2</span><span class="hl-1">(</span><span class="hl-11">0.1</span><span class="hl-1">, </span><span class="hl-11">0.1</span><span class="hl-1">),</span><br/><span class="hl-1">      </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-4">THREE</span><span class="hl-1">.</span><span class="hl-5">Vector2</span><span class="hl-1">(</span><span class="hl-11">0.9</span><span class="hl-1">, </span><span class="hl-11">0.1</span><span class="hl-1">),</span><br/><span class="hl-1">    ],</span><br/><span class="hl-1">    </span><span class="hl-6">totalLength:</span><span class="hl-1"> </span><span class="hl-11">0.8</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-6">color:</span><span class="hl-1"> </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-4">THREE</span><span class="hl-1">.</span><span class="hl-5">Color</span><span class="hl-1">(</span><span class="hl-11">0xff6600</span><span class="hl-1">),</span><br/><span class="hl-1">    </span><span class="hl-6">duration:</span><span class="hl-1"> </span><span class="hl-11">1500</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-6">lineWidth:</span><span class="hl-1"> </span><span class="hl-11">0.01</span><span class="hl-1">,</span><br/><span class="hl-1">  },</span><br/><span class="hl-1">  {</span><br/><span class="hl-1">    </span><span class="hl-6">points:</span><span class="hl-1"> [</span><br/><span class="hl-1">      </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-4">THREE</span><span class="hl-1">.</span><span class="hl-5">Vector2</span><span class="hl-1">(</span><span class="hl-11">0.1</span><span class="hl-1">, </span><span class="hl-11">0.5</span><span class="hl-1">),</span><br/><span class="hl-1">      </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-4">THREE</span><span class="hl-1">.</span><span class="hl-5">Vector2</span><span class="hl-1">(</span><span class="hl-11">0.9</span><span class="hl-1">, </span><span class="hl-11">0.5</span><span class="hl-1">),</span><br/><span class="hl-1">    ],</span><br/><span class="hl-1">    </span><span class="hl-6">totalLength:</span><span class="hl-1"> </span><span class="hl-11">0.8</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-6">color:</span><span class="hl-1"> </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-4">THREE</span><span class="hl-1">.</span><span class="hl-5">Color</span><span class="hl-1">(</span><span class="hl-11">0x0066ff</span><span class="hl-1">),</span><br/><span class="hl-1">    </span><span class="hl-6">opacity:</span><span class="hl-1"> </span><span class="hl-11">0.7</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-6">duration:</span><span class="hl-1"> </span><span class="hl-11">2000</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-6">delay:</span><span class="hl-1"> </span><span class="hl-11">500</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-6">lineWidth:</span><span class="hl-1"> </span><span class="hl-11">0.015</span><span class="hl-1">,</span><br/><span class="hl-1">  },</span><br/><span class="hl-1">];</span><br/><br/><span class="hl-6">pass</span><span class="hl-1">.</span><span class="hl-5">setLines</span><span class="hl-1">(</span><span class="hl-6">paths</span><span class="hl-1">);</span><br/><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-5">addPass</span><span class="hl-1">(</span><span class="hl-6">pass</span><span class="hl-1">);</span><br/><br/><span class="hl-8">// 响应用户交互动态更新路径</span><br/><span class="hl-6">document</span><span class="hl-1">.</span><span class="hl-5">addEventListener</span><span class="hl-1">(</span><span class="hl-9">&#39;click&#39;</span><span class="hl-1">, (</span><span class="hl-6">e</span><span class="hl-1">) </span><span class="hl-3">=&gt;</span><span class="hl-1"> {</span><br/><span class="hl-1">  </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">rect</span><span class="hl-1"> = </span><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-6">canvas</span><span class="hl-1">.</span><span class="hl-5">getBoundingClientRect</span><span class="hl-1">();</span><br/><span class="hl-1">  </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">x</span><span class="hl-1"> = (</span><span class="hl-6">e</span><span class="hl-1">.</span><span class="hl-6">clientX</span><span class="hl-1"> - </span><span class="hl-6">rect</span><span class="hl-1">.</span><span class="hl-6">left</span><span class="hl-1">) / </span><span class="hl-6">rect</span><span class="hl-1">.</span><span class="hl-6">width</span><span class="hl-1">;</span><br/><span class="hl-1">  </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">y</span><span class="hl-1"> = (</span><span class="hl-6">e</span><span class="hl-1">.</span><span class="hl-6">clientY</span><span class="hl-1"> - </span><span class="hl-6">rect</span><span class="hl-1">.</span><span class="hl-6">top</span><span class="hl-1">) / </span><span class="hl-6">rect</span><span class="hl-1">.</span><span class="hl-6">height</span><span class="hl-1">; </span><span class="hl-8">// 左上角为原点,无需翻转</span><br/><br/><span class="hl-1">  </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">newPath</span><span class="hl-1"> = {</span><br/><span class="hl-1">    </span><span class="hl-6">points:</span><span class="hl-1"> [</span><br/><span class="hl-1">      </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-4">THREE</span><span class="hl-1">.</span><span class="hl-5">Vector2</span><span class="hl-1">(</span><span class="hl-11">0.5</span><span class="hl-1">, </span><span class="hl-11">0.5</span><span class="hl-1">),</span><br/><span class="hl-1">      </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-4">THREE</span><span class="hl-1">.</span><span class="hl-5">Vector2</span><span class="hl-1">(</span><span class="hl-6">x</span><span class="hl-1">, </span><span class="hl-6">y</span><span class="hl-1">),</span><br/><span class="hl-1">    ],</span><br/><span class="hl-1">    </span><span class="hl-6">totalLength:</span><span class="hl-1"> </span><span class="hl-6">Math</span><span class="hl-1">.</span><span class="hl-5">hypot</span><span class="hl-1">(</span><span class="hl-6">x</span><span class="hl-1"> - </span><span class="hl-11">0.5</span><span class="hl-1">, </span><span class="hl-6">y</span><span class="hl-1"> - </span><span class="hl-11">0.5</span><span class="hl-1">),</span><br/><span class="hl-1">    </span><span class="hl-6">color:</span><span class="hl-1"> </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-4">THREE</span><span class="hl-1">.</span><span class="hl-5">Color</span><span class="hl-1">(</span><span class="hl-6">Math</span><span class="hl-1">.</span><span class="hl-5">random</span><span class="hl-1">() * </span><span class="hl-11">0xffffff</span><span class="hl-1">),</span><br/><span class="hl-1">    </span><span class="hl-6">duration:</span><span class="hl-1"> </span><span class="hl-11">1200</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-6">lineWidth:</span><span class="hl-1"> </span><span class="hl-11">0.01</span><span class="hl-1">,</span><br/><span class="hl-1">  };</span><br/><span class="hl-1">  </span><span class="hl-6">pass</span><span class="hl-1">.</span><span class="hl-5">setLines</span><span class="hl-1">([...</span><span class="hl-6">paths</span><span class="hl-1">, </span><span class="hl-6">newPath</span><span class="hl-1">]);</span><br/><span class="hl-1">});</span>
+<pre><code class="typescript"><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">pass</span><span class="hl-1"> = </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-5">FlowingLight2DPass</span><span class="hl-1">(</span><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-6">camera</span><span class="hl-1">);</span><br/><br/><span class="hl-8">// 初始路径集合</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">paths</span><span class="hl-1"> = [</span><br/><span class="hl-1">  {</span><br/><span class="hl-1">    </span><span class="hl-6">points:</span><span class="hl-1"> [</span><br/><span class="hl-1">      </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-4">THREE</span><span class="hl-1">.</span><span class="hl-5">Vector2</span><span class="hl-1">(</span><span class="hl-11">0.1</span><span class="hl-1">, </span><span class="hl-11">0.1</span><span class="hl-1">),</span><br/><span class="hl-1">      </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-4">THREE</span><span class="hl-1">.</span><span class="hl-5">Vector2</span><span class="hl-1">(</span><span class="hl-11">0.9</span><span class="hl-1">, </span><span class="hl-11">0.1</span><span class="hl-1">),</span><br/><span class="hl-1">    ],</span><br/><span class="hl-1">    </span><span class="hl-6">totalLength:</span><span class="hl-1"> </span><span class="hl-11">0.8</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-6">color:</span><span class="hl-1"> </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-4">THREE</span><span class="hl-1">.</span><span class="hl-5">Color</span><span class="hl-1">(</span><span class="hl-11">0xff6600</span><span class="hl-1">),</span><br/><span class="hl-1">    </span><span class="hl-6">duration:</span><span class="hl-1"> </span><span class="hl-11">1500</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-6">lineWidth:</span><span class="hl-1"> </span><span class="hl-11">0.01</span><span class="hl-1">,</span><br/><span class="hl-1">  },</span><br/><span class="hl-1">  {</span><br/><span class="hl-1">    </span><span class="hl-6">points:</span><span class="hl-1"> [</span><br/><span class="hl-1">      </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-4">THREE</span><span class="hl-1">.</span><span class="hl-5">Vector2</span><span class="hl-1">(</span><span class="hl-11">0.1</span><span class="hl-1">, </span><span class="hl-11">0.5</span><span class="hl-1">),</span><br/><span class="hl-1">      </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-4">THREE</span><span class="hl-1">.</span><span class="hl-5">Vector2</span><span class="hl-1">(</span><span class="hl-11">0.9</span><span class="hl-1">, </span><span class="hl-11">0.5</span><span class="hl-1">),</span><br/><span class="hl-1">    ],</span><br/><span class="hl-1">    </span><span class="hl-6">totalLength:</span><span class="hl-1"> </span><span class="hl-11">0.8</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-6">color:</span><span class="hl-1"> </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-4">THREE</span><span class="hl-1">.</span><span class="hl-5">Color</span><span class="hl-1">(</span><span class="hl-11">0x0066ff</span><span class="hl-1">),</span><br/><span class="hl-1">    </span><span class="hl-6">opacity:</span><span class="hl-1"> </span><span class="hl-11">0.7</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-6">duration:</span><span class="hl-1"> </span><span class="hl-11">2000</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-6">startTime:</span><span class="hl-1"> </span><span class="hl-11">500</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-6">lineWidth:</span><span class="hl-1"> </span><span class="hl-11">0.015</span><span class="hl-1">,</span><br/><span class="hl-1">  },</span><br/><span class="hl-1">];</span><br/><br/><span class="hl-6">pass</span><span class="hl-1">.</span><span class="hl-5">setLines</span><span class="hl-1">(</span><span class="hl-6">paths</span><span class="hl-1">);</span><br/><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-5">addPass</span><span class="hl-1">(</span><span class="hl-6">pass</span><span class="hl-1">);</span><br/><br/><span class="hl-8">// 响应用户交互动态更新路径</span><br/><span class="hl-6">document</span><span class="hl-1">.</span><span class="hl-5">addEventListener</span><span class="hl-1">(</span><span class="hl-9">&#39;click&#39;</span><span class="hl-1">, (</span><span class="hl-6">e</span><span class="hl-1">) </span><span class="hl-3">=&gt;</span><span class="hl-1"> {</span><br/><span class="hl-1">  </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">rect</span><span class="hl-1"> = </span><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-6">canvas</span><span class="hl-1">.</span><span class="hl-5">getBoundingClientRect</span><span class="hl-1">();</span><br/><span class="hl-1">  </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">x</span><span class="hl-1"> = (</span><span class="hl-6">e</span><span class="hl-1">.</span><span class="hl-6">clientX</span><span class="hl-1"> - </span><span class="hl-6">rect</span><span class="hl-1">.</span><span class="hl-6">left</span><span class="hl-1">) / </span><span class="hl-6">rect</span><span class="hl-1">.</span><span class="hl-6">width</span><span class="hl-1">;</span><br/><span class="hl-1">  </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">y</span><span class="hl-1"> = (</span><span class="hl-6">e</span><span class="hl-1">.</span><span class="hl-6">clientY</span><span class="hl-1"> - </span><span class="hl-6">rect</span><span class="hl-1">.</span><span class="hl-6">top</span><span class="hl-1">) / </span><span class="hl-6">rect</span><span class="hl-1">.</span><span class="hl-6">height</span><span class="hl-1">; </span><span class="hl-8">// 左上角为原点,无需翻转</span><br/><br/><span class="hl-1">  </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">newPath</span><span class="hl-1"> = {</span><br/><span class="hl-1">    </span><span class="hl-6">points:</span><span class="hl-1"> [</span><br/><span class="hl-1">      </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-4">THREE</span><span class="hl-1">.</span><span class="hl-5">Vector2</span><span class="hl-1">(</span><span class="hl-11">0.5</span><span class="hl-1">, </span><span class="hl-11">0.5</span><span class="hl-1">),</span><br/><span class="hl-1">      </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-4">THREE</span><span class="hl-1">.</span><span class="hl-5">Vector2</span><span class="hl-1">(</span><span class="hl-6">x</span><span class="hl-1">, </span><span class="hl-6">y</span><span class="hl-1">),</span><br/><span class="hl-1">    ],</span><br/><span class="hl-1">    </span><span class="hl-6">totalLength:</span><span class="hl-1"> </span><span class="hl-6">Math</span><span class="hl-1">.</span><span class="hl-5">hypot</span><span class="hl-1">(</span><span class="hl-6">x</span><span class="hl-1"> - </span><span class="hl-11">0.5</span><span class="hl-1">, </span><span class="hl-6">y</span><span class="hl-1"> - </span><span class="hl-11">0.5</span><span class="hl-1">),</span><br/><span class="hl-1">    </span><span class="hl-6">color:</span><span class="hl-1"> </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-4">THREE</span><span class="hl-1">.</span><span class="hl-5">Color</span><span class="hl-1">(</span><span class="hl-6">Math</span><span class="hl-1">.</span><span class="hl-5">random</span><span class="hl-1">() * </span><span class="hl-11">0xffffff</span><span class="hl-1">),</span><br/><span class="hl-1">    </span><span class="hl-6">duration:</span><span class="hl-1"> </span><span class="hl-11">1200</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-6">lineWidth:</span><span class="hl-1"> </span><span class="hl-11">0.01</span><span class="hl-1">,</span><br/><span class="hl-1">  };</span><br/><span class="hl-1">  </span><span class="hl-6">pass</span><span class="hl-1">.</span><span class="hl-5">setLines</span><span class="hl-1">([...</span><span class="hl-6">paths</span><span class="hl-1">, </span><span class="hl-6">newPath</span><span class="hl-1">]);</span><br/><span class="hl-1">});</span>
 </code><button type="button">Copy</button></pre>
 
 <h3 id="计算路径总长度" class="tsd-anchor-link">计算路径总长度<a href="#计算路径总长度" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3>
@@ -169,11 +182,11 @@
 </code><button type="button">Copy</button></pre>
 
 <h3 id="矩形路径示例" class="tsd-anchor-link">矩形路径示例<a href="#矩形路径示例" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3>
-<pre><code class="ts"><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">pass</span><span class="hl-1"> = </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-5">FlowingLight2DPass</span><span class="hl-1">(</span><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-6">camera</span><span class="hl-1">);</span><br/><br/><span class="hl-8">// 创建一个矩形路径(注意:左上角为原点)</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">rectPath</span><span class="hl-1"> = {</span><br/><span class="hl-1">  </span><span class="hl-6">points:</span><span class="hl-1"> [</span><br/><span class="hl-1">    </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-4">THREE</span><span class="hl-1">.</span><span class="hl-5">Vector2</span><span class="hl-1">(</span><span class="hl-11">0.3</span><span class="hl-1">, </span><span class="hl-11">0.3</span><span class="hl-1">),  </span><span class="hl-8">// 左上</span><br/><span class="hl-1">    </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-4">THREE</span><span class="hl-1">.</span><span class="hl-5">Vector2</span><span class="hl-1">(</span><span class="hl-11">0.7</span><span class="hl-1">, </span><span class="hl-11">0.3</span><span class="hl-1">),  </span><span class="hl-8">// 右上</span><br/><span class="hl-1">    </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-4">THREE</span><span class="hl-1">.</span><span class="hl-5">Vector2</span><span class="hl-1">(</span><span class="hl-11">0.7</span><span class="hl-1">, </span><span class="hl-11">0.7</span><span class="hl-1">),  </span><span class="hl-8">// 右下</span><br/><span class="hl-1">    </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-4">THREE</span><span class="hl-1">.</span><span class="hl-5">Vector2</span><span class="hl-1">(</span><span class="hl-11">0.3</span><span class="hl-1">, </span><span class="hl-11">0.7</span><span class="hl-1">),  </span><span class="hl-8">// 左下</span><br/><span class="hl-1">    </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-4">THREE</span><span class="hl-1">.</span><span class="hl-5">Vector2</span><span class="hl-1">(</span><span class="hl-11">0.3</span><span class="hl-1">, </span><span class="hl-11">0.3</span><span class="hl-1">),  </span><span class="hl-8">// 闭合路径</span><br/><span class="hl-1">  ],</span><br/><span class="hl-1">  </span><span class="hl-6">totalLength:</span><span class="hl-1"> </span><span class="hl-11">1.6</span><span class="hl-1">, </span><span class="hl-8">// 矩形周长</span><br/><span class="hl-1">  </span><span class="hl-6">color:</span><span class="hl-1"> </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-4">THREE</span><span class="hl-1">.</span><span class="hl-5">Color</span><span class="hl-1">(</span><span class="hl-11">1.0</span><span class="hl-1">, </span><span class="hl-11">1.0</span><span class="hl-1">, </span><span class="hl-11">1.0</span><span class="hl-1">),</span><br/><span class="hl-1">  </span><span class="hl-6">opacity:</span><span class="hl-1"> </span><span class="hl-11">1.0</span><span class="hl-1">,</span><br/><span class="hl-1">  </span><span class="hl-6">duration:</span><span class="hl-1"> </span><span class="hl-11">4000</span><span class="hl-1">,</span><br/><span class="hl-1">  </span><span class="hl-6">delay:</span><span class="hl-1"> </span><span class="hl-11">2000</span><span class="hl-1">,</span><br/><span class="hl-1">  </span><span class="hl-6">lineWidth:</span><span class="hl-1"> </span><span class="hl-11">0.01</span><span class="hl-1">,</span><br/><span class="hl-1">};</span><br/><br/><span class="hl-6">pass</span><span class="hl-1">.</span><span class="hl-5">setLines</span><span class="hl-1">([</span><span class="hl-6">rectPath</span><span class="hl-1">]);</span>
+<pre><code class="ts"><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">pass</span><span class="hl-1"> = </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-5">FlowingLight2DPass</span><span class="hl-1">(</span><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-6">camera</span><span class="hl-1">);</span><br/><br/><span class="hl-8">// 创建一个矩形路径(注意:左上角为原点)</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">rectPath</span><span class="hl-1"> = {</span><br/><span class="hl-1">  </span><span class="hl-6">points:</span><span class="hl-1"> [</span><br/><span class="hl-1">    </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-4">THREE</span><span class="hl-1">.</span><span class="hl-5">Vector2</span><span class="hl-1">(</span><span class="hl-11">0.3</span><span class="hl-1">, </span><span class="hl-11">0.3</span><span class="hl-1">),  </span><span class="hl-8">// 左上</span><br/><span class="hl-1">    </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-4">THREE</span><span class="hl-1">.</span><span class="hl-5">Vector2</span><span class="hl-1">(</span><span class="hl-11">0.7</span><span class="hl-1">, </span><span class="hl-11">0.3</span><span class="hl-1">),  </span><span class="hl-8">// 右上</span><br/><span class="hl-1">    </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-4">THREE</span><span class="hl-1">.</span><span class="hl-5">Vector2</span><span class="hl-1">(</span><span class="hl-11">0.7</span><span class="hl-1">, </span><span class="hl-11">0.7</span><span class="hl-1">),  </span><span class="hl-8">// 右下</span><br/><span class="hl-1">    </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-4">THREE</span><span class="hl-1">.</span><span class="hl-5">Vector2</span><span class="hl-1">(</span><span class="hl-11">0.3</span><span class="hl-1">, </span><span class="hl-11">0.7</span><span class="hl-1">),  </span><span class="hl-8">// 左下</span><br/><span class="hl-1">    </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-4">THREE</span><span class="hl-1">.</span><span class="hl-5">Vector2</span><span class="hl-1">(</span><span class="hl-11">0.3</span><span class="hl-1">, </span><span class="hl-11">0.3</span><span class="hl-1">),  </span><span class="hl-8">// 闭合路径</span><br/><span class="hl-1">  ],</span><br/><span class="hl-1">  </span><span class="hl-6">totalLength:</span><span class="hl-1"> </span><span class="hl-11">1.6</span><span class="hl-1">, </span><span class="hl-8">// 矩形周长</span><br/><span class="hl-1">  </span><span class="hl-6">color:</span><span class="hl-1"> </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-4">THREE</span><span class="hl-1">.</span><span class="hl-5">Color</span><span class="hl-1">(</span><span class="hl-11">1.0</span><span class="hl-1">, </span><span class="hl-11">1.0</span><span class="hl-1">, </span><span class="hl-11">1.0</span><span class="hl-1">),</span><br/><span class="hl-1">  </span><span class="hl-6">opacity:</span><span class="hl-1"> </span><span class="hl-11">1.0</span><span class="hl-1">,</span><br/><span class="hl-1">  </span><span class="hl-6">duration:</span><span class="hl-1"> </span><span class="hl-11">4000</span><span class="hl-1">,</span><br/><span class="hl-1">  </span><span class="hl-6">startTime:</span><span class="hl-1"> </span><span class="hl-11">2000</span><span class="hl-1">,</span><br/><span class="hl-1">  </span><span class="hl-6">lineWidth:</span><span class="hl-1"> </span><span class="hl-11">0.01</span><span class="hl-1">,</span><br/><span class="hl-1">};</span><br/><br/><span class="hl-6">pass</span><span class="hl-1">.</span><span class="hl-5">setLines</span><span class="hl-1">([</span><span class="hl-6">rectPath</span><span class="hl-1">]);</span>
 </code><button type="button">Copy</button></pre>
 
 <h3 id="高-dpr-场景优化" class="tsd-anchor-link">高 DPR 场景优化<a href="#高-dpr-场景优化" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3>
-<pre><code class="typescript"><span class="hl-8">// InstancedMesh 实现自动优化高 DPR 性能</span><br/><span class="hl-8">// 在 DPR=2 的 Retina 屏幕上,性能显著优于全屏着色器方案</span><br/><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">pass</span><span class="hl-1"> = </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-5">FlowingLight2DPass</span><span class="hl-1">(</span><span class="hl-6">camera</span><span class="hl-1">);</span><br/><br/><span class="hl-8">// 多条路径在高 DPR 下仍能保持流畅</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">paths</span><span class="hl-1"> = </span><span class="hl-6">Array</span><span class="hl-1">.</span><span class="hl-5">from</span><span class="hl-1">({ </span><span class="hl-6">length:</span><span class="hl-1"> </span><span class="hl-11">10</span><span class="hl-1"> }, (</span><span class="hl-6">_</span><span class="hl-1">, </span><span class="hl-6">i</span><span class="hl-1">) </span><span class="hl-3">=&gt;</span><span class="hl-1"> ({</span><br/><span class="hl-1">  </span><span class="hl-6">points:</span><span class="hl-1"> [</span><br/><span class="hl-1">    </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-4">THREE</span><span class="hl-1">.</span><span class="hl-5">Vector2</span><span class="hl-1">(</span><span class="hl-11">0.1</span><span class="hl-1">, </span><span class="hl-11">0.1</span><span class="hl-1"> + </span><span class="hl-6">i</span><span class="hl-1"> * </span><span class="hl-11">0.08</span><span class="hl-1">),</span><br/><span class="hl-1">    </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-4">THREE</span><span class="hl-1">.</span><span class="hl-5">Vector2</span><span class="hl-1">(</span><span class="hl-11">0.9</span><span class="hl-1">, </span><span class="hl-11">0.1</span><span class="hl-1"> + </span><span class="hl-6">i</span><span class="hl-1"> * </span><span class="hl-11">0.08</span><span class="hl-1">),</span><br/><span class="hl-1">  ],</span><br/><span class="hl-1">  </span><span class="hl-6">totalLength:</span><span class="hl-1"> </span><span class="hl-11">0.8</span><span class="hl-1">,</span><br/><span class="hl-1">  </span><span class="hl-6">color:</span><span class="hl-1"> </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-4">THREE</span><span class="hl-1">.</span><span class="hl-5">Color</span><span class="hl-1">(</span><span class="hl-6">Math</span><span class="hl-1">.</span><span class="hl-5">random</span><span class="hl-1">() * </span><span class="hl-11">0xffffff</span><span class="hl-1">),</span><br/><span class="hl-1">  </span><span class="hl-6">duration:</span><span class="hl-1"> </span><span class="hl-11">2000</span><span class="hl-1"> + </span><span class="hl-6">i</span><span class="hl-1"> * </span><span class="hl-11">100</span><span class="hl-1">,</span><br/><span class="hl-1">  </span><span class="hl-6">delay:</span><span class="hl-1"> </span><span class="hl-6">i</span><span class="hl-1"> * </span><span class="hl-11">200</span><span class="hl-1">,</span><br/><span class="hl-1">  </span><span class="hl-6">lineWidth:</span><span class="hl-1"> </span><span class="hl-11">0.01</span><span class="hl-1">,</span><br/><span class="hl-1">}));</span><br/><br/><span class="hl-6">pass</span><span class="hl-1">.</span><span class="hl-5">setLines</span><span class="hl-1">(</span><span class="hl-6">paths</span><span class="hl-1">);</span>
+<pre><code class="typescript"><span class="hl-8">// InstancedMesh 实现自动优化高 DPR 性能</span><br/><span class="hl-8">// 在 DPR=2 的 Retina 屏幕上,性能显著优于全屏着色器方案</span><br/><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">pass</span><span class="hl-1"> = </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-5">FlowingLight2DPass</span><span class="hl-1">(</span><span class="hl-6">camera</span><span class="hl-1">);</span><br/><br/><span class="hl-8">// 多条路径在高 DPR 下仍能保持流畅</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">paths</span><span class="hl-1"> = </span><span class="hl-6">Array</span><span class="hl-1">.</span><span class="hl-5">from</span><span class="hl-1">({ </span><span class="hl-6">length:</span><span class="hl-1"> </span><span class="hl-11">10</span><span class="hl-1"> }, (</span><span class="hl-6">_</span><span class="hl-1">, </span><span class="hl-6">i</span><span class="hl-1">) </span><span class="hl-3">=&gt;</span><span class="hl-1"> ({</span><br/><span class="hl-1">  </span><span class="hl-6">points:</span><span class="hl-1"> [</span><br/><span class="hl-1">    </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-4">THREE</span><span class="hl-1">.</span><span class="hl-5">Vector2</span><span class="hl-1">(</span><span class="hl-11">0.1</span><span class="hl-1">, </span><span class="hl-11">0.1</span><span class="hl-1"> + </span><span class="hl-6">i</span><span class="hl-1"> * </span><span class="hl-11">0.08</span><span class="hl-1">),</span><br/><span class="hl-1">    </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-4">THREE</span><span class="hl-1">.</span><span class="hl-5">Vector2</span><span class="hl-1">(</span><span class="hl-11">0.9</span><span class="hl-1">, </span><span class="hl-11">0.1</span><span class="hl-1"> + </span><span class="hl-6">i</span><span class="hl-1"> * </span><span class="hl-11">0.08</span><span class="hl-1">),</span><br/><span class="hl-1">  ],</span><br/><span class="hl-1">  </span><span class="hl-6">totalLength:</span><span class="hl-1"> </span><span class="hl-11">0.8</span><span class="hl-1">,</span><br/><span class="hl-1">  </span><span class="hl-6">color:</span><span class="hl-1"> </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-4">THREE</span><span class="hl-1">.</span><span class="hl-5">Color</span><span class="hl-1">(</span><span class="hl-6">Math</span><span class="hl-1">.</span><span class="hl-5">random</span><span class="hl-1">() * </span><span class="hl-11">0xffffff</span><span class="hl-1">),</span><br/><span class="hl-1">  </span><span class="hl-6">duration:</span><span class="hl-1"> </span><span class="hl-11">2000</span><span class="hl-1"> + </span><span class="hl-6">i</span><span class="hl-1"> * </span><span class="hl-11">100</span><span class="hl-1">,</span><br/><span class="hl-1">  </span><span class="hl-6">startTime:</span><span class="hl-1"> </span><span class="hl-6">i</span><span class="hl-1"> * </span><span class="hl-11">200</span><span class="hl-1">,</span><br/><span class="hl-1">  </span><span class="hl-6">lineWidth:</span><span class="hl-1"> </span><span class="hl-11">0.01</span><span class="hl-1">,</span><br/><span class="hl-1">}));</span><br/><br/><span class="hl-6">pass</span><span class="hl-1">.</span><span class="hl-5">setLines</span><span class="hl-1">(</span><span class="hl-6">paths</span><span class="hl-1">);</span>
 </code><button type="button">Copy</button></pre>
 
 <h2 id="debugging" class="tsd-anchor-link">Debugging<a href="#debugging" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2>
@@ -207,7 +220,7 @@
 <td>只更新 instanceColor attribute</td>
 </tr>
 <tr>
-<td>只修改 duration/delay</td>
+<td>只修改 duration/startTime</td>
 <td>⚡️ 极快 (~100x)</td>
 <td>只更新 instanceMeta attribute</td>
 </tr>
@@ -256,4 +269,4 @@
 </ul>
 <hr>
 <p>tags: [流光, 光带, 导航路径, 指示线, 动态路径, 特效, postprocessing, effect, flowing, light, pass, rendering, screenspace, instanced, performance, 2d, screen-space]</p>
-</div></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h3>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div><details open class="tsd-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h3>On This Page</h3></summary><div class="tsd-accordion-details"><a href="#flowing-light-2d-pass-流光-2d-通道"><span>Flowing <wbr/>Light 2<wbr/>D <wbr/>Pass (流光 2<wbr/>D 通道)</span></a><ul><li><a href="#schema"><span>Schema</span></a></li><li><a href="#concepts"><span>Concepts</span></a></li><li><ul><li><a href="#instancedmesh-实例化渲染-instanced-rendering"><span>Instanced<wbr/>Mesh 实例化渲染 (<wbr/>Instanced <wbr/>Rendering)</span></a></li><li><a href="#归一化坐标系统-normalized-coordinates"><span>归一化坐标系统 (<wbr/>Normalized <wbr/>Coordinates)</span></a></li><li><a href="#头尾追逐动画-head-tail-chase-animation"><span>头尾追逐动画 (<wbr/>Head-<wbr/>Tail <wbr/>Chase <wbr/>Animation)</span></a></li><li><a href="#ndc-坐标转换"><span>NDC 坐标转换</span></a></li><li><a href="#dpr-处理与宽高比适配"><span>DPR 处理与宽高比适配</span></a></li></ul></li><li><a href="#configuration"><span>Configuration</span></a></li><li><ul><li><a href="#line-配置参数"><span>Line 配置参数</span></a></li></ul></li><li><a href="#instance-methods"><span>Instance <wbr/>Methods</span></a></li><li><ul><li><a href="#_"><span></span></a></li><li><a href="#_-1"><span></span></a></li><li><a href="#_-2"><span></span></a></li><li><a href="#_-3"><span></span></a></li><li><a href="#_-4"><span></span></a></li></ul></li><li><a href="#examples"><span>Examples</span></a></li><li><ul><li><a href="#快速上手-quick-example"><span>快速上手 (<wbr/>Quick <wbr/>Example)</span></a></li><li><a href="#多条路径-动态更新"><span>多条路径 &amp; 动态更新</span></a></li><li><a href="#计算路径总长度"><span>计算路径总长度</span></a></li><li><a href="#矩形路径示例"><span>矩形路径示例</span></a></li><li><a href="#高-dpr-场景优化"><span>高 <wbr/>DPR 场景优化</span></a></li></ul></li><li><a href="#debugging"><span>Debugging</span></a></li><li><a href="#performance"><span>Performance</span></a></li><li><ul><li><a href="#与全屏着色器对比"><span>与全屏着色器对比</span></a></li><li><a href="#setline-性能优化"><span>set<wbr/>Line 性能优化</span></a></li><li><a href="#优化建议"><span>优化建议</span></a></li></ul></li><li><a href="#common-pitfalls"><span>Common <wbr/>Pitfalls</span></a></li><li><a href="#related"><span>Related</span></a></li></ul></div></details></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html">如视 Five SDK</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>
+</div></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h3>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div><details open class="tsd-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h3>On This Page</h3></summary><div class="tsd-accordion-details"><a href="#flowing-light-2d-pass-流光-2d-通道"><span>Flowing <wbr/>Light 2<wbr/>D <wbr/>Pass (流光 2<wbr/>D 通道)</span></a><ul><li><a href="#schema"><span>Schema</span></a></li><li><a href="#concepts"><span>Concepts</span></a></li><li><ul><li><a href="#instancedmesh-实例化渲染-instanced-rendering"><span>Instanced<wbr/>Mesh 实例化渲染 (<wbr/>Instanced <wbr/>Rendering)</span></a></li><li><a href="#归一化坐标系统-normalized-coordinates"><span>归一化坐标系统 (<wbr/>Normalized <wbr/>Coordinates)</span></a></li><li><a href="#头尾追逐动画-head-tail-chase-animation"><span>头尾追逐动画 (<wbr/>Head-<wbr/>Tail <wbr/>Chase <wbr/>Animation)</span></a></li><li><a href="#ndc-坐标转换"><span>NDC 坐标转换</span></a></li><li><a href="#dpr-处理与宽高比适配"><span>DPR 处理与宽高比适配</span></a></li></ul></li><li><a href="#configuration"><span>Configuration</span></a></li><li><ul><li><a href="#line-配置参数"><span>Line 配置参数</span></a></li></ul></li><li><a href="#instance-methods"><span>Instance <wbr/>Methods</span></a></li><li><ul><li><a href="#_"><span></span></a></li><li><a href="#_-1"><span></span></a></li><li><a href="#_-2"><span></span></a></li><li><a href="#_-3"><span></span></a></li><li><a href="#_-4"><span></span></a></li><li><a href="#_-5"><span></span></a></li><li><a href="#_-6"><span></span></a></li></ul></li><li><a href="#examples"><span>Examples</span></a></li><li><ul><li><a href="#快速上手-quick-example"><span>快速上手 (<wbr/>Quick <wbr/>Example)</span></a></li><li><a href="#多条路径-动态更新"><span>多条路径 &amp; 动态更新</span></a></li><li><a href="#计算路径总长度"><span>计算路径总长度</span></a></li><li><a href="#矩形路径示例"><span>矩形路径示例</span></a></li><li><a href="#高-dpr-场景优化"><span>高 <wbr/>DPR 场景优化</span></a></li></ul></li><li><a href="#debugging"><span>Debugging</span></a></li><li><a href="#performance"><span>Performance</span></a></li><li><ul><li><a href="#与全屏着色器对比"><span>与全屏着色器对比</span></a></li><li><a href="#setline-性能优化"><span>set<wbr/>Line 性能优化</span></a></li><li><a href="#优化建议"><span>优化建议</span></a></li></ul></li><li><a href="#common-pitfalls"><span>Common <wbr/>Pitfalls</span></a></li><li><a href="#related"><span>Related</span></a></li></ul></div></details></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html">如视 Five SDK</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>