Can you supply a standalone test case for this behavior? and the about:gpu content on the machine you can easily reproduce this?

This is a poor quality bug report. In the future please provide a test case and about:gpu from the machine on which the problem is reproduced.

A lot of work has been done in the past year or so to make it possible to upload textures to the GPU more quickly. The ImageBitmap API allows asynchronous decoding of JPEGs and PNGs so that WebGL texture uploads don't spend time decoding them synchronously. I recommend looking into it.

Closing as WontFix - not reproducible as filed.

this is happen everywhere including android chrome, pc chrome
stable and canary too

when i call bindTexture, it happened..
after binding, everything ok..

safari, explore is more smooth
mobile is same

mac'ssafari is more smooth
window's explore is more smooth
window's firefox is more smooth
chrome is not smooth

this issue have many webgl engine library
they said if small texture using, it will be ok..

but this looks not solution to resolve.


i've considered very long time (it is over 2 year)
and i think i will be fixed soon.. 
but it's not..

and we don't have time to wait to fix. so i update here

we test on many systems
and it's happening every chrome yet..

thx.. 


    

https://github.com/pixijs/pixi.js/issues/1899

this is same issue with webgl on pixi.js

thx.everyone

If you can provide a test case which shows the performance difference between Chrome and other browsers, we'll be happy to investigate it.

performance is not difference

it only happen freezing during 0.x ~ 0.5 second..

if texture updated to gpu. everything ok..


in this case if i should update texture to gpu while play game..
user can feel very bad.. 

i think this is not performance issue

#6 - you were asked again and again to provide code (a working, self contained example) that reproduces the issue for you. Without that, it will probably not even be investigated.

I very quickly tried the example linked in the pixijs issue. Its performance is indistinguishable between Chrome, Edge, and Firefox. So it does not seem to reveal any issue that we can take action on.

hi kaining

you are right if test by pixi.js example..

pixi.js'ex example has not conditions to happen this issue

because it is not loaded while moving or animating 



https://jsfiddle.net/gbear/qg0n0a9g/4/

i create testbed
  (+) buttons is rotating always
  and after 1sec, three images loaded 
  you can see freezing effect during very short time  of rotating button
  like tic tic tic...

  if you can't see., add more image over 1024x1024
 

thx..

Your JSFiddle example does not show any image for me on first run, not even after a whole minute of waiting.
On reload, the images show up gradually, pretty quickly (less than half a second).

I can see a difference in the behavior between Edge/FF and Chrome Canary now with that jsfiddle. It looks like our time is being spent in image decoding inside texImage2D. Edge is also spending a lot of time in image decoding, but perhaps it's asynchronous wrt texImage2D? I wasn't able to easily figure out what Firefox is doing.

I'm not sure what Pixi's doing internally, but when ImageBitmap is available, it should download the target image using XMLHTTPRequest as a Blob, create the ImageBitmap from the blob, and upload the ImageBitmap into a texture. That will make the image decoding asynchronous on all browsers.

pixi.js code is easy

===
WebGLRenderer.prototype.updateTexture = function (texture)
{
    texture = texture.baseTexture || texture;

    if (!texture.hasLoaded)
    {
        return;
    }

    var gl = this.gl;

    if (!texture._glTextures[gl.id])
    {
        texture._glTextures[gl.id] = gl.createTexture();
        texture.on('update', this.updateTexture, this);
        texture.on('dispose', this.destroyTexture, this);
        this._managedTextures.push(texture);
    }


    gl.bindTexture(gl.TEXTURE_2D, texture._glTextures[gl.id]);

    gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, texture.premultipliedAlpha);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.source);

    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, texture.scaleMode === CONST.SCALE_MODES.LINEAR ? gl.LINEAR : gl.NEAREST);

    ////
     // deleted : not important 
    ////


    return  texture._glTextures[gl.id];
};

===

This code doesn't show the whole picture. Sorry, we can't spend the time to dig into Pixi's code.

Based on the profiling results, I'm pretty sure Pixi needs to be updated according to comment #12. I suggest you talk to the authors about implementing it, on a GitHub issue. Or if you really need it, you should be able to fix Pixi yourself and open a GitHub pull request implementing it for them.