Update to pixi.js v4.X.X (ideally v4.6.2)

[G-Rath]

I've been exploring this project for potential use in a side project of mine using voxel files from an old video game.

I've been using pixi.js v4.6.2 (latest at time of posting), and so have been trying to update the pixi lib included in this project.

Updating to v3.0.11 (the last version before v4) was fine, with only a couple of changes being required:

• _scratchContainer = new PIXI.DisplayObjectContainer was changed to be _scratchContainer = new PIXI.Container
• new PIXI.RenderTexture calls required the _pixiRenderer being passed as the first argument
• _scratchSprite.setTexture tex was changed to be _scratchSprite.texture = tex

Once these changes were made, there were no more errors, and the rendering demo seemed to perform the same as the when using pixi v2.

The only difference was that when the sphere was being only partially rendered, a number of the following messages would be logged to console as a warning:
[.Offscreen-For-WebGL-0000020CB8FD3F30]GL ERROR :GL_INVALID_OPERATION : glDrawElements: Source and destination textures of the draw are the same.

Things started going wrong for me when updating to v4.

The first big thing is that _renderTexture.clear() is no longer valid. I think that based on my readings, a suitable replacement is to jump straight to v4.4.0, which adds a clearRenderTexture function, making the line _pixiRenderer.clearRenderTexture _renderTexture, 0x000000.

(The clearRenderTexture function comes from pixijs/pixijs#3595 & pixijs/pixijs#3647)

Once this was done, the following would be printed to console: _renderTexture.render _scratchContainer is no longer valid; the render function has been removed: Deprecation Warning: RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)`, and rendering looked like this:

I changed the code as stated by the deprecation warning; changing _renderTexture.render _scratchContainer to _pixiRenderer.render _scratchContainer, _renderTexture.

In doing so, I had to modify all calls to new PIXI.RenderTexture to call PIXI.RenderTexture.create. This also results in the removal of _pixiRenderer as the first argument on these lines. (_renderTexture = new PIXI.RenderTexture _pixiRenderer, 100,100 becomes _renderTexture = new PIXI.RenderTexture.create 100,100).

Once that was done, I got a new deprecation warning: Deprecation Warning: graphics generate texture has moved to the renderer. Or to render a graphics to a texture using canvas please use generateCanvasTexture.

That change was simple enough, and one I don't think is related to the core problem: return graphics.generateTexture() was changed to be return _pixiRenderer.generateTexture graphics.

The results after all these changes is somewhat promising, but ultimately still resulting in an incorrect rendering:

That cube jumps across the screen, in a manner that makes me think it could be rendering in a way that means only one block is actually rendered at a time (i.e. some change in the way rendering is done means that all voxels except one are cleared every loop).

My knowledge on using RenderTexture and Pixi's rendering systems makes tackling this challenge a hard one for me; which is hampered by my lack of experience with CoffeeScript.

Any assistance or direction you could provide in this endeavour would be greatly welcomed, as I've pretty much run out of ideas, and hit a wall.

I'm happy to create a PR for the updates (including multiple step PRs, for each major version, starting with the code I have for v3).

Let me know if there's any more information I can provide; I'm happy to collaborate in any way I can - I'm a big fan of this project, as I think it's pretty neat :)

Here is an animated version of my current end result:

Taken @ 30 fps; the animation is actually a fair bit smoother.