Pixi.js: Allow ImageBitmap as texture source

Created on 13 Apr 2017 · 8Comments · Source: pixijs/pixi.js

ImageBitmap is now available in both Chrome and Firefox, and is a far faster, and better texture source than Image or Canvas elements:

https://developer.mozilla.org/en-US/docs/Web/API/ImageBitmap

Right now we have hacked the BaseTexture.loadSource function to detect a passed in ImageBitmap and fire _sourceLoaded(); immediately. This works perfectly, uploading large textures to the GPU is now pretty much instantaneous.

We are simply detecting a passed in ImageBitmap like so:

if(this.source.close){
      console.log('Texture source is an ImageBitmap');
      this._sourceLoaded();
} 
else if {
    //check for other types of Texture sources
}

These ImageBitmaps can be entirely released from memory when they are no longer needed by calling ImageBitmap.close() where supported. As such, they do not require garbage collection and therefore give the developer far better control, as well as improved performance.

Please consider adding support into PIXI.

Source

gordyr

👍5

All 8 comments

oh this is nice! we should add this to the loaders!

GoodBoyDigital on 13 Apr 2017

👍1

I believe that createImageBitmap spawns a parallel CPU thread so that the decoding and processing all happens in the background, meaning that it completely eradicates texture loading, decoding, and GPU upload stutter during rendering.

If that's not the case (i'm pretty certain that it is in Chrome at least), this can be achieved manually also since createImageBitmap can be used in a webworker. This means that if you wanted, you could move the whole loading logic into a separate thread, and simply pass back ImageBitmaps to PIXI, keeping the main thread entirely free.

More info:

https://developers.google.com/web/updates/2016/03/createimagebitmap-in-chrome-50

gordyr on 13 Apr 2017

this is getting me all excited! Lets definitely look into making it part of the load prep process.

GoodBoyDigital on 13 Apr 2017

👍1

You're probably already aware of this but ImageBitmap support can be detected like so:

if('createImageBitmap' in window) {
    //Use ImageBitmap loading path
}
else{
   //Use normal loading path
}

If it's available on the window object, it's available in a WebWorker context also.

They are also in the process of adding direct access to the image data of an ImageBitmap. Among other things, this would open up the ability to load, decode, and resize/modify the textures in a webworker without ever hitting the main thread.

There's some very exciting stuff happening at the moment! :)

gordyr on 13 Apr 2017

I can't express how awesome this is if it indeed gets rid of the main thread hang when loading large textures.

@gordyr could you possibly provide a hacked fromImage() that uses ImageBitmap?