javascript - 使用 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()

这两种方法都给我留下了一条灰色的痕迹，如果我的值(value)观足够强大，这条痕迹就会消失。不过，我想要一个非常长期的轨迹，所以我必须使用较小的值，并且可能还每隔 n 帧应用它们。

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

Answer 1

我最终发现淡入白色效果非常好。

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

您可以在 Canvas 上使用 CSS 过滤器来实现此目的，但它并不适用于所有浏览器，会影响性能，并且所有颜色强度都会反转。