使用PIXI.js和WebGLRenderer跟踪淡入淡出

我有使用PIXI.js制作的应用程序，它使用WebGLRenderer。使用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中可用。

来源

2017-07-02 Chris

我终于明白，白色作品褪色奇妙。

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

您可以在画布上使用CSS滤镜进行此操作，虽然它不适用于所有浏览器，但性能会受到影响，并且所有色彩强度都会颠倒过来。

来源

2017-09-01 01:34:32 Chris

我曾尝试同样的事情，并有同样的问题。根据我淡化像素的速度有多慢，灰色区域将更多或更少可见。

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

你可以发布一些示例代码？

来源

2017-07-02 09:27:47 mariogarranz

使用PIXI.js和WebGLRenderer跟踪淡入淡出

回答

相关问题