Jump to content

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


Recommended Posts

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 );


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 );

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


function update() {

    sideRenderer.render( sideStage, rt );

    renderer.render( stage );

    requestAnimationFrame( update );



Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...