RenderTexture not clearing correctly on CanvasRenderer

[AndyHorns]

I am using pixi 2.0, have a DisplayObject container with a number of Sprites in it that are moving, I then render the DisplayObjectContainer to texture and it doesnt seem to clear the previous frame correctly whether i call clear or pass clear through the render call. This is currently only happening on CanvasRenderer, Webgl seems fine. I have literally reproduced this using your example11 but instead of rendering the stage to texture i render the displayobject with the bunnies to texture forcing CanvasRenderer.

[AndyHorns]

Here is a screenshot

And the code used : (this works fine in pixi 1.6)

    // create an new instance of a pixi stage
    var stage = new PIXI.Stage(0x000000);


    // create a renderer instance
    var renderer = new PIXI.CanvasRenderer(600, 600);

    renderer.view.style.width = window.innerWidth + "px";
    renderer.view.style.height = window.innerHeight + "px";

    renderer.view.style.display = "block"

    document.body.appendChild(renderer.view);

    requestAnimFrame(animate);

    var renderTexture = new PIXI.RenderTexture(600, 600);

    var bunnyContainer = new PIXI.DisplayObjectContainer();

    bunnyContainer.position.x = 800/2;
    bunnyContainer.position.y = 600/2
    var outputSprite = new PIXI.Sprite(renderTexture)
    outputSprite.position.x = 0;
    outputSprite.position.y = 0;

    stage.addChild(outputSprite);
    var fruits = ["spinObj_01.png", "spinObj_02.png"];

    var bunnys = [];

    for (var i=0; i < 20; i++) 
    {
        var bunny = PIXI.Sprite.fromImage(fruits[i % fruits.length]);
        bunny.position.x = Math.random() * 400 - 200;
        bunny.position.y = Math.random() * 400 - 200;

        bunny.anchor.x = 0.5;
        bunny.anchor.y = 0.5;

        bunnyContainer.addChild(bunny);
        bunnys.push(bunny);
    };


    var count = 0;
    var score = 0;

    var count2 = 0;

    function animate() {

        requestAnimFrame( animate );

        for (var i=0; i < bunnys.length; i++) 
        {
            var bunny = bunnys[i];
            bunny.rotation += 0.1;
            bunny.x += 0.1;
        };

        count += 0.01;
        count2 ++;

        bunnyContainer.rotation -= 0.01
        renderTexture.render(bunnyContainer,null, true);
        renderer.render(stage);
    }

[GoodBoyDigital]

Good catch @AndyHorns ! All fixed now :)

[AndyHorns]

Thank you kindly!!

[tywang2006]

any suggestion on this issue on v4?

[ivanpopelyshev]

@tywang2006 do you have something that I can just copy&paste into http://pixijs.github.io/pixi-examples-v2/#/basics/basic.js and see that its not working properly? Not old v2 code, but new one?

We'll fix that issue anyway, but the time spent on it depends on how much information you give us. If you need it RIGHT NOW, please convert it to pixiv4 code first and confirm that its not working properly in our examples page

[tywang2006]

i will try to make an example in fiddler

[ivanpopelyshev]

You don't need fiddler or that. You can just edit some example and then paste code here. That way we'll be able to test it on different versions of pixi

[tywang2006]

PIXI.loader.add('../assets/icons/icons.json').load(onAssetLoaded);
function onAssetLoaded(loader:any, resource:any):void {
    let renderer:any = new PIXI.CanvasRenderer(600, 600);
    renderer.backgroundColor = 0x000000;
    window.document.body.appendChild(renderer.view);
    var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame('icon0'));
    var spriteNew = new PIXI.Sprite();
    spriteNew.texture = PIXI.RenderTexture.create(sprite.width, sprite.height);
    var stage = new PIXI.Container();
    stage.addChild(spriteNew);
    function render() {
        spriteNew.x+=1;
        sprite.x+=0.1;
        renderer.render(sprite,spriteNew.texture);
        renderer.render(stage);
        requestAnimationFrame(render);
    }
    render();
}

if you use WebGLRenderer, it works,but chosen CanvasRenderer will cause issue. thanks

[tywang2006]

PIXI.loader.add('../assets/icons/icons.json').load(onAssetLoaded);
function onAssetLoaded(loader:any, resource:any):void {
    let renderer:any = new PIXI.CanvasRenderer(600, 600);
    renderer.backgroundColor = 0x000000;
    window.document.body.appendChild(renderer.view);
    var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame('icon0'));
    var spriteNew = new PIXI.Sprite();
    spriteNew.texture = PIXI.RenderTexture.create(sprite.width, sprite.height);
    var stage = new PIXI.Container();
    stage.addChild(spriteNew);
    function render() {
        spriteNew.x+=1;
        sprite.x+=0.1;
        renderer.render(sprite,spriteNew.texture);
        renderer.render(stage);
        requestAnimationFrame(render);
    }
    render();
}

[tywang2006]

it is typescript

[acmoles]

+1 updating render texture persists sprites in PIXI canvas mode with transparent background. Sprites persist when removed from the stage and when opacity set to 0.

[staff0rd]

If this issue persists in v4, and someone can supply a pen that shows it against the latest dev build, I'll reopen it.

[hanesjw]

I've had similar problems getting a RenderTexture to update a child texture on the fly using canvas. Works great in WebGL. Here is some code you can paste into the pixijs example pages located here

Toggle the disabledWebGl variable and see what happens in canvas; the old texture does not get removed. This result is actually better than what I've been working with. Whenever I try to swap out a texture in a RenderTexture in canvas nothing happens. It doesn't even add the texture i'm trying to swap in. Anyways here is the code.

var disabledWebGl = true;

var app = new PIXI.Application(800, 600, {backgroundColor : 0x1099bb}, disabledWebGl);
document.body.appendChild(app.view);
var woodTexture = PIXI.Texture.fromImage('required/assets/button.png');
var bunnyTexture = PIXI.Texture.fromImage('required/assets/basics/bunny.png');

var sprites = [];
var container = new PIXI.Container();
for (var i = 0; i < 2; i++) {
    var bunny = new PIXI.Sprite(woodTexture);    
    bunny.x = 60 * i;
    bunny.y = 60 * i;
    container.addChild(bunny);
  	sprites.push(bunny);
}

var brt = new PIXI.BaseRenderTexture(300, 300, PIXI.SCALE_MODES.LINEAR, 1);
var rt = new PIXI.RenderTexture(brt);

var spriteHolder = new PIXI.Sprite(rt);

spriteHolder.x = 100;
spriteHolder.y = 100;
app.stage.addChild(spriteHolder);

app.ticker.add(function() {
    app.renderer.render(container, rt);
  	sprites[0].texture = bunnyTexture;
});

[ivanpopelyshev]

https://github.com/pixijs/pixi.js/blob/dev/src/core/renderers/canvas/CanvasRenderer.js#L223

// else {
// TODO: implement background for CanvasRenderTarget or RenderTexture?
// }

So, who wants to implement it?

[hanesjw]

I thought this may have been an old closed issue so I added this one #4085

It seems to behave differently on 5.0 alpha than it does on the current version I am using (4.2 I believe). 5.0 simply doesn't show anything while 4.2 doesn't refresh the modified texture.

[ivanpopelyshev]

That's because 5,0 broke the canvas renderer completely.

[hawk8]

Now it was my turn to get to that it does not clear the drawing area.
The definition to Render is:
render (displayObject, renderTexture, clear, transform, skipUpdateTransform)

Where the clear flag when set to true should clear. As indicated above by ivanpopelsyshev it is just that the implementation that is missing. I have played around some and I think the fix can be rather easy.

Code is:
if (clear !== undefined ? clear : this.clearBeforeRender)
{
if (this.renderingToScreen)
{
if (this.transparent)
{
context.clearRect(0, 0, this.width, this.height);
}
else
{
context.fillStyle = this._backgroundColorString;
context.fillRect(0, 0, this.width, this.height);
}
} // else {
// TODO: implement background for CanvasRenderTarget or RenderTexture?
// }
}
If that is changed to:

    if (clear !== undefined ? clear : this.clearBeforeRender)
    {
            if (this.transparent)
            {
                context.clearRect(0, 0, this.width, this.height);
            }
            else
            {
                context.fillStyle = this._backgroundColorString;
                context.fillRect(0, 0, this.width, this.height);
            }
    }

That is basically to just do the job independently if it is rendering to screeen or not. At least my stuff works with this change, but I hope it can get into a proper release as well.

[hawk8]

This issue persist in v4, see pen https://codepen.io/hawk8/pen/VydbMy

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.