Remove, then render the same stage (toggle a stage) possible?

[thenayr]

I'm attempting to render a pixi stage (PIXI.autoDetectRenderer) into a canvas element, then via a separate JS remove the stage by selecting it's container in jquery and emptying out the respective canvas element.

When I try to render the same pixi stage again, I run into a bunch of WebGL related errors like this:

WebGL: INVALID_OPERATION: bindTexture: object not from this context

I assume this is because I'm merely emptying out the canvas element, but the related WebGL objects still exist somewhere in memory.

Is there an easy way to be able toggle the existence of a pixi stage?

[GoodBoyDigital]

Hi @thenayr, pixi.js can get a bit funny once it loses the context it was created in :/
What are ya trying to achieve?

[thenayr]

@GoodBoyDigital Thanks for the reply. I have a company dashboard with a few fun easter eggs built in Pixi. There is trigger on the dashboard that overlays a full pixi canvas over the dashboard, problem is I only want it to live for a finite amount of time then disappear, then (in theory) re-triggered again at a later time.

[GoodBoyDigital]

oh nice! :)

I think I need to look into fixing this, some of the information (the webGL batch's and textures) exists in the previous webGL context.

Until this is fixed I would suggest using the canvas renderer as that does not suffer from the same issues. Ya could use webGL for first run too.

I will look into nailing that issue though as it shouldn't take too long to fix. Do you have any code I could test with? Thanks!

[thenayr]

@GoodBoyDigital Great, I'll try falling back on canvas for now. As far as code samples code, I'm basically doing the following:

Upon someone hitting the trigger I fire the init function of the Pixi javascript.

// Trigger.js
init()
empty = -> $('#easteregg').empty()
setTimeout  empty, 20000

// Pixi.js
function init() {
...
renderer = PIXI.autoDetectRenderer(stageWidth, stageHeight, null, true);
document.getElementById('easteregg').appendChild(renderer.view);
...
}

Lots of code left out in-between, but essentially just adding a bunch of textures to the stage that float around in varying speeds/directions, the trigger then empties out the container div after 20 seconds.

[thenayr]

Just to confirm, using canvas does indeed fix the issues I was running into, performance is excellent as well. Thanks for the tip.

[GoodBoyDigital]

Nice one :) thats great to hear!

[Tolmark12]

Maybe related to issue 23 which thows the same error? In the mean time, I'm using the canvas rendered which works beautifully.

[yeahlo]

I tried to use pixi on a backbone project, my first test was to duplicate your examples from:
http://www.goodboydigital.com/to-dom-or-not-to-dom/#comment-241

It works fine the first time but if I change the view and comeback then:
WebGL: INVALID_OPERATION: useProgram: object not from this context pixi.js:13
WebGL: INVALID_OPERATION: bindTexture: object not from this context pixi.js:13
WebGL: INVALID_OPERATION: uniformMatrix4fv: location is not from current program

I triend to empty() the container but same issue...

[englercj]

As stated before losing the webgl context will cause errors, use the canvas renderer if you must remove the element.

However, there are better ways to stop rendering than removing the element.

• Stop calling .render(stage) - just don't render anymore and hide the element. Then later you can come back and show it again and just start rendering again
• If you need to clear the stage and start over, then go through each of the stages children and remove them, then initialize again by putting in what children you want.

[englercj]

Closing this for now, IMO you really shouldn't be destroying the element mid-render. There are better ways to handle that.

[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.