Jump to content

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

Link to comment
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.

Link to comment
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
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...