使用 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 帧应用它们。

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

中不可用

Answer 1

我试过一次同样的事情并且遇到了同样的问题。根据我使像素褪色的速度有多慢，灰色区域或多或少会可见。

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

你能post一些示例代码吗？

Answer 2

我最终发现渐变为白色效果非常好。

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

您可以在 canvas 上使用 CSS 滤镜来执行此操作，但它并不适用于所有浏览器，会影响性能，并且所有颜色强度都会反转。

使用 PIXI.js 和 WebGLRenderer 尾随淡出到全黑

Trailing fade to complete black with PIXI.js and WebGLRenderer

javascript

webgl

pixi.js