Javascript 使用PIXI.js和webgl渲染器从渐变到完全黑色

我使用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中似乎不可用。

我曾经尝试过同样的方法，但出现了同样的问题。根据褪色像素的速度，灰色区域将或多或少可见

我猜你要做的是清除每个帧循环上的画布，但不是只使用黑色，而是使用一些透明度。结果是所有这些透明胶片的总和永远不会达到纯黑色

---

你能发布一些示例代码吗？

我最终发现，变白效果非常好

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

您可以通过画布上的CSS过滤器来实现这一点，尽管它并不适用于所有浏览器，它会影响性能，并且所有颜色强度都会反转