How to draw transparent trails using PIXI.js?
<p>I've started playing with <a href="https://pixijs.github.io/docs" rel="nofollow">PIXI.js</a> and tried to port this basic actionscript 3 snippet:</p>

<pre><code>import flash.display.Sprite;
import flash.events.Event;

var trails:BitmapData = new BitmapData(stage.stageWidth,stage.stageHeight,true,0x00000000);//create a transparent bitmap to draw the trails into
var trailsFade:ColorTransform = new ColorTransform(1,1,1,0.25,0,0,0,1);//color transform: keep rgb the same(1,1,1), set alpha to 0.025 out of 1.0
var background:Bitmap = addChild(new Bitmap(trails,PixelSnapping.AUTO,true)) as Bitmap;//add the trails pixels/bitmap data into a Bitmap/display object at the bottom of the display list

var dot:Sprite = addChild(new Sprite()) as Sprite;
dot.graphics.lineStyle(3);
dot.graphics.drawCircle(-4, -4, 8);

addEventListener(Event.ENTER_FRAME,update);
function update(e:Event):void{
    dot.x = mouseX;
    dot.y = mouseY;
    //draw trails of the dot
    trails.draw(dot,dot.transform.concatenatedMatrix,trailsFade);//draw the dot into the bitmap data using the dot's transformation (x,y, rotation, scale)
}
</code></pre>

<p>What it does is draws a circle and takes a snapshot of it into a BitmapData object and there is a ColorMatrix filter applied with a small alpha/transparency value.</p>

<p>I've noticed PIXI.js has a lot of similarities and there is a <a href="https://pixijs.github.io/docs/PIXI.filters.ColorMatrixFilter.html" rel="nofollow">ColorMatrixFilter</a> available, but I couldn't figure out what the equivalent of BitmapData.draw() is in PIXI.js. The closest thing I found is the <a href="http://pixijs.github.io/examples/index.html?s=demos&amp;f=render-texture-demo.js&amp;title=RenderTexture&amp;v=v3.0.11" rel="nofollow">RenderTexture demo</a></p>

<p>Based on that I've tried to port the as3 code above:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var renderer = PIXI.autoDetectRenderer(640, 480);
 document.body.appendChild(renderer.view);

 var stage = new PIXI.Container();
 
 var dot = new PIXI.Graphics();
 dot.beginFill(0xFF9900);
 dot.drawCircle(-8,-8,16);
 dot.endFill();
 stage.addChild(dot);

 var renderTexture = new PIXI.RenderTexture(renderer, renderer.width, renderer.height);
 var renderTexture2 = new PIXI.RenderTexture(renderer, renderer.width, renderer.height);
 var currentTexture = renderTexture;

 var outputSprite = new PIXI.Sprite(currentTexture);
 stage.addChild(outputSprite);


 animate();

 function animate() {
  var a = Date.now() * 0.001;
  dot.x = renderer.width * 0.5 + (Math.cos(a) * 200);
  dot.y = renderer.height * 0.5 + (Math.sin(a) * 200);

  // swap the buffers ...
     var temp = renderTexture;
     renderTexture = renderTexture2;
     renderTexture2 = temp;

     renderTexture2.render(stage, null, false);

     renderer.render(stage);
     requestAnimationFrame( animate );
 }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/3.0.11/pixi.min.js"&gt;&lt;/script&gt;</code></pre>
</div>
</div>
</p>

<p>If you run the code snippet, you'll notice the circle leaves trails, which is good. However I'd like to control the transparency of these trails. How can that this be achieved ?</p>

<p>What's the best way to draw transparent trails using PIXI.js ?</p>

<p>(Additionally, I get this warning in console:</p>

<pre><code>[.CommandBufferContext]GL ERROR :GL_INVALID_OPERATION : glDrawElements: Source 
</code></pre>

<p>and destination textures of the draw are the same.</p>

<p>How can this be remedied ?)</p>

<p><strong>Update</strong></p>

<p>To Illustrate, here's the same idea using <a href="http://p5js.org" rel="nofollow">p5.js</a>:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function setup() {
  createCanvas(400,300);
  noStroke();
}

function draw() {
  //transparent rectangle
  fill(0,10);
  rect(0,0,width,height);
  //shape that will leave trails because buffer isn't cleared completely
  fill(255);
  ellipse(mouseX,mouseY,30,30);
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.0/p5.min.js"&gt;&lt;/script&gt;</code></pre>
</div>
</div>
</p>

<p>I thought I could achieve this with a ColorMatrixFilter, but I couldn't find an exhaustive documentation (as it's arguments are different from the as3 ColorMatrixFilter). I will try with a GLSL shader as a CustomFilter next.
What's the equivalent using PIXI.js ? Ideally something that will be efficient and scale well (allowing easy trails for thousands of objects)?</p>