Fondu de fondu pour compléter noir avec PIXI.js et WebGLRenderer

Question

J'ai une application faite en utilisant PIXI.js et il utilise un WebGLRenderer.

Je préserver le tampon de dessin et non de compensation avant de rendre:

{ preserveDrawingBuffer: true, clearBeforeRender: false } 

Cela me permet de créer des pistes comme des objets se déplacent. Je veux que les traînées disparaissent avec le temps, donc j'applique un rectangle noir transparent sur chaque rendu. Cela fonctionne, mais le fondu finit par devenir gris. Je veux un fondu complet au noir.

J'ai essayé d'utiliser un filtre ColorMatrixFilter avec une luminosité réduite sur mon conteneur racine, en espérant que cela provoquerait un effet de fondu. Il n'a pas provoqué d'effet de fondu, causant juste que tout soit légèrement plus sombre. Si cela avait fonctionné, un filtre personnalisé pourrait aider à faire le travail.

Comment puis-je obtenir un fondu progressif lent pour compléter le noir pour les traces de mes objets rendus?

EDIT: Voici quelques exemples de ce que j'ai essayé:

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

Ces deux méthodes me laissent une traînée grise, le sentier disparaît si mes valeurs sont assez fortes. Cependant, je veux un sentier à très long terme donc je dois utiliser de petites valeurs, et peut-être aussi les appliquer tous les nièmes images.

Je pense qu'un mode de fusion SUBTRACT pourrait être capable de faire ce dont j'ai besoin.
Malheureusement, il ne semble pas disponible dans Pixi.js.

Answer 1

J'ai finalement compris que le fait de passer au blanc fonctionne à merveille. Ainsi, une solution consiste à blanchir, puis à inverser la couleur et à faire pivoter la teinte de 180 degrés.

Vous pouvez le faire avec un filtre CSS sur votre canevas, bien que cela ne fonctionne pas dans tous les navigateurs, a un impact sur les performances et toutes vos intensités de couleurs sont inversées.

Answer 2

J'ai essayé la même chose une fois et j'ai eu le même problème. En fonction de la lenteur avec laquelle les pixels ont disparu, la zone grise serait plus ou moins visible.

Je suppose que ce que vous faites est d'effacer la toile sur chaque boucle d'image, mais au lieu d'utiliser uniquement le noir, vous utilisez un peu de transparence. Le résultat est que la somme de toutes ces transparences n'atteindra jamais une couleur noire pure.

Pourriez-vous poster un code d'exemple?