@realsee/five 6.9.0-alpha.0 → 6.9.0-alpha.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">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>
+<pre><code class="ts"><span class="hl-11">import</span><span class="hl-1"> </span><span class="hl-8">*</span><span class="hl-1"> </span><span class="hl-11">as</span><span class="hl-1"> </span><span class="hl-5">THREE</span><span class="hl-1"> </span><span class="hl-11">from</span><span class="hl-1"> </span><span class="hl-10">&#39;three&#39;</span><span class="hl-1">;</span><br/><span class="hl-11">import</span><span class="hl-1"> { </span><span class="hl-5">FivePass</span><span class="hl-1"> } </span><span class="hl-11">from</span><span class="hl-1"> </span><span class="hl-10">&#39;./pass&#39;</span><span class="hl-1">;</span><br/><span class="hl-11">import</span><span class="hl-1"> { </span><span class="hl-11">type</span><span class="hl-1"> </span><span class="hl-5">Camera</span><span class="hl-1"> } </span><span class="hl-11">from</span><span class="hl-1"> </span><span class="hl-10">&#39;../../../core/camera&#39;</span><span class="hl-1">;</span><br/><br/><span class="hl-8">type</span><span class="hl-1"> </span><span class="hl-9">Line</span><span class="hl-1"> = {</span><br/><span class="hl-1">  </span><span class="hl-5">id</span><span class="hl-1">?: </span><span class="hl-9">string</span><span class="hl-1">;                   </span><span class="hl-7">// 可选的唯一标识符,不传则自动生成 UUID</span><br/><span class="hl-1">  </span><span class="hl-5">points</span><span class="hl-1">: </span><span class="hl-9">THREE</span><span class="hl-1">.</span><span class="hl-9">Vector2</span><span class="hl-1">[];      </span><span class="hl-7">// 归一化坐标路径点 [0, 1]</span><br/><span class="hl-1">  </span><span class="hl-5">totalLength</span><span class="hl-1">: </span><span class="hl-9">number</span><span class="hl-1">;           </span><span class="hl-7">// 路径总长度(归一化单位)</span><br/><span class="hl-1">  </span><span class="hl-5">color</span><span class="hl-1">: </span><span class="hl-9">THREE</span><span class="hl-1">.</span><span class="hl-9">Color</span><span class="hl-1">;            </span><span class="hl-7">// 光带颜色</span><br/><span class="hl-1">  </span><span class="hl-5">opacity</span><span class="hl-1">?: </span><span class="hl-9">number</span><span class="hl-1">;              </span><span class="hl-7">// 光带不透明度(0-1)</span><br/><span class="hl-1">  </span><span class="hl-5">duration</span><span class="hl-1">?: </span><span class="hl-9">number</span><span class="hl-1">;             </span><span class="hl-7">// 动画时长(毫秒)</span><br/><span class="hl-1">  </span><span class="hl-5">startTime</span><span class="hl-1">?: </span><span class="hl-9">number</span><span class="hl-1">;            </span><span class="hl-7">// 线条开始时间(毫秒),默认使用当前内部时间</span><br/><span class="hl-1">  </span><span class="hl-5">lineWidth</span><span class="hl-1">?: </span><span class="hl-9">number</span><span class="hl-1">;            </span><span class="hl-7">// 线宽(归一化单位)</span><br/><span class="hl-1">  </span><span class="hl-5">tailLengthRatio</span><span class="hl-1">?: </span><span class="hl-9">number</span><span class="hl-1">;      </span><span class="hl-7">// 尾巴长度比例(0-1),默认 0.2</span><br/><span class="hl-1">};</span><br/><br/><span class="hl-11">export</span><span class="hl-1"> </span><span class="hl-8">class</span><span class="hl-1"> </span><span class="hl-9">FlowingLight2DPass</span><span class="hl-1"> </span><span class="hl-8">extends</span><span class="hl-1"> </span><span class="hl-9">FivePass</span><span class="hl-1"> {</span><br/><span class="hl-1">  </span><span class="hl-8">constructor</span><span class="hl-1">(</span><span class="hl-5">camera</span><span class="hl-1">: </span><span class="hl-9">Camera</span><span class="hl-1">);</span><br/><br/><span class="hl-1">  </span><span class="hl-7">// 批量设置路径列表(替换所有现有线条)</span><br/><span class="hl-1">  </span><span class="hl-8">public</span><span class="hl-1"> </span><span class="hl-4">setLines</span><span class="hl-1">(</span><span class="hl-5">lines</span><span class="hl-1">: </span><span class="hl-9">Line</span><span class="hl-1">[]): </span><span class="hl-9">void</span><span class="hl-1">;</span><br/><br/><span class="hl-1">  </span><span class="hl-7">// 追加一条或多条线,返回生成的 id 数组</span><br/><span class="hl-1">  </span><span class="hl-8">public</span><span class="hl-1"> </span><span class="hl-4">addLine</span><span class="hl-1">(...</span><span class="hl-5">lines</span><span class="hl-1">: </span><span class="hl-9">Line</span><span class="hl-1">[]): </span><span class="hl-9">string</span><span class="hl-1">[];</span><br/><br/><span class="hl-1">  </span><span class="hl-7">// 按 id 移除一条或多条线,返回实际移除的数量</span><br/><span class="hl-1">  </span><span class="hl-8">public</span><span class="hl-1"> </span><span class="hl-4">removeLine</span><span class="hl-1">(...</span><span class="hl-5">ids</span><span class="hl-1">: </span><span class="hl-9">string</span><span class="hl-1">[]): </span><span class="hl-9">number</span><span class="hl-1">;</span><br/><br/><span class="hl-1">  </span><span class="hl-7">// 修改单条线的参数(通过 id),支持部分更新</span><br/><span class="hl-1">  </span><span class="hl-8">public</span><span class="hl-1"> </span><span class="hl-4">setLine</span><span class="hl-1">(</span><span class="hl-5">params</span><span class="hl-1">: { </span><span class="hl-5">id</span><span class="hl-1">: </span><span class="hl-9">string</span><span class="hl-1"> } &amp; </span><span class="hl-9">Partial</span><span class="hl-1">&lt;</span><span class="hl-9">Omit</span><span class="hl-1">&lt;</span><span class="hl-9">Line</span><span class="hl-1">, </span><span class="hl-10">&#39;id&#39;</span><span class="hl-1">&gt;&gt;): </span><span class="hl-9">void</span><span class="hl-1">;</span><br/><br/><span class="hl-1">  </span><span class="hl-8">public</span><span class="hl-1"> </span><span class="hl-4">render</span><span class="hl-1">(</span><br/><span class="hl-1">    </span><span class="hl-5">renderer</span><span class="hl-1">: </span><span class="hl-9">THREE</span><span class="hl-1">.</span><span class="hl-9">WebGLRenderer</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-5">writeBuffer</span><span class="hl-1">: </span><span class="hl-9">THREE</span><span class="hl-1">.</span><span class="hl-9">WebGLRenderTarget</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-5">readBuffer</span><span class="hl-1">: </span><span class="hl-9">THREE</span><span class="hl-1">.</span><span class="hl-9">WebGLRenderTarget</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-5">deltaTime</span><span class="hl-1">: </span><span class="hl-9">number</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-5">maskActive</span><span class="hl-1">?: </span><span class="hl-9">boolean</span><span class="hl-1">,</span><br/><span class="hl-1">  ): </span><span class="hl-9">void</span><span class="hl-1">;</span><br/><br/><span class="hl-1">  </span><span class="hl-8">public</span><span class="hl-1"> </span><span class="hl-4">dispose</span><span class="hl-1">(): </span><span class="hl-9">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>
@@ -132,19 +132,19 @@
 <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">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>
+<pre><code class="ts"><span class="hl-8">const</span><span class="hl-1"> </span><span class="hl-6">pathLine</span><span class="hl-1">: </span><span class="hl-9">Line</span><span class="hl-1"> = {</span><br/><span class="hl-1">  </span><span class="hl-5">id:</span><span class="hl-1"> </span><span class="hl-10">&#39;my-line-1&#39;</span><span class="hl-1">,  </span><span class="hl-7">// 可选,不传则自动生成</span><br/><span class="hl-1">  </span><span class="hl-5">points:</span><span class="hl-1"> [</span><br/><span class="hl-1">    </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Vector2</span><span class="hl-1">(</span><span class="hl-3">0.3</span><span class="hl-1">, </span><span class="hl-3">0.7</span><span class="hl-1">),</span><br/><span class="hl-1">    </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Vector2</span><span class="hl-1">(</span><span class="hl-3">0.7</span><span class="hl-1">, </span><span class="hl-3">0.7</span><span class="hl-1">),</span><br/><span class="hl-1">    </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Vector2</span><span class="hl-1">(</span><span class="hl-3">0.7</span><span class="hl-1">, </span><span class="hl-3">0.3</span><span class="hl-1">),</span><br/><span class="hl-1">  ],</span><br/><span class="hl-1">  </span><span class="hl-5">totalLength:</span><span class="hl-1"> </span><span class="hl-3">0.8</span><span class="hl-1">,  </span><span class="hl-7">// 归一化单位</span><br/><span class="hl-1">  </span><span class="hl-5">color:</span><span class="hl-1"> </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Color</span><span class="hl-1">(</span><span class="hl-3">0x00c2ff</span><span class="hl-1">),</span><br/><span class="hl-1">  </span><span class="hl-5">opacity:</span><span class="hl-1"> </span><span class="hl-3">0.8</span><span class="hl-1">,</span><br/><span class="hl-1">  </span><span class="hl-5">duration:</span><span class="hl-1"> </span><span class="hl-3">2000</span><span class="hl-1">,</span><br/><span class="hl-1">  </span><span class="hl-5">startTime:</span><span class="hl-1"> </span><span class="hl-3">500</span><span class="hl-1">,</span><br/><span class="hl-1">  </span><span class="hl-5">lineWidth:</span><span class="hl-1"> </span><span class="hl-3">0.01</span><span class="hl-1">,</span><br/><span class="hl-1">};</span><br/><span class="hl-5">pass</span><span class="hl-1">.</span><span class="hl-4">setLines</span><span class="hl-1">([</span><span class="hl-5">pathLine</span><span class="hl-1">]);</span>
 </code><button type="button">Copy</button></pre>
 
 <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>
+<pre><code class="ts"><span class="hl-7">// 追加单条线</span><br/><span class="hl-8">const</span><span class="hl-1"> [</span><span class="hl-6">id1</span><span class="hl-1">] = </span><span class="hl-5">pass</span><span class="hl-1">.</span><span class="hl-4">addLine</span><span class="hl-1">({</span><br/><span class="hl-1">  </span><span class="hl-5">points:</span><span class="hl-1"> [</span><br/><span class="hl-1">    </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Vector2</span><span class="hl-1">(</span><span class="hl-3">0.1</span><span class="hl-1">, </span><span class="hl-3">0.1</span><span class="hl-1">),</span><br/><span class="hl-1">    </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Vector2</span><span class="hl-1">(</span><span class="hl-3">0.9</span><span class="hl-1">, </span><span class="hl-3">0.9</span><span class="hl-1">),</span><br/><span class="hl-1">  ],</span><br/><span class="hl-1">  </span><span class="hl-5">totalLength:</span><span class="hl-1"> </span><span class="hl-3">1.13</span><span class="hl-1">,</span><br/><span class="hl-1">  </span><span class="hl-5">color:</span><span class="hl-1"> </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Color</span><span class="hl-1">(</span><span class="hl-3">0xff0000</span><span class="hl-1">),</span><br/><span class="hl-1">  </span><span class="hl-5">duration:</span><span class="hl-1"> </span><span class="hl-3">2000</span><span class="hl-1">,</span><br/><span class="hl-1">});</span><br/><br/><span class="hl-7">// 追加多条线</span><br/><span class="hl-8">const</span><span class="hl-1"> </span><span class="hl-6">ids</span><span class="hl-1"> = </span><span class="hl-5">pass</span><span class="hl-1">.</span><span class="hl-4">addLine</span><span class="hl-1">(</span><br/><span class="hl-1">  {</span><br/><span class="hl-1">    </span><span class="hl-5">points:</span><span class="hl-1"> [...],</span><br/><span class="hl-1">    </span><span class="hl-5">totalLength:</span><span class="hl-1"> </span><span class="hl-3">0.8</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-5">color:</span><span class="hl-1"> </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Color</span><span class="hl-1">(</span><span class="hl-3">0x00ff00</span><span class="hl-1">),</span><br/><span class="hl-1">    </span><span class="hl-5">duration:</span><span class="hl-1"> </span><span class="hl-3">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-5">points:</span><span class="hl-1"> [...],</span><br/><span class="hl-1">    </span><span class="hl-5">totalLength:</span><span class="hl-1"> </span><span class="hl-3">1.2</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-5">color:</span><span class="hl-1"> </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Color</span><span class="hl-1">(</span><span class="hl-3">0x0000ff</span><span class="hl-1">),</span><br/><span class="hl-1">    </span><span class="hl-5">duration:</span><span class="hl-1"> </span><span class="hl-3">1800</span><span class="hl-1">,</span><br/><span class="hl-1">  },</span><br/><span class="hl-1">);</span><br/><span class="hl-7">// 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>
+<pre><code class="ts"><span class="hl-7">// 移除单条线</span><br/><span class="hl-5">pass</span><span class="hl-1">.</span><span class="hl-4">removeLine</span><span class="hl-1">(</span><span class="hl-5">id1</span><span class="hl-1">);</span><br/><br/><span class="hl-7">// 移除多条线</span><br/><span class="hl-8">const</span><span class="hl-1"> </span><span class="hl-6">removedCount</span><span class="hl-1"> = </span><span class="hl-5">pass</span><span class="hl-1">.</span><span class="hl-4">removeLine</span><span class="hl-1">(</span><span class="hl-5">id1</span><span class="hl-1">, </span><span class="hl-5">id2</span><span class="hl-1">, </span><span class="hl-5">id3</span><span class="hl-1">);</span><br/><span class="hl-5">console</span><span class="hl-1">.</span><span class="hl-4">log</span><span class="hl-1">(</span><span class="hl-10">`移除了 </span><span class="hl-8">${</span><span class="hl-5">removedCount</span><span class="hl-8">}</span><span class="hl-10"> 条线`</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>
@@ -155,7 +155,7 @@
 <li>如果 <code>points</code> 数量改变,会重建整个 mesh,性能开销较大</li>
 </ul>
 <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">setLine</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><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><br/><br/><span class="hl-8">// 修改多个属性 - 高性能</span><br/><span class="hl-6">pass</span><span class="hl-1">.</span><span class="hl-5">setLine</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><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">opacity:</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">duration:</span><span class="hl-1"> </span><span class="hl-11">3000</span><span class="hl-1">,</span><br/><span class="hl-1">});</span><br/><br/><span class="hl-8">// 修改 points (相同数量) - 高性能</span><br/><span class="hl-6">pass</span><span class="hl-1">.</span><span class="hl-5">setLine</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><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.2</span><span class="hl-1">, </span><span class="hl-11">0.2</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.8</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-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.8</span><span class="hl-1">, </span><span class="hl-11">0.2</span><span class="hl-1">),</span><br/><span class="hl-1">  ],  </span><span class="hl-8">// 仍是 3 个点</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><br/><br/><span class="hl-8">// 修改 points (不同数量) - 会重建 mesh</span><br/><span class="hl-6">pass</span><span class="hl-1">.</span><span class="hl-5">setLine</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><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.2</span><span class="hl-1">, </span><span class="hl-11">0.2</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.8</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-8">// 从 3 个点变为 2 个点</span><br/><span class="hl-1">  </span><span class="hl-6">totalLength:</span><span class="hl-1"> </span><span class="hl-11">0.85</span><span class="hl-1">,</span><br/><span class="hl-1">});</span>
+<pre><code class="ts"><span class="hl-7">// 只修改颜色 - 高性能</span><br/><span class="hl-5">pass</span><span class="hl-1">.</span><span class="hl-4">setLine</span><span class="hl-1">({</span><br/><span class="hl-1">  </span><span class="hl-5">id:</span><span class="hl-1"> </span><span class="hl-10">&#39;my-line-1&#39;</span><span class="hl-1">,</span><br/><span class="hl-1">  </span><span class="hl-5">color:</span><span class="hl-1"> </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Color</span><span class="hl-1">(</span><span class="hl-3">0xff0000</span><span class="hl-1">),</span><br/><span class="hl-1">});</span><br/><br/><span class="hl-7">// 修改多个属性 - 高性能</span><br/><span class="hl-5">pass</span><span class="hl-1">.</span><span class="hl-4">setLine</span><span class="hl-1">({</span><br/><span class="hl-1">  </span><span class="hl-5">id:</span><span class="hl-1"> </span><span class="hl-10">&#39;my-line-1&#39;</span><span class="hl-1">,</span><br/><span class="hl-1">  </span><span class="hl-5">color:</span><span class="hl-1"> </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Color</span><span class="hl-1">(</span><span class="hl-3">0x00ff00</span><span class="hl-1">),</span><br/><span class="hl-1">  </span><span class="hl-5">opacity:</span><span class="hl-1"> </span><span class="hl-3">0.5</span><span class="hl-1">,</span><br/><span class="hl-1">  </span><span class="hl-5">duration:</span><span class="hl-1"> </span><span class="hl-3">3000</span><span class="hl-1">,</span><br/><span class="hl-1">});</span><br/><br/><span class="hl-7">// 修改 points (相同数量) - 高性能</span><br/><span class="hl-5">pass</span><span class="hl-1">.</span><span class="hl-4">setLine</span><span class="hl-1">({</span><br/><span class="hl-1">  </span><span class="hl-5">id:</span><span class="hl-1"> </span><span class="hl-10">&#39;my-line-1&#39;</span><span class="hl-1">,</span><br/><span class="hl-1">  </span><span class="hl-5">points:</span><span class="hl-1"> [</span><br/><span class="hl-1">    </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Vector2</span><span class="hl-1">(</span><span class="hl-3">0.2</span><span class="hl-1">, </span><span class="hl-3">0.2</span><span class="hl-1">),</span><br/><span class="hl-1">    </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Vector2</span><span class="hl-1">(</span><span class="hl-3">0.8</span><span class="hl-1">, </span><span class="hl-3">0.8</span><span class="hl-1">),</span><br/><span class="hl-1">    </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Vector2</span><span class="hl-1">(</span><span class="hl-3">0.8</span><span class="hl-1">, </span><span class="hl-3">0.2</span><span class="hl-1">),</span><br/><span class="hl-1">  ],  </span><span class="hl-7">// 仍是 3 个点</span><br/><span class="hl-1">  </span><span class="hl-5">totalLength:</span><span class="hl-1"> </span><span class="hl-3">1.2</span><span class="hl-1">,</span><br/><span class="hl-1">});</span><br/><br/><span class="hl-7">// 修改 points (不同数量) - 会重建 mesh</span><br/><span class="hl-5">pass</span><span class="hl-1">.</span><span class="hl-4">setLine</span><span class="hl-1">({</span><br/><span class="hl-1">  </span><span class="hl-5">id:</span><span class="hl-1"> </span><span class="hl-10">&#39;my-line-1&#39;</span><span class="hl-1">,</span><br/><span class="hl-1">  </span><span class="hl-5">points:</span><span class="hl-1"> [</span><br/><span class="hl-1">    </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Vector2</span><span class="hl-1">(</span><span class="hl-3">0.2</span><span class="hl-1">, </span><span class="hl-3">0.2</span><span class="hl-1">),</span><br/><span class="hl-1">    </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Vector2</span><span class="hl-1">(</span><span class="hl-3">0.8</span><span class="hl-1">, </span><span class="hl-3">0.8</span><span class="hl-1">),</span><br/><span class="hl-1">  ],  </span><span class="hl-7">// 从 3 个点变为 2 个点</span><br/><span class="hl-1">  </span><span class="hl-5">totalLength:</span><span class="hl-1"> </span><span class="hl-3">0.85</span><span class="hl-1">,</span><br/><span class="hl-1">});</span>
 </code><button type="button">Copy</button></pre>
 
 <p><strong>注意事项</strong>:</p>
@@ -170,23 +170,23 @@
 <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>
-<pre><code class="typescript"><span class="hl-10">import</span><span class="hl-1"> { </span><span class="hl-6">Five</span><span class="hl-1"> } </span><span class="hl-10">from</span><span class="hl-1"> </span><span class="hl-9">&#39;@realsee/five&#39;</span><span class="hl-1">;</span><br/><span class="hl-10">import</span><span class="hl-1"> { </span><span class="hl-6">FlowingLight2DPass</span><span class="hl-1"> } </span><span class="hl-10">from</span><span class="hl-1"> </span><span class="hl-9">&#39;../../lib/five/renderer/postprocessing&#39;</span><span class="hl-1">;</span><br/><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/><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">five</span><span class="hl-1"> = </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-5">Five</span><span class="hl-1">();</span><br/><br/><span class="hl-8">// 创建 2D 流光通道</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">flowing2D</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">path</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.2</span><span class="hl-1">, </span><span class="hl-11">0.2</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.8</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.8</span><span class="hl-1">, </span><span class="hl-11">0.2</span><span class="hl-1">),</span><br/><span class="hl-1">];</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">totalLen</span><span class="hl-1"> = </span><span class="hl-11">1.2</span><span class="hl-1">; </span><span class="hl-8">// 归一化单位</span><br/><br/><span class="hl-6">flowing2D</span><span class="hl-1">.</span><span class="hl-5">setLines</span><span class="hl-1">([{</span><br/><span class="hl-1">  </span><span class="hl-6">points:</span><span class="hl-1"> </span><span class="hl-6">path</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-6">totalLen</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">opacity:</span><span class="hl-1"> </span><span class="hl-11">0.9</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">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">five</span><span class="hl-1">.</span><span class="hl-5">addPass</span><span class="hl-1">(</span><span class="hl-6">flowing2D</span><span class="hl-1">);</span><br/><br/><span class="hl-3">function</span><span class="hl-1"> </span><span class="hl-5">animate</span><span class="hl-1">() {</span><br/><span class="hl-1">  </span><span class="hl-5">requestAnimationFrame</span><span class="hl-1">(</span><span class="hl-6">animate</span><span class="hl-1">);</span><br/><span class="hl-1">  </span><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-5">render</span><span class="hl-1">();</span><br/><span class="hl-1">}</span><br/><span class="hl-5">animate</span><span class="hl-1">();</span>
+<pre><code class="typescript"><span class="hl-11">import</span><span class="hl-1"> { </span><span class="hl-5">Five</span><span class="hl-1"> } </span><span class="hl-11">from</span><span class="hl-1"> </span><span class="hl-10">&#39;@realsee/five&#39;</span><span class="hl-1">;</span><br/><span class="hl-11">import</span><span class="hl-1"> { </span><span class="hl-5">FlowingLight2DPass</span><span class="hl-1"> } </span><span class="hl-11">from</span><span class="hl-1"> </span><span class="hl-10">&#39;../../lib/five/renderer/postprocessing&#39;</span><span class="hl-1">;</span><br/><span class="hl-11">import</span><span class="hl-1"> </span><span class="hl-8">*</span><span class="hl-1"> </span><span class="hl-11">as</span><span class="hl-1"> </span><span class="hl-5">THREE</span><span class="hl-1"> </span><span class="hl-11">from</span><span class="hl-1"> </span><span class="hl-10">&#39;three&#39;</span><span class="hl-1">;</span><br/><br/><span class="hl-8">const</span><span class="hl-1"> </span><span class="hl-6">five</span><span class="hl-1"> = </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-4">Five</span><span class="hl-1">();</span><br/><br/><span class="hl-7">// 创建 2D 流光通道</span><br/><span class="hl-8">const</span><span class="hl-1"> </span><span class="hl-6">flowing2D</span><span class="hl-1"> = </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-4">FlowingLight2DPass</span><span class="hl-1">(</span><span class="hl-5">five</span><span class="hl-1">.</span><span class="hl-5">camera</span><span class="hl-1">);</span><br/><br/><span class="hl-7">// 定义一条屏幕空间的路径(归一化坐标)</span><br/><span class="hl-8">const</span><span class="hl-1"> </span><span class="hl-6">path</span><span class="hl-1"> = [</span><br/><span class="hl-1">  </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Vector2</span><span class="hl-1">(</span><span class="hl-3">0.2</span><span class="hl-1">, </span><span class="hl-3">0.2</span><span class="hl-1">),</span><br/><span class="hl-1">  </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Vector2</span><span class="hl-1">(</span><span class="hl-3">0.5</span><span class="hl-1">, </span><span class="hl-3">0.8</span><span class="hl-1">),</span><br/><span class="hl-1">  </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Vector2</span><span class="hl-1">(</span><span class="hl-3">0.8</span><span class="hl-1">, </span><span class="hl-3">0.2</span><span class="hl-1">),</span><br/><span class="hl-1">];</span><br/><span class="hl-8">const</span><span class="hl-1"> </span><span class="hl-6">totalLen</span><span class="hl-1"> = </span><span class="hl-3">1.2</span><span class="hl-1">; </span><span class="hl-7">// 归一化单位</span><br/><br/><span class="hl-5">flowing2D</span><span class="hl-1">.</span><span class="hl-4">setLines</span><span class="hl-1">([{</span><br/><span class="hl-1">  </span><span class="hl-5">points:</span><span class="hl-1"> </span><span class="hl-5">path</span><span class="hl-1">,</span><br/><span class="hl-1">  </span><span class="hl-5">totalLength:</span><span class="hl-1"> </span><span class="hl-5">totalLen</span><span class="hl-1">,</span><br/><span class="hl-1">  </span><span class="hl-5">color:</span><span class="hl-1"> </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Color</span><span class="hl-1">(</span><span class="hl-3">0x00ff00</span><span class="hl-1">),</span><br/><span class="hl-1">  </span><span class="hl-5">opacity:</span><span class="hl-1"> </span><span class="hl-3">0.9</span><span class="hl-1">,</span><br/><span class="hl-1">  </span><span class="hl-5">duration:</span><span class="hl-1"> </span><span class="hl-3">2000</span><span class="hl-1">,</span><br/><span class="hl-1">  </span><span class="hl-5">lineWidth:</span><span class="hl-1"> </span><span class="hl-3">0.01</span><span class="hl-1">,</span><br/><span class="hl-1">}]);</span><br/><br/><span class="hl-5">five</span><span class="hl-1">.</span><span class="hl-4">addPass</span><span class="hl-1">(</span><span class="hl-5">flowing2D</span><span class="hl-1">);</span><br/><br/><span class="hl-8">function</span><span class="hl-1"> </span><span class="hl-4">animate</span><span class="hl-1">() {</span><br/><span class="hl-1">  </span><span class="hl-4">requestAnimationFrame</span><span class="hl-1">(</span><span class="hl-5">animate</span><span class="hl-1">);</span><br/><span class="hl-1">  </span><span class="hl-5">five</span><span class="hl-1">.</span><span class="hl-4">render</span><span class="hl-1">();</span><br/><span class="hl-1">}</span><br/><span class="hl-4">animate</span><span class="hl-1">();</span>
 </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">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>
+<pre><code class="typescript"><span class="hl-8">const</span><span class="hl-1"> </span><span class="hl-6">pass</span><span class="hl-1"> = </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-4">FlowingLight2DPass</span><span class="hl-1">(</span><span class="hl-5">five</span><span class="hl-1">.</span><span class="hl-5">camera</span><span class="hl-1">);</span><br/><br/><span class="hl-7">// 初始路径集合</span><br/><span class="hl-8">const</span><span class="hl-1"> </span><span class="hl-6">paths</span><span class="hl-1"> = [</span><br/><span class="hl-1">  {</span><br/><span class="hl-1">    </span><span class="hl-5">points:</span><span class="hl-1"> [</span><br/><span class="hl-1">      </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Vector2</span><span class="hl-1">(</span><span class="hl-3">0.1</span><span class="hl-1">, </span><span class="hl-3">0.1</span><span class="hl-1">),</span><br/><span class="hl-1">      </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Vector2</span><span class="hl-1">(</span><span class="hl-3">0.9</span><span class="hl-1">, </span><span class="hl-3">0.1</span><span class="hl-1">),</span><br/><span class="hl-1">    ],</span><br/><span class="hl-1">    </span><span class="hl-5">totalLength:</span><span class="hl-1"> </span><span class="hl-3">0.8</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-5">color:</span><span class="hl-1"> </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Color</span><span class="hl-1">(</span><span class="hl-3">0xff6600</span><span class="hl-1">),</span><br/><span class="hl-1">    </span><span class="hl-5">duration:</span><span class="hl-1"> </span><span class="hl-3">1500</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-5">lineWidth:</span><span class="hl-1"> </span><span class="hl-3">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-5">points:</span><span class="hl-1"> [</span><br/><span class="hl-1">      </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Vector2</span><span class="hl-1">(</span><span class="hl-3">0.1</span><span class="hl-1">, </span><span class="hl-3">0.5</span><span class="hl-1">),</span><br/><span class="hl-1">      </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Vector2</span><span class="hl-1">(</span><span class="hl-3">0.9</span><span class="hl-1">, </span><span class="hl-3">0.5</span><span class="hl-1">),</span><br/><span class="hl-1">    ],</span><br/><span class="hl-1">    </span><span class="hl-5">totalLength:</span><span class="hl-1"> </span><span class="hl-3">0.8</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-5">color:</span><span class="hl-1"> </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Color</span><span class="hl-1">(</span><span class="hl-3">0x0066ff</span><span class="hl-1">),</span><br/><span class="hl-1">    </span><span class="hl-5">opacity:</span><span class="hl-1"> </span><span class="hl-3">0.7</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-5">duration:</span><span class="hl-1"> </span><span class="hl-3">2000</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-5">startTime:</span><span class="hl-1"> </span><span class="hl-3">500</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-5">lineWidth:</span><span class="hl-1"> </span><span class="hl-3">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-5">pass</span><span class="hl-1">.</span><span class="hl-4">setLines</span><span class="hl-1">(</span><span class="hl-5">paths</span><span class="hl-1">);</span><br/><span class="hl-5">five</span><span class="hl-1">.</span><span class="hl-4">addPass</span><span class="hl-1">(</span><span class="hl-5">pass</span><span class="hl-1">);</span><br/><br/><span class="hl-7">// 响应用户交互动态更新路径</span><br/><span class="hl-5">document</span><span class="hl-1">.</span><span class="hl-4">addEventListener</span><span class="hl-1">(</span><span class="hl-10">&#39;click&#39;</span><span class="hl-1">, (</span><span class="hl-5">e</span><span class="hl-1">) </span><span class="hl-8">=&gt;</span><span class="hl-1"> {</span><br/><span class="hl-1">  </span><span class="hl-8">const</span><span class="hl-1"> </span><span class="hl-6">rect</span><span class="hl-1"> = </span><span class="hl-5">five</span><span class="hl-1">.</span><span class="hl-5">canvas</span><span class="hl-1">.</span><span class="hl-4">getBoundingClientRect</span><span class="hl-1">();</span><br/><span class="hl-1">  </span><span class="hl-8">const</span><span class="hl-1"> </span><span class="hl-6">x</span><span class="hl-1"> = (</span><span class="hl-5">e</span><span class="hl-1">.</span><span class="hl-5">clientX</span><span class="hl-1"> - </span><span class="hl-5">rect</span><span class="hl-1">.</span><span class="hl-5">left</span><span class="hl-1">) / </span><span class="hl-5">rect</span><span class="hl-1">.</span><span class="hl-5">width</span><span class="hl-1">;</span><br/><span class="hl-1">  </span><span class="hl-8">const</span><span class="hl-1"> </span><span class="hl-6">y</span><span class="hl-1"> = (</span><span class="hl-5">e</span><span class="hl-1">.</span><span class="hl-5">clientY</span><span class="hl-1"> - </span><span class="hl-5">rect</span><span class="hl-1">.</span><span class="hl-5">top</span><span class="hl-1">) / </span><span class="hl-5">rect</span><span class="hl-1">.</span><span class="hl-5">height</span><span class="hl-1">; </span><span class="hl-7">// 左上角为原点,无需翻转</span><br/><br/><span class="hl-1">  </span><span class="hl-8">const</span><span class="hl-1"> </span><span class="hl-6">newPath</span><span class="hl-1"> = {</span><br/><span class="hl-1">    </span><span class="hl-5">points:</span><span class="hl-1"> [</span><br/><span class="hl-1">      </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Vector2</span><span class="hl-1">(</span><span class="hl-3">0.5</span><span class="hl-1">, </span><span class="hl-3">0.5</span><span class="hl-1">),</span><br/><span class="hl-1">      </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Vector2</span><span class="hl-1">(</span><span class="hl-5">x</span><span class="hl-1">, </span><span class="hl-5">y</span><span class="hl-1">),</span><br/><span class="hl-1">    ],</span><br/><span class="hl-1">    </span><span class="hl-5">totalLength:</span><span class="hl-1"> </span><span class="hl-5">Math</span><span class="hl-1">.</span><span class="hl-4">hypot</span><span class="hl-1">(</span><span class="hl-5">x</span><span class="hl-1"> - </span><span class="hl-3">0.5</span><span class="hl-1">, </span><span class="hl-5">y</span><span class="hl-1"> - </span><span class="hl-3">0.5</span><span class="hl-1">),</span><br/><span class="hl-1">    </span><span class="hl-5">color:</span><span class="hl-1"> </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Color</span><span class="hl-1">(</span><span class="hl-5">Math</span><span class="hl-1">.</span><span class="hl-4">random</span><span class="hl-1">() * </span><span class="hl-3">0xffffff</span><span class="hl-1">),</span><br/><span class="hl-1">    </span><span class="hl-5">duration:</span><span class="hl-1"> </span><span class="hl-3">1200</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-5">lineWidth:</span><span class="hl-1"> </span><span class="hl-3">0.01</span><span class="hl-1">,</span><br/><span class="hl-1">  };</span><br/><span class="hl-1">  </span><span class="hl-5">pass</span><span class="hl-1">.</span><span class="hl-4">setLines</span><span class="hl-1">([...</span><span class="hl-5">paths</span><span class="hl-1">, </span><span class="hl-5">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>
-<pre><code class="typescript"><span class="hl-3">function</span><span class="hl-1"> </span><span class="hl-5">calculatePathLength</span><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-7">number</span><span class="hl-1"> {</span><br/><span class="hl-1">  </span><span class="hl-3">let</span><span class="hl-1"> </span><span class="hl-6">length</span><span class="hl-1"> = </span><span class="hl-11">0</span><span class="hl-1">;</span><br/><span class="hl-1">  </span><span class="hl-10">for</span><span class="hl-1"> (</span><span class="hl-3">let</span><span class="hl-1"> </span><span class="hl-6">i</span><span class="hl-1"> = </span><span class="hl-11">1</span><span class="hl-1">; </span><span class="hl-6">i</span><span class="hl-1"> &lt; </span><span class="hl-6">points</span><span class="hl-1">.</span><span class="hl-6">length</span><span class="hl-1">; </span><span class="hl-6">i</span><span class="hl-1">++) {</span><br/><span class="hl-1">    </span><span class="hl-6">length</span><span class="hl-1"> += </span><span class="hl-6">points</span><span class="hl-1">[</span><span class="hl-6">i</span><span class="hl-1">].</span><span class="hl-5">distanceTo</span><span class="hl-1">(</span><span class="hl-6">points</span><span class="hl-1">[</span><span class="hl-6">i</span><span class="hl-1"> - </span><span class="hl-11">1</span><span class="hl-1">]);</span><br/><span class="hl-1">  }</span><br/><span class="hl-1">  </span><span class="hl-10">return</span><span class="hl-1"> </span><span class="hl-6">length</span><span class="hl-1">;</span><br/><span class="hl-1">}</span><br/><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">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><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><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><br/><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">pathLine</span><span class="hl-1"> = {</span><br/><span class="hl-1">  </span><span class="hl-6">points:</span><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-5">calculatePathLength</span><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">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">0x00ffff</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">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>
+<pre><code class="typescript"><span class="hl-8">function</span><span class="hl-1"> </span><span class="hl-4">calculatePathLength</span><span class="hl-1">(</span><span class="hl-5">points</span><span class="hl-1">: </span><span class="hl-9">THREE</span><span class="hl-1">.</span><span class="hl-9">Vector2</span><span class="hl-1">[]): </span><span class="hl-9">number</span><span class="hl-1"> {</span><br/><span class="hl-1">  </span><span class="hl-8">let</span><span class="hl-1"> </span><span class="hl-5">length</span><span class="hl-1"> = </span><span class="hl-3">0</span><span class="hl-1">;</span><br/><span class="hl-1">  </span><span class="hl-11">for</span><span class="hl-1"> (</span><span class="hl-8">let</span><span class="hl-1"> </span><span class="hl-5">i</span><span class="hl-1"> = </span><span class="hl-3">1</span><span class="hl-1">; </span><span class="hl-5">i</span><span class="hl-1"> &lt; </span><span class="hl-5">points</span><span class="hl-1">.</span><span class="hl-5">length</span><span class="hl-1">; </span><span class="hl-5">i</span><span class="hl-1">++) {</span><br/><span class="hl-1">    </span><span class="hl-5">length</span><span class="hl-1"> += </span><span class="hl-5">points</span><span class="hl-1">[</span><span class="hl-5">i</span><span class="hl-1">].</span><span class="hl-4">distanceTo</span><span class="hl-1">(</span><span class="hl-5">points</span><span class="hl-1">[</span><span class="hl-5">i</span><span class="hl-1"> - </span><span class="hl-3">1</span><span class="hl-1">]);</span><br/><span class="hl-1">  }</span><br/><span class="hl-1">  </span><span class="hl-11">return</span><span class="hl-1"> </span><span class="hl-5">length</span><span class="hl-1">;</span><br/><span class="hl-1">}</span><br/><br/><span class="hl-8">const</span><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-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Vector2</span><span class="hl-1">(</span><span class="hl-3">0.3</span><span class="hl-1">, </span><span class="hl-3">0.7</span><span class="hl-1">),</span><br/><span class="hl-1">  </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Vector2</span><span class="hl-1">(</span><span class="hl-3">0.7</span><span class="hl-1">, </span><span class="hl-3">0.7</span><span class="hl-1">),</span><br/><span class="hl-1">  </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Vector2</span><span class="hl-1">(</span><span class="hl-3">0.7</span><span class="hl-1">, </span><span class="hl-3">0.3</span><span class="hl-1">),</span><br/><span class="hl-1">  </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Vector2</span><span class="hl-1">(</span><span class="hl-3">0.3</span><span class="hl-1">, </span><span class="hl-3">0.3</span><span class="hl-1">),</span><br/><span class="hl-1">  </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Vector2</span><span class="hl-1">(</span><span class="hl-3">0.3</span><span class="hl-1">, </span><span class="hl-3">0.7</span><span class="hl-1">),</span><br/><span class="hl-1">];</span><br/><br/><span class="hl-8">const</span><span class="hl-1"> </span><span class="hl-6">pathLine</span><span class="hl-1"> = {</span><br/><span class="hl-1">  </span><span class="hl-5">points:</span><span class="hl-1"> </span><span class="hl-5">points</span><span class="hl-1">,</span><br/><span class="hl-1">  </span><span class="hl-5">totalLength:</span><span class="hl-1"> </span><span class="hl-4">calculatePathLength</span><span class="hl-1">(</span><span class="hl-5">points</span><span class="hl-1">),</span><br/><span class="hl-1">  </span><span class="hl-5">color:</span><span class="hl-1"> </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Color</span><span class="hl-1">(</span><span class="hl-3">0x00ffff</span><span class="hl-1">),</span><br/><span class="hl-1">  </span><span class="hl-5">duration:</span><span class="hl-1"> </span><span class="hl-3">2000</span><span class="hl-1">,</span><br/><span class="hl-1">  </span><span class="hl-5">lineWidth:</span><span class="hl-1"> </span><span class="hl-3">0.01</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>
-<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>
+<pre><code class="ts"><span class="hl-8">const</span><span class="hl-1"> </span><span class="hl-6">pass</span><span class="hl-1"> = </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-4">FlowingLight2DPass</span><span class="hl-1">(</span><span class="hl-5">five</span><span class="hl-1">.</span><span class="hl-5">camera</span><span class="hl-1">);</span><br/><br/><span class="hl-7">// 创建一个矩形路径(注意:左上角为原点)</span><br/><span class="hl-8">const</span><span class="hl-1"> </span><span class="hl-6">rectPath</span><span class="hl-1"> = {</span><br/><span class="hl-1">  </span><span class="hl-5">points:</span><span class="hl-1"> [</span><br/><span class="hl-1">    </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Vector2</span><span class="hl-1">(</span><span class="hl-3">0.3</span><span class="hl-1">, </span><span class="hl-3">0.3</span><span class="hl-1">),  </span><span class="hl-7">// 左上</span><br/><span class="hl-1">    </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Vector2</span><span class="hl-1">(</span><span class="hl-3">0.7</span><span class="hl-1">, </span><span class="hl-3">0.3</span><span class="hl-1">),  </span><span class="hl-7">// 右上</span><br/><span class="hl-1">    </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Vector2</span><span class="hl-1">(</span><span class="hl-3">0.7</span><span class="hl-1">, </span><span class="hl-3">0.7</span><span class="hl-1">),  </span><span class="hl-7">// 右下</span><br/><span class="hl-1">    </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Vector2</span><span class="hl-1">(</span><span class="hl-3">0.3</span><span class="hl-1">, </span><span class="hl-3">0.7</span><span class="hl-1">),  </span><span class="hl-7">// 左下</span><br/><span class="hl-1">    </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Vector2</span><span class="hl-1">(</span><span class="hl-3">0.3</span><span class="hl-1">, </span><span class="hl-3">0.3</span><span class="hl-1">),  </span><span class="hl-7">// 闭合路径</span><br/><span class="hl-1">  ],</span><br/><span class="hl-1">  </span><span class="hl-5">totalLength:</span><span class="hl-1"> </span><span class="hl-3">1.6</span><span class="hl-1">, </span><span class="hl-7">// 矩形周长</span><br/><span class="hl-1">  </span><span class="hl-5">color:</span><span class="hl-1"> </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Color</span><span class="hl-1">(</span><span class="hl-3">1.0</span><span class="hl-1">, </span><span class="hl-3">1.0</span><span class="hl-1">, </span><span class="hl-3">1.0</span><span class="hl-1">),</span><br/><span class="hl-1">  </span><span class="hl-5">opacity:</span><span class="hl-1"> </span><span class="hl-3">1.0</span><span class="hl-1">,</span><br/><span class="hl-1">  </span><span class="hl-5">duration:</span><span class="hl-1"> </span><span class="hl-3">4000</span><span class="hl-1">,</span><br/><span class="hl-1">  </span><span class="hl-5">startTime:</span><span class="hl-1"> </span><span class="hl-3">2000</span><span class="hl-1">,</span><br/><span class="hl-1">  </span><span class="hl-5">lineWidth:</span><span class="hl-1"> </span><span class="hl-3">0.01</span><span class="hl-1">,</span><br/><span class="hl-1">};</span><br/><br/><span class="hl-5">pass</span><span class="hl-1">.</span><span class="hl-4">setLines</span><span class="hl-1">([</span><span class="hl-5">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">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>
+<pre><code class="typescript"><span class="hl-7">// InstancedMesh 实现自动优化高 DPR 性能</span><br/><span class="hl-7">// 在 DPR=2 的 Retina 屏幕上,性能显著优于全屏着色器方案</span><br/><br/><span class="hl-8">const</span><span class="hl-1"> </span><span class="hl-6">pass</span><span class="hl-1"> = </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-4">FlowingLight2DPass</span><span class="hl-1">(</span><span class="hl-5">camera</span><span class="hl-1">);</span><br/><br/><span class="hl-7">// 多条路径在高 DPR 下仍能保持流畅</span><br/><span class="hl-8">const</span><span class="hl-1"> </span><span class="hl-6">paths</span><span class="hl-1"> = </span><span class="hl-5">Array</span><span class="hl-1">.</span><span class="hl-4">from</span><span class="hl-1">({ </span><span class="hl-5">length:</span><span class="hl-1"> </span><span class="hl-3">10</span><span class="hl-1"> }, (</span><span class="hl-5">_</span><span class="hl-1">, </span><span class="hl-5">i</span><span class="hl-1">) </span><span class="hl-8">=&gt;</span><span class="hl-1"> ({</span><br/><span class="hl-1">  </span><span class="hl-5">points:</span><span class="hl-1"> [</span><br/><span class="hl-1">    </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Vector2</span><span class="hl-1">(</span><span class="hl-3">0.1</span><span class="hl-1">, </span><span class="hl-3">0.1</span><span class="hl-1"> + </span><span class="hl-5">i</span><span class="hl-1"> * </span><span class="hl-3">0.08</span><span class="hl-1">),</span><br/><span class="hl-1">    </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Vector2</span><span class="hl-1">(</span><span class="hl-3">0.9</span><span class="hl-1">, </span><span class="hl-3">0.1</span><span class="hl-1"> + </span><span class="hl-5">i</span><span class="hl-1"> * </span><span class="hl-3">0.08</span><span class="hl-1">),</span><br/><span class="hl-1">  ],</span><br/><span class="hl-1">  </span><span class="hl-5">totalLength:</span><span class="hl-1"> </span><span class="hl-3">0.8</span><span class="hl-1">,</span><br/><span class="hl-1">  </span><span class="hl-5">color:</span><span class="hl-1"> </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Color</span><span class="hl-1">(</span><span class="hl-5">Math</span><span class="hl-1">.</span><span class="hl-4">random</span><span class="hl-1">() * </span><span class="hl-3">0xffffff</span><span class="hl-1">),</span><br/><span class="hl-1">  </span><span class="hl-5">duration:</span><span class="hl-1"> </span><span class="hl-3">2000</span><span class="hl-1"> + </span><span class="hl-5">i</span><span class="hl-1"> * </span><span class="hl-3">100</span><span class="hl-1">,</span><br/><span class="hl-1">  </span><span class="hl-5">startTime:</span><span class="hl-1"> </span><span class="hl-5">i</span><span class="hl-1"> * </span><span class="hl-3">200</span><span class="hl-1">,</span><br/><span class="hl-1">  </span><span class="hl-5">lineWidth:</span><span class="hl-1"> </span><span class="hl-3">0.01</span><span class="hl-1">,</span><br/><span class="hl-1">}));</span><br/><br/><span class="hl-5">pass</span><span class="hl-1">.</span><span class="hl-4">setLines</span><span class="hl-1">(</span><span class="hl-5">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>
@@ -242,7 +242,7 @@
 </tbody>
 </table>
 <p><strong>最佳实践</strong>:</p>
-<pre><code class="ts"><span class="hl-8">// ✅ 高性能 - 频繁修改颜色</span><br/><span class="hl-5">requestAnimationFrame</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">pass</span><span class="hl-1">.</span><span class="hl-5">setLine</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-6">lineId</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-6">Math</span><span class="hl-1">.</span><span class="hl-5">random</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><br/><span class="hl-1">  });</span><br/><span class="hl-1">});</span><br/><br/><span class="hl-8">// ✅ 高性能 - 动画路径(保持点数)</span><br/><span class="hl-3">function</span><span class="hl-1"> </span><span class="hl-5">animatePath</span><span class="hl-1">(</span><span class="hl-6">t</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">pass</span><span class="hl-1">.</span><span class="hl-5">setLine</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-6">lineId</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.5</span><span class="hl-1"> + </span><span class="hl-6">Math</span><span class="hl-1">.</span><span class="hl-5">sin</span><span class="hl-1">(</span><span class="hl-6">t</span><span class="hl-1">) * </span><span class="hl-11">0.2</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.9</span><span class="hl-1">),</span><br/><span class="hl-1">    ]  </span><span class="hl-8">// 始终 3 个点</span><br/><span class="hl-1">  });</span><br/><span class="hl-1">}</span><br/><br/><span class="hl-8">// ⚠️ 低性能 - 避免频繁改变点数</span><br/><span class="hl-5">setInterval</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">pointCount</span><span class="hl-1"> = </span><span class="hl-6">Math</span><span class="hl-1">.</span><span class="hl-5">floor</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">5</span><span class="hl-1">) + </span><span class="hl-11">2</span><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">setLine</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-6">lineId</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-6">points:</span><span class="hl-1"> </span><span class="hl-5">generateRandomPoints</span><span class="hl-1">(</span><span class="hl-6">pointCount</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-11">100</span><span class="hl-1">);</span>
+<pre><code class="ts"><span class="hl-7">// ✅ 高性能 - 频繁修改颜色</span><br/><span class="hl-4">requestAnimationFrame</span><span class="hl-1">(() </span><span class="hl-8">=&gt;</span><span class="hl-1"> {</span><br/><span class="hl-1">  </span><span class="hl-5">pass</span><span class="hl-1">.</span><span class="hl-4">setLine</span><span class="hl-1">({</span><br/><span class="hl-1">    </span><span class="hl-5">id:</span><span class="hl-1"> </span><span class="hl-5">lineId</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-5">color:</span><span class="hl-1"> </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Color</span><span class="hl-1">(</span><span class="hl-5">Math</span><span class="hl-1">.</span><span class="hl-4">random</span><span class="hl-1">(), </span><span class="hl-5">Math</span><span class="hl-1">.</span><span class="hl-4">random</span><span class="hl-1">(), </span><span class="hl-5">Math</span><span class="hl-1">.</span><span class="hl-4">random</span><span class="hl-1">())</span><br/><span class="hl-1">  });</span><br/><span class="hl-1">});</span><br/><br/><span class="hl-7">// ✅ 高性能 - 动画路径(保持点数)</span><br/><span class="hl-8">function</span><span class="hl-1"> </span><span class="hl-4">animatePath</span><span class="hl-1">(</span><span class="hl-5">t</span><span class="hl-1">: </span><span class="hl-9">number</span><span class="hl-1">) {</span><br/><span class="hl-1">  </span><span class="hl-5">pass</span><span class="hl-1">.</span><span class="hl-4">setLine</span><span class="hl-1">({</span><br/><span class="hl-1">    </span><span class="hl-5">id:</span><span class="hl-1"> </span><span class="hl-5">lineId</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-5">points:</span><span class="hl-1"> [</span><br/><span class="hl-1">      </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Vector2</span><span class="hl-1">(</span><span class="hl-3">0.1</span><span class="hl-1">, </span><span class="hl-3">0.1</span><span class="hl-1">),</span><br/><span class="hl-1">      </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Vector2</span><span class="hl-1">(</span><span class="hl-3">0.5</span><span class="hl-1"> + </span><span class="hl-5">Math</span><span class="hl-1">.</span><span class="hl-4">sin</span><span class="hl-1">(</span><span class="hl-5">t</span><span class="hl-1">) * </span><span class="hl-3">0.2</span><span class="hl-1">, </span><span class="hl-3">0.5</span><span class="hl-1">),</span><br/><span class="hl-1">      </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Vector2</span><span class="hl-1">(</span><span class="hl-3">0.9</span><span class="hl-1">, </span><span class="hl-3">0.9</span><span class="hl-1">),</span><br/><span class="hl-1">    ]  </span><span class="hl-7">// 始终 3 个点</span><br/><span class="hl-1">  });</span><br/><span class="hl-1">}</span><br/><br/><span class="hl-7">// ⚠️ 低性能 - 避免频繁改变点数</span><br/><span class="hl-4">setInterval</span><span class="hl-1">(() </span><span class="hl-8">=&gt;</span><span class="hl-1"> {</span><br/><span class="hl-1">  </span><span class="hl-8">const</span><span class="hl-1"> </span><span class="hl-6">pointCount</span><span class="hl-1"> = </span><span class="hl-5">Math</span><span class="hl-1">.</span><span class="hl-4">floor</span><span class="hl-1">(</span><span class="hl-5">Math</span><span class="hl-1">.</span><span class="hl-4">random</span><span class="hl-1">() * </span><span class="hl-3">5</span><span class="hl-1">) + </span><span class="hl-3">2</span><span class="hl-1">;</span><br/><span class="hl-1">  </span><span class="hl-5">pass</span><span class="hl-1">.</span><span class="hl-4">setLine</span><span class="hl-1">({</span><br/><span class="hl-1">    </span><span class="hl-5">id:</span><span class="hl-1"> </span><span class="hl-5">lineId</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-5">points:</span><span class="hl-1"> </span><span class="hl-4">generateRandomPoints</span><span class="hl-1">(</span><span class="hl-5">pointCount</span><span class="hl-1">)  </span><span class="hl-7">// 点数不固定</span><br/><span class="hl-1">  });</span><br/><span class="hl-1">}, </span><span class="hl-3">100</span><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>