search

pixijs / pixi-react

Write PIXI apps using React declarative style
https://pixijs.io/pixi-react/
MIT License
2.33k stars 177 forks source link

Routing back and forth between a <Stage> causes WebGL errors #313

Closed hevans90 closed 2 years ago

hevans90 commented 2 years ago

Description

I am using a basic <Stage> component, and then using useApp to manually write a lot of procedural galaxy/star generation stuff. It's great and works fine until you route away from the component and then route back to it.

Steps to reproduce

  1. install react-router-dom and route between a component containing <Stage> and another component, more than once.

Additional info

image

hevans90 commented 2 years ago

I have tried manually calling app.destroy(true, true) in a useEffect's return function, but this threw errors as I assume <Stage> has code to tear down the app after the component is unloaded.

I have also tried various manual .destroy calls in onUnmount from my <Stage>, to no avail.

inlet commented 2 years ago

Hi @hevans90,

Yes if you use the <Stage> component you cannot call destroy manually as the instance will be controlled by React's lifecycle events (mount, update, unmount) and destroyed automatically on unmount.

This webgl context issue arise if you create multiple <Stage> components, meaning you'll have basically 2 different renderers/webgl contexts.

I have no idea how to fix this really

hevans90 commented 2 years ago

Wait, does this mean that <Stage> can't be used at all when using react-router-dom and moving between pages?

inlet commented 2 years ago

It's not really related to react-pixi, but to pixi itself.. if you create multiple Applications with webgl renderers, you'll starting to receive these warnings. The <Stage> component creates an Application at mount and destroys it at unmount

inlet commented 2 years ago

Can you isolate the issue and create an example on codesandbox?

hevans90 commented 2 years ago

https://github.com/pixijs/pixijs/issues/2233#issuecomment-449105397 this is the only solution I can find, which unfortunately basically invalidates your idea of destroying the app on unmount :(

hevans90 commented 2 years ago

So it turns out that I was using this library: https://www.npmjs.com/package/pixi-stats which was causing the issue. Turns out my FPS counter used a canvas itself that was messing with PIXI's CONTEXTIDs.

Sorry for the false report. Closing this, as routing works fine :)

inlet commented 2 years ago

Thanks for letting me know! 😉