Trailing Fade, um mit PIXI.js und WebGLRenderer

Question

schwarz abzuschließen Ich habe Anwendung, die mit PIXI.js erstellt wird, und es verwendet einen WebGLRenderer.

Ich bin Erhaltung der Puffer Zieh- und nicht vor dem Rendern Clearing:

{ preserveDrawingBuffer: true, clearBeforeRender: false } 

Diese mich Trails erstellen können als Objekte bewegen. Ich möchte, dass die Spuren im Laufe der Zeit ausgeblendet werden, also trage ich ein transparentes, schwarzes Rechteck über jedes Rendering. Das funktioniert, aber das Ausblenden wird schließlich zu Grau. Ich möchte eine vollständige Überblendung zu Schwarz.

Ich habe versucht, einen ColorMatrixFilter Filter mit einer verringerten Helligkeit auf meinem Root-Container, in der Hoffnung, dass es einen Fade-Effekt verursachen würde. Es hat keinen Fade-Effekt verursacht, sondern alles nur etwas dunkler gemacht. Wenn das funktioniert hat, könnte ein benutzerdefinierter Filter helfen, die Aufgabe zu erledigen.

Wie kann ich eine langsame allmähliche Fade erhalten, um für die Spuren meiner gerenderten Objekte schwarz zu vervollständigen?

EDIT: Hier sind ein paar Beispiele dafür, was ich versucht habe:

// `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() 

Beide Methoden lassen Sie mich mit einem grauen Weg, der Weg geht weg, wenn meine Werte stark genug sind. Obwohl ich eine sehr langfristige Spur haben möchte, muss ich kleine Werte verwenden und sie möglicherweise auch jeden n-ten Rahmen anwenden.

Ich denke, ein SUBTRACT-Blend-Modus könnte in der Lage zu tun, was ich brauche.
Leider scheint es in Pixi.js nicht verfügbar.

Answer 1

Ich fand schließlich heraus, dass das Verblassen zu Weiß wunderbar funktioniert.

Daher ist eine Lösung, zu weiß zu verblassen, dann Farbe zu invertieren und Farbton um 180 Grad zu drehen.

Sie können dies mit einem CSS-Filter auf Ihrer Arbeitsfläche tun, obwohl es nicht in allen Browsern funktioniert, einen Leistungseinbruch hat und alle Ihre Farbintensitäten invertiert werden.

Answer 2

Ich versuchte das gleiche einmal und hatte das gleiche Problem. Je nachdem, wie langsam ich die Pixel verblasse, wäre die Grauzone mehr oder weniger sichtbar.

Ich denke, was Sie tun, ist die Leinwand auf jeder Rahmenschleife zu löschen, aber anstatt nur schwarz zu verwenden, verwenden Sie etwas Transparenz. Das Ergebnis ist, dass die Summe all dieser Transparenzen niemals eine rein schwarze Farbe erreichen wird.

Können Sie einen Beispielcode posten?