Giter Site home page Giter Site logo

Comments (11)

GoodBoyDigital avatar GoodBoyDigital commented on March 29, 2024

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

from pixijs.

thenayr avatar thenayr commented on March 29, 2024

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

from pixijs.

GoodBoyDigital avatar GoodBoyDigital commented on March 29, 2024

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!

from pixijs.

thenayr avatar thenayr commented on March 29, 2024

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

from pixijs.

thenayr avatar thenayr commented on March 29, 2024

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

from pixijs.

GoodBoyDigital avatar GoodBoyDigital commented on March 29, 2024

Nice one :) thats great to hear!

from pixijs.

Tolmark12 avatar Tolmark12 commented on March 29, 2024

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

from pixijs.

yeahlo avatar yeahlo commented on March 29, 2024

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

from pixijs.

englercj avatar englercj commented on March 29, 2024

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.

from pixijs.

englercj avatar englercj commented on March 29, 2024

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

from pixijs.

lock avatar lock commented on March 29, 2024

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.

from pixijs.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.