Progressive texture upload

[m9dfukc]

Hi,

I am building a media installation (with Pixi.js v4) which requires to load my textures while the system is running (ideally with a constant 60fps). Therefore I am using createImageBitmap in a Webworker instance and then transfer the ImageBitmap via transferable object to the "main thread". In the main thread I am using this approach to pass the ImageBitmap to Pixi's Texture Loader which then ultimately uploads the texture to the GPU via gl.textImage2d. This all works fine as long as I am using small textures but now I wanna load bigger textures (1920x6000px) and the texture upload starts to take a decent amount of time (70ms).

Now to my question: Has anybody created a progressive texture upload for pixi.js similar to this threejs library? If not, what would be the best approach to tackle this? 

Basically I have similar requirements as the poster in this thread (again unfortunately wrong framework

Thanks,
Andreas

p.s.: I've started to look into pixi.js v5 ... seems like createImageBitmap is coming, yeah!!!  

[ivan.popelyshev]

Nope, it would be awesome if you make a plugin.

Its better wait for pixi-v5, because we have API for custom upload mechanisms. For example, here is the code that uploads buffer: https://github.com/pixijs/pixi.js/blob/next/packages/core/src/textures/resources/BufferResource.js#L42 , its called from inside of TextureSystem when it wants upload custom resource as a texture: https://github.com/pixijs/pixi.js/blob/next/packages/core/src/renderers/systems/textures/TextureSystem.js#L162

There's SuperAtlas plugin for v4 that is used by a few projects: https://github.com/gameofbombs/pixi-super-atlas , of course its different but it can upload small parts of atlas independently. https://github.com/gameofbombs/pixi-super-atlas/blob/master/src/superAtlas/SuperAtlas.ts#L226

Summary: V5 has new mechanism called texture-resource, I suggest you to wait for it. Or go ahead if you are strong enough  I can help if you setup the project.

[ivan.popelyshev]

Also, why do you use createImageBitmap inside a webworker? I thought its completely async and can run without it. May be you have webworker fallback?

[m9dfukc]

Thanks for the links!

Pixi.js v5 definitely looks like the way to go. Any ETA for the release yet?

I'm not sure if createImageBitmap is async. I did a few tests with Chrome and the performance tools showed me that createImageBitmap was blocking the main thread (see attached image). Basically I am using a similar approach than this library except that I pass my ImageBitmap to an extended version of BaseTexture.

Thanks

edit: yes, createImageBitmap has an async api (via promises) but still comes with a massive performance hit. It still runs on the main thread though there are plans to send the decoding off to another thread. 

edit2: I was suspicious if createImageBitmap is really async or not so I wrote some test code which shows a rather odd behaviour if using HTMLImageElement as opposed to a Blob as an imput to createImageBitmap. Looks like the resource loader needs some adaption to pass a blob texture decode function. I added an issue the tracker.

Performance Graph:

Edited January 15, 2018 by m9dfukc
added links, fixed typo, added example code