本篇接續昨天解析度的討論：
在實做 resolution: window.devicePixelRatio 後，再使用濾鏡時可能會有的問題

昨天的 Demo：

const app = new PIXI.Application({
    width: 300,
    height: 300,
    backgroundColor: 0x1099bb,
    resolution: window.devicePixelRatio,
    autoResize: true
});

加上濾鏡之後變糊了

[ Demo ]

這邊使用了 GlowFilter，需另外載入 pixi-filters，是 PixiJS 官方的另一個專案

是錯覺嗎？把濾鏡的設定調低試試看

• 是糊的

加濾鏡前 / 加濾鏡後

GlowFilter

GlowFilter 說明文件 - PixiJS Filters 與 PixiJS 為不同專案，
雖然說明文件視覺與操作方式類似，但網址不同，搜尋結果也不相通

建立 GlowFilter實體 時的各項參數：

由於 distance 設定 0 時會出錯，
此例則是設定 outerStrength 與 innerStrength 皆為 0：

• new GlowFilter(1, 0, 0);

const glowFilter = new PIXI.filters.GlowFilter(1, 0, 0);
glowFilter.padding = 20;

testPic.filters = [glowFilter];

檢查 GlowFilter 的 resolution

• 預設是 1

• 改成 2 後，解析度變好了

看起來是它沒錯

GlowFilter說明文件裡沒有提到 resolution

往父層找，在父類別 PIXI.Filter#resolution 裡找到設定：

檢查濾鏡的實作，發現裡面有解析度的設定：

settings.FILTER_RESOLUTION 預設是1，
調整回 window.devicePixelRatio 就是正確的 濾鏡解析度 了

const glowFilter = new PIXI.filters.GlowFilter(1, 0, 0);
glowFilter.padding = 20;
glowFilter.resolution = window.devicePixelRatio;

另一種解法：更改預設值

PIXI.settings.FILTER_RESOLUTION 預設為 1

在建立每個 Filter 實體 前，先將 PIXI.settings.FILTER_RESOLUTION 預設值 調整成
與 window.devicePixelRatio 相同，便可不需每次指定
[ Demo ]：

PIXI.settings.FILTER_RESOLUTION = window.devicePixelRatio;

const glowFilter = new PIXI.filters.GlowFilter(16);
glowFilter.padding = 20;

今日小結：
在理解 PixiJS 解析度 後，就比較容易猜出畫面變糊的原因
但由於 PixiJS 與 PixiJS Filters 是不同專案，在原始檔與文件的查找上會有點不太順