title: How to draw transparent trails using PIXI.js?
body: <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>