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

我最终发现白色渐渐消失了。

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

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

Answer 2

我尝试了同样的事情并遇到了同样的问题。根据褪色像素的速度，灰色区域或多或少可见。

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

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

使用PIXI.js和WebGLRenderer追踪淡入淡出以完成黑色

2 个答案: