Multiple renderers. One for webgl transforms, other for regular use. Full explanation

[khalim]

Hi. Im fairly new on Pixi and im trying to do something with multiple renderers. I know i could add multiple canvas instead, however i need a dedicated webgl renderer to manipulate the transform and try to do some trapezoid forms.

I also need both renderers to works on the same canvas to avoid creating multiple layers on the document.body.

My approach was:
1. Have a main renderer and a main stage.
2. Have a sideRenderer that will be affected by different transforms (using gl.uniformMatrix4fv to change the shape of the whole renderer and achieve different shapes) and a sideStage that will hold any content (in this example, a simple sprite).
3. make the sideRenderer render to a RenderTexture, which will be the source of a Sprite, which will be added on the main stage.
 

So in theory, anything that the side renderer renders to the RenderTexture should appear on the sprite on the main stage. If somehow i modify side renderer, the transformed output should be shown on the RenderTexture, if that makes any sense.

I tried this with this example, and it doesnt works. If i append the sideRenderer.view to the document.body, it renders as expected, but its not what i want, as i need it to be part of a more complex logic.

At some point this makes me realize that i cannot mix renderers like this ( maybe the sideRender is still working on the back while the mainRender is trying to render an incomplete RenderTexture ? ), cannot make one renderer render something for another renderer (sideRenderer to mainRenderer or viceversa), so i would like to know if there is any workaround or any way to override this behavior?

Thanks for the help

var renderer = null;
var sideRenderer = null;
var stage = null;
var sideStage = null;
var WIDTH = 1000;
var HEIGHT = 500;
var rt = new PIXI.RenderTexture( 1000, 500 );
var spriteRt = new PIXI.Sprite( rt );

init();

function init() {
    var rendererOptions = {
        backgroundColor: 0xffffff,
        transparent: true
    }

    // Create the renderer
    renderer = PIXI.autoDetectRenderer( WIDTH, HEIGHT, rendererOptions );
    sideRenderer = PIXI.autoDetectRenderer( WIDTH, HEIGHT, rendererOptions );

    // Add the canvas to the HTML document
    document.body.appendChild( renderer.view );

    // Create a container object called the `stage`
    stage = new PIXI.Container();
    sideStage = new PIXI.Container();
    stage.addChild( spriteRt );

    var loader = PIXI.loader;
    loader.add( 'texture', './media/crate.png' );
    loader.once( 'complete', onLoadedAsset );
    loader.load();
}

function onLoadedAsset() {
    var texture = PIXI.Texture.fromFrame( './media/crate.png' );
    var sprite = new PIXI.Sprite( texture );
    sideStage.addChild( sprite );

    update();
}

function update() {

    sideRenderer.render( sideStage, rt );

    renderer.render( stage );

    requestAnimationFrame( update );

}