尾随淡入淡出到完全黑色，带有 PIXI.js 和 WebGLRenderer

Question

我有使用 PIXI 制作的应用程序.js它使用 WebGLRenderer。

我正在保留绘图缓冲区，并且在渲染之前没有清除：

{ preserveDrawingBuffer: true, clearBeforeRender: false }

这允许我在对象移动时创建轨迹。 我希望轨迹随着时间的推移而淡出，因此我在每个渲染的顶部应用一个透明的黑色矩形。这有效，但淡出最终会四舍五入为灰色。我想要完全淡入黑色。

我尝试在我的根容器上使用亮度较低的ColorMatrixFilter滤镜，希望它会导致淡入淡出效果。它没有造成任何褪色效果，只是导致一切稍微变暗。如果这有效，那么自定义过滤器可以帮助完成这项工作。

如何为渲染对象的轨迹获得缓慢的渐进淡入淡出以完全变黑？

编辑：以下是我尝试过的几个例子：

// `this` being my app object.
this.fadeGraphics           = new PIXI.Graphics()
this.root.addChild(this.fadeGraphics)
// Blend Mode
this.fadeGraphics.blendMode = PIXI.BLEND_MODES.MULTIPLY
this.fadeGraphics.beginFill(0xf0f0f0)
this.fadeGraphics.drawRect(0, 0, this.screenWidth, this.screenHeight)
this.fadeGraphics.endFill()
// Transparent black rectangle.
this.fadeGraphics.beginFill(0x000000, .05)
this.fadeGraphics.drawRect(0, 0, this.screenWidth, this.screenHeight)
this.fadeGraphics.endFill()

这两种方法都给我留下了灰色的痕迹，如果我的价值观足够强大，这条线索就会消失。不过，我想要一个非常长期的跟踪，所以我必须使用小值，并且可能每 n 帧应用一次。

我认为减去混合模式可能能够满足我的需要。
不幸的是，它似乎在 Pixi.js 中不可用。

Answer 1

我最终发现褪色到白色效果很好。

因此，一种解决方案是淡入白色，然后反转颜色，并将色调旋转 180 度。

您可以使用画布上的CSS过滤器来执行此操作，尽管它并非在所有浏览器中都有效，并且会影响性能，并且所有颜色强度都会反转。