Progressive texture upload

Recommended Posts


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 :)


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

Share this post

Link to post
Share on other sites

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.

Share this post

Link to post
Share on other sites

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.


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:

Bildschirmfoto 2018-01-10 um 18.36.08.png

Edited by m9dfukc
added links, fixed typo, added example code

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.