使用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跟蹤淡入淡出

回答

相關問題