pixijs/pixijs-filters

pixijs-filters 是做什麼的？

在 PixiJS v8 容器中透過濾鏡管道套用視覺效果時使用此技能。涵蓋內建濾鏡（AlphaFilter、BlurFilter、ColorMatrixFilter、DisplacementFilter、NoiseFilter）、使用 GLSL/WGSL 的自訂 Filter.from()、選項（解析度、內邊距、抗鋸齒、混合需求）、filterArea 最佳化以及 pixi-filters 社群套件。觸發詞：filters、BlurFilter、ColorMatrixFilter、DisplacementFilter、NoiseFilter、Filter.from、GLSL filter、pixi-filters、filterArea。

使用說明

內建濾鏡

• AlphaFilter：調整容器或精靈的透明度。
• BlurFilter：套用高斯模糊效果。
• ColorMatrixFilter：使用顏色矩陣進行色彩轉換（如灰階、色調變換）。
• DisplacementFilter：使用紋理位移圖產生變形效果。
• NoiseFilter：增加噪點紋理。

自訂濾鏡

使用 Filter.from() 方法建立自訂濾鏡，需提供 GLSL 或 WGSL 著色器程式碼：

const customFilter = Filter.from({
  fragment: `
    varying vec2 vTextureCoord;
    uniform sampler2D uSampler;
    void main(void) {
      vec4 color = texture2D(uSampler, vTextureCoord);
      gl_FragColor = vec4(1.0 - color.r, 1.0 - color.g, 1.0 - color.b, color.a);
    }
  `
});
container.filters = [customFilter];

進階選項

• resolution：濾鏡的渲染解析度（預設為 1，數值越高品質越好但效能消耗越大）。
• padding：濾鏡邊框的內邊距，用於防止裁剪（特別適用於模糊濾鏡）。
• antialias：啟用或停用抗鋸齒處理。
• blendRequired：強制混合模式，避免某些情況下未混合的錯誤。

filterArea 最佳化

使用 filterArea 屬性限制濾鏡套用範圍，提升效能：

container.filterArea = new Rectangle(0, 0, 200, 200);

pixi-filters 社群套件

安裝 pixi-filters 套件以取得更多濾鏡效果（如扭曲、光芒、色差等）：

npm install pixi-filters

觸發詞

• filters
• BlurFilter
• ColorMatrixFilter
• DisplacementFilter
• NoiseFilter
• Filter.from
• GLSL filter
• pixi-filters
• filterArea