本文介绍了如何使用 npm 包 @pixi/filter-advanced-bloom，实现高级的 Bloom 特效。同时，我们会对 Bloom 特效的相关概念进行讲解，以及深入探讨 pixi.js 中的滤镜机制。
Bloom 特效
Bloom 特效是图像处理中的一种流行特效，通过增加图像中的较亮区域的强度和模糊程度来达到特效的效果。这种特效通常会用到在光照模拟和焦散模拟等领域中，比如游戏中的爆炸效果和电影中的恐怖场面。
@pixi/filter-advanced-bloom 简介
@pixi/filter-advanced-bloom 是一个基于 pixi.js 的高级 Bloom 特效滤镜包。它支持多种选项，可以很容易地进行自定义调整，从而满足各种需求。
相比起其他的 Bloom 特效滤镜，@pixi/filter-advanced-bloom 支持对边缘的处理，并且对多个 Bloom 特效的叠加处理也非常出色。
安装和引入
可以通过 npm 进行安装，使用以下命令：
npm install @pixi/filter-advanced-bloom
然后，在代码中引入该包：
import { AdvancedBloomFilter } from '@pixi/filter-advanced-bloom';引入之后，就可以通过它的构造函数实例化一个 AdvancedBloomFilter 滤镜对象，然后将其加入到渲染器的滤镜列表中，如下所示：
-- -------------------- ---- -------
----- ----------- - --- ---------------------
---------- ----
----------- ----
----------- ----
----------- --
-------- -
---
----------------- - --------------这里，我们可选地提供了一些参数，可以更改滤镜的效果。下面，对这些参数进行详细讲解。
滤镜参数
threshold
这个参数定义了是否需要进行加亮处理，0 表示对所有像素进行处理，1 表示对所有像素不进行处理。这里，我们只对比阈值更大的像素进行处理。
const bloomFilter = new AdvancedBloomFilter({
threshold: 0.5,
});bloomScale
这个参数定义了 Bloom 特效的强度，值越大效果越明显。
const bloomFilter = new AdvancedBloomFilter({
bloomScale: 0.3,
});brightness
这个参数定义了整体的亮度增强倍数。
const bloomFilter = new AdvancedBloomFilter({
brightness: 1.2,
});kernelSize
这个参数定义了每个像素点周围的像素范围大小，值越大，滤镜处理的范围越大，效果越模糊。
const bloomFilter = new AdvancedBloomFilter({
kernelSize: 9,
});quality
这个参数定义了滤镜的质量级别，比如像素采样的数量和范围，算法优化方式等，越高代表质量越好但是速度越慢。
const bloomFilter = new AdvancedBloomFilter({
quality: 7,
});示例代码
这里，让我们看看如何使用@pixi/filter-advanced-bloom 来实现一个简单的粒子球演示。
-- -------------------- ---- -------
------ - -- ---- ---- ----------
------ - ------------------- - ---- ------------------------------
----- --- - --- ------------------
------ ----
------- ---
---
------------------------------------
----- ----------- - --- ----------------------
----- ----------------- - --- -------------------------------------- -
------ -----
--------- -----
--------- -----
---- -----
------ ----
---
----- ------- - ----------------------------------
--- ---- - - -- - - ----- ---- -
----- -------- - --- ---------------------
-------------------------
---------- - ------------- - -----------------
---------- - ------------- - ------------------
-------------- - ----
---------------------- - ------------- - -----
-------------------------------------
-
--------------------------------------
----------------- - --------------
----------------- -- -
--- ---- - - -- - - ---------------------------------- ---- -
----- -------- - ------------------------------
----------------- -- -----
-
---通过在滤镜列表中加入 AdvancedBloomFilter 对象，就可以实现 Bloom 特效效果。我们还绘制了一组随机位置的粒子，并且随着时间的变化而旋转。
结语
@pixi/filter-advanced-bloom 提供了一个非常方便且高效的方式来实现 Bloom 特效。它的灵活性很高，加入少量参数就可以调整效果。同时，其也是一个很好的学习 pixi.js 滤镜机制的例子。
更多关于 pixi.js 滤镜的内容，可以查看官方文档。
参考文献
- @pixi/filter-advanced-bloom GitHub - https://github.com/pixijs/pixi-filters/tree/master/packages/advanced-bloom
- Bloom Filter Wikipedia - https://en.wikipedia.org/wiki/Bloom_(shader_effect)
- PixiJS Filters - https://pixijs.io/pixi-filters/docs/
- 许泽茂. (2010). Bloom 算法. 游戏编程精粹. https://doi.org/10.1201/b10460-11
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedcadeb5cbfe1ea06124d6